html各个标签的使用

一、标签的分类

        1、单标签和双标签

        1. 单标签：<img> 

                img  br   hr

 

        2. 双标签：<div></div>

                div span <a></a>   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标签

        作用：展示图片

 

<img src='' title='' width='' alt=''>

 

src：

        1. 内部的图片地址

        2. 写外链的地址

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

 height：图片的高度

width：图片的宽度

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

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

        3、a标签

        超链接标签

 

<a href="URL"  target="_blank">文本(随便写)</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、无序列表

        <ul type="disc">

                <li>第一项</li>        

        </ul>

 

type属性：

        disc：实心圆

        square：实心方块

        cricle：空心圆

        none：无样式

2、有序列表

        <ol type="1" start="2">

                <li>第一项</li>

        </ol>

 

type属性：

        1：数字列表，默认

        A：大写字母

        a：小写字母

        I：大写罗马

        i：小写罗马

 

3、标题列表

        <dl>

                <dt>标题</dt>

                <dd>内容</dd> 

        </dl>

        5、表格标签

<table>

<thead>（表头）

<tr>（行）

        <td>id</td>（列）

        <td>name</td>

        <td>age</td>

</tr>

</thead>

<tbody>（表身体）

<tr>

        <td>1</td>

        <td>jack</td>

        <td>18</td>

</tr>

</tbody>

</table> 

 

属性：

        border：表格边框

        cellpadding：内边框

        cellspacing：外边框

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

        rowspan：单元格竖跨多少行

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

        6、form表单标签

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

 

<form action="">

        用户名：<input type="text">

        密码：<input type="password">

        日期：<input type="date">

               <input type="checkbox" >read

                <input type="checkbox">run

                <input type="checkbox">  game

               <input type="radio">男

                <input type="radio"> 女

                <input type="submit" value="提交按钮">

                <input type="reset" value="重置按钮">

                <button>普通按钮</button>  

                <input type="hidden" value="123">

                <input type="file">

</form>

 

type属性：

        text：普通文本（明文）

        password：密文显示

        date：日期

        checkbox：复选框

        radio：单选框

        submit：提交按钮

        reset：重置按钮

        hidden：隐藏输入框

        file：文件选择框

 

属性：

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

        readonly：text和password设置只读

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

        7、select标签

<form action="">

<select name="" id="">

        <option value="">上海</option>

        <option value="">北京</option>

        <option value="">深圳</option>

</select>

</form>

 

属性：

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

        selected：设置为默认

        disabled：禁用选中该项

        value：定义提取时的选项值

        8、textarea多行文本标签

<form>

<textarea name="" id="" cols="" rows=""></textarea>

</form>

 

属性：

        name：名称

        rows：行数

        cols：列数

        disabled：禁用

        9、label标签

说明：

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

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

 

<form>

        <label for="id1"></label>

        <input type="text" id="id1">

</form>

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

<from action="">

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