目录在右侧
HTML是对网页布局的整体描绘，CSS是对网页中具体内容样式的说明，JavaScript则是对网页事件的定义。这三者通过互补，构成了一个完整的网页。
结构
| 关键字 |
说明 |
<html></html> |
文档标签 |
<head></head> |
网页标题 |
<body></body> |
文档主体标签 |
<header></header> |
网页头 |
<nav></nav> |
导航链接 |
<aside></aside> |
侧边栏 |
<article></article> |
一篇独立的内容 |
<section></section> |
一篇内容的不同节 |
<footer></footer> |
元素页脚 |
文本
| 关键字 |
说明 |
<h1></h1> |
标题标签
支持h1~h6标题 |
<p></p> |
段落标签 |
<hr> |
水平线/换行 |
<!-- --> |
注释 |
文本格式化
| 关键字 |
说明 |
<b></b> <strong></strong> |
字体加粗 |
<em></em> <i></i> |
斜体 |
<sub></sub> |
下标 |
<sup></sup> |
上标 |
<pre></pre> |
预格式文本
提前打入一段含空格与换行的文档 |
<abbr></abbr> |
缩写
title属性写入原始内容，标记中间写上缩写的内容 |
<bdo dir = "ltr"></bdo> |
文本方向
ltr为从左到右，rtl为从右到左 |
<blockquote></blockquote> |
使用块显示引用 |
<q></q> |
短的引用 |
<cite></cite> |
引用，引证 |
<del></del> |
中部划线 |
<ins></ins> |
下划线 |
链接
| 属性 |
说明 |
href |
指定链接地址<url>超链接，注意在其后加斜杠#section文内链接，连接处需要有标记- 其后加
download标签表示下载链接
|
target |
链接在浏览器打开的方式_blank 在新标签页中打开_self 在当前标签页中打开_top 跳出网页框架
|
title |
提供链接的额外信息 |
<img> |
插入图像，点击图像就能打开链接 |
name |
创建一个标记 |
图像
| 属性 |
说明 |
src |
相对路径，也可以是来自外部网络的图片文件 |
alt |
当无法载入图像时，图像将被替换成的文本 |
draggable |
设置图片是否可拖动的属性，为bool值 |
width height |
设置图片长宽，单位为px |
标题
| 关键字 |
说明 |
<title></title> |
文档标题 |
<style></style> |
定义文档的样式信息(CSS) |
<script></script> |
加载脚本文件(JavaScript) |
<base> |
href指示页面上所有链接的默认urltarget同上，默认为_blank可以插入图片 |
<meta> |
定义文档的元数据，这些数据被浏览器解析，从而被网络服务搜索到 |
<link> |
定义某文档与外部资源的关系，一般用于链接外部样式表 |
meta属性 |
content |
说明 |
name="keywords" |
|
为搜索引擎定义关键字 |
name="description" |
|
定义网页描述 |
name="author" |
|
定义页面作者 |
charset |
/ |
声明字符编码，直接在后面用=指定 |
name="viewport" |
例：width=device-width, initial-scale=1.0
initial-scale=1.0 设置为初始缩放级别 |
视口元素 |
http-equiv |
由属性值而定content-type时为"text/html; charset= "，即上面的charsetdefault-style时为样式表。注意：其值必须匹配同一文档中的一个link元素上的title属性的值，或者必须匹配同一文档中的一个style元素上的title属性的值refresh时为刷新的时间间隔
|
该属性值提供了content属性的信息/值的 HTTP 头content-type规定文档的字符编码default-style规定要使用的预定义的样式表refresh定义文档自动刷新的时间间隔
|
<link>的一般格式为
1
| <link rel="stylesheet" type="text/css" href="name.css">
|
rel指示其关系，type指示文件的MIME类型。
表格
| 关键字 |
说明 |
<table></table> |
声明一个表格 |
<caption></caption> |
常作为<table>的子元素声明表格标题 |
<thead></thead> |
表格标题部分 |
<tbody></tbody> |
表格主体部分 |
<tr></tr> |
表格的一行(table row) |
<colgroup></colgroup> |
表格的一组列 |
<col></col> |
一组列中的一列(column)
只有做<colgroup></colgroup>的子元素才生效 |
<th></th> |
表格的表头单元格(table head) |
<td></td> |
表格的单元格(table data) |
| 属性 |
使用对象 |
说明 |
border |
<table></table> |
定义边框(默认无边框) |
列表
| 关键字 |
说明 |
<ul></ul> |
无序列表(以粗体圆点标记) |
<ol></ol> |
有序列表(以数字标记) |
<li></li> |
定义列表项 |
<dl></dl> |
自定义列表 |
<dt></dt> |
自定义列表项目 |
<dd></dd> |
对自定义列表项的描述 |
| 属性 |
使用对象 |
说明 |
start |
<ul></ul>等 |
从1以外的数字进行计数 |
reversed |
<ul></ul>等 |
反向计数，该属性没有值 |
value |
<li></li>等 |
独立设置数值 |
布局
| 关键字 |
说明 |
<div></div> |
定义区块(使用CSS对其定义样式) |
<span></span> |
定义内联元素(使用CSS为部分文本设置样式) |
表单
| 关键字 |
说明 |
<form></form> |
创建表单，集用户输入的信息，并将其发送到web服务器 |
<label></label> |
为表单元素添加标签 |
<input> |
创建输入元素 |
| 属性 |
使用对象 |
说明 |
action |
<form></form> |
指示表单涉及目标URL，目标在表单页则为/ |
method |
<form></form> |
定义HTTP方法 |
for |
<label></label> |
指定标签对应的表单 |
type |
<input> |
输入的类型 |
placeholder |
<input> |
输入框为空时的提示句 |
autofocus |
<input> |
打开网页时，光标自动进入输入框中。该属性没有值 |
type中的元素类型
| 类型 |
说明 |
text |
默认 |
password |
密码 |
number |
内容限制为数字，可额外指定以下属性max/min 规定最大值/最小值value默认值size规定可见字符数maxlength规定最大字符长度
|
color |
色块 |
button |
按钮 |
checked |
多选框 |
radio |
单选框 |
file |
文件选择器 |
image |
使用图片作提交按钮 |
submit |
提交按钮 |
date |
选取日期 |
datetime |
选取时间(UTC时间) |
datetime-local |
选取的时间(无时区) |
month |
输入年月 |
week |
选择周和年 |
time |
选取时间 |
email |
输入邮箱，会自动检验邮箱是否有效，需要配合submit使用 |
range |
显示滑动条，可额外指定以下属性max/min规定最大值/最小值step规定合法数字间隔value规定默认值
|
search |
进行搜索 |
tel |
电话号码 |
url |
输入url |
表单元素
| 关键字 |
上一级元素 |
说明 |
<datalist> |
<input> |
在input输入时提供填写选项 |
<option> |
<datalist> |
提供下拉列表中的选项.但需要input输入list属性以进行绑定 |
<select> |
<input> |
创建下拉选项，用法与datalist类似。但datalist能做到通过用户输入进行模糊匹配 |
用法示例：
1
2
3
4
5
| <input list="name">
<datalist id="name">
<option value="">
<option value="">
</datalist>
|
HTML框架
| 关键字 |
说明 |
<iframe></iframe> |
在网页内嵌套一个网页 |
| 属性 |
说明 |
src |
框架内的网页 |
width height |
框架长宽 |
frameborder |
框架是否显示边框（0为不显示） |
字符实体
| 显示结果 |
实体名 |
显示结果 |
实体名 |
< |
&it |
¥ |
¥ |
> |
> |
× |
× |
|
  |
÷ |
÷ |
& |
& |
™ |
&trade |
" |
" |
§ |
§ |
' |
&apos |
|
|
canvas(画布)
| 关键字 |
说明 |
<canvas></canvas> |
创建一个矩形画布 |
| 属性 |
说明 |
id |
脚本引用的名字 |
width height |
定义画布大小 |
但该元素本身没有绘图能力，绘制工作交由JavaScript完成。
SVG(矢量图)
| 关键字 |
说明 |
<svg></svg> |
通过xml绘制矢量图 |
audio(音频)/video(视频)
| 关键字 |
说明 |
<video controls><source></video> |
显示视频 |
<audio controls><source></audio> |
播放音频 |
source属性 |
说明 |
src |
文件的路径.可链接不同的视频文件，浏览器将使用第一个可识别的文件 |
type |
MIME类型 |
目前，浏览器支持三种视频格式：MP4，WebM，和Ogg。三种音频格式: MP3，Wav，和 Ogg。
注意：MP3的音频格式为audio/mpeg。
一些特别内容
<ruby>元素
表示中文的注音或字符注释。
| 关键字 |
说明 |
<ruby></ruby> |
展示中文注音或日文假名注音等 |
<rp></rp> |
用于不支持<ruby>元素的情况，提供此时它应该展示的东西 |
<rt></rt> |
显示注释，如汉 字 |