1

<!doctype *html*>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- 
			在HTML中，一些如< >这种特殊字符是不能直接使用，
				需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）
				浏览器解析到实体时，会自动将实体转换为其对应的字符
			实体的语法：
				&实体的名字;
					<  &lt;
					>  &gt;
					空格  &nbsp;
					版权符号 &copy;
		-->
		a&lt;b&gt;c
		<p>&copy;&divide;今天天气&nbsp;&nbsp;&nbsp;好晴朗，处处好风光</p>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<p>
	子曰:<q>学而时习之不亦说乎！</q>
</p>
		
<div>
	子曰:
	<blockquote>
		有朋自远方来，乐呵乐呵！
	</blockquote>
</div>

1
2
3
4
5
6
7

<pre>
	<code>
		window.onload = function(){
			alert("Hello World");
		};
	</code>
</pre>

 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<!-- 
列表就相当于去超市购物时的那个购物清单，
在HTML也可以创建列表，在网页中一共有三种列表：
	1.无序列表
	2.有序列表
	3.定义列表
	
无序列表
	- 使用ul标签来创建一个无序列表
	- 使用li在ul中创建一个一个的列表项，一个li就是一个列表项
			
通过type属性可以修改无序列表的项目符号
	可选值：
		disc，默认值，实心的圆点
		square，实心的方块
		circle，空心的圆
	注意：默认的项目符号我们一般都不使用！！
	如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置	
	!!!ul和li都是块元素	
-->
<ul>
	<li>西门大官人</li>
	<li>柴大官人</li>
	<li>许大官人</li>
	<li>唐僧大官人</li>
</ul>
		
<!-- 
	有序列表和无序列表类似，只不过它使用ol来代替ul
	有序列表使用有序的序号作为项目符号
	type属性，可以指定序号的类型
		可选值：1，默认值，使用阿拉伯数字
				a/A 采用小写或大写字母作为序号
				i/I 采用小写或大写的罗马数字作为序号
				
	ol也是块元素			
-->
<ol type="I">
	<li>结构</li>
	<li>表现</li>
	<li>行为</li>
</ol>
		
<!-- 
	列表之间都是可以互相嵌套，可以在无序列表中放个有序列表
		也可以在有序列表中放一个无序列表
-->	
<p>菜谱</p>
<ul>
	<li>
		鱼香肉丝
		<ol>
			<li>鱼</li>
			<li>香</li>
			<li>肉丝</li>
		</ol>
	</li>
	<li>
		宫保鸡丁
		<ul>
			<li>宫保</li>
			<li>鸡丁</li>
		</ul>
	</li>
	<li>青椒肉丝</li>
</ul>		

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<!--
	定义列表用来对一些词汇或内容进行定义
	使用dl来创建一个定义列表
		dl中有两个子标签
			dt ： 被定义的内容
			dd ： 对定义内容的描述
	同样dl和ul和ol之间都可以互相嵌套		
-->
<dl>
	<dt>武松</dt>
	<dd>景阳冈打虎英雄，战斗力99</dd>
	<dd>后打死西门庆，投奔梁山</dd>
	<dt>武大</dt>
	<dd>著名餐饮企业家，战斗力0</dd>
</dl>

1
2
3
4
5

<!-- center标签中的内容，会默认在页面中居中显示 
我们可以将要居中的元素，全都放到center中-->		
<center>
	<p>我是一个p标签</p>
</center>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<!-- 
使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接	
属性：
	href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址
		-->
<a href="http://www.baidu.com">我是一个超链接</a> <br /><br />
<a href="http://www.baidu1234567.com">我是一个超链接</a> <br /><br />
		
<!-- 
a标签中的target属性可以用来指定打开链接的位置
可选值：
	_self，表示在当前窗口中打开（默认值）
	_blank，在新的窗口中打开链接
	可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
		-->
<a href="demo03.html" target="tom">我是一个超链接</a>
<iframe src="demo02.html" name="tom"></iframe>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!-- 
使用内联框架可以引入一个外部的页面
使用iframe来创建一个内联框架
属性：
src ：指向一个外部页面的路径，可以使用相对路径
width：
height：
name ：可以为内联框架指定一个name属性

在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索		
-->
<iframe src="demo02.html" name="tom"></iframe>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<!-- 
	使用meta标签还可以用来设置网页的关键字
-->
<meta name="keywords" content="HTML5,JavaScript,前端,Java" />
		
<!-- 
	还可以用来指定网页的描述
	搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中
-->
<meta name="description" content="发布h5、js等前端相关的信息" />
		
		
<!-- 
	使用meta可以用来做请求的重定向
	<meta http-equiv="refresh" content="秒数;url=目标路径" />
-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 
			在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，
				换行也会当成一个空格解析。
			在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签	
		-->
		<p>
			锄禾日当午，<br />
			汗滴禾下土，<br />
			谁知盘中餐，<br />
			粒粒皆辛苦。<br />
		</p>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<header>：头部标签，代表 网页 或 section 的页眉。通常包含h1-h6元素或hgroup。
<nav>：导航标签,素代表页面的导航链接区域。用于定义页面的主要导航部分。
<article>：内容标签,最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容.
<section>：定义文档某个区域,代表文档中的 节 或 段，段可以是指一篇文章里按照主题的分段；节可以是指一个页面里的分组。
<aside>：侧边栏标签,被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。
<footer>：尾部标签，代表 网页 或 section 的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
<hgroup>元素代表 网页 或 section 的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。
	<hgroup>
	   <h1>HTML 5</h1>
	   <h2>这是一篇介绍HTML 5语义化标签和更简洁的结构</h2>
	</hgroup>
hgroup使用注意：
		如果只需要一个h1-h6标签就不用hgroup
		如果有连续多个h1-h6标签就用hgroup
		如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签