表格
<!-- table来定义表格标签 -->
<!-- tr标签表示表格中的一行 -->
<!-- height设置整行的高度 -->
<!-- cellspacing单元格边距 -->
<!-- cellpadding单元格中文字的内边距
-->
<!-- td标签表示一个单元格 -->
<!-- 设置单元格width会影响整行的宽度 -->
<!-- 设置单元格height会影响整列的宽度 -->
<!-- th标签表示表头 -->
<!-- 默认加粗 文字居中 -->
<!-- caption表格标题 -->
<!-- 标签之间不能有任何内容，所有的内容都要写在th,td中 -->
<table border="1" bgcolor="rgb(00,00,00)" align="center" cellspacing="0px" cellpadding="10px">
<caption>成绩单</caption>
<thead>
<tr align="center" height="30" bgcolor="green">
<td>电话</td>
<th>名称</th>
<th colspan="2"> </th>
<!-- <th> </th> -->
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr align="center" width="800">
<td width="100" height="40">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tfoot>
</table>
垂直的表单：
<table border="1">
<tr>
<th>生日</th>
<td>1999</td>
</tr>
<tr>
<th rowspan="2">爱好</th>
<td>画画</td>
</tr>
<tr>
<!-- <th>姓名</th> -->
<td>听音乐</td>
</tr>
</table>
<!-- 表格可以相互嵌套，但是不能破坏原来的表格结构 -->
<!-- 表格嵌套在单元格下 -->
<table border="1" width="900px" height="500px" align="center">
<tr>
<td>
<table border="1" width="180px" height="50px">
<tr>
<td>10</td>
<td>11</td>
</tr>
</table>
</td>
<td>
<table border="1" width="180px" height="50px">
<tr>
<td>10</td>
<td>11</td>
</tr>
</table>
</td>
<td>
<table border="1" width="180px" height="50px">
<tr>
<td>10</td>
<td>11</td>
</tr>
</table>
</td>
<td>
<table border="1" width="180px" height="50px">
<tr>
<td>10</td>
<td>11</td>
</tr>
</table>
</td>
<td>
<table border="1" width="180px" height="50px">
<tr>
<td>10</td>
<td>11</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>9</td>
</tr>
</table>
元素类型
块级元素：
<!-- 独占一行，不和其他元素待在一行 -->
<div>daada</div>
<ul>
<li>sss</li>
</ul>
<h1>元素</h1>
<p>hello</p>
行级元素：
<!-- 1不会独占一行，可以与其他元素待在一行 -->
<!-- 不可以设置宽高，宽高由元素内容决定 -->
<br>
<b>时</b>
<span>www</span>
<a href="#">aaa</a>
<br>
行内块级元素：
不会独占一行，可以设置宽高
<input type="text">
<img src="" alt="">
<audio src=""></audio>
<video src=""></video>
<button>xxxx</button>
<button>xxx2222x</button>
语义化标签
<!-- 什么是语义元素？
语义元素清楚地向浏览器和开发者描述其意义。 -->
<!-- header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题 -->
<header>
<h1>html5</h1>
</header>
<nav>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
</nav>
<section>
<h2>生活简介</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</section>
<aside>
<ul style="list-style: none;">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</aside>
<footer>
<h3><a href="http://www.baidu.com/">www.baidu.com</a></h3>
<iframe src="https://haokan.baidu.com/v?vid=3850147080659502001&pd=pcshare" width="1000" height="300" frameborder="0"></iframe>
</footer>
表单
<!-- form标签用于创建表单，会将里面的内容一起放送到服务器，类似于表格 -->
<!-- action：表单发送的地址 -->
<!-- method:表单的发送的方式，常用的两种get/post -->
<!-- name:用来为当前表单定义一个独一无二的名称，控制表单与后台程序之间的关系 -->
<!-- novalidate:设置提交时不进行验证 通常不会用到-->
<!-- target:设置目标窗口打开的方式，通常用不上 -->
<!-- get提交:数据会附在网址之后提交服务器，不安全 数据量小-->
<!-- post提交：安全，不会附在网址之后，会将所有表单数据进行打包发送服务器，等待服务器读取 数据量不受限制-->
<!-- input是最常用的表单控件 -->
<!-- 可以在表单之外使用 -->
input元素的type（必须要有的属性）属性：
<!-- 默认为text,单行文本框 可以输入任何形式的文本-->
<!-- reset重置按钮：清空输入框中的内容 -->
<!-- name:传递参数的名称，必须要有的，向后台传递的名称 -->
<!-- value：向后台发送的值 -->
<!-- placeholder：提示文字 -->
<!-- readonly 只能看不能改，可以提交，可以加样式 -->
<!-- maxlength:最大的输出长度 包括数字，英文，汉字-->
<!-- disabled：设置为不可用，不用发送到服务器，不可修改 不能使用样式-->
<!-- autofocus:自动获得焦点 打开页面光标自动处于编辑状态-->
<!-- autocomplete:om/off定义输入框是否开启浏览器记忆功能 -->
<form action="http://51zxw.net" method="post" name="登录表单" novalidate="novalidate" target="_blank">
<input type="text" name="myname" value="请输入" >
<input type="submit" value="发送">
<label for="">名称：</label>
<input type="text" name="a" value="" placeholder="请输入" maxlength="11" autocomplete="off"><br>
<input type="hidden" name="xxx" value="家电">
<!-- hidden：隐藏域不会显示在页面中，一般用在搜索框中，给搜索划定范围 -->
<label for="">密码：</label>
<input type="password" autofocus><br>
<label for="">地址提示：</label>
<input type="text" placeholder="上海市奉贤区" disabled><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮"><br>
<label for="">电话号码：</label>
<!-- step:规定步长 -->
<input type="number" min="5" max="20" step="2"><br>
<input type="range" min="5" max="20" step="2"><br>
时间输入框：time/datatime-local/data/week/month<br>
<input type="time"><br>
<input type="data"><br>
<input type="datatime-local"><br>
<input type="week"><br>
<input type="montth"><br>
颜色选择器：
<input type="color"><br>
文件域：accept规定选定的文件类型
<input type="file" accept="image/png" multiple="multiple"><br>
</form>
单选框：
name属性值必须要相同的属性值
checked默认选中
label中for属性值与对应的输入框中id一致，点击label中的内容会获取对应输入框的焦点
<form action="" method="post">
<label for="names">姓名：</label>
<input type="text" id="names" name="unname" value=""><br>
<label for="">性别：</label>
<input type="radio" name="sex" value="fale" checked><label for="">男</label>
<input type="radio" name="sex" value="mate"><label for="">女</label>
</form>
复选框：checkbox
name属性值必须要相同的属性值后面加上中括号
checked默认选中
<form action="" method="post">
<label for="">爱好：</label>
<input type="checkbox" name="爱好[]" value="篮球">
<label for="">篮球</label>
<input type="checkbox" name="爱好[]" value="音乐">
<label for="">篮球</label>
<input type="checkbox" name="爱好[]" value="跑步">
<label for="">跑步</label>
</form>
电子邮箱：email
会对输入的内容进行验证，符合发送，不符合弹出提示框
<form action="" method="post">
<label for="">电子邮箱：</label>
<input type="email"><br>
<label for="">用户名：</label>
<input type="text"><br>
<label for="">网址：</label>
<input type="url" name="url" id=""><br>
<input type="submit">
</form>
表单验证：
<!-- pattern:规定输入文本内容，用正则表达式 -->
<!-- required:规定必须填写内容 -->
<form action="" method="post">
<label for="">单行文本：</label>
<input type="text" name="unname" value="" pattern="[0|9]{11}" required><br>
<input type="submit">
</form>
多行文本输入框：
textarea
单行文本输入框中的属性多行文本输入框也有
rows与cols设置多行文本不精确
使用css定义
<form action="" method="post">
<span>地址：</span>
<textarea name="unname" id="" cols="20" rows="5" maxlength="200"></textarea>
</form>
multiple：显示所有的列表项，可以多选
多选时，name属性值后加上中括号
selected：页面打开时默认显示
size:设置列表项显示多少列表项
下拉列表：
<form action="" method="get">
<select name="abc[]" id="" size="1" multiple>
<optgroup label="南方">
<option value="">上海</option>
<option value="">北京</option>
</optgroup>
<option value="" selected>湖北</option>
</select>
</form>
button：
type属性可以设置三个值：submit/button/reset/menu
<form action="">
<input type="text" name="" value="" placeholder="请输入" required>
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" >普通</button>
<button type="menu">菜单</button>
</form>
内联框架
iframe会包含另外一个文件框架
<iframe src="https://www.vip.com/" frameborder="0" loading="lazy" width="200px" height="150px"></iframe>
不常用的标签
跑马灯，从右边进入，滑动到左侧消失，无序循环播放
<marquee behavior="" direction="">公告：明天晚上放假</marquee>
删除标签
<del>$998</del>
带边框的标签
<fieldset>
设置边框的上的标题
<legend>登录</legend>
用户名：<input type="">
密码：<input type="paasword">
</fieldset>
补充
1块级元素： 常见的：div,h1~h6,p,ul,li,ol.....
常见的行级元素：
a,span,b,strong,i.....
行内块级元素：
img，input，video,audio，button,select,label....
块级元素可以嵌套块级元素，行级元素，行内块级元素
行级元素可以嵌套行级元素，行内块级元素，不能嵌套块级元素
行内块级元素只能嵌套行级元素
注意：
h1-h6,p不能嵌套块级元素
网页乱码处理
网页编码：指网页中特定的字符编码
常用的字符编码：
UTF-8:万国码，几乎支持所有的语言，推荐使用的编码
GBK(GB2312):汉字内码扩展，兼容GB2312又称中文编码
作用：网页需正确设置编码，才能在浏览器中正常显示
网页编码分成两部分：
1头部设置的编码，
2网页本身的编码
处理编码：
将两部分编码设置一致，就可以解决乱码
