HTML常用标签
什么是HTML
HTML,即超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言，其次要声明的是，HTML是一种标记语言，不是编程语言。
HTML的文档结构
<!DOCTYPE html>----------->声明为HTML5文件。
<html></html>----------------->html文件的开始和结束。
<head></head>---------------->头部，对HTML的编码格式、标题等进行声明。
<body></body>---------------->身体，书写真正要在页面显示的标签。
HTML常用标签
head内标签
meta标签，该标签包含name、http-equiv两个属性，不同的属性又有不同的参数值，对应有不同的功能。
1 <!--当name的value为keywords时，对网页进行关键字描述你，用于搜索引擎检索网页--> 2 <meta name="keywords" content="IT培训"> 3 <!--当name的value为description时，content用于写对网页的描述信息--> 4 <meta name="description" content="这是一个测试网页"> 5 <!--http-equip 属性--> 6 <meta http-equiv="content-type" charset="UTF-8"> 7 <meta http-equiv="refresh" content="3;http://www.baidu.com">
其他标签：link，title等。
<!--用于导入CSS样式文件--> <link rel="stylesheet" href=""> <!--为网页标题添加图片--> <link rel="icon" href=""> <!--添加页面标题--> <title>测试页面</title>
body内标签
基本标签
1 <b>加粗</b> 2 <i>斜体</i> 3 <u>下划线</u> 4 <s>删除</s> 5 <p>段落标签</p> 6 <h1>标题1</h1> 7 <h2>标题2</h2> 8 <h3>标题3</h3> 9 <h4>标题4</h4> 10 <h5>标题5</h5> 11 <h6>标题6</h6> 12 <!--换行--><br> 13 <!--水平线--><hr>
转义字符
空格 > > < < & & ¥ ¥ 版权 © 注册 ®
a标签，超链接标签
1 <a href="http://www.oldboyedu.com" target="_blank" >点我</a>
href属性指定目标网页地址。该地址可以有几种类型：
- 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
- 相对URL - 指当前站点中确切的路径（href="index.htm"）
- 锚URL - 指向页面中的锚（href="#top"）
target：
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
p标签------>段落标签，块级标签
1 <p>这里是P标签</p>
div标签和span标签
div是无格式的块级标签。
span是无格式的内联标签。
img标签，导入图片
1 <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
列表
1.无序列表(unorder list)
1 <ul type="disc"> 2 <li>1</li> 3 <li>2</li> 4 </ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
2.有序列表(order list)
1 <ol type="1"> 2 <li>a</li> 3 <li>b</li> 4 </ol>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
dl，标题标签
1 <dl> 2 <dt>标题</dt> 3 <dd>内容</dd> 4 </dl>
table，表格标签
1 <table border="2px"> 2 <!--标题声明开始--> 3 <thead> 4 <tr> 5 <th> 6 字段1 7 </th> 8 <th> 9 字段2 10 </th> 11 <th> 12 字段3 13 </th> 14 </tr> 15 </thead> 16 <!--标题结束--> 17 <!--内容开始--> 18 <tbody> 19 <tr> 20 <th>value1</th> 21 <th>value2</th> 22 <th>value3</th> 23 </tr> 24 <tr> 25 <th>value4</th> 26 <th>value5</th> 27 <th>value6</th> 28 </tr> 29 </tbody> 30 <!--内容结束--> 31 </table>
属性:
- border: 表格边框大小.
- cellpadding: 内边距，单元格内的文字距离单元格的距离
- cellspacing: 外边距，表格内的单元格距离表格边框的距离.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
form，表单
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
具有的属性：
| 属性 | 值 | 含义 |
| action | URL | 指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身 |
| method | get或post | 将表单数据提交到http服务器的方法，默认为get |
| enctype | application/x-www-form-urlencoded | 指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencode对所有字符进行编码。如果表单包含用于文件上传的控件（input type="file"）,那么这个属性值必须设置为multipart/form-data，不对字符进行编码。 |
表单元素
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息
form具的标签一------input标签
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏按钮 | <input type="hidden" value="隐藏按钮" /> |
| file | 文本选择框 | <input type="file" /> |
类型（type）说明：
- text：文本输入框
- password：密码输入框
- radio：单选框
- checkbox：多选框
- submit：提交按钮
- button：可点击的按钮，没有任何行为，一般配合JS使用
- hidden：对用户不可见，通常用于修改某条数据时，记录数据的id值
- file：提交文件 form表单需要加上enctype="multipart/form-data"，method="post"
属性说明:
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用
form具有的标签二-------select标签(下拉菜单)
1 <form action="" method="post"> 2 <select name="city" id="city"> 3 <option value="1">北京</option> 4 <option selected="selected" value="2">上海</option> 5 <option value="3">广州</option> 6 <option value="4">深圳</option> 7 </select> 8 </form>
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
form具有标签三------label（和input标签配合使用）
1 <form action=""> 2 <label for="username">用户名</label> 3 <input type="text" id="username" name="username"> 4 </form>
说明：
- label 元素不会向用户呈现任何特殊效果。
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
form具有的标签四------textarea
1 <textarea name="memo" id="memo" cols="30" rows="10"> 2 默认内容 3 </textarea>
属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
标签的嵌套规则：
块级标签可以嵌套部分块级标签和内联标签，但是内联标签不能嵌套块级标签。
P标签不能嵌套块级标签。
