html各个标签的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了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文章来源地址https://www.toymoban.com/news/detail-740771.html