一、文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!--
em和strong
这两个标签都表示一个强调的内容，
em主要表示语气上的强调,em在浏览器中默认使用斜体显示
strong表示强调的内容，比em更强烈，默认使用粗体显示
-->
<p>
今天天气<em>真不错</em>！
</p>
<p>
<strong>
注意：如果你不认真上课，你就找不到好工作！
</strong>
</p>
<!--
i标签中的内容会以斜体显示
b标签中的内容会以加粗显示
h5规范中规定，对于不需要着重的内容而是单纯的加粗或者是斜体，
就可以使用b和i标签
-->
<p>
<i>我是i标签中的内容</i>
<b>我是b标签中的内容</b>
</p>
<!--
small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容
比如：合同中小字，网站的版权声明都可以放到small
-->
<p>
我是p标签中的内容<small>我是small标签中的内容</small>
</p>
<!--
网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，
比如：书名 歌名 话剧名 电影名 。。。
-->
<p>
<cite>《论语》</cite>是最喜欢的一本的书
</p>
<!--
q标签表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号
blockquote标签表示一个长引用（块级引用）
-->
<p>
子曰:<q>学而时习之不亦说乎！</q>
</p>
<div>
子曰:
<blockquote>
有朋自远方来，不亦说乎！
</blockquote>
</div>
<!--
使用sup标签来设置一个上标
-->
<p>2<sup>2</sup></p>
<p>赵薇<sup><a href="#">[1]</a></sup></p>
<!--
sub标签用来表示一个下标
-->
<p>H<sub>2</sub>O</p>
<!--
使用del标签来表示一个删除的内容
del标签中的内容，会自动添加删除线
-->
<p>
<del>17.75</del> <br /> 15.54 <br />
</p>
<!--
ins表示一个插入的内容
ins中的内容，会自动添加下划线
-->
<p>
我们的老师真<ins>好啊</ins>！
</p>
<!--
需要页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码
-->
<pre>
<code>
window.onload = function(){
alert("Hello World");
};
</code>
</pre>
</body>
</html>
二、列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
<style type="text/css">
/*
* 去掉项目符号
*/
ul{
list-style: none;
}
</style>
</head>
<body>
<!--
列表就相当于去超市购物时的那个购物清单，
在HTML也可以创建列表，在网页中一共有三种列表：
1.无序列表
2.有序列表
3.定义列表
-->
<!--
无序列表
使用ul标签来创建一个无序列表
使用li在ul中创建一个一个的列表项，
一个li就是一个列表项
通过type属性可以修改无序列表的项目符号
可选值：
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
注意：默认的项目符号一般都不使用！！
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
ul和li都是块元素
-->
<ul type="disc">
<li>西门大官人</li>
<li>柴大官人</li>
<li>许大官人</li>
<li>唐僧大官人</li>
</ul>
<ul type="square">
<li>林黛玉</li>
<li>贾宝玉</li>
<li>崔莺莺</li>
<li>孙悟空</li>
</ul>
<ul type="circle">
<li>武松</li>
<li>林冲</li>
<li>宋江</li>
<li>小石头</li>
</ul>
<!--
有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型
可选值：1，默认值，使用阿拉伯数字
a/A 采用小写或大写字母作为序号
i/I 采用小写或大写的罗马数字作为序号
ol也是块元素
-->
<ol type="1">
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<ol type="a">
<li>结构</li>
<li>表现</li>
<li>行为</li>
</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>
<!--
定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表
dl中有两个子标签
dt ： 被定义的内容
dd ： 对定义内容的描述
同样dl和ul和ol之间都可以互相嵌套
-->
<dl>
<dt>武松</dt>
<dd>景阳冈打虎英雄，战斗力99</dd>
<dd>后打死西门庆，投奔梁山</dd>
<dt>武大</dt>
<dd>著名餐饮企业家，战斗力0</dd>
</dl>
</body>
</html>
