温州大军建设有限公司网站上海网站建设红旗
一、标签的分类
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