该篇主要介绍HTML标签，接上篇 HTML 初识
div span 标签
div span 没有语义，是布局网页的2个盒子。div 是 division 缩写，分区，分割的意思，常用来组合网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div && span</title>
</head>
<body>
<div>This is div</div>
<div>This is div</div>
<div>This is div</div>
<span>This is span</span>
<span>This is span</span>
<span>This is span</span>
</body>
</html>
This is div
This is div
This is div
This is span This is span This is span
文本格式化标签
在网页中，有时需要为文字设置粗体，斜体，下划线等效果，需要用到 HTML 中的文本格式化标签，使文字以特殊方式显示。
| 标签 | 效果 |
|---|---|
| <b></b>,<strong></strong> | 粗体显示(XHTML推荐使用strong) |
| <i><i>,<em></em> | 斜体显示(XHTML推荐使用em) |
| <s></s>,<del></del> | 加删除线(XHTML推荐使用del) |
| <u></u>,<ins></ins> | 加下划线(XHTML不赞成使用u) |
b,i,s,u没有强调的意思，strong,em,del,ins有强调的意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div && span</title>
</head>
<body>
<b>你好，世界</b>
<strong>你好，世界</strong>
<i>你好，世界</i>
<em>你好，世界</em>
<s>你好，世界</s>
<del>你好，世界</del>
<u>你好，世界</u>
<ins>你好，世界</ins>
</body>
</html>
图像标签
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | 文本 | 图像的路径 |
| alt | 文本 | 图像不能显示时的代替文本 |
| title | 文本 | 鼠标悬停时显示的文本 |
| width | 像素(XHTML不支持%页面百分比) | 图像宽度 |
| height | 像素(XHTML不支持%页面百分比) | 图像高度 |
| border | 数字 | 图像边框 |
<img src="../Html_Css/1.png" alt="This is a car" title="Volvo" width="50" height="70" border="5"/>
链接标签
<a href="http://www.baidu.com">baidu</a>
<a href="http://taobao.com" target="_blank">taobao</a>
<a href="index.html">homepage</a>
<a href="#">Empty
<a href="http://zcool.com.cn"><img src="1.png" /></a>
- href:链接目标的地址（Hypertext Reference）
- target:链接页面打开方式，self 为默认，blank 为新窗口打开
- 内部链接，直接写页面名称
- 没有确定链接目标，href 定义为"#"，表示一个空链接
- 不仅文本可以创建超链接，图像，表格，视频，音频都可添加超链接
锚点定位标签
通过创建锚点链接，能够快速定位到目标内容
- <a href="#id name">链接文本</a>
- 使用响应的id名称跳转到目标位置
<h2>目录</h2>
<a href="#spjl">生平经历</a> <br />
<a href="#wzjc">为政举措</a> <br />
<a href="#lspj">历史评价</a> <br />
<a href="#jzcy">家族成员</a> <br />
<h3 id="spjl">生平经历</h3>
<p>
秦始皇于秦昭王四十八年正月（公元前259年1月27日）出生， [10-12] 出生地在当时的邯郸廓城（大北城）温明殿遗址和丛台以南，在今城内中街以东，丛台西南的朱家巷一带。是秦庄襄王的中子，商朝重臣恶来的第35世孙，嬴姓赵氏，名政。
</p>
Base 标签
base 可以设置整体链接的打开状态，如下所有的链接都在新窗口打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<base target="_blank">
</head>
<body>
<a href="http://taobao.com">taobao</a>
<a href="http://baidu.com">baidu</a>
</body>
</html>
特殊字符标签
注释标签
<!-- 注释有利于团队协作 -->
路径
相对路径
- 图像和HTML文件处于同一个文件夹：只需输入图像名称即可，如 <img src="car.jpg" />
- 图像文件位于HTML文件下一级的文件夹：输入文件夹和文件名，如 <img src="img/car.jpg" />
- 图像文件位于HTML文件上一级，需要加入"../"，如果是两级，需要使用"../../"，如 <img src="../logo.gif" />
绝对路径
- 网络图片路径
- 本地图片路径
列表标签
无序列表
<ul>
<li>BMW</li>
<li>Volvo</li>
<li>Geely</li>
</ul>
有序列表
<ol>
<li>BMW</li>
<li>Volvo</li>
<li>Geely</li>
</ol>
自定义列表
<dl>
<dt>BMW</dt>
<dd>This is BMW</dd>
<dd>Germany Car</dd>
<dt>Geely</dt>
<dd>This is Geely</dd>
<dd>China Car</dd>
</dl>
网友评论