(22)day2-表单和css基础

作者: 2333_11f6 | 来源:发表于2018-12-04 17:46 被阅读0次

2.1 细线表格

细线表格

1.不设置boder，设置cellspacing为1
2.设置整个表格背景色为表格线颜色，然后再设置每个单元格背景色和整个表格不一样。

或者：(css)
style="border-collapse: collapse;"
在table属性中添加以上属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简历表格</title>
    </head>
    <body>
        <!--细线表格
            1.不设置boder，设置cellspacing为1
            2.设置整个表格背景色为表格线颜色，然后再设置每个单元格背景色和整个表格不一样。
            或者：
            style="border-collapse: collapse;"
            在table属性中添加以上属性
        -->
        <table border="0" cellspacing="1" cellpadding="5" 
            height="220" bgcolor="black">
            <tr bgcolor="white">
                <td width="50">11</td>
                <td width="100">12</td>
                <td width="50">13</td>
                <td colspan="2" width="100">14</td>
                <td rowspan="5" width="120">15</td>
            </tr >
            <tr bgcolor="white">
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td colspan="2">24</td>
            </tr>
            <tr bgcolor="white">
                <td>31</td>
                <td>32</td>
                <td>33</td>
                <td colspan="2">34</td>
            </tr>
            <tr bgcolor="white">
                <td>41</td>
                <td>42</td>
                <td>43</td>
                <td colspan="2">44</td>
            </tr>
            <tr bgcolor="white">
                <td>51</td>
                <td>52</td>
                <td>53</td>
                <td colspan="2">54</td>
            </tr>
            <tr bgcolor="white">
                <td>61</td>
                <td>62</td>
                <td>63</td>
                <td colspan="3">64</td>
            </tr>
            <tr bgcolor="white">
                <td rowspan="2">71</td>
                <td>72</td>
                <td colspan="2">73</td>
                <td colspan="2">74</td>
            </tr>
            <tr bgcolor="white">
                <td>81</td>
                <td colspan="2">82</td>
                <td colspan="2">83</td>
            </tr>
            <tr bgcolor="white">
                <td>91</td>
                <td colspan="5">92</td>
            </tr>
            <tr height="60" bgcolor="white">
                <td >101</td>
                <td colspan="5">102</td>
            </tr>
            <tr height="40" bgcolor="white">
                <td>111</td>
                <td colspan="5">112</td>
            </tr>
            <tr height="80" bgcolor="white">
                <td>121</td>
                <td colspan="5">122</td>
            </tr>
            <tr bgcolor="white">
                <td>131</td>
                <td colspan="5">132</td>
            </tr>
            <tr bgcolor="white">
                <td>141</td>
                <td colspan="5">142</td>
            </tr>
            <tr bgcolor="white">
                <td>151</td>
                <td colspan="5">152</td>
            </tr>
            <tr bgcolor="white">
                <td>161</td>
                <td colspan="5">162</td>
            </tr>
        </table>
    </body>
</html>

2.2 表单标签和input标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

1.表单标签（form）

表单标签的作用：用于收集用户信息，实质是将表单标签作为容器来收集表单标签中其它标签的信息。它自身无任何显示效果。

action属性：设置提交地址
method属性：设置提交方式（post/get）

点提交按钮提交的时候，将表单中所有相关标签以name-value的形式，按method属性提供的方式，提交给action属性对应的接口。

form标签提供两大功能：

a.统一提交
b.重置（清除输入信息）

        <form action="#" method="get">

a.type="text"
普通文本输入框
name属性：专门用来区分不同的信息，相当于字典的key

            <font>账号</font><input type="text" name="tel" value="1607470930"
                placeholder="qq号，哈哈" maxlength="10" id=""/><br />
            <font>邮箱</font><input type="text" name="email" value=""
                placeholder="别输了，输了也没有！" id=""
                maxlength="10"/><br />
            
            <!--<input type="submit" name="" id="" value="提交" />-->

2.input标签 -单标签
属于表单标签，既可以放在form标签中，也可以放form标签外面单独使用。
type属性：type对应的值不一样，input标签体现的功能不一样
name属性：专门用来区分不同的信息，相当于字典的key
value属性：标签内容；指向输入框中的内容;设置其实是设输入框中默认值。（记录账号密码）
placeholders属性：当输入框中无内容时显示的提示信息
maxlength属性：设置输入框最大能输入的字符个数

b.type="password"：密码输入框
普通文本输入框

            <font>密码</font><input type="password" name="password"  value="password" 
                placeholder="密码" /><br />
            <input type="submit" name="" id="" value="提交" />
            <br />
            <hr />

c.type="radio"：单选按钮
name属性：同一组选择，需要设置它们name属性值一样，才能单选
value属性：不可见；专门用于对提交数据的区分，因为在单选按钮模式中两者属性是一样的
checked="checked":让单选按钮处于选择状态。

            <input type="radio" name="sex" id="" value="boy" 
                checked="checked"/><font>男</font>
            <input type="radio" name="sex" id="" value="girl" /><font>女</font>
            <br />
            <input type="radio" name="marry" id="" value="未婚" 
                checked="checked"/><font>未婚</font>
            <input type="radio" name="marry" id="" value="已婚" /><font>已婚</font>
            <br />
            <hr />

d.type="checkbox"：复选按钮
name属性：同一组选择，需要设置它们name属性值一样，才能复选

            <input type="checkbox" name="hobby" id="" value="篮球"/><font>篮球</font>
            <br />
            <input type="checkbox" name="hobby" id="" value="足球"/><font>足球</font>
            <br />
            <input type="checkbox" name="hobby" id="" value="排球"/><font>排球</font>
            <br />
            <input type="checkbox" name="hobby" id="" value="乒乓球"/><font>乒乓球</font>
            <br />
            <hr />

e.type="button"：普通按钮
value属性：决定按钮上显示的信息

            <input type="button" id="" value="input按钮"/>
            <br />
            <hr />

f.type="submit"：提交按钮
点击提交按钮后，会自动提交当前form中所有设置了name属性的相关标签的值，放在form标签外无意义，以name=value的方式提交。

            <input type="submit" name="" id="" value="提交" />
            <br />
            <hr />

g：type="reset"：重置按钮
将当前form标签中所有的标签状态设置为初始状态

            <input type="reset" value="重置" />
            <hr />
            <input type="email" name="" id="" value="" />
            <input type="color" name="" id="" value="" />
            <input type="date" name="" id="" value="" />
            <input type="datetime" name="" id="" value="" />
            <hr />
        </form>

3.按钮标签（button）
双标签，通过input->type="button"生成的按钮是单标签，按钮不能为图片。
中间内容部分更灵活

        <!--文字按钮-->
        <button>普通按钮</button>
        <!--图片按钮-->
        <button><font>图片按钮</font><img src="img/校长.jpg" alt="莫得了" /></button>
    </body>
</html>

2.3 下拉菜单和多行文本标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="" method="get">

1.下拉菜单
a.select标签：代表整个下拉菜单
name属性：区分和提交

b.option标签：下拉菜单中的选项
value属性：提交的内容
selected="selected"属性：设置为默认选中。

c.optgroup标签：
label属性：给分组取名字

            <font>考试科目</font><select name="学科">
                <optgroup label="理科">理科</optgroup>
                <option value="">语文</option>
                <optgroup label="文科">文科</optgroup>
                <option value="">历史</option>
            </select>
            <br />
            <font>省份</font><select name="province">
                <option value="四川">四川省</option>
                <option value="广西">广西省</option>
                <option value="广东">广东省</option>
                <option value="湖南">湖南省</option>
                <option value="湖北">湖北省</option>
                <option selected="selected" value="云南">云南省</option>
                <option value="辽宁">辽宁省</option>
                <option value="吉林">吉林省</option>
                <option value="黑龙江">黑龙江省</option>
            </select>
            <br />
            <font>城市</font><select name="city">
                <option value="">成都市</option>
                <option value="">南宁市</option>
                <option value="">深圳市</option>
                <option value="">长沙市</option>
                <option value="">武汉市</option>
                <option value="">昆明市</option>
                <option value="">沈阳市</option>
                <option value="">长春市</option>
                <option value="">哈尔滨市</option>
            </select>
            <br />
            <input type="submit" name="" id="" value="提交" />
            <hr />

2.多行文本输入框
可以输入多行内容，内容超出范围可以上下滚动
name属性：提交和区分
rows属性：一次性可以显示的行数，决定高度
cols属性：列数；一行最多可以显示多少个文字，决定宽度
placeholder
内容:相当于单标签中的value功能，提交的也是这个。
maxlength属性：最多多少字

            <textarea name="" rows="4" cols="10" placeholder="一剑光寒十九州"
                maxlength="5">
                默认值
            </textarea>
        </form>
    </body>
</html>

2.4 div和span标签

div和span都是无语义标签：一般用来将网页中的标签进行分组和分模块使用。

2.5 css基础

1.什么是css

css是web标准中的表现标准，专门负责网页中内容的布局和样式。
目前使用的是css3
css代码又叫样式表

2.css语法（怎么写？）

a.基本结构
选择器{属性名1：属性值1；属性名2：属性值2。。。}

b.说明
选择器{}：通过选择器来决定样式是针对哪个标签写的（在内联样式表中没有这个结构）。
属性：属性名不是随便写的，必须是css提供的两百多个属性中的一个；属性名和属性值之间用冒号连接；
多个属性之间用分号隔开（如果没有分号，会导致后边所有的属性无效。）。

3.css代码写在哪

a.内联样式表
将样式表作为HTML标签的style属性值
只针对一个标签有效

b.内部样式表
将样式表作为style标签的内容,head或body中。（注意是标签）
可以针对当前html中所有的标签

c.外部样式表
将样式表写在一个css文件中，再通过link导入
css文件：后缀是css的文件
可以针对所有的html中的所有标签，前提是要导入。

常用属性补充：
color：文字颜色
font-size:字体大小
background-color：背景颜色
width：宽度
height：高度

css中颜色：
a.颜色英语单词
b.rgb的十六进制值：如#ff0000(红色)
c.直接使用rgb值，如rgb(255,0,0)红；
rgba(R,G,B,Alpha):Alpha(0完全透明-1不透明)
css中数字：如果数字表示大小，必须加单位：
px：像素
em：空格

3者优先级：
内联样式表优先级最高，内部和外部的样式表看执行顺序，写在后面的优先级高。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css基础</title>
        <!--2.内部样式表
            style标签中的内容，必须也只能是css代码
        -->
        <style type="text/css">
            /*内部样式可以同时写多个样式表*/
            a{
                color:yellowgreen;
                background-color: blue;
            }
            /*对所有div标签设置颜色*/
            div{
                color:saddlebrown;
            }
        </style>
        <style type="text/css">
            div{
                background-color: red;
            }
        </style>
        <!--3.外部样式表
            a.link标签：
            rel属性：确定导入的文件功能
            rel="stylesheet"(样式表)；
            rel="icon"：设置网页图标
            
            type属性：确定文件类型；文件类型/文件后缀；text/css文本/文件后缀是css
            
            href属性：需要导入的文件的文件路径
        -->
        <link rel="stylesheet" href="css/css基础.css" type="text/css"/>
        <!--设置网页图标-->
        <link rel="icon" href="img/jd.jpg" type="img/jpg"/>
        
    </head>
    <body>
        <!--1.内联样式表
        body中每个有显示效果的标签都有style属性，用于设置当前标签样式
        style属性值""中写的就是css代码。
        -->
        <p style="color: red;font-size:10px;">一剑光寒十九州！</p>
        <p style="color: #0000ff;font-size:1em;">一剑光寒十九州！</p>
        <p style="color: rgba(0,255,0,0.5);font-size:50px">一剑光寒十九州！</p>
        <a href="http://www.baidu.com">百度一下</a>
        <div id="">
            我是div
        </div>
        <h1>我是标题一</h1>
    </body>
</html>

2.6 选择器

style标签实质可以写在html文件中的任意位置
选择器{属性名1：属性值1；。。。；}
css提供的选择器写法大概也就10几种，常见的：

1.标签选择器：直接将标签名作为选择器，选中当前html中所有指定的标签
如：a{}：选中当前html中所有的a标签

2.id选择器：将标签的id属性值前加#作选择器，选择所有id是指定值的标签。
如：#text：选中当前html中id属性值为text的所有标签。

3.class选择器(类型选择器):将标签的class属性值前加.作为选择器，选中所有class是指定值的标签。
如：.test：选中当前html中class属性值是test的所有标签。

4.群组选择器：将多个选择器之间用逗号隔开，然后作为一个选择器，同时选中每个单独选择器选中的所有标签。
如：p,a,.test,#text{}:选中所有的p标签，a标签，class只是test以及id值
是text的标签。

5.后代选择器：将多个选择器用空格隔开作为一个选择器，从前往后一层一层的找，找到最后一个选择器对应的标签。
如：div .test #text{}：选中div标签中class值是test的标签中id值是text
的标签。
div div p{}：选中div中的div中的p标签

6.通配符：将作为选择器，选中当前页面中所有的标签。
如：{}：选中所有标签

<style type="text/css">
    /*标签选择器*/
    div{
        color:red;
        }
    /*id选择器*/
    #text{
        background-color: yellow;
    }
    /*类型选择器*/
    .test{
        width:300px;
        height: 200px;
        background-color: bisque;
    }
    /*群组选择器*/
    font,h2{
        font-size: 60px;
    }
    /*后代选择器*/
    div div p{
        
    }
    /*通配符*/
    *{
        /*设置文字装饰效果
         underline：添加下划线
         overline：添加上划线
         line-through：添加删除线，会重置掉前两个
         none：去掉下划线
         */
        text-decoration: underline;
        text-decoration: overline;
        text-decoration: line-through;
        text-decoration:none;
    }
</style>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>我是段落1，我是body p</p>
        <div>
            <div id="text">
                div1
            </div>
            <div class="test">
                div2
                <p>我是段落2，也是div div p</p>
            </div>
        </div>
        <p id="text">我是段落3</p>
        <h1 class="test">我是标题1，我的class是test</h1>
        <h2>我是标题2</h2>
        <font class="font">我是font</font>
        
    </body>
</html>

2.7 伪类选择器

伪类选择器
用于给标签不同的状态设置不同的样式

1.基本格式
普通选择器：伪类选择器

2.伪类选择器

link：标签的初始状态;一般作用于a标签，表示a标签中的链接没有成功访问过对应的状态，即初始状态。(如：读过的小说章节与未读过的章节不一样)
标签:link{}:此处的标签可以是任何选择器选中的标签。

visited：超链接被访问后的状态(如：读过的小说章节的状态)一般作用于a标签.

hover：鼠标悬停在标签上时对应的状态。适用于所有标签。

active:激活状态；鼠标按下但是还没有弹起时对应的状态。不是仅作用于a标签。

爱恨原则：当同一个标签需要同时给多个状态添加状态时，需要遵循爱恨原则：
link,visited,hover,active
LoVeHAte

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a:link{
                color:red;
            }
            a:visited{
                color:black;
            }
            a:hover{
                /*去掉下划线*/
                text-decoration: none;
            }
            a:active{
                color: blue;
            }
            p:hover{
                color: red;
                font-size: 10em;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">错误的链接</a>
        <p>一剑光寒十九州！</p>
    </body>
</html>

(22)day2-表单和css基础

2.1 细线表格

2.2 表单标签和input标签

2.3 下拉菜单和多行文本标签

2.4 div和span标签

2.5 css基础

2.6 选择器

2.7 伪类选择器

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读