相信大家常常会打开浏览器搜索一些内容或者浏览一些网站,在浏览器的页面上会呈现很多内容,但是具体的形式无非就是图片、文字以及链接(可以点击进入另一个页面的特殊文字),其中文字承载着巨大的作用,传递着各种各样的信息,同时网页的问题可能作为标题、作为段落而存在,而且我们还可以为这些问题添加一些效果比如加粗、倾斜等等,这些都可以通过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. Java通过jna调用c++动态库

    1 环境准备 操作系统:windows 10,x64 jna,jna-4.4.0.jar c++开发环境,vc2013 java开发环境,eclipse,jdk8 2 dll开发 通过vc2013创建 ...

  2. vs2015使用技巧-------- 查看类关系图

    1.在项目上点击右键,点击“查看”------->“查看类图”: 2.生成的类图如下:

  3. mongodb使用mongos链接复制集

    我们知道mongodb现在生产环境大部分还是使用的复制集来作为主流,据我了解.很多公司现在都是使用复制集的方式,而我们通过mongos可以巧妙的解决链接的问题,我们先从环境说起: 首先我们要模仿搭建的 ...

  4. JAVA环境变量安装

    需配置的系统环境变量参数: JAVA_HOME:C:\Program Files\Java\jdk1.8.0_60 CLASS_PATH: ;%JAVA_HOME%\lib;%JAVA_HOME%\l ...

  5. Batch Normalization 笔记

    原理 BN的效果 Why BN works? 原理 输入层可以归一化,那么其他层也应该可以归一化.但是有个重要的问题,为什么要引入beta和gamma. 为什么要引入beta和gamma 不总是要标准 ...

  6. Native广告月入万刀的全部细节!

    一步一步跑Native原生广告: 第一步:跑native前期的准备工作 第二步:阅读大神的Native文档(100多页,英文,建议找一个支持在线翻译功能的app来阅读) 第三步:阅读我的几十条经验总结 ...

  7. SAP Fiori + Vue = ?

    2017年3月28日,我到国内一个SAP CRM客户那里,同他们的架构师关于二次开发的UI框架选择SAP UI5还是Vue进行了一番探讨.回到SAP研究院之后,我把这个问题扔到了公司的微信群里,引起了 ...

  8. EventBus事件总线

    EventBus事件总线的使用-自己实现事件总线   在C#中,我们可以在一个类中定义自己的事件,而其他的类可以订阅该事件,当某些事情发生时,可以通知到该类.这对于桌面应用或者独立的windows服务 ...

  9. 如何在两个月的时间内发表一篇EI/SCI论文-我的时间管理心得

    在松松垮垮的三年研究生时期,要说有点像样的成果,也只有我的小论文可以谈谈了.可能有些厉害的角色研究生是丰富而多彩的,而大多数的同学在研究生阶段可能同我一样,是慢悠悠的渡过的,而且可能有的还不如我,我还 ...

  10. HDU 3292 【佩尔方程求解 && 矩阵快速幂】

    任意门:http://acm.hdu.edu.cn/showproblem.php?pid=3292 No more tricks, Mr Nanguo Time Limit: 3000/1000 M ...