专栏首页鱼头的Web海洋【Hello CSS】第四章-HTML的标签与语意

【Hello CSS】第四章-HTML的标签与语意

  • 首发:krissarea.gitee.io
  • 作者:陈大鱼头
  • github: KRISACHAN

上一篇分享了CSS的逻辑属性与盒子模型中分享了一些有关设备屏幕的知识以及浏览器视口的坐标构成。本篇则会分享HTML相关的一些知识。

我们在序章的开头就简单的讲解了HTML的诞生历史,本篇不作详细讲解,有兴趣的可以去看wikipedia。

HTML大事记

首先我们简单地来看一下HTML的发展历程(具体各个版本的区别亦不做讲解)。

  1. 1982年Tim Berners-Lee创建了html
  2. 1989年Tim Berners-Lee规定HTML并在1990年底写出浏览器和服务器软件;
  3. 1991年底Tim Berners-Lee提及HTML标签(它描述18个元素,包括HTML初始的、相对简单的设计);
  4. 1993年互联网工程任务组(IETF)发布首个HTML规范的提案;
  5. 1994年IETF创建一个HTML工作组;
  6. 1995年11月24日HTML 2.0作为IETF RFC 1866发布;
  7. IETF于1996年9月12日关闭它的HTML工作组;
  8. 1997年1月14日HTML 3.2作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本;
  9. 1997年12月18日HTML 4.0作为W3C推荐标准发布;
  10. 1998年4月24日进行微调,不增加版本号;
  11. 1999年12月24日HTML 4.01作为W3C推荐标准发布;
  12. 2000年5月ISO/IEC 15445:2000("ISO HTML",基于HTML 4.01严格版)作为ISO/IEC国际标准发布。
  13. 2014年10月28日HTML 5作为W3C推荐标准发布;
  14. 2015年3月20日HTML6作为提案被W3C提出;
  15. 2016年11月HTML5.1作为W3C推荐标准发布;
  16. 2017年12月14日HTML5.2作为W3C推荐标准发布;
  17. 2018年10月18日HTML5.3作为W3C推荐标准发布。

鱼头注:上面某些信息看得真让人发愁。。。。。。

HTML标签

对于应付日常的业务,写在同一行的就用span,需要换行的就用div,如果有超链接就用a。长得丑?加color啊,不够大?用font-size: xx-large啊。嗯,没有任何问题,精通HTML。: )

此刻正在看这篇文章的你估计会觉得:“HTML有什么好说的,每天都写,键盘上div那几个字母都要被我按烂了,这只有初学者才需要学。”

嗯,说得对。那本篇结束,再见!

咦,不对,其实在鱼头看来HTML并不简单,作为一门原本是为了学者们的交流而诞生的语言,本身就是充满严谨性的,加上又已经发展了37个年头,更是不简单。

鱼头注:本篇不会对HTML的标签结构跟文件组成进行介绍,有需要了解的童鞋可以参考MDN跟W3school

首先我们来看一个基本的HTML页面会有什么东西:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>hello world</title>
  6. </head>
  7. <body>
  8. <h1>hello world</h1>
  9. </body>
  10. </html>

从上面我们可以知道一个基本的HTML页面会有定义文档类型的 <!DOCTYPE html>,告知浏览器这是一个HTML文档<html></html>,定义各种文档属性的 <head></head>,以及定义内容主体的 <body></body>

首先我们一起来看看这几大标签的具体情况以及子标签详情。

DOCTYPE

<!DOCTYPE>是个声明而不是标签,它必须在HTML 文档的第一行,位于 <html> 标签之前。它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。必须始终向 HTML 文档添加 <!DOCTYPE>声明,这样浏览器才能获知文档类型。详情请参考HTML 元素和有效的 DTD。

html

<html></html>限定了文档的开始点和结束点,在它们之间是文档的头部和主体。我们来看看在 <html></html>标签中可添加的专属属性有哪些:

属性

描述

manifest

url

定义一个 URL,在这个 URL 上描述了文档的缓存信息。(已废弃)

xmlns

http://www.w3.org/1999/xhtml

定义 XML namespace 属性。

全局属性

HTML 属性赋予元素意义和语境。下面的全局属性可用于任何 HTML 元素

属性

描述

accesskey

规定激活元素的快捷键。

class

规定元素的一个或多个类名(引用样式表中的类)。

contenteditable

规定元素内容是否可编辑。

contextmenu

规定元素的上下文菜单。上下文菜单在用户点击元素时显示。

data-*

用于存储页面或应用程序的私有定制数据。

dir

规定元素中内容的文本方向。

draggable

规定元素是否可拖动。

dropzone

规定在拖动被拖动数据时是否进行复制、移动或链接。

hidden

规定元素仍未或不再相关。

id

规定元素的唯一 id。

lang

规定元素内容的语言。

spellcheck

规定是否对元素进行拼写和语法检查。

style

规定元素的行内 CSS 样式。

tabindex

规定元素的 tab 键次序。

title

规定有关元素的额外信息。

translate

规定是否应该翻译元素内容。

<head>标签用于定义文档的头部,它是所有头部元素的容器。 <head>描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

那么有哪些标签是可以放在 <head></head>内的呢?

首先是 <base>

<base>是个很实用但是很多人会忽略的标签。

<base> 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a><img><link><form> 标签中的 URL。

属性

描述

href

URL

规定页面中所有相对链接的基准 URL。(必选)

target

blank parent _self_topframename

在何处打开页面中所有的链接。(可选)

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <base href="https://user-gold-cdn.xitu.io/" />
  5. <base target="_blank" />
  6. </head>
  7. <body>
  8. <img src="2018/12/25/167e378b5af48d99?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1" />
  9. <a href="2018/12/25/167e378b5af48d99?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1">跳转</a>
  10. </body>
  11. </html>

根据上面的DEMO我们可以发现,在设置了 <base>urltarget之后, <img><a>即使不设置base url跳转行为,也可以得到预期的效果。

然后是 <link><style><title>

<link><style><title>可以算是非常常用的属性了,所以也就不多做讲解,只列个属性表就好。

<link>

<link>主要用于style文件引入

属性

描述

charset

char_encoding

HTML5 中不支持。

href

URL

规定被链接文档的位置。

hreflang

language_code

规定被链接文档中文本的语言。

media

media_query

规定被链接文档将被显示在什么设备上。

rel

alternateauthorhelpiconlicencenextpingbackprefetchprevsearchsidebarstylesheettag

规定当前文档与被链接文档之间的关系。

rev

reversed relationship

HTML5 中不支持。

sizes

heightxwidthany

规定被链接资源的尺寸。仅适用于 rel="icon"。

target

blankselftopparentframe_name

HTML5 中不支持。

type

MIME_type

规定被链接文档的 MIME 类型。

<style>

属性

描述

type

text/css

规定样式表的 MIME 类型。(必选)

media

screenttytvprojectionhandheldprintbrailleauralall

为样式表规定不同的媒介类型。(可选)

<title>

可定义文档的标题。

但是有一点可能大家不知道,或者都这么做了,或者没有,但是 <title> 标签是 <head> 标签中唯一要求包含的东西。

<meta>

最后是 <meta>,这是非常重要的一个标签,它提供了有关当前HTML元素的元信息 (meta-information),比如描述、针对搜索引擎的关键词以及刷新频率。

<meta> 的属性对象如下:

属性

描述

content

设置或返回 元素的 content 属性的值。

http-equiv

把 content 属性连接到一个 HTTP 头部。

name

把 content 属性连接到某个名称。

scheme

设置或返回用于解释 content 属性的值的格式。

我们首先来看content,此属性包含 http-equivname 属性的值,具体取决于所使用的值。

  1. <meta name="keywords" content="WEB,CSS,鱼头" />

其次是scheme,此属性是用来设置或返回用于解释 content 属性的值的格式。例子如下:

  1. <meta name="revised" content="2019-04-03" scheme="YYYY-MM-DD" />

有趣的是,MDN上有这么一段描述:

Notes: Do not use this attribute as it is obsolete. There is no replacement for it as there was no real usage for it. Omit it altogether.

意思就是不要用这属性,因为这属性并没什么用处。: )

然后是name,此属性定义文档级元数据的名称。值得注意的是,如果定义的元数据设置了 itemprop, http-equiv or charset ,就不能再设置name了。

name的值含义如下

定义正运行在该网页上的网络应用名称

详细name值,可以访问https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#属性。

最后我们来看看http-equiv,此属性把content属性连接到HTTP头部。

允许站点管理者在指定的页面控制用户代理的资源。除了少数例外,这条政策将极大地指定服务源 以及脚本端点。这将帮助防止跨站脚本攻击。

详细http-equiv值,可以访问https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#属性。

body

<body>标签内存放文档的内容。 <html>内可使用的标签大概有357个,其中MDN<body>内的元素分了11类。有需要了解的可参考https://developer.mozilla.orgzh-CN/docs/Web/HTML/Element。

按照MDN的划分,一共有以下11类标签:

1. 内容分区:

内容分区元素允许你将文档内容从逻辑上进行组织划分。

2. 文本内容

使用 HTML 文本内容元素来组织在开标签和闭标签里的块或章节的内容。这些元素能标识内容的宗旨或结构,而这对于 accessibility 和 SEO 很重要。

3. 内联文本语义

使用 HTML 内联文本语义(Inline text semantics)定义一个单词、一行内容,或任意文字的语义、结构或样式。

4. 图片和多媒体

HTML 支持各种多媒体资源,例如图像,音频和视频。

5. 内嵌内容

除了常规的多媒体内容,HTML 可以包括各种其他的内容,即使它并不容易交互。

6. 脚本

为了创建动态内容和 Web 应用程序,HTML 支持使用脚本语言,最突出的就是 JavaScript。某些元素支持此功能。

7. 编辑标识

这些元素能标示出某个文本被更改过的部分。

8. 表格内容

这里的元素用于创建和处理表格数据。

9. 表单

HTML 提供了许多可一起使用的元素,这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。

10. 交互元素

HTML 提供了一系列有助于创建交互式用户界面对象的元素。

11. Web组件

Web 组件是一种与 HTML 相关联(HTML-related)的技术,简单来说,它允许创建自定义元素,并如同普通的 HTML 一样使用它们。此外,你甚至可以创建经过自定义的标准 HTML 元素。

标签语义化

语义化到底重不重要?

有的人认为,在可以“竞价排名”以及“软件界面”的场景多于“富文本”的前提下,HTML语意并不重要。只要divspana标签差不多就能走天下了,最有意思的是,百度百科跟维基百科这类文档类网站,HTML结构大多数都是上述的情况。

但是,标签语义化真的不重要吗?

这个问题鱼头暂时不回答,但会在后续的文章中体现并实践鱼头的想法。如果你对这个问题感兴趣,也可以通过留言或者加鱼头好友或者进鱼头的微信群来讨论,联系方式在文章底部。

我们知道,在HTML中,每个标题是通过标题标签来定义的,标题标签一共有6个,分别是:h1~6。例子如下:

  1. <h1>我是一级标题</h1>
  2. <h2>我是二级标题</h2>
  3. <h3>我是三级标题</h3>
  4. <h4>我是四级标题</h4>
  5. <h5>我是五级标题</h5>
  6. <h6>我是六级标题</h6>

如果是连续的标题,则可以用 <hgroup> 来连接:

  1. <hgroup>
  2. <h1>我是一级标题</h1>
  3. <h2>我是二级标题</h2>
  4. <h3>我是三级标题</h3>
  5. <h4>我是四级标题</h4>
  6. <h5>我是五级标题</h5>
  7. <h6>我是六级标题</h6>
  8. </hgroup>

如果是段落内容,则用 <p>

  1. <p>我是段落内容</p>

如果我们要列一个列表则可以用 <ol></ol><li></li> 。如果只是要标记项目,我们可以用 <li></li>,例子如下:

  1. <ul>
  2. <li>苹果</li>
  3. <li>香蕉</li>
  4. <li>奥特曼</li>
  5. <li>橙子</li>
  6. </ul>

若是标记顺序,则用 <ol></ol> ,例子如下:

  1. <ol>
  2. <li>向前走300米</li>
  3. <li>右转</li>
  4. <li>向前走300米</li>
  5. <li>右转</li>
  6. <li>向前走300米</li>
  7. </ol>

当然我们也可以按需嵌套。

  1. <ol>
  2. <li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀,调成“腌料”,鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀,腌渍半小时。</li>
  3. <li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀,调成“综合调味料”。</li>
  4. <li>鸡丁腌好以后,色拉油下锅烧热,先将鸡丁倒入锅内,用大火快炸半分钟,炸到变色之后,捞出来沥干油汁备用。</li>
  5. <li>在锅里留下约两大匙油,烧热后将切好的干辣椒下锅,用小火炒香后,再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅,用大火快炒片刻后,再倒入“综合调味料”继续快炒。</li>
  6. <ul>
  7. <li>如果你采用正宗川菜做法,最后只需加入花生米,炒拌几下就可以起锅了。</li>
  8. <li>如果你在北方,可加入黄瓜丁、胡萝卜丁和花生米,翻炒后起锅。</li>
  9. </ul>
  10. </ol>

在我们平常说话的时候,为了突出重点,我们往往会强调某些词,就如如下的例子:

  1. <p>我<em>非常</em>喜欢加班</p>

如果是重音强调,则:

  1. <p>鱼头,明天<strong>别迟到</strong>了</p>

在我们身边任何的地方都是非常需要语义学的,我们依靠过去的学习经验,通过所见的物体就可以知道它代表的意义。例如“红灯停,绿灯行”。如果这个语义出错或者弄反了,造成的影响是不堪设想的。

同样的道理,我们需要确保使用了正确的元素来给予内容正确的意思、作用以及外形。

每个标签都有自己的使用场景,如果要全部列出来,也不是一篇文章能写得完的。更多的需要能坚持看到这里的你来探索,当然也非常欢迎你来跟鱼头一起讨论标签语义化的问题。

【Hello CSS】系列

【HelloCSS】是以 CSS基础概念为主题的系列文章,旨在帮助大家更深刻地了解并且提高 CSS在各位开发者心目中的地位。由于鱼头我水平有限,文笔有限,如果各位在文章中发现有任何不合理,不正确的地方,还烦不吝指出,我会非常感谢的;如果通过文章有任何想法或疑问,也希望各位能积极留言,我们互相探讨;如果通过本系列文章有所收获,这就让鱼头我喜不自胜了!

如果你也喜欢 CSS,喜欢探讨技术,或者对本文,本系列有任何的意见或建议,鱼头非常希望你能加入一个有趣的微信群 — “进击的CSS”。如果你有兴趣,请添加鱼头微信(krisChans95),添加时注明 “加群”,Mmmm,最后,如果觉得我的文章还不错,请加个关注跟点个“在看”呗!

本文分享自微信公众号 - 鱼头的Web海洋(krissarea),作者:陈大鱼头

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 『初中级前端必看』谈谈如何更有质量地看源码

    作为一个优秀(或说合格)的开源项目,它的代码一定不会是晦涩难懂的。不仅是代码本身,这些项目配套的注释,单元测试,示例代码,函数名以及文档一定是能够很好地辅助你读...

    陈大鱼头
  • 忍法,scroll 翻滚之术!

    但其实随着时间的推移, web api 以及 css 规范的不断改进,那些我们曾经认为实现起来很麻烦的功能也变得简单了起来。下面我们可以一起来探讨一下这些改进的...

    陈大鱼头
  • 提升开发幸福感的10条JS技巧

    鱼头总结一些能够提高开发效率的JS技巧,这些技巧很实用,觉得挺好,想推荐给大家,所以有了这篇文章。

    陈大鱼头
  • dubbo监控机制之监控中心实现分析

    这里的监控中心以dubbo-ops\dubbo-monitor-simple项目说 总的来说是监控中心启动一个sevlet容器,通过web页面向用户多维度的展...

    wannshan
  • 前端基础-HTML学习概述

    efonfighting
  • 接口测试平台:支持函数助手

    因为接口的需求,需要支持类似于Jmeter中函数助手的功能。 以以下两个函数进行举例:

    软件测试君
  • 『互联网架构』软件架构-解密电商系统营销-会员模块业务(73)

    解决方案是:类似新华字典一样,redis里面针对某个活动只存储key值,内容保存在JVM cache中。因为目前都是存在JVM中,如果是分布式同步下,需要使用z...

    IT故事会
  • 圣经中的校验码

    司马迁用近53万字记载了中国上千年的历史,远在中东的犹太人也用类似的篇幅记载了自创世纪以来他们祖先的历史。《圣经》简洁的文风和中国的《史记》颇有相似之处。但是和...

    Defu Li
  • eclipse + JBoss 5 +

    有时客户端程序(如JSP、Servlet)会和EJB组件运行在同一个JVM上,如在同一个J2EE服务器(JBoss、Weblogic等)中运行。这时就没必要 再...

    py3study
  • SharedPreferences解析

    说明:SharedPreferences与Editor只是两个接口,SharedPreferencesImpl和EditorImp分别实现了对应的接口。另外,C...

    用户1205080

扫码关注云+社区

领取腾讯云代金券