二、常用标签和属性

1. 基本标签

主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

1.1 标题标签 h

<h></h>标签用来显示标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

1.2 段落标签 p

<p></p>标签用来显示段落

<p>这是第一个段落标签</p>
<p>这是第二个段落标签</p>

1.3 水平线标签 hr

<hr />标签用来显示一条水平线

<p>这是第一个段落标签</p>
<hr>
<p>这是第二个段落标签</p>

1.4 换行标签 br

<br />标签用来换行

这句话需要<br>换行

1.5 div和span

div和span是没有语义的,是我们网页布局最主要的2个盒子。

目前先知道每个div独占一行，而多个span可以在一行显示

<div>div盒子</div>
<div>div盒子</div>

<span>span盒子</span>
<span>span盒子</span>

2. 文本格式化

<b>文本加粗</b>
<strong>文本加粗</strong>

<i>文本倾斜</i>
<em>文本倾斜</em>

<s>文字删除线</s>
<del>文字删除线</del>

<u>文字下划线</u>
<ins>文字下划线</ins>

<sup>上标文本</sup>
<sub>下标文本</sub>

3. 标签属性

• 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

• 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

• 采取键值对的格式 key="value" 的格式

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> 
<a href="http://www.runoob.com">这是一个链接</a>

下面列出了适用于大多数 HTML 元素的属性：

属性	描述
class	规定元素的类名（classname）
id	规定元素的唯一 id
style	规定元素的行内样式（inline style）
title	规定元素的额外信息（可在工具提示中显示）
accesskey	设置访问元素的键盘快捷键。
contenteditable（H5）	规定是否可编辑元素的内容。
contextmenu（H5）	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*（H5）	用于存储页面的自定义数据
dir	设置元素中内容的文本方向。
draggable（H5）	指定某个元素是否可以拖动
dropzone（H5）	指定是否将数据复制，移动，或链接，或删除
hidden	hidden 属性规定对元素进行隐藏。
lang	设置元素中内容的语言代码。
spellcheck（H5）	检测元素是否拼写错误
tabindex（H5）	设置元素的 Tab 键控制次序。
translate（H5）	指定是否一个元素的值在页面载入时是否需要翻译

4. 图像标签 img

• img是单标签，可以在属于img的区域加载图片
• src属性为图片的地址

<img src="链接地址" alt="some_text">

4.1 alt和title

alt：当浏览器无法载入图像，或者图片加载失败，会以文字的形式显示出来

title：鼠标移入图片区域时，会出现一个悬浮框显示文字说明

<img src="https://www.runoob.com/images/pulpit.jpg" alt="图片加载失败" title="图片说明">

5. 链接标签 a

<a></a>标签可以打开一个网址

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

target属性中，_blank只会打开一个新窗口，blank会无限打开新窗口

5.1 a标签的属性

href：用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能

target：于指定链接页面的打开方式，主要有以下几个值

属性值	描述
self	默认值，在新窗口打开页面，且只在一个新窗口打开
_self	在自身窗口打开新页面
blank	在新窗口打开页面，且只在一个新窗口打开
_blank	在新窗口打开页面，无限打开新的窗口

5.2 src和href

**一句话概括:**src 是引入资源的 href 是跳转url的

1. src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
2. src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
3. href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

注意：

1. 外部链接 需要添加 http://
2. 内部链接 直接链接内部页面名称即可 比如 <a href="index.html"> 首页
3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

5.3 锚点定位

5.3.1 跳转当前页面锚点

1. 给需要跳转的位置的标签添加属性id
2. 使用href="#id名"定义a标签

<a href="#address">跳转到锚点位置</a>
<div style="height:2000px"></div>
<p id="address">锚点位置</p>

5.3.2 跳转其他页面锚点

href属性设置：href="链接#id名"

<a href="网址链接#锚点id">跳转到锚点位置</a>

6. 注释标签

<!-- 注释语句 --> 快捷键是： ctrl + / 或者 ctrl +shift + /

**团队约定：**注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

7. 路径

7.1 相对路径

以引用文件所在位置为参考基础，而建立出的目录路径

相同路径分类	符号	说明
同一级路径	./	图像文件位于HTML文件同一级 如
下一级路径	/	图像文件位于HTML文件下一级 如
上一级路径	../	图像文件位于HTML文件上一级 如

7.2 绝对路径

指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

例如，"D:\web\img\logo.gif"

或者完整的网络地址 "http://www.baidu.com/"

8. 特殊字符

• 在 HTML 中，某些字符是预留的。
• 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
• 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：

&entity_name;
或
&#entity_number;

页面中的效果

大于号：>

8.1 HTML字符实体

显示结果	描述	实体名称	实体编号
	空格	 	 
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;
"	引号	&quot;	&#34;
'	撇号	&apos; (IE不支持)	&#39;
￠	分	&cent;	&#162;
£	镑	&pound;	&#163;
¥	人民币/日元	&yen;	&#165;
€	欧元	&euro;	&#8364;
§	小节	&sect;	&#167;
©	版权	&copy;	&#169;
®	注册商标	&reg;	&#174;
™	商标	&trade;	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;