行级标签
行级标签，按行逐一显示
span 范围 img 图片 a 超链接 label 标记（当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上） em 强调 倾斜 i 倾斜 strong 强调 加粗 b 加粗 s 删除线 u 下划线 big 放大 small 缩小
范围标签 <span></span>
<p>
笔记本电脑
<span style="font-size: 50px;color: red">1
</span>元起
</p>
笔记本电脑1元起
span标签没有任何默认样式
规范：
标签名和属性名必须小写html标签必须关闭属性值必须用用引号括起来标签必须正确嵌套
超链接<a></a>
<
a href=
"" target=
"" rel=
""> xxx </
a>
超链接分类
页面间链接锚链接功能性链接
页面间链接
<a href="https://www.baidu.com/" target="_blank">百度
</a>
<a href="Demo13.html" target="_self">Demo13
</a>
百度 Demo13
href： 指定页面跳转的路径target： 页面打开的位置
_self： 当前页面打开_blank： 在新页面打开
锚链接
<a href="#top"><button style="position: fixed;height:100px;width:100px;bottom: 30px;right: 30px">↑回顶部
</button></a>
<div style="background-color: dodgerblue;text-align: center">
<a name="top">顶部
</a>
</div>
<div style="height: 2000px;background-color: beige">
</div>
<div style="background-color: dodgerblue;text-align: center">
<a name="bottom">底部
</a>
</div>
<a href="Demo15.html#bottom">Demo15底部
</a>
功能性链接
<a href="tencent://message/?uin=1761713585">给QQ1761713585发信息
</a>
<a href="mailto://1761713585@qq.com">给1761713585@qq.com发邮件
</a>
图片标签 <img/>
<img src="" alt=""/>
属性
src 图片路径alt 加载失败时的提示信息width 宽度height 高度align 对齐方式border 边框
表格标签 <table>
<table border="1">
<tr>
<th>标题1
</th>
<th>标题2
</th>
<th>标题3
</th>
</tr>
<tr>
<td>手机充值
</td>
<td>IP卡
</td>
<td>网游
</td>
</tr>
<tr>
<td>移动
</td>
<td>联通
</td>
<td>魔兽
</td>
</tr>
</table>
标题1标题2标题3手机充值IP卡网游移动联通魔兽
<table>标签属性
border 规定表格边框的宽度 cellspacing 规定单元格之间的空白 cellpadding 规定单元边沿与其内容之间的空白 width 规定表格的宽度 height 规定表格的高度 align 表格的对齐方式 bgcolor 背景色 background 背景图片 bordercolor 边框颜色
<tr><td>标签的属性
width 行或单元格的宽度 height 高度 bgcolor 背景颜色 align 内部内容的水平对齐方式 valign 垂直方向的对齐方式 nowrap 规定表格单元格中的内容不换行
行的对齐方式有：align和valign
align：left/center/rightvalign：top/middle/bottom/baseline(与基线对齐)表格的属性和单元格的属性相同的情况下，单元格属性优先（就近原则）
表格跨行跨列
<table border="1" width="200">
<tr>
<td colspan="3" align="center">学生成绩
</td>
</tr>
<tr>
<td rowspan="2">张三
</td>
<td>语文
</td>
<td>98
</td>
</tr>
<tr>
<td>数学
</td>
<td>95
</td>
</tr>
<tr>
<td rowspan="2">李四
</td>
<td>语文
</td>
<td>88
</td>
</tr>
<tr>
<td>数学
</td>
<td>26
</td>
</tr>
</table>
学生成绩张三语文98数学95李四语文88数学26
colspan 横向跨列rowspan 纵向跨行
了解一下： <caption></caption> <tbody></tbody> <thead></thead> <tfoot></tfoot> <colgrounp></colgrounp>
<form action="" method="get/post">
</form>
action：表单提交的地址 method:用来指定数据传递到服务端的基本方法
get:传递的数据会拼接到url后面 优点：简单，快速 缺点：暴露敏感信息，数据传输量有限 post：传递的数据会隐藏起来，放在请求体。 优点：数据传输量大，信息保密性好 缺点：相比get请求，速度慢一些
常用表单控件
文本框
<input
type=
"text">
密码框
<input
type=
"password">
单选按钮
<input
type="radio" name=
"r1" value=
"1">男
<input
type="radio" name=
"r1" value=
"2">女
多选按钮
<input
type=
"checkbox">
上传文件
<input
type=
"file">
提交按钮
<input
type=
"submit>
按钮
<input
type=
"button">
重置按钮
<input
type=
"reset">
图片提交按钮
<input
type=
"image">
隐藏域
<input
type=
"hidden">
文本域
<textarea cols="30" rows="10"> <textarea>
下拉列表
<select>
<option>选项1
</option>
<option>选项2
</option>
<option>选项3
</option>
</select>
表单外框及标题
外框 fieldset 标题 legend
元素顺序
tabindex
H5中的新表单控件
数字、日期、邮箱、电话、url的输入框以及滑动块等
H5中的新属性
autocomplete :自动完成功能（自动补全），属性值：on 开启，off 关闭autofocus :自动获得焦点form :所属表单required :必填pattern :验证input的模式placeholder :提示
<form id="form1" action="a.html" method="get">
……
</form>
<input type="text" form="form1" name="t1">
form 属性规定输入域所属的一个或多个表单form 属性适用于所有 标签的类型form 属性必须引用所属表单的 id
