HTML语义标签

HTML语义标签

HTML(Hyper Text Markup Language)

HTML可以理解为文档。

HMTL的历史

HTML4(SGML)
XHTML
HTML5基于HTML4

语义标签

HTML使用“标记”(markup)来注明文本、图片和其他内容,以便于在 Web 浏览器中显示。
HTML标记包含一些特殊“元素”如:

<head>,<title>,<body>,<header>,<footer>,<article>,<section>,<p>,<span>,<img>,<aside>,<audio>,<canvas>,<datalist>,<details>,<embed>,<nav>,<output>,<progress>,<video>

等等.
这些标签都有自己代表的意思,错误的使用语义标签,会给机器阅读造成混肴,也会给CSS编写加重负担.

与其用错不如不用,但我们因该尽量的用对.

按照样式和内容分类

参照下面的Link:
http://himawariokb.xsrv.jp/2020/01/01/html_content_models/

下面介绍一些常用语义标签.

元信息类标签

直接ページ上に表示しない。

head

本身不携带任何信息,主要是为了盛放其他语义类的容器使用.

head标签规定了自身必须是html标签中的第一个标签,必须包含一个title,并且最多只能包含一个base.

title

表示文档的标题.
应该完整地概括整个网页内容.

title和h1的主要区别:
h1仅仅用于页面展示,可以默认具有上下文,并且有链接辅助,即便无法概况全文,也不会有很大的影响.

base

给页面上所有的URL相对地址提供一个基础.
最多只有一个,它改变全局的链接地址.容易造成跟JavaScript的配合问题,使用时需要注意.

最好用JavaScript来代替base标签.

meta

一组键值对,是一种通用的元信息表示标签.

在head中可出现多个meta标签,一般由name和content来定义.name表示元信息的名,content表示元信息的内容.

  • charset属性的meta
    描述HTML文档自身的编码形式.最好放在head的第一个.

    <html>
        <head>
            <meta charset="UTF-8">

    因为浏览器在读到这个标签之前,处理的所有字符都是ASCII字符.可以最大限度保证不出现乱码.

  • http-equiv属性的meta
    表示执行一个命令,可以不需要name属性.

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    http-equiv可指定的命令:

命令 含义
content-type 指定http编码方式
content-language 指定内容的语言
default-style 指定默认样式表
refresh 刷新
set-cookie 模拟http头set-cookie,设置cookie
x-ua-compatible 模拟http头x-ua-compatible,声明ua兼容性.content="IE=edge,chrome=1",指定默认使用最新浏览器
content-security-policy 模拟content-security-policy,声明内容安全策略
  • viewport
    没有在html标准中定义,是移动端开发的事实标准.
    把用户缩放功能禁止,宽度设为设备宽度的标准meta标签:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
属性 含义
width 页面宽度,可取具体数值,可为device-width,表示跟设备宽度相等.
height 页面高度,可取具体数值,可为device-height,表示跟设备高度相等.
initial-scale 初始缩放比例.
minimum-scale 最小缩放比例.
maxnum-scale 最大缩放比例.
user-scalable 是否允许用户缩放.
  • 其他meta标签
name 含义
author 页面作者
description 使用在搜索引擎显示的结果页.SEO
generator 生成页面所使用的工具,主要用于可视化编辑器
keywords 关键字.已经被搜索引擎忽略了.,因为存在故意填充了大量关键词到keyword, 错误地引导搜索结果。
referrer 跳转策略,是一种安全考量
theme-color 页面风格颜色,实际并不影响页面,但是浏览器可能据此调整页面之外的UI

节元素标签

header

代表网页或section的页眉.
通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题.
在bootstrap中,常包含有搜索框,nav,logo等元素.
没有个数使用限制.

footer

代表网页或section的页脚.
通常包括该节的基本信息,如,作者,相关文档连接,版权资料.
没有个数使用限制.

nav

代表网页的导航链接,用于定义页面的主要导航部分.
常用ul来定义内容,然后通过CSS来改变样式.

aside

被包含在article元素中作为主要内容的附属信息部分.
内容可以是与当前文章相关的资料,标签,名词解释等.

<article>
    <p>内容</p>
    <aside>
        <h1>作者简介</h1>
        <p>小北,前端一枚</p>
    </aside>
</article>

section

代表文档中的节或段,可以是一篇文章里按主题的分段,也可以是一个页面的分组.
html5中会自动给标题h1-h6降级.
section不是一般意义上的容器元素,作为样式展示时,可以考虑有</div/>标签

article

代表一个文档,页面或者网站中自成一体的内容,为了让开发者独立开发或重用.
article会有一个标题,会有一个页脚.

<article>
    <header>
        <h1>一篇文章</h1>
        <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>
    </header>
    <p>文章内容..</p>
    <footer>
        <p><small>版权:html5jscss网所属,作者:小北</small></p>
    </footer>
</article>

article,nav,aside可以理解为特殊的section,可以用他们时就不要用section,没实际意义就用div.

address

代表区块容器,必须是作为联系信息出现,表示作者的联系方式.address只关联到article和body.
邮编地址和邮件地址一般出现在footer.

h1-h6

标题

<hgroup>
    <h1>World Wide Web </h1>
    <h2>From Wikipedia, the free encyclopedia</h2>
</hgroup>

h1-h6因为hgroup,section,article的出现,允许一个页面出现多个h1.

em

emphasis缩写,加与不加不会引起语义变化,是局部强调,改变句子的侧重.

文本元素标签

a

  • target

詳細は参照HTML的链接

strong

表示重要,是一种随意无顺序的.

b

bold缩写,表示"文体突出"文字,用来在文中高亮显示某个或者几个字符,用来引起用户注意,无强调作用.

i

italic缩写,用来描述在文章中突出不同意见或语气或其他的一段文本,也可用用作排版的斜体文字.

abbr

代表缩写.

hr

表示故事或者话题转变.
不是上述关系时,应该考虑使用border.

time

日期,为了使机器阅读更加方便.

<time datetime="2019-12-27">2019年12月27日</time>

figure,figcaption

figure用来包括一块独立的内容.
figcaption只能作为figure元素的子元素,可以放在figure元素内的任何位置.
img和文字组成的figure语法现象.用于表示与文章相关的图像,照片等流内容.
一个figure元素内只能放一个figcaption,也可以不放.

<figure>
    <img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
    <figcaption>
        The NeXT Computer used by Tim Berners-Lee at CERN.
    </figcaption>
</figure>

dfn

用来包裹被定义的名词.

img,iframe

嵌入元素
参照HTML替换性元素 http://himawariokb.xsrv.jp/2019/12/31/replaced_element/

div,p,dl,dt,dd,ol,ul,ll

分组元素标签.

blockquote,q

表示引用,
blockquote是一段长引用.
q是段引用(行内引用).

pre,code

定义预格式化的文本.被包围在pre元素中的文本通常会保留空格和换行符,文本也会呈现等宽字体.常用来表示源代码.
code用来显示短的代码.


参考:
html5jscss
极客时间winter老师的重学前端
MDN HTML

发表评论

电子邮件地址不会被公开。 必填项已用*标注