相信大家常常会打开浏览器搜索一些内容或者浏览一些网站,在浏览器的页面上会呈现很多内容,但是具体的形式无非就是图片、文字以及链接(可以点击进入另一个页面的特殊文字),其中文字承载着巨大的作用,传递着各种各样的信息,同时网页的问题可能作为标题、作为段落而存在,而且我们还可以为这些问题添加一些效果比如加粗、倾斜等等,这些都可以通过HTML实现,实际也就是因为这些内容采用了不同的标签,在本节中我们就来学习这些内容。

文本标签

 <!-- 标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 标题注意事项 -->
<h7>标题7</h7>
<h8>标题8</h8> <!-- 段落标签 -->
<p>有情不必终老,暗香浮动恰好,无情未必就是决绝,我只要记着:初见时彼此的微笑。</p>
<p>
<p>有情不必终老,暗香浮动恰好,</p>
<p>无情未必就是决绝,我只要记着:</p>
初见时彼此的微笑。
</p> <!-- 字体加粗或倾斜 -->
<p>人<strong>最宝贵</strong>的是生命,生命对人来说只有一次。人的一生应当这样度过:当他回首往事时,<em>不会因为碌碌无为,虚度年华而悔恨,也不会因为为人卑劣,生活庸俗而愧疚。</em></p>
<p>人<b>最宝贵</b>的是生命,生命对人来说只有一次。人的一生应当这样度过:当他回首往事时,<i>不会因为碌碌无为,虚度年华而悔恨,也不会因为为人卑劣,生活庸俗而愧疚。</i></p>

标题标签

HTML中针对标题提供了 <h1>~<h6>六种形式的标签,而且从<h1>到<h6>字体都有加粗,字号逐渐变小,这就是标题标签的一些特征。另外需要我们注意的是并不存在这六种标签之外的标题标签,不要试图设置<h7>之类的标签,这种形式的标签浏览器会当作普通的文本对待,这点需要我们特别注意。

段落标签

HTML中段落标签是<p>,表示一段文字,是否换行取决于视图窗口的大小。在使用段落标签时注意不存在在段落标签中嵌套段落标签的形式,因为这种操作没有实际的意义,浏览器对于这种情况会在嵌套标签的开始和结尾添加一个结束标签,纠正我们的错误,但是这种处理操作会影响页面的响应速度。

字体装饰

加粗字体建议使用<strong>,不要使用<b>标签,同样倾斜字体应该使用<em>标签而不建议使用<i>标签,之所以这样做主要是为了保证代码的语义良好。

链接标签

 <!-- 超链接 -->
<a href="http://www.baidu.com/">百度</a>
<a href="http://www.baidu.com/" target="_self">百度</a>
<a href="http://www.baidu.com/" target="_blank">百度</a>
<!-- 锚链接 -->
<a href="#good">优秀段落</a>
<h2>优秀段落1</h2>
<p>
我不能想像这样一个人,他认为开棋的时候先走马而不是先走卒对他来说是英勇的壮举,而在象棋指南的某个犄角里占上一席可怜的位置就意味着声名不朽,我不能想像,一个聪明人竟然能够在10年、20年、30年、40年之中一而再、再而三地把他全部的思维能力都献给一种荒诞的事情——想尽一切办法把木头棋子王赶到木板棋盘的角落里,而自己却没有发狂成为疯子。
</p>
<h2>优秀段落2</h2>
<p>
我不能想像这样一个人,他认为开棋的时候先走马而不是先走卒对他来说是英勇的壮举,而在象棋指南的某个犄角里占上一席可怜的位置就意味着声名不朽,我不能想像,一个聪明人竟然能够在10年、20年、30年、40年之中一而再、再而三地把他全部的思维能力都献给一种荒诞的事情——想尽一切办法把木头棋子王赶到木板棋盘的角落里,而自己却没有发狂成为疯子。
</p>
<!-- 锚点 -->
<a name="good">优秀段落</a>

链接就是在网页中可以点击之后跳转到其他页面的文字或者图片,这些功能的实现需要借助HTML中的<a>标签实现,在这里我们需要注意锚链接的实现方式。所谓锚链接就是点击当前页面的某个位置可以跳转到当前页面的另一个位置,这种操作我们称之为锚链接,其实现过程如下:

首先,在目标位置设置锚点 <a name="锚点名称">内容描述</a>;

最后,在操作位置设置链接 <a href="#锚点名称">描述文本</a>

另外和链接密切相关的就是链接所指向的地址,而地址相关的内容又有相对路径和绝对路径的分别,关于它们的内容总结如下:

绝对路径,对路径的完整描述,常常指向站外的某个地址;

相对路径,相对当前路径的描述,一般指向的是站内的某个地址;

图片标签

<img src=”图片地址” alt=”图像替代文字” title=”鼠标悬停提示文字”
width =”图片宽度” height=”图片高度”/>

如上所示就会在网页中插入一张图片,这里我们需要注意的是要尽可能的设置图片标签的 title、alt属性,这样可以增强用户的操作体验,但是不建议设置width、height相关的额属性,这种样式需要CPU进行相应的处理。

2. HTML常用标签的更多相关文章

  1. HTML常用标签

    HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...

  2. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  3. HTML常用标签总结

    HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...

  4. html新增一些常用标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. [刘阳Java]_MyBatis_映射文件的常用标签总结_第5讲

    MyBatis中常用标签的总结,简单给出自己的总结 MyBatis映射文件中的标签使用介绍1.<select>:用于编写查询语句用的标签 id:表示当前<select>标签的唯 ...

  6. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  7. HTML基础(一)——一般标签、常用标签和表格

    第一部分  HTML <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...

  8. HTML-学习笔记(常用标签)

    本篇博客讲一讲HTML中的标签 HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...

  9. 帝国CMS文章随机调用等一些常用标签

    1.帝国CMS文章随机调用等一些常用标签 [e:loop={'news',10,18,0,'newstime>UNIX_TIMESTAMP()-86400*7','onclick desc'}] ...

  10. 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

随机推荐

  1. CSS布局之传统方法

    传统的页面布局依赖于盒模型+流动模型(flow)+浮动模型(float)+层模型(layer)来实现页面的布局,具体方法是通过盒模型+display属性+float属性+position属性来加以实现 ...

  2. 「资料/转载」HTML标签英文单词对照表

    <!--> / 注释 <!DOCTYPE> document type 文档类型 <a> anchor 超链接 <abbr> abbreviation ...

  3. 【Leetcode】【Medium】Unique Paths

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  4. 使用CoreImage教程

    使用CoreImage教程 CoreImage包含有很多实用的滤镜,专业处理图片的库,为了能看到各种渲染效果,请使用如下图片素材. 现在可以开始教程了: #define FIX_IMAGE(image ...

  5. call/apply

    call与apply都可以改变this指向,但是传参列表不同. call 任何一种方法都可以.call,借用别人函数,自己用. call只需把实参按照形参的个数传进去,apply只能传一个argume ...

  6. PTA练习题之7-1 出租车计价(15 分)

    7-1 出租车计价(15 分) 本题要求根据某城市普通出租车收费标准编写程序进行车费计算.具体标准如下: 起步里程为3公里,起步费10元: 超起步里程后10公里内,每公里2元: 超过10公里以上的部分 ...

  7. C#图解教程读书笔记(第6章 类进阶)

    类成员声明语句由下列部分组成:核心声明.一组可选的修饰符和一组可选的特性(attribute). [特性] [修饰符] 核心声明 修饰符: 如果有修饰符,必须放在核心声明之前. 如果有多个修饰符,要有 ...

  8. Webpack笔记(二)——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  9. IntelliJ IDEA 2017 完美注册方法及破解方法

    本文使用破解方式注册. 下载破解文件JetbrainsCrack-2.6.2.jar 下载地址: http://idea.lanyus.com/ 开始破解 一.将下载的 JetbrainsCrack- ...

  10. PowerDNS简单教程(3):管理篇

    目录: PowerDNS简单教程(1):安装篇 http://www.cnblogs.com/anpengapple/p/5205130.html PowerDNS简单教程(2):功能篇 http:/ ...