html
概述
超文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
由来
略
版本
HTML是用来标记Web信息如何展示以及其他特性的一种语法规则,它最初于1989年由CERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义,并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据,所以很早就得到各个Web浏览器厂商的支持。 [5]
HTML历史上有如下版本: [5]
①HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]
②HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。 [5]
③HTML 3.2:1997年1月14日,W3C推荐标准。 [5]
④HTML 4.0:1997年12月18日,W3C推荐标准。 [5]
⑤HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。 [5]
⑥[HTML 5](https://baike.baidu.com/item/HTML 5/8762673):HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。 [6]
HTML在Web迅猛发展的过程中起着重要作用,有着重要的地位。但随着网络应用的深入,特别是电子商务的应用,HTML过于简单的缺陷很快凸现出来:HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式,但没有语义结构,即HTML显示数据是按照布局而非语义的。随着网络应用的发展,各行业对信息有着不同的需求,这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时,按照语义而非按照布局来显示数据会具有更多的优点。
总而言之,HTML的缺点使其交互性差,语义模糊,这些缺陷难以适应Internet飞速发展的要求,因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。
Web标准
Web 标准也称网页标准,它由一系列标准组成,这些标准大部分由 W3C 负责制订,也有一些标准由其他标准组织制定的,如 ECMA 的 ECMAScript 标准等。
狭义的 Web 标准是指网页设计的 DIV+CSS 化,广义的 Web 标准是指网页设计要符合 W3C 和 ECMA 规范。
在符合标准的网页设计中,CSS 与 HTML、JavaScript 并列称为网页前端设计的 3 种基本语言
- HTML 负责构建网页的基本结构;
- CSS 负责设计网页的表现效果;
- JavaScript 负责开发网页的交互效果。
网页结构
网页标准在网页中主要是对页面信息进行组织和分类,结构化标准语言主要包括 XML、HTML、XHTML。
XML
XML 是 The Extensible Markup Language 的缩写,中文译为“可扩展标识语言”,是一种能定义其他语言的语言。
XML 的最初设计目标是弥补 HTML 的不足,以强大的扩展性满足网络信息发布的需求。现在 XML 主要作为一种数据格式,用于网络数据交换和书写配置文件。
https://www.w3.org/TR/2000/REC-XML-20001006HTML
HTML 是 HyperText Markup Language 的缩写,中文译为“超文本标识语言”,而 XHTML 1.0 是在 HTML 4.0 基础上,用 XML 的规则对其进行扩展。
发布 XHTML 的最初目的就是实现 HTML 向 XML 的过渡。在一般语境中,人们习惯使用 HTML 代替 HTML 和 XHTML。
https://www.w3.org/TR/xhtml1/
网页行为
行为标准在网页中主要对网页信息的结构和显示进行逻辑控制,实现网页的智能交互。行为标准语言主要包括文档对象模型(如 W3C DOM)和 EMAScript 等。
DOM
DOM 是 Document Object Model 的缩写,中文译为“文档对象模型”,根据 W3C DOM 规范(参考地址:https://www.w3.org/DOM/
ECMAScript
ECMAScript 是由 EMA(European Computer Manufactures Association)组织制定的标准脚本语言。
目前使用最广泛的是 ECMAScript 262,也即 JavaScript 5.0 版本,
结构
一个网页对应多个HTML文件,超文本标记语言文件以.htm或.html(外语缩写)为扩展名(其中.htm是因为之前的文件系统只支持最多三位扩展名)。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件,只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:
),即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。部分标记也可以不成对出现,如
,但是一般并不赞同这样做。
标记符,说明该文件是用超文本标记语言来描述的,它是文件的开头;而,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。
头部内容
标记符:说明该文件是用超文本标记语言来描述的,它是文件的开头,而则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。
:这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,网页标题可被浏览器用做书签和收藏清以下表格列出了 HTML head 元素:
标签 描述 定义了文档的信息 定义了文档的标题 定义了页面链接标签的默认链接地址 定义了一个文档和外部资源之间的关系 定义了HTML文档中的元数据
编辑超文本标记语言
文本标记语言源程序的文件扩展名默认使用htm(磁盘操作系统DOS限制的外语缩写为扩展名)或html(外语缩写为扩展名),以便于操作系统或程序辨认,除自定义的汉字扩展名。在使用文本编辑器时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。 [9]
超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)“ (注意此字母必须小写,方可空格)”表示非换行空格;表示文件路径时使用符号“/”分隔,文件名及路径描述可用双引号也可不用引号括起。[9]
标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号“ (注意此字母必须小写,方可空格)”;许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。 [9]
标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,而不能使用全角字符。 [9]
HTML注释](https://baike.baidu.com/item/HTML注释)由" “结束,例如 。注释内容可插入文本中任何位置。任何标记若在其最前插入感叹号,即被标识为注释,不予显示。
标签/元素
- 双标签
- 单标签
使用
-
标题标签 h1-h6
-
段落标签 p
-
图像 img
-
链接 a 链接/苗点
-
表格 table
-
列表 ul ol dl
-
表单 form text radio checkbox password button submit reset select textarea lable
-
表单的属性 value readonly disabld maxlngth
-
span
-
Div
-
文本格式化标签 strong em < >
Html5 新标签(i9 以下不支持,一般移动端专用)
-
h5的语句话标签 header nav article section aside footer
-
音频 audio autoplay muted controls loop poster src
-
视频 video autoplay muted controls loop poster src
-
表单新标签 emali url date time month week number tel search color
-
表单的新特性 requird placholder autofocus autocomplete multiple
常见问题
-
标签的兼容性问题
-
布局问题
-
标签语义化问题
-
规范问题
-
相对路径,绝对路径
-
lang=“zh-CN”,charset=“utf-8” 问题
-
版本问题
-
Jpg,gif,png,psd
-
SEO
SEO
\1.
网站标题 \2. 网站描述
\3. 网站关键字
介绍
略