目录
Html4
1、物理字体
<b>…</b> 设置标记间的文字为粗体 blod face
<i>…</i> 设置标记间的文字为斜体 italic
<u>…</u> 设置标记间的文字带下划线 under line
<sup>…</sup> 设置标记间的文字为上标 superscript
<sub>…</sub> 设置标记间的文字为下标 subscript
<del>…</del> 设置标记间的文字带删除线 delete line
2、逻辑字体
<em>…</em> 一般强调(emphasis),斜体
<strong>…</strong> 特别强调,黑体
<address>…</address> 表示地址
<q>…</q> 定义引用
<kbd>…</kbd> 用户键入的文字,字体变细变轻
<cite>…</cite> 一段引用的文字,斜体。用于书名、电影名
<small>…</small> 字体变小
<big>…</big> 字体变大
<dfn>…</dfn> 定义术语
<code>…</code> 源代码
<var>…</var> 变量
3、hr 标签
<hr align="left" width="400" size="50" color="#ff0000">
4、center 标签
<center>…</center>
align="center"
5、无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
type 取值可以是disc、square、circle,分别表示用实心圆点、实心方点、空心圆作为列表符号。
6、有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
type 取值可以是1、a、A、i、I,分别代表编号使用阿拉伯数字、小写英文字母、大写英文字母、小写罗马数字、大写罗马数字。
start 指定序号的起始值,只能取数字。
reversed 反向编号列表
7、定义列表
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
8、a 标签
target 显示链接的窗口或框架,可取以下值:
_self 在本窗口或本框架中打开超链接
_parent 在上一级框架中打开超链接
_top 在整个浏览器窗口中打开超链接
target = "_blank" 在新窗口中打开超链接
download filename 指定下载链接
9、body 标签
※ bgcolor 设置页面背景颜色。
background 设置页面的背景图片的URL。
bgproperties 取fixed 值时设置背景不随滚动条滚动,不设此属性时背景随滚动条滚动。
※ text 设置页面非超链接文字基本颜色。
10、img 标签
src 设置图像文件的URL。
alt 设置无法显示时的替代显示文本
height、width 设置图像高度、宽度
border 设置边框粗细,默认0
align 设置图像及图像周围内容的对齐方式
1、图像在页面中的对齐方式:left、right
2、图像和文字的对齐方式:top、middle、bottom
当设置 align 为 left 或 right 时,图片和内容会显示在一行;如果让其它内容换行,可以使用 <br clear="all">
11、字符实体
显示结果 描述 实体名 实体号
无间断空格  
< 小于 < <
> 大于 > >
& and符号 & &
" 双引号 " "
¢ 分 ¢ ¢
£ 英镑 £ £
¥ 人民币元 ¥ ¥
§ 章节 § §
© 版权 © ©
® 注册 ® ®
× 乘号 × ×
÷ 除号 ÷÷
√ 对号 √ √
12、表格
<table>
<caption>成绩单</caption>
<tr><th>姓名</th> <th>英语</th></tr>
<tr><td>张三</td> <td>88</td></tr>
<tr><td>李四</td> <td>90</td></tr>
</table>
13、table 标签
align 设置表格位置,可以为left、center、right。
width 设置表格的宽度。
height 设置表格的高度。
border 设置表格外框的粗细。
bordercolor 设置表格外框的颜色。
cellspacing 设置两个单元格之间的间距。
cellpadding 设置单元格内文字与单元格边框的间距。
background 设置表格的背景图像的URL。
bgcolor 设置表格的背景颜色。
14、caption 标签
align 设置标题列相对于表格的摆放位置(水平),可选值为: left, center, right, top, middle, bottom。
valign 设置标题列相对于表格的摆放位置(上下),可选值为: top, bottom。与align同时使用来实现标题列在表格下方偏右。
15、tr 标签
bgcolor 设置表格行的背景色。
align 设置水平对齐方式,可取left、center、right。
valign 设置垂直对齐方式,可取top、middle、bottom。
16、td 标签
width 单元格宽度(通常设置在第一行)。
height 单元格高度(通常设置在第一列)。
rowspan 单元格占用表格行数。
colspan 单元格占用表格列数。
background 设置单元格背景图像。
bgcolor 设置单元格背景色。
align 设置内容水平对齐方式,可选left、center、right。
valign 设置内容垂直对齐方式,可选top、middle、bottom。
17、iframe
src 指定框架显示的HTML文件的位置。
name 指定窗口的名称。
width 指定框架的宽度
height 指定框架的高度
frameborder 是否显示框架。0-不显示,1-显示;默认为1
scrolling 是否显示滚动条。no-不显示,yes-显示,auto-自动设置;默认为auto。
Html 5
1、<!DOCTYPE> 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
2、<abbr> 标签
用来表示一个缩写词或者首字母缩略词(当鼠标移动到缩略词上面会出现全称)
The<abbr title="World Health Organization ">WHO</abbr> was founded in 1948.
3、<article>标签
标签定义独立的内容
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 在2011年3月14日21:00发布。</p>
</article>
4、<aside> 标签
通常用于显示侧边栏或者补充的内容。例如:目录、索引等。
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
5、<address> 标签
某个文档中所属作者或者所有者的相关的联系信息
<address>
Written by <a href="#">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
6、<base> 标签
规定页面上所有链接的默认 URL 和默认目标
<head><base href="//statics.w3cschool.cn/images/w3c/" target="_blank"></head>
<body>
<img src="logo.png" width="24" height="39" alt="w3cschool">
<a href="logo.png">w3cschool logo</a>
</body>
7、<blockquote> 标签和<q> 标签
<blockquote> 用来引用大段的内容块,处于该标签内的文本会独自分离出来,并且自动缩进;<q> 用于定义一个短引用,效果就是加了一对双引号。
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
</blockquote>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
8、<bdo> 标签
改变显示文本的方向
<p>该段落文字从左到右显示</p>
<p><bdo dir="rtl">该段落文字从右到左显示</bdo></p>
9、<col> 标签与<colgroup> 标签
为表格中的三个列设置了背景色
span : 表示 col 横跨的列数
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
10、<del> 和 <ins>
一段带有已删除部分和新插入部分的文本
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
11、<details> 标签
只有谷歌浏览器和Safari 6支持
<details> 标签规定了用户可见的或者隐藏的需求的补充细节。
<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
<details> 元素的内容对用户是不可见的,除非设置了 open 属性。
与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p></details>
12、<embed> 标签
用来嵌入 flash 动画片
<embed src="helloworld.swf">
height pixels 规定嵌入内容的高度。
src URL 规定被嵌入内容的 URL。
type MIME_type 规定嵌入内容的 MIME 类型。
注:MIME = Multipurpose Internet Mail Extensions。
width pixels 规定嵌入内容的宽度。
13、<figure>和<figcaption> 标签
使用 <figure> 元素标记文档中的一个图像, <figcaption> 表示标题
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
14、<form>标签的新属性
novalidate 如果使用该属性,则提交表单时不进行验证。
15、<fieldset> 标签和<legend> 标签
disabled disabled 规定该组中的相关表单元素应该被禁用。
form form_id 规定 fieldset 所属的一个或多个表单。
Name text 规定 fieldset 的名称。
<legend>定义了标题
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
16、<hgroup> 标签
对标题进行组合
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
17、<input> 标签
autocomplete on/off 规定 <input> 元素输入字段是否应该启用自动完成功能
autofocus autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点
list datalist_id 引用<datalist>元素,其中包含<input>元素的预定义选项
max numberdate 属性规定 <input> 元素的最大值
min numberdate 属性规定 <input> 元素的最小值
maxlength number 属性规定 <input> 元素中允许的最大字符数。
minlength number 属性规定 <input> 元素中允许的最小字符数。
multiple multiple 允许用户输入到 <input> 元素的多个值
pattern regexp 规定用于验证 <input> 元素的值的正则表达式。
placeholder text input 里面简短的提示信息
readonly readonly 只读
required required 规定必需在提交表单之前填写输入字段
size number 属性规定以字符数计的 <input> 元素的可见宽度
// max 与 min
<form action="/statics/demosource/demo-form.php">
输入 1980-01-01 之前的日期:
<input type="date" name="bday" max="1979-12-31"><br>
输入 2000-01-01 之后的日期:
<input type="date" name="lday" min="2000-01-02"><br>
数量 (在1和5之间):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
// maxlength
<form action="demo-form.php">
Username: <input type="text" name="usrname" maxlength="10"><br>
<input type="submit" value="提交">
</form>
属性 type 的值:
button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。
checkbox 定义复选框。
color 定义拾色器。
date 定义 date 控件(包括年、月、日,不包括时间)。
datetime 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)
datetime-local 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
email 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 "浏览..." 按钮,供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
month 定义 month 和 year 控件(不带时区)。
number 定义用于输入数字的字段。
password 定义密码字段(字段中的字符会被遮蔽)。
radio 定义单选按钮。
range 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
reset 定义重置按钮(重置所有的表单值为默认值)。
search 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
tel 定义用于输入电话号码的字段。
text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。
time 定义用于输入时间的控件(不带时区)。
url 定义用于输入 URL 的字段。
week 定义 week 和 year 控件(不带时区)。
18、<lable> 标签
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
19、<mark> 标签
部分文本高亮显示
<p>Do not forget to buy <mark>milk</mark> today.</p>
20、<nav> 标签
用于制作导航栏
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
21、<noscript> 标签
<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>
22、<option> 标签和 <optgroup> 标签
<option> 标签的属性:
disabled disabled 规定此选项应在首次加载时被禁用。
label text 定义当使用 <optgroup> 时所使用的标注。
selected selected 规定选项(在首次显示在列表中时)表现为选中状态。
value text 定义送往服务器的选项值。
<optgourp>是用来对<option>进行分组的:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
23、<progress> 标签
用于表示进度条
<progress value="22" max="100"></progress>
24、<section> 标签
对文档中的内容进行分块或分段
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
25、<textarea> 标签
cols number 规定文本区域可见的列数
rows number 规定文本区域可见的行数
maxlength number 规定文本区域允许的最大字符数