网页统分为三大部分：结构（HTML）、表现（CSS）和行为（JavaScript）。
HTML
html指超文本标记语言，可以更加丰富地呈现文字信息。html是标记语言而不是编程语言，标记也就是标签是html中的一个基本语法。
标签包括开始标记和结束标记，使用时互相嵌套，成对出现，如<html>和</html>。有些标记单个出现，如<hr>，习惯上写为<hr />。
html的语法不区分大小写，也就是标签和属性不区分大小写，命名规范是小写。
HTML文档
文档结构
<!-- 根标签 --> <html> <!-- 文档头 --> <head> <!-- 标题 --> <title>this is title</title> </head> <!-- 文档体 --> <body> Hello world! </body> </html>
文档声明
<!-- 声明文档为html5 --> <!DOCTYPE html>
元数据
在<head>中设置元数据，使用<meta>标签。
charset指定网页的字符集，http-equiv指定网站的http协议。
name指定数据名称，content指定数据内容。
<meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html" /> <!-- 在3秒后，网页重定向跳转 --> <meta http-equiv="refresh" content="3;url=refresh.html"> <meta name="keywords" content="关键字1,关键字2" /> <meta name="description" content="用于指定网站的描述，显示在搜索引擎的搜索结果中。" /> <title>标题作为搜索引擎搜索结果的超链接</title>
标签
段落、标题、引用
html中的文本没有任何格式，所有格式都需要使用标签来赋予。
换行符<br />，横线<hr />。
文档中的标题使用<h1>，可取至<h6>，分别是6级标题，标题独占一行。
<hgroup>为标题组，将相关标题放入一个组中。
段落标签<p>，段落内的文本自成一段，段落间存在段间距。段落标签里不要放块元素。
<q>和<blockquote>表示引用。
<blockquote>我没说过。 ——鲁迅</blockquote>
我没说过。 ——鲁迅
网页布局
<header>表示网站的头部，<main>表示网站的主体，<footer>表示网站的底部，<nav>表示导航，<aside>表示侧边栏，<article>表示文章，<section>表示一个普通的区块。
<div>是最常用的布局元素，用来表示一个区块。<span>用于表示行内元素。
属性
标签具有属性，如<p align="right">居右对齐段落</p>，属性间使用一个空格间隔。
align为居中属性，包括left，right，center，justify。
预格式标签
预标签为<pre>，预标签内的格式将会不变地显示在html中。
字体标签
<font color="red">红色</font> <font color="#0000ff">#0000ff</font> <!-- 字号选择范围为1-7 --> <font size="7">7号字</font> <font face="SetoFont">濑户字体</font>
红色
#0000ff
7号字
濑户字体
修饰标签
<b>加粗</b><strong>加粗</strong> <i>斜体</i><em>斜体</em> <s>删除线</s><strike>删除线</strike><del>删除线</del> <sub>下标</sub><sup>上标</sup>
加粗加粗
斜体斜体
删除线删除线删除线
下标上标
样式
<font>，color，bgcolor，align等是已被废弃的标签好属性，现在使用style样式作为替代。
<p style=" text-align:center; background-color:pink; font-family:锐字真言体免费商用; color:blue; font-size:30px; "> 锐字真言蓝色30像素 </p>
锐字真言蓝色30像素
关于颜色，可以使用颜色名或者rgb，如rgb(0,0,0)、rgba(0,255,0,.5)，#bbffaa可以简写为#bfa。除了rgb也可以使用hsl值。
实体
浏览器会把多个空格显示为一个空格。
| 显示结果 | 描述 | 实体名 | 实体编号 |
|---|---|---|---|
| 空格 | |
  |
|
| < | 小于号 | < |
< |
| > | 大于号 | > |
> |
| & | 和号 | & |
& |
| " | 引号 | " |
" |
| ' | 撇号 | ' |
' |
图片
图片使用<img/>。
src属性确定图片的路径，可以使用相对路径或绝对路径，./表示当前路径，../表示上一级目录。
align属性控制图片和文字的对齐方式，包括bottom、top、middle。
width和height控制宽度和高度，默认为保持宽高比。图片可以使用像素px或百分比，百分比指的是相对于父容器的百分比。em是以字体为单位，1 em = 1 font-size；rem是相对于根元素，也就是<html>的字体大小。
alt设置图片无法读取时的提示。
<img src="pic01.png" width="100px" />
<img src="pic01.png" width="20%" />
<img alt="提示" />
可以用base64编码图片。
音视频
音视频和图片类似，分别使用<audio>和<video>。默认不允许用户控制，需要controls属性；自动播放使用autoplay，不过大部分网站不自动播放，loop设置循环播放。
<audio src="Luv letter.mp3" controls></audio>
有些浏览器不支持<audio>，可以这样写，增强兼容性。其中<embed>是现在不常用的播放标签。
<audio controls> <!-- 对不起，您的浏览器不支持播放音频，请升级浏览器。 --> <source src="Luv letter.mp3"> <embed src="Luv%20letter.mp3" type="audio/mp3" width="200px" height="100px"/> </audio>
音频视频由于较大，一般不放在服务器中，通常使用音视频托管或音视频网站。
<iframe src="//player.bilibili.com/player.html?aid=38173887&cid=67101682&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
列表
无序列表
<ul> <li>Coffee</li> <li>Milk</li> </ul>
- Coffee
- Milk
type属性用于控制列表的标头，包括disc、circle和square。
有序列表
<ol> <li>Coffee</li> <li>Milk</li> </ol>
- Coffee
- Milk
type属性用于控制列表的标头，默认为数字，小写字母"a"，大写字母"A"，大写罗马数字"I"，小写罗马数字"i"。
可以用start属性控制初始值，如start="10"，10表示从第10个标号开始。
自定义列表
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
- Coffee
- Black hot drink
- Milk
- White cold drink
超链接
<a href="http://www.baidu.com">进入百度</a>
超链接可以为内部链接或外部链接。
图片、文字等其他结构都可以加入超链接。
<a href="http://www.baidu.com"><img src="baidu.png" width="30%" /></a>
target属性包含_blank和_self，前者为新建标签页，后者在当前页面跳转。也可以使用框架名，用于框架的跳转。
title属性确定鼠标悬浮信息。
name属性用于定义名字，可以用于跳转时的锚点，声明锚点可以使用空白超链接，路径使用"#"，空白超链接可以用于回到顶部。锚点内可以不写任何东西。锚点可以跟在路径之后，作为路径的一部分。
也可以使用id属性，id是元素的唯一标识，同一页面中不能出现重复的id。
<a href="#" name="anchor"></a>锚点 <a href="#anchor">跳转到锚点</a>
没有任何用处的超链接<a ref="javascript:;">，可以用作占位。
超链接可以用于下载文件，浏览器会自动进行识别。
超链接可以用于指向邮件地址，此时在路径前加mailto:，
<a href="mailto:Team_XYZ@Outlook.com">联系我们</a>
表格
<table> <caption>标题</caption> <tr><!-- table row --> <th>表头</th><!-- table head --> <td>单元格</td><!-- table data--> </tr> </table>
| 表头 | 单元格 |
|---|
<table>的属性有：border属性设置边框的宽度，宽度为width，高度为height，居中为align，背景颜色为bgcolor，cellspacing为单元格之间的间距，cellpadding为单元格内容与单元格边框的间距。
<tr>可以设置宽度和高度，背景颜色bgcolor，内容的对齐方式包括align和valign，分别表示水平对齐和垂直对齐。
当有两个冲突的属性时，如果两个属性的作用范围相同，则取父标签的属性，反之则取子标签的属性。
合并在<td>中进行，列合并使用colspan属性，行合并使用rowspan。
<table border="2px" bgcolor="#f0f0f0"> <tr> <th>动力铁轨数\矿车类型</th><th>非运矿车</th><th>货运矿车</th><th>客运矿车</th><th>动力矿车</th> </tr> <tr align="center"> <td>1</td><td colspan=3>单格模型</td><td>多格模型</td> </tr> <tr align="center"><td>多格（未达到阈值）</td><td colspan=6>多格模型</td></tr> <tr align="center"> <td>多格（达到阈值）</td><td>不存在</td><td colspan=2>阈值模型</td><td>不存在</td> </tr> </table>
| 动力铁轨数\矿车类型 | 非运矿车 | 货运矿车 | 客运矿车 | 动力矿车 |
|---|---|---|---|---|
| 1 | 单格模型 | 多格模型 | ||
| 多格（未达到阈值） | 多格模型 | |||
| 多格（达到阈值） | 不存在 | 阈值模型 | 不存在 | |
表单
表单使用<form>。
输入框
输入框控件<input />，输入类型包括text、password等，value设置默认值，maxlength为最大字符长度，placeholder为提示信息，默认值会覆盖提示信息。
<form><input type="text" name="username" placeholder="邮箱/手机号/用户名" /></form>
单选框
单选框使用<input type="radio" />，需要设置相同的名字来保证单选，value确定单选的值，checked设置默认单选的值。
<input type="radio" name="sex" value="male" />男 <input type="radio" name="sex" value="female" />女 <input type="radio" name="sex" value="himitsu" checked/>保密
男
女
保密
多选框
多选框使用<input type="checkbox" />。
爱好：
唱
跳
rap
篮球
按钮
- 提交按钮
<input type="submit" /> - 重置按钮
<input type="reset" />
提交按钮和重置按钮的作用范围是本表单。
- 普通按钮为
<input type="button" /> - 图片按钮为
<input type="image" />
value可以修改显示名。
隐藏控件
隐藏控件使用<input type="hidden" />，不向客户显示，可以向服务器传输数据。
下拉菜单
下拉菜单使用<select>，每一个选择项使用<option>，默认选择项使用属性selected。size属性确定单页选项的个数，multiple可以多选。
文本域
文本域使用<textarea>。rows设置行数，cols设置列数。
<textarea rows="5" cols="40" placeholder="请输入文本。" name="message"></textarea>
文件上传控件
文件上传使用<input type="file" />
表单属性
表单属性在<form>标签中设置。
action表示提交路径，默认提交给当前页面，可以提交给Jsp或Servlet处理。
method为提交方式，包括get和post，前者以链接方式提交，表现为在链接后问号追加表单信息；后者封装成包使用http请求发送表单，适合大量数据或敏感数据加密。
enctype为对表单信息的编码。默认为application/x-www-form-urlencoded，在发送前编码所有字符；multipart/form-data不对字符编码，在文件上传时需要使用这种编码；text/plain仅把空格变为加号，不对特殊字符编码。
框架
框架允许网页在一个页面上显示多个网页。主要用于后台管理系统。框架使用<frameset>，其与<body>同级。
<iframe>是内联框架，相当于网页中嵌套网页，和图片类似，现在不常用了。
<html> <frameset rows="10%,*"> <frame src="top.html" name="top" /> <frameset cols="10%,*"> <frame src="left.html" name="left" /> <frame src="right.html" name="right" /> </frameset> </frameset> </html>