9-17

1-9

    
    


    
123123
    
123123
    
123123
    
123123

代码：div标签与span类似，也是个白板标签，不过它属于块级标签

1-10

代码：
text 可以输入文本内容
password 可以输入密码，在浏览器上输入的内容是隐藏的
buttom 是普通点击按钮，默认没有任何作用，可以通过JS赋予功能。
submit 可以将输入的信息提交给服务端，但是必须要在父集设置一个form标签，才可以将input标签用户中输入的信息给提交。
form 标签的action是指定的服务端连接，比如可以是http://1.1.1.1:8888/index。 # 符号是跳转到本地。
form 标签的method指定提交的方式。GET会将输入的信息拼接到连接的后面并提交到服务端；POST会将输入的信息放入内容中提交到服务端（没有加密，抓包可以抓到）。
name是用于以字典格式数据，提示服务端来识别用户输入的是什么信息的，如：{'user':'111','email':''2222','pwd':333}。 这样服务端就知道提交的每个信息都是分别做什么用的。

上图：输入框是我们要提交的信息。点击登录1按钮没有任何反应，因为button本身默认是没有任何功能作用的。 需要点击登录2（submit）来提交。

上图：信息以提交，通过地址栏可以看到，提交的信息拼接到了连接的后面。

代码：method="POST"

上图：提交过数据后，数据会在http的内容中发送到服务端（未加密）。

1-11

上2图：这是在一个搜狗搜索中 去 搜索天气预报； 图中地址栏红框中的query=天气预报就是我们搜索的内容

代码：
action 指定了搜狗搜索（服务端地址）
name="query" 将名为query的信息提交给服务端

上2图：这里看到通过自己的web代码实现了内容搜索

• radio

    
    


    

        

            
请选择性别：
            男：
            女：
        
        
    

代码：type='radio'，效果是单选项

上图：图中可以看到虽然效果是单选项的，但是两个选项都可以同时选择

    
    


    

        

            
请选择性别：
            男：
            女：
        
        
    

代码：将这两个radio 都设置name属性，且值相同，这样再去选择的时候，就只能选择其中一个选项了。

上图：当前只能选择一个；

虽然当前可以选择一个选项了，但是当你提交后，对于服务端来说，你的name都是相同的，无法对其作出区分。

    
    


    

        

            
请选择性别：
            男：
            女：
        
        
    

代码：加上value，可以根据value来区分用户选择的是哪一个选项。

• CheckBox

    
    


    

        

            
请选择性别：
            男：
            女：

            
爱好
            篮球：
            足球：
            网球：
            台球：

            
其他
            吃饭：
            睡觉：

        
        
    

代码：多选框，也可以将其name设置为相同，这样如果有不同类型的多选框，就可以通过相同的name来分类了，然后用value来区分你选择的是什么。

上2图：多选择后提交，可以看到地址栏中将favor=1和favor=2提交了。
服务端会拿到一个favor的列表 [1,2]

• checked

    
    


    

        

            
请选择性别：
            男：
            女：

            
爱好
            篮球：
            足球：
            网球：
            台球：

            
其他
            吃饭：
            睡觉：

        
        
    

代码：checked可以让选项默认是被选中状态

• file

代码：
file可以选择文件； 服务端通过定义的name来选择文件。
在form标签中定义enctype="multipart/form-data" 表示在你提交后，会将文件一点一点的提交到服务端

上图：

代码：reset可以用于将你输入的信息重置（删除）

上图：点击文字旁边的重置，输入的信息就会被删除掉。

1-12

• textarea

    
    




    默认值

代码：textarea用于可输入多行内容的标签；因为后面有闭合标签，所以默认的文字，要放在中间。

上图：有默认文字，可以输入多行内容。

• select

    
    




    
        北京
        上海
        深圳
    
    

    

    

    

代码：
select中设置option，用于点击后出现下拉框可供选择。
要设置name和value，这样提交后服务端才知道你提交的是什么内容。

上2图：点击了上海提交，可以看到地址栏的值 city=2

    
    




    
        北京
        上海
        深圳
    
    

    

    

    

代码：
size调整大小
multiple="multiple" 这样就可以多选了

上图：按住ctrl键就可以选择多个内容了

    
    




    
        
            石家庄
            廊坊
        
    
    

    

    

    

    

    

代码：optgroup可以分组，河北省在这里只是个标题，是不可选择的，只有石家庄和廊坊是可选的。

1-13

• a标签

    
    




    百度

代码：a标签是用于做超链接的

上图：点击就可以跳转到百度了

    
    




    百度
    百度

代码：target="_blank"使用新的标签页跳转； target="_self"使用当前标签页跳转。

• 锚点

    
    



    第1章
    第2章
    第3章
    第4章
    
第1章的内容
    
第2章的内容
    
第3章的内容
    
第4章的内容

代码：将div设置id； 然后在a标签中设置#+idx，#表示跳转到当前页面，然后加上后面的id几，就是跳转到相应的div标签。

上图：当你点击a标签的超链接时，就会跳转到对应id的div标签位置。

上图：跳转到第4章内容的位置，这个具体的位置叫做锚点

1-14

• img

代码：img src可以选择显示的图片； 外面套一个a标签指定链接，这样就可以通过点击图片跳转页面了。

代码：将图片去掉； 加个 alt=“熊猫”

上图：如果图片可以正常显示，就看到alt的内容，如果图片不能正常显示，则会看到alt的内容；

代码：增加title=“大熊猫”

上图：当鼠标悬浮在图片上面的时候，就可以看到title的内容

• 列表

    
    



    

        
列表1
        
列表2
        
列表3
    

    

        
列表1
        
列表2
        
列表3
    

    

        
标题1
        
内容1
        
内容2
        
内容3
        
标题2
        
内容1
        
内容2
        
内容3
    

代码：ul是无序列表； ol是有序列表； dl是层级列表。

• 表格

    
    



    

        

            
第1行，第1列
            
第1行，第2列
            
第1行，第3列
        
        

            
第2行，第1列
            
第2行，第2列
            
第2行，第3列
        
    

上图：table声明是个表格； 每个tr是一行； td是一列； border设置边框大小；

1-15

• 表格表头

    
    




    

        

            
表头1
            
表头2
            
表头3
        
    
    

        

            
第1行，第1列
            
第1行，第2列
            
第1行，第3列
        
        

            
第2行，第1列
            
第2行，第2列
            
第2行，第3列
        
    

代码：
页面的表格需要定义head和body，head就是表头，body就是内容；
head中使用th来定义表头

上图：可以看到表头与body明显不同。

• 表格合并

    
    




    

        

            
表头1
            
表头2
            
表头3
            
表头4
        
    
    

        

            
第1行，第1列
            
第1行，第2列
            
第1行，第3列
            
第1行，第4列
        
        

            
第2行，第1列
            
第2行，第2列
            
第2行，第3列
            
第2行，第4列
        
    

上图：
我们将第一行的第二列设置colspan="2"，表示占用两列，这就起到了合并的效果；
但是最后面多出了一列，所以下面需要将第一行的最后一列给删除掉。

    
    




    

        

            
表头1
            
表头2
            
表头3
            
表头4
        
    
    

        

            
第1行，第1列
            
第1行，第2列
            
第1行，第3列

        
        

            
第2行，第1列
            
第2行，第2列
            
第2行，第3列
            
第2行，第4列
        
    

代码：colspan横向合并

上图：这样就实现了合并的效果。

    
    




    

        

            
表头1
            
表头2
            
表头3
            
表头4
        
    
    

        

            
第1行，第1列
            
第1行，第2列
            
第1行，第3列

        
        

            
第2行，第1列
            
第2行，第2列
            
第2行，第3列
            
第2行，第4列
        
        


            
第3行，第2列
            
第3行，第3列
            
第3行，第4列
        
        

            
第4行，第1列
            
第4行，第2列
            
第4行，第3列
            
第4行，第4列
        
        

            
第5行，第1列
            
第5行，第2列
            
第5行，第3列
            
第5行，第4列
        
    

代码：rowspan竖向合并

1-16

• lable标签

    
    


    用户名：
    

代码：
label标签一般与input一起使用。
input标签生成一个输入框，可以点击后输入；如果想要点击label标签的内容也可以在input的输入框输入内容的话，需要label设置for属性，且值等于input标签的id值。

上图：label与input没有关联时，只能点击输入框输入； 关联后点击用户名（label标签）也可以在输入框输入内容了。

• fieldset

    
    


    

        
登陆
        用户名：
        
        

        密码：
        
    

代码：
fieldset提供边框； legend边框内设置标题
fieldset这个标签很少能用到。