HTML：超文本标记语言，决定页面上显示什么内容。
CSS：页面上内容的显示风格，决定页面的美观程度。
JavaScript：页面特效。

在网页中，HTML专门负责网页的结构，所以在使用HTML标签时，应该关注其语义而不是样式。

< body >中包含如下标签：
换行: < br/ > (与html、head、body不同，/ 写在单词后，表示单标签。)
分隔线：< hr/ >
段落：< p > < /p >
图片：
< img src=“图片路径” width=“图片宽度” height=“图片高度” alt=“图片标签” title=“图片标签” / >
alt：找不到图片时显示的文字，搜索引擎根据alt识别图片；
title：鼠标悬停时显示的文字；
如果width和height只修改了一个，另一个会等比例缩放。PC端不建议修改图片的大小，而是提前准备好合适大小的图片；移动端经常需要对图像进行缩放（多为大图缩小）。
音频和视频：

<audio controls> <source src="路径"> <embed src="路径" type="audio/mp3"> <!-- 处理兼容性问题 -->
</audio ><video controls><source src="路径"><embed src="路径" type="video/mp4">  <!-- 处理兼容性问题 -->
</video>

标题：
< h1 > < /h1 >……< h6 > < /h6 >，共6种，数字越大，字体越小。
从h1到h6重要性递减，h1最重要，重要性仅次于title，h6最不重要。
一般情况下一个页面中只有一个h1。
< hgroup > < /hgroup >给标题分组，可以将一组相关的标题放入hgroup中。
列表：
无序列表 < ul >：type包括disc, circle, square。
有序列表 < ol >：属性type设置编号方式(A a I i 1五种)，start设置开始的序号，< li >中为列表项。
定义列表 < dl >：使用 dt 表示定义的内容， dd对内容进行解释说明。
常用ul，如导航栏等；列表之间可以互相嵌套。

其他设置：
< b >加粗< /b >
< i >斜体< /i >
< u >下划线< /u >
< sub >下标< /sub >
< sup >上标< /sup >
HTML字符实体
不换行的块标记：< span > < /span>
超链接：
从一个页面跳转到其他页面，或当前页面的其他位置。
行内元素，但在里面可以嵌套除了自己之外的任意元素。
< a href=“链接地址” target=“打开位置”> < /a >。
target共四个值：_self在本窗口打开；_blank在新窗口打开；_parent在父窗口打开；_top在顶层窗口打开。

需要跳转到服务器的内部页面时，一般使用相对路径，以 ./ 或 …/ 开头。
回到页面顶部：< a href=“#” >回到顶部< a >
开发时可以把#当作超链接的占位符使用，也可以用“javascript:;”作为href的值，什么也不会发生。
去页面的任意一个位置 —> 跳转到任意一个标签：
通过id属性定位标签位置（id属性是元素的唯一标识，同一个页面中不能有同样的id），然后< a href=“#想去的标签id” >跳！< a >
层：< div >

<html><head><title>Daqin empire</title><meta charset="UTF-8"></head><body>Welcome to Daqin empire!<br/><p>啾咪一个段落</p><img src="imgs/ssm.jpg" width="507" height="908" title="少司命!" alt="图片错了哦~"/><h1>九歌 少司命</h1><h2>秋兰兮糜芜，罗生兮堂下</h2><h3>绿叶兮素华，芳菲菲兮袭予</h3>少司命：<ol type="A" start="3"><li>万叶飞花流</li><li>九宫移魂术</li></ol>少司命：<ul type="square"><li>万叶飞花流</li><li>九宫移魂术</li></ul><b>加粗</b><i>斜体</i><u>下划线</u>H<sub>2</sub>O <br/>ASIS<sup>[1]</sup><br/><span>人间绝色</span>刘奕君！<a href="https://www.bilibili.com" target="_blank">哔哩哔哩！</a></body>
</html>
<!--这里是注释-->

三、 table标签 —— 表格

表格： < table > < /table >，块元素
表头：< th > < /th >
行：< tr > < /tr >
列：< td > < /td >，rowspan行合并，colspan列合并。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Learn</title><link rel="shortcut icon" href="./imgs/kirlant.ico"><link rel="stylesheet" href="./learn.css"></head><body><table><tr><th>名字</th><th>技能一</th><th>技能二</th><th>技能三</th></tr><tr><td>少司命</td><td rowspan="2">轻功</td><td>万叶飞花流</td><td>九宫移魂术</td></tr><tr><td>白凤</td><td>凤舞六幻</td><td>凤舞九天</td></tr><tr><td colspan="4">凤司永存</td></tr></table></body>
</html>

*{margin: 10px;padding: 0px;
}
table{width: 25%; margin: 0 auto;;border: 1px solid black;font-size: 18px;/* 指定边框之间的距离 *//* border-spacing: 0px; *//* 设置边框之间的合并 */border-collapse: collapse;
}
tr{height: 30px;
}
tr:nth-child(2n){background-color: azure;
}
tr:nth-child(2n+1){background-color: rgb(224, 231, 247);
}
td{width: 25%;border: 1px solid black;/* 内容垂直居中 */vertical-align: middle;/* 内容水平居中 */text-align: center;
}

长表格

一个长表格可以分为三个部分：头部<thead></thead>、主体<tbody></tbody>、底部<tfoot></tfoot>；然后把<tr>放在这些部分中。

四、 form标签 —— 表单

表单：< form > < /form >，将本地的数据提交给远程服务器。
action： 给出发送数据的目的地，必须指定；
method： 数据的发送方式 get（数据都显示在目的地的地址栏，不安全，且有长度限制）、post（不显示内容，较常用）。
表单项：<input>输入框

type 输入框类型
"text"文本框；
"password"密码框，输入密码时不可见；
"radio"单选框，value指定选中时发送的值；name属性必须一致，才有互斥的效果；
"checkbox"复选框；
"submit"点击提交按钮，把表单数据发送给 action 给出的目的地；
"reset" 重置按钮，回到页面的默认状态；
"button" 普通按钮；
name 必须设置，否则该项的值不会被发送给服务器
value 该输入框的默认值，看心情设置
checked
"checked" 设置默认选中值，用于单选框和复选框；当属性名和属性值相等时，属性值可以省略；
表单项：<select> 下拉列表框、 <option></option>下拉选项
<select>
name 必须设置，否则该项的值不会被发送给服务器
<option>
value设置其中一项的值；
selected设置默认选中值；

表单项：textarea 多行文本框
name 必须设置，否则该项的值不会被发送给服务器
它的value值就是开始和结束标签之间的内容；

还有许多奇奇怪怪的功能建议看手册。

<html><head><title>Daqin empire</title><meta charset="UTF-8"></head><body><form action="demo02.html" method="post">昵称：<input type="text" name="nickName"/><br/>性别：<input type="radio" name="gender" value="male"/>男<input type="radio" name="gender" value="female" checked="checked"/>女<br/>爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球<input type="checkbox" name="hobby" value="football"/>足球<input type="checkbox" name="hobby" value="swimming" checked/>游泳<br/>星座：<select name="star"><option value="1">白羊座</option><option value="2">金牛座</option><option value="3">双子座</option><option value="4">巨蟹座</option><option value="5">狮子座</option><option value="6" selected>处女座</option><option value="7">天秤座</option><option value="8">天蝎座</option><option value="9">射手座</option><option value="10">摩羯座</option><option value="11">水瓶座</option><option value="12">双鱼座</option></select><br/>邮箱：<input type="text" name="nickName"/><br/>备注：<textarea name="remark" rows="4" cols="20"></textarea><br/>密码：<input type="password" name="pwd"/><br/>再次确认密码：<input type="password" name="pwd"/><br/><input type="submit" value="注 册" /><input type="reset" value="重 置" /><input type="button" value="啾咪" /></form></body>
</html>

五、 frameset 和 iframe 标签

frameset： 表示页面框架，划分网页的布局
frame： 表示框架中的具体页面引用
iframe： 表示在一个页面中嵌入一个子页面

<html><head><title>Daqin empire</title><meta charset="UTF-8"></head><frameset rows="20%,*" frameborder="no"><frame src="路径1" /><frameset cols="15%,*"><frame src="路径2" /><frameset rows="80%,*"><frame src="路径3" /><frame src="路径4" /></frameset></frameset></frameset>
</html>