排版标签
标题标签
<!-- 共6种标题 -->
<h1>第1级别标题</h1>
<h2>第2级别标题</h2>
<h3>第3级别标题</h3>
<h4>第4级别标题</h4>
<h5>第5级别标题</h5>
<h6>第6级别标题</h6>
段落标签
<p>段落内容</p>
换行标签
<br />
横线标签
<hr />
<div> 和 <span> 标签
它们两个没有语义,主要用来分区和布局,可以作为盒子,来装其它的标签。
<div></div>
<span></span>
文本格式化标签
标签 | 效果 |
<b></b> <strong></stong> | 文字加粗 |
<i></i> <em></em> | 文字斜体 |
<s></s> <del></del> | 文字删除线 |
<u></u> <ins></ins> | 文字下划线 |
在这些标签中,<b> <i> <s> <u> 4 个标签只能达到各自的效果,而不带有语义,所以不推荐使用。而<strong> <em> <del> <ins> 4 个标签不仅能达到不同的效果,还有强烈的语义,所以推荐使用。
图像标签<img>
格式如下:
<img src="xxx.jpg" width="104" height="142" />
<img> 标签的属性:
当只设置width 和 height 属性的其中一个时,图片会等比例缩放。
锚标签<a>
<a> 标签代表超级链接,其语法格式如下:
<!-- 当内容为文本时,表示为文本加链接 -->
<!-- 当内容为图像时,表示为图像加链接 -->
<a href="跳转目标" target="目标窗口的打开方式">内容</a>
href:用于指定链接目标的url地址,当href 的值为"#" 时表示空地址,不去跳转。
target:用于指定链接页面的打开方式,其取值有"_self"和"_blank"两种。
其中self 为默认值,表示在当前窗口打开链接,blank为在新窗口中打开方式。
锚点定位
锚点定位可以达到在当前页面跳转的效果。
使用锚点定位分两步:
① 为某个标签添加 id 属性。
② 在<a> 标签中添加 href="#id 值"。
例子如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚点定位练习</title>
</head>
<body>
<h3><a href="#China">去中国</a></h3>
<h3><a href="#America">去美国</a></h3>
<h3><a href="#England">去英国</a></h3>
<p id="China"> 这里是中国 </p>
<p id="America"> 这里是美国 </p>
<p id="England"> 这里是英国 </p>
</body>
</html>
<base> 标签
用于设置整体链接的打开状态,写在<head> 标签之间,如下所示:
<head>
<!-- 设置本页面中所有的链接的打开方式为_blank -->
<base target="_blank" />
</head>
列表标签
列表标签分为无须列表,有序列表和自定义列表三种,其中使用的最多的是无须列表,下面我们一一来看。
无序列表(重点)
无序列表用<ul></ul> 标签表示,它的列表项用<li></li>标签表示,需要注意的是<ul> 标签之中一般只放<li> 标签,不放其它的标签,而<li> 标签中可以存放其它标签。各个列表项之间没有顺序之分,是并列关系,其语法格式如下所示:
<ul>
<li>列表项1</li>
<li>列表项2</li>
...
</ul>
无序列表例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表演示</title>
</head>
<body>
<h3>下面是徐峥导演的四部电影</h3>
<ul>
<li>人在囧途</li>
<li>泰囧</li>
<li>港囧</li>
<li>囧妈</li>
</ul>
</body>
</html>
用浏览器打开之后效果如下:
有序列表(了解)
无序列表用<ol></ol> 标签表示,它的列表项也是用<li></li>标签表示,各个列表项之间存在顺序关系,其语法格式如下所示:
<ol>
<li>列表项1</li>
<li>列表项2</li>
...
</ol>
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表演示</title>
</head>
<body>
<h3>一天分三餐</h3>
<ol>
<li>早餐</li>
<li>午餐</li>
<li>晚餐</li>
</ol>
</body>
</html>
用浏览器打开之后如下所示:
自定义列表(知道)
自定义列表常用于对术语或名词进行解释和描述,自定义列表需要使用三种标签,以 <dl> 标签开始,每个自定义列表项以 <dt> 开始,每个自定义列表项的定义以 <dd> 开始,一个<dt>可以对应多个<dd>。
下面是小米官网的底部排版,这种排版就可以使用自定义列表写成:
自定义列表的语法格式如下所示:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表演示</title>
</head>
<body>
<dl>
<dt>清华大学</dt>
<dd>教学楼</dd>
<dd>图书馆</dd>
<dd>体育馆</dd>
<dt>教室</dt>
<dd>桌子</dd>
<dd>椅子</dd>
<dd>黑板</dd>
</dl>
</body>
</html>
用浏览器打开之后如下所示:
(本节完。)