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.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
随机推荐
- 第四次作业——第一次scrum冲刺
1.小组第一次冲刺任务 对Github上的HUSTOJ开源项目进行Fork,搭建基本环境 2.用户需求 (1)部分基本功能显示在首页 (2)能够提交题目并判题,并对自己所提交的题目正确性进行反馈,能够 ...
- C#清空回收站
曾经用过bat处理回收站,但是效果很不理想(应该是我水平不够吧),后来发现C#可以直接调用系统dll,非常简单.下面是具体函数: class ClearRecycle { [DllImport(&qu ...
- Mysql学习---SQL语言的四大分类
SQL语言共分为四大类:数据查询语言DQL,数据操纵语言DML,数据定义语言DDL,数据控制语言DCL. 1. 数据查询语言DQL 数据查询语言DQL基本结构是由SELECT子句,FROM子句,WHE ...
- .C#认证考试试题汇编:第一单元:1,11 第二单元:1,11
第一单元1,11 好久没用异或都快忘了,就让我们一起来了解哈啥子事异或 说的这个,就不经意让我想起书上的几种交换值得方法了 我这儿说的交换的方法是,不使用第三个变量来交换,而是两个 实现条件是C a= ...
- 使用NPOI进行Excel数据的导入导出
- NPM cache相关
今天下午把package.lock.json用别人的替换了,然后编译一堆报错,这个问题弄了一下午. 总结一下经验: 1.关于npm cache NPM会把所有下载的包保存,放在用户文件夹下面,在我的w ...
- [原]零基础学习视频解码之安装ffmpeg
写在文章前面:ffmpeg是一个开源的编解码框架,拥有很强大的功能.但是对于如果使用其来做开发呈现着严重两极分化,大神们讨论着高深的问题,大多数像我这样的小白连门都进不去.最近无意间领会了如何入门,现 ...
- jasmine —— Spies(转)
Jasmine有称为间谍(spies)的测试双重功能.一个spy可以监测任何函数的调用和参数的调用痕迹.Spy只能存在于定义它的describe()和it()代码块内,而在每一个spec(即it)结束 ...
- js获取7天之前或之后的日期
function fun_date(aa){ var date1 = new Date(), time1=date1.getFullYear()+"-"+(date1.getMon ...
- 折腾apt源的时候发生的错误
在折腾Ubuntu源的时候,把新的源替换进去,然后 sudo apt-get update 之后报错: W: Unknown Multi-Arch type 'no' for package 'com ...