一、HTML头部
<head></head>
- 在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息
- 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
<!--设置当前页面的文本编码方式-->
<meta charset="utf-8" />
二、HTML 标签
<body></body>
1. 标题标签(h1-h6)
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
2. 段落标签(p)
注意：网页中的文字，手动的换行和空格无效
<p>文字内容</p>
3. 文字标签(font)
多个普通文字内容在一行显示
<font>文字内容</font>
4. 强制换行和空格
br标签 —— 单标签，专门用在网页中做强制换行
空格符号 —— 一个 代表空一个像素
一个&emsp代表空一个空格
<br />
5. 文本效果标签
注意：strong和em有强调的意思
<b>加粗</b>, <strong>加粗</strong>
<i>倾斜</i>, <em>倾斜</em>
6. 水平线(hr)
<hr />
7. 列表标签(ol, ul, dl)
有序列表
<ol>
<li>一月</li>
<li>二月</li>
</ol>
无序列表
<ul>
<li>语文</li>
<li>数学</li>
</ul>
自定义列表
dl - 代表整个列表
dt - 列表分类
dd - 分类下的内容
<dl>
<dt>文科</dt>
<dd>历史</dd>
<dd>政治</dd>
<dt>理科</dt>
<dd>物理</dd>
<dd>化学</dd>
</dl>
8. 图片标签(img)
单标签
- src属性 —— 设置网页上显示图片的地址（地址可以是本地图片路径，也可以是网络图片的url）
- title属性—— 图片标题；在鼠标停留在图片上的时候才会显示出来
- alt属性 —— 图片加载失败显示的提示信息
<img src="图片地址" title="标题" alt="加载失败提示信息"/>
9. 超链接(a)
href属性 —— 规定点击超链接后跳转的位置
- 一个网页地址 —— 在浏览器中打开指定的网页
- 一个本地的html地址(相对路径) —— 跳转到(打开) 本地一个html文件对应的网页
- # —— 刷新网页，会重新加载网页内容(如果有网络请求会重新请求!)
- 选择器 —— 让网页滚动到指定位置(不会重新加载数据)（之前的标签的id属性的值为选择器内容）
target属性 —— 加载新页面的方式
- _self(默认) —— 在当前页面中加载新的页面
- _blank —— 在新的窗口中加载新的页面(原页面不会覆盖)
<a href="https://www.baidu.com" target="_blank">百度一下</a>
10. 表格标签(table)
table标签 —— 代表整个表格
tr标签 —— 代表表格中的一行
td标签 —— 代表表格中的一个单元格
标签属性：
- border属性 —— 设置表框宽度；table的属性
- bordercolor属性 —— 设置表框颜色；table的属性
- cellspacing —— 设置单元格和单元格之间的间隙大小；table的属性
- cellpadding —— 单元格中的内容和单元格表框直接的间距
- width —— 设置宽度
作为table属性 —— 设置整个表格的宽度；每一列的宽度按比例分配
作为td的属性 —— 设置td所在的列对应的宽度 - height —— 设置高度
作为table属性 —— 设置整个表格的高度；每一行的宽度按比例分配
作为tr的属性 —— 设置tr对应的行的高度 - bgcolor —— 设置背景颜色
作为table属性 —— 设置整个表格的背景颜色
作为tr属性 —— 设置一行的背景颜色
作为td属性 —— 设置指定单元格的背景颜色 - align —— 设置对齐方法（left/right/center）
作为table属性 —— 让整个表格在父标签中对齐
作为tr属性 —— 让一行中所有单元格的内容对齐
作为td属性 —— 让指定的单元格中的内容对齐
补充：HTML中的颜色 —— 可以是颜色的英文单词；rgb16进制值,前面加#, 例如：#ff0000
细线表格：
- 将border设置为0
- cellspacing的大小设置为想要的宽度的大小
- 设置整个表格的背景的颜色为边框颜色，并且保证每个单元格的颜色和背景颜色不一样
<table cellspacing="1" width="600" height="400" bgcolor="black">
<tr bgcolor="aliceblue">
<td></td>
<td></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
</tr>
</table>
不规则表格：
rowspan —— 行合并
colspan —— 列合并
11. 表单标签(form)
表单标签一般用来做用户信息收集，一般不单独使用，而是结合相关标签来使用(input,select,textarea)
<form action="" method="post">
action: 提交位置(接口相关)
method: 请求方式(get/post)
12. input标签 —— 单标签
- type属性:
决定输入框的样式
text(默认) —— 普通的文本输入框 - name属性:
这个属性主要用来区分数据的。**提交的时候是以name=value形式提交 - value属性：
单标签中的value相关双标签的内容；但是value值只能是文本
设置value属性其实就是设置输入框中默认显示的内容;修改内容其实是在修改value值
- text：文本输入框
placeholder - 占位符(提示信息)
maxlength - 最多输入字符个数
<input type="text" name="tel" value="123456" placeholder="请输入电话号码" maxlength="6"/>
- password：密码输入框
placeholder - 占位符(提示信息)
maxlength - 最多输入字符个数
<input type="password" name="密码" value="" placeholder="请输入密码(3-6位)" maxlength="8"/>
- radio：单选按钮
name - 同一组数据对应的name值设置成一样的，才能做到单选
value - 这儿的value只是用于数据提交,不能显示
checked - 设置为checked让按钮处于默认选中状态
<input type="radio" name="sex" value="男生" checked="checked"/><font>男</font>
<input type="radio" name="sex" value="女生" /><font>女</font>
<input type="radio" name="sex" id="s1" value="保密" /><label for="s1">保密</label>
注：文字和按钮关联（点击文字和点击按钮的效果一样）
文字用label标签显示，设置for属性的值为想要关联的按钮的id的值
- checkbox：复选按钮
name - 同一组数据的name值要一样
value - 这儿的value只是用于数据提交,不能显示
<input type="checkbox" name="instr" id="in1" value="教育" checked="checked" /><label for="in1">教育</label>
<input type="checkbox" name="instr" id="in2" value="互联网" /><label for="in2">互联网</label>
- button： 普通按钮
value - 对应的值会显示在按钮上
<input type="button" value="登录" />
- submit：提交按钮
将当前所在的form标签中，设置了name属性的相关的标签的数据以'name=value'的形式提交
<input type="submit" name="" id="" value="提交" />
- reset：重置按钮
将当前所在的form标签中，所有标签设置成初始状态
<input type="reset" name="" id="" value="重置" />
13. 下拉列表(select)
select标签 - 代表整个下拉列表
option标签 - 代表列表中的每个选项；
可以通过设置selected属性的值为"selected",来让这个选项默认选中
optgroup标签 - 设置label的值来对当前下拉菜单的内容进行分组
<select name="省">
<optgroup label="省"></optgroup>
<option value="四川省">四川省</option>
<option selected="selected" value="辽宁省">辽宁省</option>
<optgroup label="直辖市"></optgroup>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
14. 多行文本域(textarea)
textarea标签 - 输入框，可以同时显示多行内容(可以自动换行和上下滚动)
name属性 - 区分和提交
rows - 行数（不滚动最多能显示的行数，影响输入框的高度）
cols - 列数 (一行显示的文字的数量， 影响输入框的宽度)
placeholder - 占位符
maxlength - 限制输入的文字的个数
<textarea name="message" rows="4" cols="40" maxlength="200" placeholder="输入你的问题">默认文字</textarea>
14. div和span
块级标签: 一个占一行,例如：div、h1、p、列表,table、tr、form， option...
行内标签: 一行显示多个,例如：span、font、td、input、select、textarea...
