HTML

HTML是超文本标记语言

XHTML

XHTML是更严谨的更纯净的HTML

HTML5

HTML5是下一代HTML


html元素和属性

html元素指从开始标签到结束标签的所有代码,包括元素内容:

html元素可以嵌套。

1
2
3
<p> This is paragrph </p>
<p></p> # 空内容的元素
<br /> # 空元素,在开始标签中关闭

html标签可以拥有属性,属性总是以name=‘value’的形式出现,属性总是在html元素的开始标签中规定。

1
<a href="http://www.test.com">This is a link</a>

html属性和值大小写不敏感,推荐使用小写,始终给属性值加引号。

html的全局属性(标准属性)

参考:

http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

html的事件属性

参考:

http://www.w3school.com.cn/tags/html_ref_eventattributes.asp

html字符实体

参考:

http://www.w3school.com.cn/tags/html_ref_entities.html


html基本标签

DOCTYPE

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
# 文档类型
<!DOCTYPE html>
<html>

<head>
...
</head>

<body>
...
</body>

</html>

html

1
2
3
4
5
6
7
8
# html文档,支持全局属性
<html>
...
</html>

# mainfest属性,定义一个url,描述文档缓存信息

# xmlns属性,定义XML的namespace属性

注释

1
2
# 注释, 浏览器会忽略注释,没有任何属性
<!-- This is a comment -->

空格

1
&nbsp;    # 空格

head

head

可以在head标签中使用的标签: link, style, base, meta, script, title.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# html文档的头部, head支持全局属性
<head>
<base>
<meta>
<script>
<title>
...
</head>

# profile属性

title

定义文档标题,支持全局属性。

1
2
3
# dir属性规定元素中内容的文本方向
# lang属性规定元素中内容的语言编码
# xml:lang属性规定xhtml文档中元素内容的语言编码

base

定义页面所有的链接的默认地址和默认目标。

1
2
# href属性规定页面中所有相对链接的基准url
# target属性规定在何处打开页面中的链接

meta

定义元数据,支持全局属性

1
2
3
4
# content属性
# http-equiv
# name
# scheme

body

body

1
2
3
4
# html文档的主体, 支持样式,支持全局属性和事件属性
<body>
...
</body>

h1-h6

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# 标题,浏览器会自动在标题前后添加空行,支持样式
<h1>This is the max heading</h1>
...
<h6>This is the min heading</h6>

# 支持部分全局属性
# id,class,title,style,dir,lang,xml:lang

# 支持部分事件属性
# onclick,ondblclick,onmousedown,onmouseup,onmouseover,
# onmousemove, ommouseout,onkeypress,onkeydown,onkeyup

hr

1
2
# 水平线分割线,支持样式,支持全局属性和事件属性
<hr />

段落

p

1
2
# 段落, 浏览器会自动在段落前后添加空行,支持样式,支持全局属性和事件属性
<p>This is a paragraph</p>

br

1
2
3
4
# 空行, 支持全局属性和事件属性
<br />

# clear属性

链接和图像

URL: Uniform Resource Locator

1
2
scheme://host.domain:port/path/filename
scheme: http/https/ftp/file

url只能使用ASCII字符集。

参考:

http://www.w3school.com.cn/tags/html_ref_urlencode.html

a

支持全局属性和事件属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
# href属性定义指向另一个文档的链接
<a href="http://www.test.com">Click me as link</a>

# target属性,定义被链接的文档在何处显示, blank在新窗口显示,rect, circle, poly
<a href="http://www.test.com" target="_blank">Link</a>

# name属性定义文档内的书签
<a href="http://www.test.com" name="label">Link</a>

# hreflang

# rel

# download

# media

# type

img

支持全局属性和事件属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
# src属性定义源
<img src="url" />

# alt属性,当图像不能显示,就显示alt的默认值。
<img src="http://www.test.com/images/test.img" alt="default value"/>

# height

# ismap

# longdesc

# usemap

# width

map

支持全局属性和事件属性

1
2
3
4
5
6
# id属性为map定义唯一的名称
<map id="planetmap">
...
</map>

# name属性为image-map规定的名称

area

支持全局属性和事件属性

1
2
3
4
5
6
# alt
# coords
# href
# nohref
# shape
# target

样式

内联样式,定义在html元素内部。style样式属性可以包含任何的css属性。

内联样式优先级最高。

1
2
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px">A paragraph</p>

style

内部样式表,位于head标签内部。支持全局属性和事件属性

优先级仅次于内联样式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

# type属性规定样式表的MIME类型

# media属性规定不同的媒体类型

外部样式表,支持全局属性和事件属性

优先级仅高于浏览器缺省值。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

# href属性规定被链接文档的位置
# hreflang属性规定被链接文档中文本的语言
# media属性规定被链接文档被显示在什么设备
# rel属性规定当前文档与被链接文档的关系
# sizes属性规定rel='icon'的尺寸
# type属性规定被链接文档的MINE类型

div

分类块级元素,支持样式,支持全局属性和事件属性

1
<div> 使用样式属性

span

分类行内元素,支持样式,支持全局属性和事件属性

1
<span> 定义文档中的行内的块

格式化

文本格式化标签

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<b> 定义粗体文本
<big> 定义大号字
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

计算机输出标签

1
2
3
4
5
6
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<tt> 定义打字机代码
<var> 定义变量
<pre> 定义预格式文本

引用和术语标签

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<abbr> 定义缩写
<p><abbr title="Hyper Text Markup Language">HTML</abbr>is perfect.</p>

<acronym> 定义首字母缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用
<cite> 定义著作的标题
<dfn> 定义一个项目或缩写

表格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<table border="1">
<caption>The title</caption>
  <tr>
    <th>Month</th>
    <th>Saving</th>
  </tr>
  <tr>
    <td>Jan.</td>
    <td>$100</td>
  </tr>
</table>

table

定义表格,支持事件属性和全局属性

1
2
3
4
5
6
7
# border属性规定表格边框宽度
# cellpadding属性规定单元边沿与其内容之间的空白
# cellspacing属性规定单元格之间的空白
# frame属性规定外侧边框的哪个部分是可见的
# rules属性规定内侧边框的哪个部分是可见的
# summary属性规定表格的摘要
# width属性规定表格的宽度

caption

定义表格标题,支持样式,支持事件属性和全局属性

tr

定义表格的行,支持事件属性和全局属性

1
2
3
4
# align属性定义表格内容对齐方式
# char属性规定根据哪个字符来进行文本对齐
# charoff属性规定第一个对齐字符的偏移量
# valign属性规定表格中内容的垂直对齐方式

th td

th定义表格表头,支持全局属性和事件属性

td定义表格单元,支持全局属性和事件属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# abbr属性规定单元格中内容的缩写版本
# align属性规定单元格内容的水平对齐方式
# axis属性对单元进行分类
# char
# charoff
# colspan
# headers
# rowspan
# scope
# valign

col

定义用于表格的属性

colgroup

定义表格的组


列表

ol

定义有序列表,支持全局属性和事件属性

1
2
3
4
5
6
7
8
<ol>
  <li>first one</li>
  <li>second one</li>
</ol>

# reversed属性规定列表顺序为降序
# start属性有序列表的起始值
# type属性规定在列表中使用的标记类型

ul

定义无序列表,支持样式,支持全局属性和事件属性

1
2
3
4
<ul>
  <li>coffee</li>
  <li>tea</li>
<ul>

li

定义列表项,支持样式,支持全局属性和事件属性

dl dt dd

dl定义定义列表,dt定义定义项目,dd定义定义的描述,都支持全局属性和事件属性

1
2
3
4
<dl>
  <dt>computer</dt>
  <dd>used to monitor...</dd>
</dl>

网站布局

使用html5的网站布局标签.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<head>
<style>
header {}
nav {}
section {}
footer {}
</style>
</head>

<body>
<header>...</header>
...
<footer>...</footer>
</body>

也可以使用id选择器:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<head>
<style>
#header {}
...
#footer {}
</head>
</style>

<body>
<div id="header">...</div>
...
<div id="footer">...</div>
</body>

header标签

section标签

article标签

aside标签

footer标签

details标签

summary标签


框架

框架可以在一个html添加多个页面。

垂直框架:

1
2
3
4
<frameset cols="50%, 50%">
  <frame src="a.html">
  <frame src="b.html">
</frameset>

水平框架:

1
2
3
4
<frameset rows="50%, 50%">
  <frame src="a.html">
  <frame src="b.html">
</frameset>

混合框架:

1
2
3
4
5
6
7
8
9
<frameset rows="50%, 50%">
<frame src="a.html">

<frameset cols="%25, 75%">
<frame src="b.html">
<frame src="c.html">
</frameset>

</frameset>

frameset标签

1
2
3
4
5
# cols属性定义框架中列的数目和尺寸
# rows属性定义框架中行的数目和尺寸

# 标准属性:
id,class,title,style

frame标签

定义frameset中的一个特定的窗口。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# frameborder属性规定是否现实框架周围的边框
# longdesc属性
# marginheight属性
# marginwidth属性
# name属性
# scrolling属性
# src属性

# 标准属性:
id,class,title,style

iframe标签

内联框架。

把内容放在iframe标签中,在无法理解iframe的浏览器显示。

支持事件属性和全局属性。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
# frameborder属性
# height属性
# width属性
# longdesc属性
# marginheight属性
# marginwidth属性
# name属性
# scrolling属性
# src属性
# sandbox
# seamless
# srcdoc

noframes标签


脚本

在html中插入javascript等脚本

script标签

定义客户端脚本,支持全局属性

直接嵌入javascript代码时注意代码中如果有</script>需要转义.

通过src属性指定外部javascript脚本的script标签中不能包含额外的javascript代码.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- 直接嵌入javascript代码 -->
<script type="text/javascript">
document.write("hello javascript")
</script>

<!-- 指定外部javascript脚本 -->
<script type="text/javascript" src="example.js"></script>

# type 可选,指定脚本MIME类型,比如text/javascript
# src 可选,表示指定的外部文件
# charset 可选,表示通过src属性指定的代码的字符集
# defer 可选,表示外部脚本可以延迟到文档完全被解析和显示之后再执行
# async 可选,表示应该立即下载外部脚本

<!DOCTYPE html>
<html>
<head>
  ...head content...
</head>
<body>
  ...body content...

  <!-- 页面内容先呈现,然后按顺序加载和解析脚本 -->
  <script type="text/javascript" src="example.js"></script>

  <!-- defer表示整个页面解析完后才加载和解析脚本 -->
  <script type="text/javascript" defer="defer" sr"example.js"></script>

  <!-- async表示在加载页面期间异步加载和解析脚本 -->
  <script type="text/javascript" async src="example.js"></script>

</body>
</html>

noscript标签

针对早期不支持javascript的浏览器,为不支持客户端脚本的浏览器定义替代内容,支持全局属性

当浏览器不支持,就显示noscript标签的内容,否则就不显示.

1
2
<script type="text/javascript" sr"example.js"></script>
<noscript>Your browser does not support javascript</noscript>