Web 前端学习之 HTML 的标签

HTML 的标签

• 1. 文本样式标签
• 2. 文本格式化标签
• 3. 滚动标签
• 4.列表标签
• 5. 超链接与锚点链接标签
• 5.2 锚点链接
• 6. 图像标签
• 结束语

1. 文本样式标签

网页文本及段落的控制，与 Word 是不同的；多种多样的文字效果可使网页变得更加绚丽，为此 HTML 提供了文本样式标签 <font>，用来控制网页中文的字体、字号和颜色；
基本语法格式如下所示:

<font 属性=”属性值” >文本内容</font>

标签常用的属性如下：

• face：设置文字的字体，如微软雅黑、黑体、仿宋等；
• size：设置文字的大小，可取1到7之间的整数值；
• color：设置文字颜色；

注意：

• 文本区隔标签<span>是普通文本的一种容器，其内不能在内嵌其他标签；使用<span>标签来组合文档中国的行内元素；被<span>划分的不同区域，可应用不同的 CSS 样式；
• label 标签主要用于绑定一个表单元素，单击 label 标签的时候，被绑定的表单元素就会获得输入焦点；
• <label>标签为 input 元素定义标注（标记）；label 元素不会向用户呈现任何特殊效果；不过，若用户在 label 元素内单击文本，就会触发此控件；即，当用户选择该标签时，浏览器会 自动 将焦点转到标签相关的表单控件上；<label> 标签的for属性应当与相关元素的id属性相同；label 标记为标注标记，该标记支持与其他控件进行绑定，并代替被绑定控件触发相应的施加，绑定的方式是： 将for属性值指定为目的控件（绑定控件）的；一般情况下，在使用单选框和复选框时用label绑定比较常见；

2. 文本格式化标签

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

• <strong>或<b>：文字以粗体方式显示；
• </i>或<s>：文字以斜体方式显示；
• <del>或<s>：文字以删除线方式显示；
• <u>或<ins>：文字以加下划线方式显示；

3. 滚动标签

成对<marquee>用于产生滚动对象，基本格式如下：

<marquee>滚动对象</marquee>

<marquee>标签的可选属性如下：

• width 和 height：定义滚动标签的矩形范围的大小；
• bgcolor 和 align：设置背景颜色和对其方式；
• direction：定义滚动的速度

注意：

1. 滚动的对象，除了文字外，还可为一组图片（电影胶片效果）；
2. 如将<marquee>标签嵌入表格的单元标签内，此时对象就在单位格内滚动；
3. 若希望鼠标经过时停止滚动，则需要定义marquee 对象的事件及其处理方式；

4.列表标签

在 HTML 页面中，使用列表相关信息放在一起，会使用内容显得有条理，且易于控制外观样式；列表包含无序列表与有序列表两种类型；

4.1 无序列表

无序列表的各个列表项之间没有顺序之分，是并列的；
基本语法格式如下：

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	······
</ul>

上述语法中，<ul></ul>标签用于定义无序列表，<li></li>标签嵌套在<ul></ul>标签中，用来描述具体的列表项，每对<ul></ul>中至少应包含用一对<li></li>；
无序列表中 type 属性 的常用值有如下三种：

注意：

1. 不推荐使用无序列表的type属性，一般通过CSS样式替代；
2. <li>与</li>之间相当于一个容器，可容纳所有元素；
3. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入文字的做法是不允许的；

4.2 有序列表

有序列表即排序顺序的列表，其各个列表项按照一定的顺序排序定义；有序列表的基本语法格式如下：

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	······
</ol>

在上面的语法总，<ol></ol>标签中用定义有序列表，<li></li>为具体的列表项，和列表类似，每对<ol></ol>中至少包含一对<li></li>；
在有序列表中，通常使用 start 属性，其默认值为1；

5. 超链接与锚点链接标签

5.1 超链接

在HTML中创建超链接非常简单，只需用<a></a>标签环绕需被链接的对象即可；
基本语法格式如下：

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

在上面的语法中，<a>标签是一个行内标签，用于定义超链接，href 和 target 为其常用属性；
href 属性用来指定链接目标的 url 地址，当为<a>标签应用 href 属性时，就是具有了超链接的功能；
target 用于指定链接页面的打开方式，其取值可有如下几种：
1．_self 为默认值，表示在当前窗口打开；
2. _blank 表示窗口中打开
3. 取值为某个框架时，表示将目标页面在指定框架里打开；

注意：

1. 暂时没有确定链接目标时，通常将<a>标签的 href 属性值定义为 “#”（即 href=“#”），表示该链接暂时为一个空链接；
2. 不仅能创建文本超链接，且可以在网页中为各种网页元素，如图像、表格、音频、视频等添加超链接；
3. 当href属性值不是网页文件（如压缩文件），要进行文件的下载操作；
4. 对超链接也可定义事件并由客户端脚本来响应；

创建图像超链接时，在某些浏览器中，会为图像添加边框效果，从而影响页面的美观；
为了不影响页面的美观，通常需要去掉图像的边框效果，使图像正常显示；
去掉链接图像的边框很简单，只需将图像的边框定义为0即可，
代码如下所示：

<a href=”#”><img scr=”images/logo.gif” border=”0” /></a>

5.2 锚点链接

通过创建锚点链接，用户能够快速定位到目标的内容；
创建锚点链接分两步：
使用<a href=”页面地址#id名”>链接文本</a>创建链接文本；
使用相应的 id 名称标注到目标的位置；
页面锚点链接的一个测试示例，在浏览器地址栏中输入：
如 http://www.wustwzx.com/as/sy/07.html#mk3
注意： 若省略 # 号前的页面地址，就表示当前页面的锚点链接；

6. 图像标签

要想在网页中显示图像就需要使用图像标签，基本语法格式如下：

<img src=”图像 URL”>

其中，src 属性必填，用于指定图像文件的路径和文件名；图像可是相对当前页面的站内资源，也可以是绝对的网络资源；
引用站内资源文件的示例代码如下：

<img src=”logo.gif”/>/*或<img src=”.logo.gif”>,图像文件与网页文件位于同一目录*/
<img src=”images/logo.gif”/>/*或图像文件位于网页文件所在目录的子目录 images 里*/
<img src=”../images/logo.gif”>/*图像文件位于网页文件所在目录上一级子目录images*/

注意：

1. 图像文件格式可以是 .png、.gif、.jpg 和 .bmp，但不能是 .swf 的动画文件；
2. 对站内资源的引入，一般使用相对路径（相对于当前页面的路径）；
3. 网页里使用正斜杠 “/” 表示资源路径，而 Windows 文件路径使用反斜杠 “\”；
4. 表示上一级路径的 “…/” 可以联用；

结束语

若文章有帮到你，给个赞，收个藏，欢迎大家留言评论；
若文章有错误，欢迎大家指教。