通过前四篇内容,我们对html有了一个简单的认识。简单的页面通过html就可以写出来,当我们准备好编辑器与浏览器就可以开始我们的代码之旅啦。页面展示的内容不能是简单的一整页文字,它有丰富内容,比如图片,段落,列表等等。要想实现这些,就需要借助各种元素。所以这篇我们就来学习一起文字标签。
标题和段落
- 标题:
<h1>
、<h2>
、<h3>
、<h4>
、<h5>
、<h6>都是双标签,数字越大,标题越小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
- 段落:<p></p>,将里面的内容变成一个段落。还记得我们提到的块级和行内元素吗?段落是不会跟其他内容连在一起的,所以p标签是块级元素。那么行内元素怎么表示呢?
<p>我是一个段落</p>
- 行内元素:<span></span>用来组合文档中的行内元素
<span>我是一个行内元素</span>
列表
列表也是很常见的元素,比如我们常见网页上新闻,列表有三种类型,有序列表、无序列表、自定义列表。
- 无序列表:<ul><li></li></ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</body>
</html>
<ul>包裹着整个列表,<li>包裹的是列表的每一项
- 有序列表:有序列表跟无序类似,就是有序列表按照一定的顺序列出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
</body>
</html>
- 自定义列表:<dl><dt></dt><dd></dd></dl>。简单来说就是带有描述的列表。dt一般包裹着描述,dd一般包裹着描述的标题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
</dl>
</body>
</html>
列表之间是可以嵌套的,比如在无序列表<li>里面包裹一个有序列表。注意,嵌套时标签一定不能混用!
文字样式
一些标签可以改变,内容的样式,比如加粗、斜体等
- <em>:强调。用于强调一句话中的某个字。
- <strong>:非常重要。用于标注非常重要的词汇。
- <i>:斜体。被用来传达传统上用斜体表达的意义:外国文字,分类名称,技术术语,一种思想……
- <b>:加粗。被用来传达传统上用粗体表达的意义:关键字,产品名称,引导句……
- <u>:下划线。被用来传达传统上用下划线表达的意义:专有名词,拼写错误……
这些元素我们光看是感受不到魅力的,只有动手多去敲才能体会到每个标签的魅力,理解的也能更加深刻!