html各个标签的使用

一、标签的分类

        1、单标签和双标签

        1. 单标签： 

                img  br   hr

 

        2. 双标签：

                div span    h   p   a

        2、按照标签属性分类

        1. 块标签：自己独占一行

                h1~h6    p    div

        2. 行内(内联)标签

                a   span  b  i  u   s

二、标签的嵌套

        标签之间可以相互嵌套

        块儿级标签可以嵌套所有的标签，但是p标签除外，p标签不能嵌套块儿级标签，和p标签 

         行内元素只能嵌套行内元素，不能嵌套块儿级元素

三、标签自带的两个重要属性

id值：相当于人的身份证，一个文档中，id值不能重复，必须唯一

 

class值：是可以有多个的，一个标签可以有多个class值，一个class值也可以被多个标签拥有

 

要想使用id值，必须使用#开头

 

要想使用class值，必须使用.开头

四、标签的使用

        1、div标签和span标签

        div 标签和span标签没有任何意义，主要是用来布局页面

 

div标签一般用在占位置布局

span标签一般用在占文本布局

        2、 img标签

        作用：展示图片

 

 

src：

        1. 内部的图片地址

        2. 写外链的地址

 title：鼠标悬浮在图片上时显示的内容

 height：图片的高度

width：图片的宽度

注意： 高度和宽度一般情况下只写一个，写一个系统会自动等比例缩放

 alt：当图片地址找不到时，显示的内容，类似于报错提醒

        3、a标签

        超链接标签

 

文本(随便写)

 

href属性指定目标的网页地址。该地址可以有3中类型：

                1、绝对的URL - 指向另一个站点(比如：href="http://www.jd.com")

                2、 相对URL - 指当前站点中确切的路径(href="index.html")

                3、 锚URL - 指向页面中的锚(href="#top")

 

target:

        1、_blank：表示在新标签页中打开目标网页

        2、_self：表示在当前标签页中打开目标网页

        4、列表标签

1、无序列表

       

               

• 第一项
        

        

 

type属性：

        disc：实心圆

        square：实心方块

        cricle：空心圆

        none：无样式

2、有序列表

       

               

2. 第一项

        

 

type属性：

        1：数字列表，默认

        A：大写字母

        a：小写字母

        I：大写罗马

        i：小写罗马

 

3、标题列表

       

               

标题

               

内容

 

        

        5、表格标签

（表头）

（行）

       

（列）

       

       

（表身体）

       

       

       

id	name	age
1	jack	18

 

 

属性：

        border：表格边框

        cellpadding：内边框

        cellspacing：外边框

        width：像素，百分比(最好通过css来设置长宽)

        rowspan：单元格竖跨多少行

        colspan：单元格横跨多少行(就是合并单元格)

        6、form表单标签

功能：表单用于向服务器传输数据，实现用户和web服务器的交互。表单标签包含文本字段，密码字段，日期，复选框，单选框，提交按钮，重置按钮等。包含textarea，select，label，标签等 

 

        用户名：

        密码：

        日期：

               read

                run

                  game

               男

                女

               

               

                普通按钮  

               

               

 

type属性：

        text：普通文本（明文）

        password：密文显示

        date：日期

        checkbox：复选框

        radio：单选框

        submit：提交按钮

        reset：重置按钮

        hidden：隐藏输入框

        file：文件选择框

 

属性：

        checked：radio和checkbox默认被选中的项

        readonly：text和password设置只读

        disable：所有input均适用（禁用）

        7、select标签

       

上海

       

北京

       

深圳

 

属性：

        multiple：设置为多选，多选时需要按住ctrl键

        selected：设置为默认

        disabled：禁用选中该项

        value：定义提取时的选项值

        8、textarea多行文本标签

 

属性：

        name：名称

        rows：行数

        cols：列数

        disabled：禁用

        9、label标签

说明：

        1、label元素不会向用户呈现任何特殊效果

        2、标签的for属性应当与相关元素的id属性相同

 

       

       

五、验证form表单朝后端提交数据

action：里面写朝后端提交的地址，向什么地址就朝哪个地址提交数据

 

填写地址3种方式：

        1、action中什么也不填，默认朝当前地址提交

        2、action中填写完整地址：

        3、只写后缀：他会自动帮你补全ip地址和端口port

 注意：目前只能使用第二种，填写完整地址

 

---

重要：form表单要想把数据提交到后端，，每个标签必须有要有name属性。name属性值就是提交到后端的key中，用户输入的内容就是value值

 

针对复选框和单选框都应该有一个value值，以便前端区别用户选择哪个选项

对于文件数据的提交需要满足的两个条件

1、请求方式必须是post

2、数据编码方式：

        1. application/x-www-form-urlencoded

        2. multipart/form-data

        3. json

3、编码方式必须是multipart/for-data

4、urlencoded只能够提交不是文件的数据，form-data可以提交普通数据和文件数据

5、urlencoded形式的数据：

                username=&password=&date=&hidden=123&myfile=&city=

6、multipart/form-data形式的数据：

                username=&password=&date=&hidden=123&myfile=&city=
                    boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy

                文件数据

                对于form-data提交的数据，后端还是在form里面取普通数据，而在files里面取取文件数据

 7、form表单不能够提交json数据

8、如果想提交json格式的数据：Ajax技术，第三方的api工具postman