HTML中的常用标签及简单注意事项

HTML标签

标签的语义化

所谓标签语义化，就是指标签的含义

为什么要有语义化标签

1、方便代码的阅读和维护

2、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

3、使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理地标签

语义是否良好，在于我们去掉CSS后，网页结构依然组织有序，并且具有良好的可读性

排版标签

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

标题标签

为了使网页更具语义化，经常在页面中用到标题标签，HTML提供了六个等级的标题

<h1>一级标题</h1>
<h2>二级标题</h2>
.....

段落标签

在网页中要把文字有条理的显示出来

<p></p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器大小自动换行

一行一个

水平线标签（单标签）

在网页中，常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明，这些水平线可以通过插入图片来实现， 也可以简单地通过标签来完成

<hr />

换行标签（单标签）

在HTML中，一个段落中的文字会从左到右依次排序，直到浏览器窗口的右端，然后自动换行，如果希望某段文本强制换行显示，就需要使用换行标签

<br />

div span标签

div span 是没有语义的，div表示分区，span表示跨度

<div></div>
<span></span>

默认div一行显示一个，span一行显示多个

文本格式化标签

在网页中，又是需要为文字设置粗体、斜体或者下划线效果，这是就需要使用HTML中的文本格式化标签，是文字以特殊的方式显示

<b>粗体</b><strong>XHTML推荐使用strong</strong>
<i>斜体</i><em>XHTML推荐使用em</em>
<s>删除线</s><del>XHTML推荐使用del</del>
<u>下划线</u><ins>XHTML推荐使用ins</ins>

图像标签（单标签）

HTML网页中，任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，

<img src="图像URL" />

img标记属性

src：URL：图像的路径

alt：文本 ：图像不能显示时的替换文本

title：文本，鼠标悬停时显示的内容

width：像素（XHTML不支持页面百分比%）：设置图像的宽度

height：像素（XHTML不支持页面百分比%）：设置图像的高度

border：数字：设置图像边框的宽度

链接标签

在HTML中创建超链接非常简单，只须用标签环绕需要被链接的对象即可

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

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

target：用于指定链接页面的打开方式，其取值有self和_blank两种，其中self为默认值，blank为在新窗口中打开方式

注意

1、外部链接 例如

<a href="http://www.baidu.com">百度</a>

2、内部链接 直接链接内部页面名称即可，比如

<a href="index.html">首页</a>

3、如果没有确定的链接目标，通常直接链接标签的href属性定义为”#“，表示该链接暂时为一个空链接

4、不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接

锚点标签

通过创建锚点链接，用户能快速定位到目标内容

创建锚点链接分为两步

1、使用”a href=”#id名“链接文本/a“创建链接文本

2、使用相应的id标注跳转的位置

<a href="#live"></a>
<h1 id="live">生活</h1>

base标签（单标签）

base可以设置整体链接的打开状态，可以直接设置页面中所有链接的打开方式

<base target="_blank" />

特殊字符

空格： 
<：&lt;
>：&gt;
&：&amp;
￥：&yen;
©（版权）：&copy;
®（注册商标）：&reg;
°：&deg;
±：&plusmn;
✖：&times;
➗：&divide;
²；&sup2;
³：&sup3;

注释标签

在HTML中有一种特殊的标签，如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签

<!-- 注释语句 -->

注释内容不会显示在浏览器中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到

列表标签

把…制成表，以表显示，列表最大的特点就是整齐、整洁、有序

无序列表ul

无序列表的各个列表项之间没有顺序之分，是并列的

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    ……
</ul>

注意

1、ul之间只能嵌套li，直接在ul标签中输入其他标签或者文字的做法都是不允许的

2、li之间相当于一个容器，可以容纳所有元素

3、无序列表会带有自己的样式属性

*list-style：none：取消li前的小点

有序列表ol

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义

<ol>
    <li></li>
    <li></li>
</ol>

自定义列表

自定义列表通常用于对术语或名词进行解释和描述，自定义列表项前没有任何符号

<dl>
    <dt>名词1</dt>
    <dd>名词1的解释1</dd>
    <dd>名词1的解释2</dd>
    
    <dt>名词2</dt>
    <dd>名词2的解释1<dd>
    <dd>名词2的解释2<dd>
</dl>