资讯专栏INFORMATION COLUMN

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

kycool / 1850人阅读

摘要:年月日作为推荐标准发布年月日作为提案被提出年月作为推荐标准发布年月日作为推荐标准发布年月日作为推荐标准发布。规定元素的上下文菜单。上下文菜单在用户点击元素时显示。规定元素仍未或不再相关。规定是否对元素进行拼写和语法检查。规定元素的行内样式。

作者:陈大鱼头

github: KRISACHAN

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

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

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

1982年Tim Berners-Lee创建了html

1989年Tim Berners-Lee规定HTML并在1990年底写出浏览器和服务器软件;

1991年底Tim Berners-Lee提及HTML标签(它描述18个元素,包括HTML初始的、相对简单的设计);

1993年互联网工程任务组(IETF)发布首个HTML规范的提案;

1994年IETF创建一个HTML工作组;

1995年11月24日HTML 2.0作为IETF RFC 1866发布;

IETF于1996年9月12日关闭它的HTML工作组;

1997年1月14日HTML 3.2作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本;

1997年12月18日HTML 4.0作为W3C推荐标准发布;

1998年4月24日进行微调,不增加版本号;

1999年12月24日HTML 4.01作为W3C推荐标准发布;

2000年5月ISO/IEC 15445:2000("ISO HTML",基于HTML 4.01严格版)作为ISO/IEC国际标准发布。

2014年10月28日HTML 5作为W3C推荐标准发布;

2015年3月20日HTML6作为提案被W3C提出;

2016年11月HTML5.1作为W3C推荐标准发布;

2017年12月14日HTML5.2作为W3C推荐标准发布;

2018年10月18日HTML5.3作为W3C推荐标准发布。

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

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

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

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

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

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

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



  
    
    hello world
  
  
    

hello world

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

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

DOCTYPE

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

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

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

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

首先是

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

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

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

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

根据上面的DEMO
/head-base.html)我们可以发现,在设置了urltarget之后,

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

有趣的是,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的值含义如下

描述
application-name 定义正运行在该网页上的网络应用名称
author 文档作者
description 其中包含页面内容的简短和精确的描述。一些浏览器,如Firefox和Opera,将其用作书签页面的默认描述。
generator 包含生成页面的软件的标识符。
keywords 包含与逗号分隔的页面内容相关的单词。
referrer 控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容。
others 其他的内容。

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

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

描述
content-security-policy 允许站点管理者在指定的页面控制用户代理的资源。除了少数例外,这条政策将极大地指定服务源 以及脚本端点。这将帮助防止跨站脚本攻击。
default-style 这个属性指定了在页面上使用的首选样式表. content属性必须包含 元素的标题, href属性链接到CSS样式表或包含CSS样式表的