2. HTML常用标签
相信大家常常会打开浏览器搜索一些内容或者浏览一些网站,在浏览器的页面上会呈现很多内容,但是具体的形式无非就是图片、文字以及链接(可以点击进入另一个页面的特殊文字),其中文字承载着巨大的作用,传递着各种各样的信息,同时网页的问题可能作为标题、作为段落而存在,而且我们还可以为这些问题添加一些效果比如加粗、倾斜等等,这些都可以通过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常用标签的更多相关文章
- HTML常用标签
HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...
- html常用标签介绍
常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...
- HTML常用标签总结
HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...
- html新增一些常用标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [刘阳Java]_MyBatis_映射文件的常用标签总结_第5讲
MyBatis中常用标签的总结,简单给出自己的总结 MyBatis映射文件中的标签使用介绍1.<select>:用于编写查询语句用的标签 id:表示当前<select>标签的唯 ...
- CSS常用标签
CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
- HTML基础(一)——一般标签、常用标签和表格
第一部分 HTML <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...
- HTML-学习笔记(常用标签)
本篇博客讲一讲HTML中的标签 HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...
- 帝国CMS文章随机调用等一些常用标签
1.帝国CMS文章随机调用等一些常用标签 [e:loop={'news',10,18,0,'newstime>UNIX_TIMESTAMP()-86400*7','onclick desc'}] ...
- 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
随机推荐
- Java字符串工具类
import java.io.ByteArrayOutputStream;import java.io.UnsupportedEncodingException;import java.lang.re ...
- 「C语言」数据类型及混合运算与类型转换
深入学习C语言时,有必要先了解一下数据类型的概念,以及它们之间的混合运算与类型转换. 本篇文章便是根据<C语言程序设计教程>和在线翻阅资料后整理而出.(练习题将逐步更新) 目录: ...
- Java 中的引用
JVM 是根据可达性分析算法找出需要回收的对象,判断对象的存活状态都和引用有关. 在 JDK1.2 之前这点设计的非常简单:一个对象的状态只有引用和没被引用两种区别. 这样的划分对垃圾回收不是很友好, ...
- 随机以及时间相关函数——C语言描述
随机相关的函数 头文件 stdlib.h 相关函数 :rand .srand rand( rand C++ Reference ) 函数声明:int rand( void ); rand函数返回一个位 ...
- HDU 6206 Apple (高精确度+JAVA BigDecimal)
Problem Description Apple is Taotao's favourite fruit. In his backyard, there are three apple trees ...
- BZOJ3238:[AHOI2013]差异(SAM)
Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...
- Web网站高并发量的解决方案
摘要: 一个小型的网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单.随着互联网业务的不断丰富,网站相 ...
- iview中table里嵌套i-switch、input、select等
iview中table内嵌套 input render:(h,params) => { return h('Input',{ props: { value:'', size:'small', } ...
- 微软提供的Office在线预览地址
https://products.office.com/zh-CN/office-online/view-office-documents-online
- 修改office文档修改日期
修改“创建日期”可采用如下方法: 首先把系统日期调整到您所希望的时间,然后到MS-DOS方式下,对该文件输入如下命令:COPY /B filename +,, (一个加号.两个逗号),当询问您是否确认 ...