资讯专栏INFORMATION COLUMN

2. HTML常用标签

番茄西红柿 / 1799人阅读

摘要:段落标签中段落标签是,表示一段文字,是否换行取决于视图窗口的大小。字体装饰加粗字体建议使用,不要使用标签,同样倾斜字体应该使用标签而不建议使用标签,之所以这样做主要是为了保证代码的语义良好。

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

文本标签

 1 
 2 <h1>标题1h1>
 3 <h2>标题2h2>
 4 <h3>标题3h3>
 5 <h4>标题4h4>
 6 <h5>标题5h5>
 7 <h6>标题6h6>
 8 
 9 <h7>标题7h7>
10 <h8>标题8h8>
11 
12 
13 <p>有情不必终老,暗香浮动恰好,无情未必就是决绝,我只要记着:初见时彼此的微笑。p>
14 <p>
15     <p>有情不必终老,暗香浮动恰好,p>
16     <p>无情未必就是决绝,我只要记着:p>
17     初见时彼此的微笑。
18 p>
19 
20 
21 <p><strong>最宝贵strong>的是生命,生命对人来说只有一次。人的一生应当这样度过:当他回首往事时,<em>不会因为碌碌无为,虚度年华而悔恨,也不会因为为人卑劣,生活庸俗而愧疚。em>p>
22 <p><b>最宝贵b>的是生命,生命对人来说只有一次。人的一生应当这样度过:当他回首往事时,<i>不会因为碌碌无为,虚度年华而悔恨,也不会因为为人卑劣,生活庸俗而愧疚。i>p>
View Code

标题标签

HTML中针对标题提供了

~

六种形式的标签,而且从

字体都有加粗,字号逐渐变小,这就是标题标签的一些特征。另外需要我们注意的是并不存在这六种标签之外的标题标签,不要试图设置之类的标签,这种形式的标签浏览器会当作普通的文本对待,这点需要我们特别注意。

段落标签

HTML中段落标签是

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

字体装饰

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

链接标签

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

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

首先,在目标位置设置锚点 内容描述;

最后,在操作位置设置链接 描述文本

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

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

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

图片标签

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

 

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

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2083.html

相关文章

  • 沃土前端系列 - HTML常用标签

    摘要:由于网页中不仅包含普通文本,还包含超文本,故被称作超文本描述语言。是的缩写,中文的意思是超文本标记语言,它是制作网页的标准语言。 html是什么 HTML是Hyper Text Markup Language的缩写,中文的意思是超文本标记语言,它是制作网页的标准语言。由于网页中不仅包含普通文本,还包含超文本,故被称作超文本描述语言。那什么是超文本呢?所谓超文本,就是指图像、视频、动画、...

    lbool 评论0 收藏0
  • 第三天·HTML常用标签

    摘要:如果希望某段文本强制换行显示,就需要使用换行标签在中直接敲回车来换行是不起作用的。标签的属性用于指定超链接目标的。这是因为标识符几乎可以用在所有的标签中。 一·- 单词缩写:headHTML的-代表了六个等级的标题,其中标签比较重要,因此要尽量少用。一般是给logo使用,或者是页面中最重要的标题。 Heading level 1 Heading level 2 Heading leve...

    guqiu 评论0 收藏0
  • html常用标签整理

    摘要:主要通过样式为其赋予不同的表现标签用来定义内联行内元素,并无实际的意义。html文档结构 1 DOCTYPE html> 2 <html lang="zh-CN"> #这个lang表示语言,zh-CN中文的意思,整个文档的内容以中文为主,如果以英文为主,就写成lang=en 3 4 <head> 5 <meta charset...

    番茄西红柿 评论0 收藏0
  • 第六课 Html5常用标签 html5学习1

    摘要:标签的认识一标签的分类双标签如单标签如换行标签二标签的关系嵌套关系如与父子关系并列关系如与兄弟关系三排版标签标题标签比较重要,一般用作网站的段落标签水平线标签单标签换行标签标签网页布局标亲盒子四文本格式化标签文本加粗标签不推荐使用的加粗标HTML标签的认识一、标签的分类1、双标签 如 2、单标签 如 换行标签 二、标签的关系1、嵌套关系 如 与title 父子关系2、并列关系如与 兄弟关系...

    siberiawolf 评论0 收藏0
  • HTML5常用标签分类

    HTML5常用标签分类 标签(空格分隔): HTML 前端开发 [TOC] 一.HTML文档标签 : 定义文档类型. : 定义HTML文档. : 定义文档的头部.(头部内包含) (1). ``: 定义元素可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词. (2). ``:定义页面上的所有链接规定默认地址或默认目标. (3). ``: 定义文档的标题. (4). ``: 定...

    canopus4u 评论0 收藏0
  • HTML常用标签

    摘要:提示判断版本决定是否显示,使用如下请升级浏览器参考链接标签代码参考自绿叶学习网,网址部分代码参考自菜鸟教程,网址如有侵权,请联系删除 HTML之常用标签 介绍了前端中常用的标签,讲解了行内元素和块元素的区别,同时重点解释了语义化的意义! html标签 html控制页面结构,良好的页面结构有利于seo优化 html常用标签 ...

    余学文 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<