基础复习 - HTML基本语法
HTML的特点：
HTML是一种标记语言，不需要编译，可以直接由浏览器执行。
HTML是一个文本文件，只要能写文本的工具都能用来开发HTML。
HTML文件的后缀是.html或.htm。
HTML对大小写不敏感。
HTML的基本结构：
<!DOCTYPE html> <html> <head> <title>标题</title> </head> <body> </body> </html>
<!DOCTYPE>文档声明：
<!DOCTYPE>声明必须放在HTML文档第一行。
<!DOCTYPE>声明不是HTML标签，它的作用是告诉浏览器当前文档的HTML版本。
网页编码设置：
记得需要对网页进行编码设置，否则可能出现乱码。
复杂：<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
简单：<meta charset="utf-8"/>
段落和文字：
标题标签：
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
段落标签：
<p align="left">文本左对齐的段落</p> <p align="right">文本右对齐的段落</p> <p align="center">文本居中的段落</p> <p align="justify">文本两端对齐的段落</p>
换行标签：
<br/><!--我能让文本换行，我是一个单标签-->
预定义标签：
<pre> 这里的文本，在 编辑器 里写成啥样，在页面上就显示成啥样 </pre>
水平线：
<hr/><!--我是一条单纯的水平线--> <hr color="blue"/><!--我是一条蓝色的水平线-->
文字修饰标签：
<i>我是斜体字</i> <em>我是斜体字</em> <b>我被加粗了</b> <strong>我被加粗了</strong> <sup>我是一个上标</sup> <sub>我是一个下标</sub>
常用字符实体：
<!-- 空格 --> < <!-- < --> > <!-- > --> ® <!-- ®️ --> © <!-- ©️ --> ™ <!-- ™️ -->
列表：
无序列表：
<ul> <li type="disc">我的序号是一个实心圆</li> <li type="square">我的序号是一个实心方块</li> <li type="circle">我的序号是一个空心圆</li> </ul>
有序列表：
<ol> <li type="1">我的序号是一个数字</li> <li type="a">我的序号是一个小写字母</li> <li type="A">我的序号是一个大写字母</li> <li type="i">我的序号是一个小写罗马数字</li> <li type="I">我的序号是一个大写罗马数字</li> </ol>
定义列表：
<dl> <dt>列表项一</dt> <dd>列表项一的描述</dd> <dt>列表项二</dt> <dd>列表项二的描述</dd> <dl>
图像：
<img src="a.jpg"/><!--相对路径：同级目录下的图片--> <img src="../a.jpg"/><!--相对路径：上级目录下的图片--> <img src="file/a.jpg"/><!--相对路径：下级目录下的图片--> <img src="C:/file/a.jpg"/><!--绝对路径：从盘符开始写的完整路径--> <img src="a.jpg" alt="文本"/><!--图片无法加载时，空出来的位置显示“文本”--> <img src="a.jpg" width="100px" height="100px"/><!--可以设置图片的宽高为固定大小--> <img src="a.jpg" width="50%" height="50%"/><!--也可以设置图片的宽高相对于外层标签的百分比-->
链接：
链接的分类：
<a href="#">空链接</a><!--点击不会跳转，但会刷新当前页面--> <a href="test.html">普通链接</a><!--点击跳转到test.html--> <a href="file://文件路径">下载链接</a><!--点击直接下载该文件--> <a href="tel:13812345678">电话链接</a><!--点击会给13812345678拨电话--> <a href="mailto:123@126.com">邮箱链接</a><!--点击会弹出给123@126.com发邮件的窗口-->
链接的打开位置：
<a href="a.html" target="_self">默认，在当前窗口打开页面</a> <a href="a.html" target="_blank">新开空白窗口打开页面</a> <a href="a.html" target="_top">在顶级frame中打开页面</a> <a href="a.html" target="_parent">在父级frame中打开页面</a>
锚点：
<!--本页锚点--> <a href="#test1">点我，就能让页面滚动到 #test1 所在位置</a> <a name="test1">我就是 #test1</a> <!--他页锚点--> <a href="b.html#test2">点我，可以打开 b.html 并滚动到该页的 #test2 所在位置</a> <a name="test2">我就是 #test2</a><!--要写在b.html里面-->
表格：
表格的基本结构：
<table> <caption>标题</caption> <thead><!--表头--> <tr> <th>表头单元格1</th> <th>表头单元格1</th> </tr> </thead> <tbody><!--主体--> <tr> <td>主体单元格1</td> <td>主体单元格1</td> </tr> </tbody> <tfoot><!--脚注--> <tr> <td>脚注单元格1</td> <td>脚注单元格2</td> </tr> </tfoot> </table>
基本结构的解释：
<caption>表示表格标题，在最上方居中显示。
<thead>、<tbody>、<tfoot>可以将表格划分成三个部分。
浏览器会将表格视作一个整体，需要完全加载完成后统一渲染，在表格很复杂时需要很长的等候时间。
用这三种结构标签将表格分为三个部分，就可以让浏览器加载一个部分显示一个部分，从而减少等候时间。
另外，这三种结构标签的书写顺序不影响其在浏览器中的显示顺序，不管怎么写都按照<thead>、<tbody>、<tfoot>的顺序显示。
<tr>表示行，<th>是表头单元格（默认居中加粗），<td>是普通单元格（默认左对齐）
表格标签的常用属性：
<table width="100px"></table><!--设置宽度就会固定，不设置宽度就随着单元格的宽度变化--> <table align="center"></table><!--设置表格在其所在的这一行内的水平对齐方式--> <table border="1px"></table><!--设置表格的边框宽度--> <table bgcolor="yellow"></table><!--设置表格的背景颜色--> <table cellspacing="10"></table><!--设置表格内每个单元格之间的空白大小--> <table cellpadding="10"></table><!--设置表格内每个单元格内文字和单元格表框之间的空白大小--> <table frame="box"></table><!--设置表格外边框的显示方式--> <table rules="all"></table><!--设置表格内边框的显示方式-->
单元格标签的常用属性：
<td align="left">文本水平居左</td> <td align="center">文本水平居中</td> <td align="right">文本水平居右</td> <td align="justify">文本水平两端对齐</td> <td align="char">文本水平对齐某个字符</td> <td valign="top">文本上对齐</td> <td valign="middle">文本垂直居中对齐</td> <td valign="bottom">文本下对齐</td> <td valign="baseline">文本垂直与基线对齐</td> <td bgcolor="blue"></td><!--设置单元格的背景颜色--> <td rowspan="2"></td><!--设置单元格的跨行数量--> <td colspan="2"></td><!--设置单元格的跨列数量-->
表格的嵌套：
可以在单元格中嵌入表格，被嵌入的表格需要拥有完整的表结构。
建议尽量少使用表格嵌套和跨行跨列，因为不好维护。
表单：
访问一个包含表单的页面，输入数据后点击“提交按钮”，浏览器会将用户在表单中输入的数据打包发送给服务器。
<form>元素：
在页面中开辟一个表单域，所有输入标签都要写在这个域内，它本身在浏览器中不可见。
<form action="test.php"></form><!--将表单发送给 test.php 处理--> <form method="get"></form><!--用get方式提交表单--> <form method="post"></form><!--用post方式提交表单--> <form name="douxing"></form><!--设置表单名字--> <form target="_self"></form><!--请求返回的页面在当前页打开--> <form target="_blank"></form><!--请求返回的页面在空白页打开--> <form target="_parent"></form><!--请求返回的页面在父级frame打开--> <form target="_top"></form><!--请求返回的页面在顶级frame打开--> <form enctype="application/x-www-form-urlencoded"></form><!--发送表单钱编码所有字符（默认）--> <form enctype="multipart/form-data"></form><!--发送表单前不对字符进行编码（表单中有上传控件要用这种形式）--> <form enctype="text/plain"></form><!--发送表单前将空格转换成"+"，但不对特殊字符进行编码-->
输入控件：
<input type="text"/><!--单行输入框--> <input type="text" name="test"/><!--设置单行输入框的名称，与后台字段对应--> <input type="text" maxlength="20"/><!--设置用户最多能输入的字符长度--> <input type="text" size="30"/><!--设置文本框的宽度，以字符个数为单位，默认20--> <input type="text" value="文本"/><!--设置默认值，用户输入时修改的也是这个值--> <input type="text" placeholder="取代"/><!--设置提示文字--> <input type="password" value="密码"/><!--密码输入框，输入的字符会被转为打个马赛克--> <input type="hidden" value="隐藏"/><!--隐藏域，在网页中不显示，但是value会被提交-->
上传控件：
<input type="file"/><!--点击上传文件，可以读取并上传本机文件-->
单选控件：
需要为一组单选框设置相同的name值，才能标定他们是同一组，并在组间单选。给用户显示的选项写在<label>中，将for属性设置成与前面单选框的id相同，即可将他们绑定在一起。
后台用name属性识别这组控件，并获取到其中被选中的选项的value，设置了checked的选项表示被选中。
<!--一组单选框--> <input type="radio" name="test1" id="orange" value="orange" checked/><label for="orange">橙子</label> <input type="radio" name="test1" id="apple" value="apple"/><label for="apple">苹果</label> <input type="radio" name="test1" id="banana" value="banana"/><label for="banana">香蕉</label>
多选控件：
用法和注意事项和单选控件相同，只不过这里的选项可以被多选。<!--一组多选框--> <input type="checkbox" name="test2" id="orange" value="orange" checked/><label for="orange">橙子</label> <input type="checkbox" name="test2" id="apple" value="apple"/><label for="apple">苹果</label> <input type="checkbox" name="test2" id="banana" value="banana"/><label for="banana">香蕉</label>
下拉菜单：
<select name="名称" size="3" multiple><!--size设置一次性能看到几条，multiple设置多选--> <optgroup label="水果"><!--用optgroup来分组--> <option value="菠萝" selected>菠萝</option><!--selected表示选中--> <option value="榴莲">榴莲</option> </optgroup> <optgroup label="蔬菜"> <option value="菠菜">菠菜</option><!--value为最终被提交的值--> <option value="油麦菜">油麦菜</option> </optgroup> </select>
文本域：
<textarea name="名称" placeholder="提示"></textarea><!--多行文本域--> <textarea rows="3" cols="100"></textarea><!--设置默认行数和默认宽度，其中宽度以字符个数为单位-->
提交按钮：
<input type="button" value="普通按钮"/><!--没有操作，需要和JS配合--> <input type="reset" value="重置按钮"/><!--清空表单--> <input type="submit" value="提交按钮"/><!--提交表单--> <input type="image" src="a.jpg"/><!--被显示成图片的提交按钮-->
其他元素：
块级和行内：
块级标签：一个块级标签占据一行。
行内标签：多个行内标签共同占据一行。
块级容器：<div>，行内容器：<span>，这两个标签没有实际意义，多用于组织文档结构和应用样式。
标签嵌套规则：
块级元素可以包含行内元素和某些块级元素，行内元素只能包含行内元素。
块级元素和块级元素并列，行内元素和行内元素并列。
只能包含行内元素的块级元素：<h1>~<h6>、<p>、<dt>。
