html结构
<!DOCTYPE html>
声明为 HTML5 文档
<html></html>
HTML 页面的根元素
<head></head>
浏览器解析的内容
包含了<meta>数据 <title></title>文档的标题 <style></style>设置CSS样式 <link>外链式连接两个文档 <script></script> JS脚本
<body></body>
显示页面主体内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Title</title> <link rel="stylesheet" href=""> <style type="text/css" media="screen"></style> <script src="" type="text/javascript"></script> </head> <body> <h1>标题</h1> <hr> <p>段落</p> </body> </html>
标签类型
块元素block
也叫行元素，布局中常用的标签有，<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>、<li>、<hr>等都是块元素。
特点 ：
1.盒子占据一行，即时设置了宽度
2.支持全部的样式
3.如果，没有设置宽度，默认的宽度为100%
display:block；可以将元素转换块级元素。
内联元素inline
也可以称为行内元素，布局中常用的标签有，<a>、<span>、<br>、<i>、<em>、<strong>、<label>等
特点：
1.盒子并在一行，宽高由内容决定
2.支持部分样式（不支持宽高，margin上下不支持）
3.代码换行，盒子会产生间距
4.子元素是内联元素，父元素可以用text-align设置水平对齐，line-height属性垂直对齐
display:inline;可以将块状元素转换为内联元素
内联块元素inline-block
也叫行内块元素，布局中常用的标签有，<input>、<img>等
特点： 不独占一行，支持全部样式
display:inline-block；float:left / right；position：absolute/fixed;可以将元素设置为内联块级元素。
超链接a标签
去掉a标签下划线
a {
text-decoration: none;
}
target属性
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
href属性
绝对URL - 指向另一个站点（比如 href="http://www.baidu.com"）
相对URL - 指当前站点中确切的路径（href="a.html"）
锚URL - 指向页面中的锚（href="#top"）
添加锚点
1、通过id定位，格式为：# + id
<a href="#a0">定位</a> </div> <p>练习1</p> <p>练习2</p> <p>练习3</p> <p>练习4</p> <p id="a0">练习5</p> <p>练习6</p>
2、给a标签添加name属性
<a href="#a01"></a> </div> <p>练习1</p> <p>练习2</p> <p>练习3</p> <p>练习4</p> <a name="a01"></a> <p>练习5</p>
href="javascript:void(0);"
让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不执行js函数，表示一个死链接。
<a href="javascript:void(0)" onclick="window.open('https://www.baidu.com/')">跳转百度</a>
href="javascript:function();
<a href="javascript:alert('haha')">百度</a>
常用标签
<img>标签
src属性：图片链接到对应地址
alt属性：用于加载图片未显示
用法： 通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。
<img src="./timg.jpg" title="这是熊猫图片" alt="熊猫图片" width="200px">
<p>标签
<p> 标签定义段落。
注意：p标签虽然是块标签 但是不可以嵌套别的块标签 （如嵌套p标签，div标签等）。
<div>、<span>标签
<div> 标签 块元素，表示一块内容，没有具体的语义。
<span> 标签 内联元素，表示一行中的一小段内容，没有具体的语义。
单标签<br>、<hr>
<br>换行
<hr>水平线
含语义的标签
1、<em> 标签 行内元素，语气强调
2、<strong> 标签 行内元素，语气强调
3、<i> 标签 行内元素，斜体
4、<b> 标签 行内元素，加粗
5、<u>标签 行内元素，下划线
6、<s>标签 行内元素，删除
特殊字符
| 内容 | 标识代码 |
| 空格 | |
| > | > |
| < | < |
| & | & |
列表标签
<ol>有序列表
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
start属性：start="3" 表示从第3个序号开始
<ol type="1" start="3"> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ol>
<ul>无序列表（常用）
注意：常用无序表签ul，有默认样式，li标签块级元素，独占一行。
<ul>去点：
通过css样式 list-style: none;
通过type属性 type=“none”
<ul type="none"> <li>列表一</li> <li>列表二</li> <li>列表三</li> </ul>
type属性：
| type | 样式 |
| disc | 实心圆点，默认值 |
| circle | 空心圆圈 |
| square | 实心方块 |
| none | 无样式 |
定义列表
<dl>标签表示列表的整体。
<dt>标签定义术语的题目。
<dd>标签是术语的解释。
<dl> <dt>html</dt> <dd>页面的结构</dd> <dt>css</dt> <dd>页面的样式</dd> <dt>javascript</dt> <dd>页面的动作</dd> </dl>
table表格
table包含thead（包含tr、th）和tbody（包含tr、td）。
table属性：
width 宽度 height 高度
border 设置边框显示
cellpadding 设置表格内容距离边框距离
cellspacing 设置表格和表格之间的间距
单元格合并：
colspan 设置水平方向一个单元格占据的高度
rowspan 设置垂直方向一个单元格占据的高度
单元格内容对齐方式：
align 水平 center right left
valign 垂直 top bottom
<!--表格标签，table声明一个表格，th表头，tr行，td列--> <table border="1px"> <caption>table title</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>职务</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>学生</td> </tr> <tr> <td>李四</td> <td>男</td> <td>设计</td> </tr> </tbody> </table>
form表单
<form>标签
| 属性 | 描述 |
| action | 规定向何处提交表单的地址（URL） |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET） |
| name | 规定识别表单的名称 |
| target | 规定 action 属性中地址的目标（默认：_self） |
| enctype | 规定被提交数据的编码（有上传文件则必须使用为"multipart/form-data"文件转码） |
<input>标签type
| type属性值 | 状态 | 实例 |
| text | 输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| checkbox | 复选框 | <input type="checkbox" name="dx[]" value="1"> |
| radio | 单选框 | <input type="radio" name="sex" value="1" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| file | 文本选择框 | <input type="file" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| date | 日期输入框 | <input type="date" /> |
<input>标签其他属性
| 属性 | 描述 |
| name | 表单提交时的“键”，不同于id属性 |
| value | 表单提交时对应项的值 |
| checked | radio和checkbox默认被选中的项 |
| placeholder | 用于在text或password输入时的提示 |
| readonly | 禁用属性，不可编辑（text和password设置只读） |
| disabled | 禁用属性，不可编辑（input通用）disabled="disabled" |
<select>标签
| 属性 | 描述 |
| multiple | 布尔属性，设置后为多选，否则默认单选 |
| disabled | 禁用属性 |
| name | 表单提交时的“键”，不同于id属性 |
| value | 定义提交时的选项值 |
| selected | 默认选项 |
textarea多行文本
属性：rows：行数 cols：列数
<textarea name="text" value="" placeholder="个人说明"></textarea>
label 标签
标记input的元素，<label> 标签的 for 属性值应当与相关元素的 id 属性值相同
<label for="username">用户名</label> <input id="username" type="text" name="user" />
form表单案例
<form action="login.do?act=login" method="post" enctype="multipart/form-data"> <label for="user">用户名</label> <input type="text" id="user" name="username" value="" placeholder="请输入用户名"> <br> <label for="pwd">密码 </label> <input type="password" id="pwd" name="userpass" value="" placeholder="请输入密码"> <br> <label for="man">男</label> <input type="radio" id="man" name="sex" value="0"> <label for="woman">女</label> <input type="radio" id="woman" name="sex" value="1"> <br> <p style="font-size:15px;color: darkkhaki" >最近出差的城市有：</p> <ul type="none"> <li><input type="checkbox" name="dx[]" value="0">天津</li> <li><input type="checkbox" name="dx[]" value="1">重庆</li> <li><input type="checkbox" name="dx[]" value="2">昆明</li> <li><input type="checkbox" name="dx[]" value="3">以上都没有</li> </ul> <p style="font-size:15px;color: #778fbd" >你的学历：</p> <select name="xl"> <option value="0">初中</option> <option value="1">高中</option> <option value="2">大学</option> <option value="3">其他</option> </select> <br> <label for="file">上传文件:</label> <input type="file" id="file" name="file"> <br> <textarea name="text" value="" cols="40" rows="20" placeholder="个人说明"></textarea><br> <input type="submit" name="submit" value="确定" > <input type="reset"> </form>