html标签介绍
双标签:
成对出现，包含开始标签和结束标签。<html></html>
单标签:
只有开始标签，没有结束标签，可以手动添加“/”表示闭合。<br>…………<br/>
标签属性:
标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示.
同一个标签中可以添加若干组标签属性，使用空格间隔。
<img src="lily.jpg" width="200px" height="200px">
body常用标签
文本标签：
标题标签：自带加粗效果，从h1到h6字体大小逐级递减<h1>一级标题</h1>
段落标签：<p>段落文本</p>
普通文本标签：
<span></span>行分区标签，用于对特殊文本特殊处理
<b></b>加粗标签
<strong></strong>强调标签，效果同b标签
<label></label>普通文本标签，常与表单控件结合实现文本与控件的绑定
<i></i>斜体标签
<u></u>删除线标签
格式标签：<br> 浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。
水平线标签： <hr> 在页面中插入一条水平分割线
字符实体：某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写。
使用 < 在页面中呈现 "<"
使用 > 在页面中呈现 ">"
使用 在页面中呈现一个空格
使用 © 在页面中呈现版权符号"©"
使用 ¥ 在页面中呈现人民币符号"￥"
容器标签：
常用于页面结构划分，结合CSS实现网页布局
<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>
图片标签：
用于在网页中插入一张图片。
1. 属性 src 用于给出图片的URL，必填。
2. 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
3. 属性 title 用于设置图片标题，鼠标悬停在图片上时显示
<img src="" width="" height="" title="" alt="">
超链接标签：
用户可以点击超链接实现跳转至其他页面
1. 属性 href 用于设置目标文件的URL，必填。
2. 属性 target用于设置目标文件的打开方式，默认("\_self")在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
<a href="http://www.taobao.com" target="_self">淘宝</a>
常用结构标签列表标签：
有序标签 属性名type取值"1"/"a"/"A"/"i"/"I",
<ol> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li> </ol>
无序标签 属性名type取值：circle/square（实心方块）/none(取消项目符号)
<ul> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li> </ul>
列表嵌套
<ul> <li> <span>城市</span> <ol> <li>北京</li> <li>上海</li> <li>广州</li> <li>深圳</li> </ol> </li> </ul>
表格标签：
1.表格由行和单元格组成，常用于直接的数据展示或辅助排版,
<table> <!-- 创建行标签 表中一个tr代表一行 --> <tr> <!-- td行中创建单元格以显示数据 --> <td>姓名</td> <td>年龄</td> <td>班级</td> </tr> <tr> <!-- th表示单元格，自带文本加粗和居中效果 --> <th>迪丽热巴</th> <th>20</th> <th>002</th> </tr> </table>
2.单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整
单元格属性：colspan 跨列合并单元格
rowspan 跨行合并单元格
<table border="3px" width="300px" height="300px"> <tr> <!--th表示单元格，自带文本加粗和居中效果--> <!--跨列合并 合并3个单元格--> <th colspan="3">个人信息</th> <!--删除被合并的单元格--> <th>年龄</th> <th>班级</th> </tr> </table>
表单标签：表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。
1.表单使用<form></form>
属性名 action 设置数据的提交地址
method 设置数据的提交方式，默认为get方式，可以设置为post
enctype 设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为post,编码类型为"multipart/form-data"
<form action="" method="" enctype="">
<!--此处为表单控件-->
</form>
2.表单控件使用:表单控件用于采集用户信息，可设置以下标签属性
type 设置控件类型
name 设置控件名称，最终与值一并发送给服务器
value 设置控件的值
placeholder 设置输入框中的提示文本
maxlength 设置输入框中可输入的最大字符数
checked 设置单选按钮或复选按钮的默认选中
selected 设置下拉菜单的默认选中
1 <form action="/login" method="get" enctype="application/x-www-form-urlencoded"> 2 <p> 3 兴趣爱好: 4 <!--label for id 实现文本与控件的绑定, 5 将label标签的属性for取值为对应控件的id值: 6 1.使用label标签表示文本 7 2.为相应控件添加id标识 8 3.label与控件绑定:for属性值与id属性值保持一致--> 9 <input type="checkbox" name="hobby" value="smoke" checked id="smoke"> 10 <label for="smoke">抽烟</label> 11 <input type="checkbox" name="hobby" value="masage" id="masage"> 12 <label for="masage">保健</label> 13 </p> 14 <!--下拉菜单--> 15 <select name="city" id=""> 16 <!--默认选中第一个option,可以手动设置selected表示选中--> 17 <option value="beijing">北京</option> 18 <option value="shangshai">上海</option> 19 <option value="guangzhou">广州</option> 20 <option value="shenzhen" selected>深圳</option> 21 </select> 22 <!--功能按钮--> 23 <!--文件选择框:涉及二进制数据提交,必须使用post方式, 24 同时设置编码类型为multipart/form-data--> 25 用户头像:<input type="file" name="uimg"> 26 <!--1.提交按钮,点击时提交数据到后台, 27 可以设置value属性,表示按钮的显示文本--> 28 <input type="submit" value="注册"> 29 <!--2.重置按钮,点击时将表单还原至初始状态--> 30 <input type="reset" value="重填"> 31 <!--3.普通按钮,需要自定义点击处理--> 32 <input type="button" value="点击"> 33 <!--button标签表示按钮,标签内容即为按钮显示文本 34 书写在form中,相当于submit提交按钮; 35 书写在表单外,相当于普通按钮,需要自定义点击操作--> 36 <button>form内</button> 37 </form> 38 <button>form外</button>
下拉菜单
<select name="city" id=""> <!--默认选中第一个option,可以手动设置selected表示选中--> <option value="beijing">北京</option> <option value="shangshai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen" selected>深圳</option> </select>
功能按钮 input
1.文件选择框：用户头像:<input type="file" name="uimg">
2.提交按钮<input type="submit" value="注册">
3.重置按钮<input type="reset" value="重填">
4.普通按钮<input type="button" value="点击">
5.勾选按钮<input type="checkbox">
6.输入框<input type="text">
label for id 实现文本与控件的绑定,将label标签的属性for取值为对应控件的id值:
1.使用label标签表示文本
2.为相应控件添加id标识
3.label与控件绑定:for属性值与id属性值保持一致-->
<input type="checkbox" name="hobby" value="smoke" checked id="smoke">
<label for="smoke">抽烟</label>