介绍几个常用的HTML5标签

2020-10-07 科技 94阅读

网页的文本、图片等信息;

 二、Head部分:用于表示网页的元数据即描述网页的基本信息

其常用标签及属性有:

1、title标签:浏览器标签页显示的标题

2、meta标签:其常用属性

①charset:设置文档的字符集编码格式。HTML5中设置字符集编码:

常见的字符集编码格式:

a.GB-2312:国标码,简体中文

b.GBK:扩展的国标码

c.UTF-8:万国码 Unicode 常用

②http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)

③name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。

3、link标签:链接网页图标(title前的小logo),其常用属性有:

①rel属性:声明链接文件的类型,此处选icon

②type属性:可以省略

③href属性:表示图片的路径地址

 三、body部分:网页的文本、图片等信息

标签的分类:

块级标签:显示为块,前后隔一行(自动换行)

行级标签:按行从左往右逐一显示。

1、 常见的块级标签:

......
:标题标签,自动加粗,h1最大,h6最小。


:水平线标签,添加一条水平线。

:段落标签,


:换行标签,

:引用标签,cite属性,表明引用的来源,一般引用网址

浏览器默认首行缩进。

:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体。 2、代码中的换行、

空格等元素能在浏览器中显示。

【补充】html 文件中空格的表示: 

2、 基于布局的块级标签

列表:无序列表、有序列表、定义列表

①有序列表:

    列表项:
  1. ②无序列表:

      列表项:
    • ③定义列表(实现图文混排):

      列表标题:

      一般只有一项

      列表描述项:

      可以有很多项

      3、组合标签:

      用于显示图片及图片标题

      他有两个子标签:图片

      图片的标题

      例如:

      探险家

      探险家 伊泽瑞尔

      4、分区标签:

       

      5、常见的行级标签

      span(文本):无实际意义,用于包裹某部分文字,修改特定样式,例如:

      这是span中的文字

      img(图片):其常用属性:①src:表示引用图片的地址。

      路径地址的写法:相对路径:以当前文件为最准,去寻找图片地址

      a、与文件处于同一层的图片,直接写图片名

      b、图片在当前文件下一层:文件名/图片名

      c、图片在当前文件上一层:../图片名

      绝对路径:file:///盘符:/文件夹/图片名,但 是严禁使用

      图片网址:网络上的图片链接,但是一般不用

      ②height和width:图片的高度和宽度。可以用CSS样式代替

      ③title:图片标。当鼠标指上之后显示的文字

      ④alt:当图片无法显示的时候,显示的文字

      em(倾斜强调)

      strong(加粗强调)

      b(加粗)

      i(倾斜)

      Strong、em、b、i的区别

      1、Strong、em都表示强调,Strong为粗体,em为斜体,而Strong的强调 程度逗比em高

      2、Strong和b都能加粗,em和i都能倾斜,,但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。

      q(短引用)

      small/big(缩小/放大字体):small和big分别是缩小和扩大字体,都可以多层嵌套直至上限或下限

      a(超链接)

      1、href:超链接的路径,可以是网络链接,也可以是本地文件。

      2、target:跳转页面打开的位置。_self自身页面,_blank新页面。

      3、title:鼠标指在超链接上显示的名称。

      4、Rel(被链接是当前的前/后一篇):指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息:

      rel="prev"被链接文档是当前文档的前一篇文 档,

      rel="next"被链接文档是当前文档的后一篇文档,

      rel="icon"被链接文档是当前文档的图标

      rel="stylesheet"被链接文档是当前文档的样式表

      5、Rev(当前是被链接的前/后一篇)

      锚链接:

      ①本页面锚链接:a、设置锚点:

      b、跳转锚点:#name名

      ①页面间锚链接:a、在即将跳转页面的指定位置设置锚点

      b、跳转锚点:页面地址.html#name名

      页面间锚链接

      功能性链接: mailto用于给指定邮箱发送邮件

      file:///e:/aaa.png打开本地文件

      tencent://message/?uin=1315618220 给指定QQ发送息

      s标签,有误文本:删除线

      这是S标签中的文字

      cite标签:浏览器显示为倾斜,常用于书、画作、作品的引用

      这是cite中的文本

      code:计算机代码,不保留代码格式

      bdo:表示文本方向,属性:dir="ltr"表示从左往右,dir="rtl"表示从右往左

      1234567

      kbd:表示需要用户用键盘输入的内容,浏览器显示为等宽字体

      请输入“Esc”推迟系统

      sup:上标文本,sub:下标文本

      x6

      © © 空格  

      © © 空格  

      u:下划线

      这是下划线

      mark:高亮或标记文本,浏览器显示为黄色背景

      mark

    • 声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com