HTML基础-陈夕带你认识HTML

什么是HTML

HTML其实是HyperText Markup Language的缩写, 超文本标记语言

HTML发展史

IETF简介

IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是'互联网工程任务组'
IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等

W3C简介

W3C是英文World Wide Web Consortium的缩写，翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee
W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。

网页的固定格式

1.编写网页和写信一样都有一套规范和要求, 这套规范和要求中规定了写信的固定格式
2.写信基本结构
3.编写网页的步骤:
3.1.新建一个文本文档
3.2.利用记事本打开
3.3.编写THML代码
3.4.保存并且修改纯文本文档的扩展名为.html
3.5.利用浏览器打开编写好的文件
4.网页基本结构:

5.通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签

html标签

作用:
用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档
注意点:
其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

head标签

作用:
用于给网站添加一些配置信息
例如:
指定网站的标题 / 指定网站的小图片
添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
外挂一些外部的css/js文件
添加一些浏览器适配相关的内容
注意点:
一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到

title标签

作用:
专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题
注意点:
title标签必须写在head标签里面

body标签

作用:
专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
注意点:
虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中
一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

HTML标签

HTML标签分类

单标签
只有开始标签没有结束标签, 也就是由一个<>组成的

<meta charset='UTF-8' />

双标签
有开始标签和结束标签, 也就是由一个<>和一个</>组成的

HTML标签关系分类

并列关系(兄弟/平级)

<head></head><body></body>

嵌套关系(父子/上下级)

DTD文档声明

什么是DTD文档声明?
由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的编译/解析/渲染我们的网页, 我们需要在HTML文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的. 浏览器只要知道了我们是用哪一个版本的规范来编写之后, 它就能够正确的编译/解析/渲染我们的网页
DTD文档声明格式:

<!DOCTYPE html>

注意事项:<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html> 标签之前
<!DOCTYPE> 声明不是 HTML 标签
<!DOCTYPE> 声明没有结束标签
<!DOCTYPE> 声明对大小写不敏感
这个声明浏览器会看, 但是并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制
不写也能运行
H5网页里面用H4也能运行

HTML5之前有2大种规范, 每种规范中又有3小种规范
大规范小规范 HTML Strict (严格的) HTML Transitional(过度的,普通的,宽松的) HTML Frameset(带有框架的页面) XHTML Strict (严格的) XHTML Transitional(过度的,普通的,宽松的) XHTML Frameset(带有框架的页面) HTML的DTD文档声明和XHTML的DTD文档声明有何区别?
XHTML本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等, 而HTML会更加松散没有这么严格
Strict表示严格的, 这种模式里面的要求更为严格.这种严格主要体现在有一些标签不能使用
例如font标签/u标签等
font标签可以修改一个文本的字号、颜色、字体,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而font标签是用于修改样式的,所以在Strict中是不能使用font标签
u标签可以给一个文本加上下划线,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u标签是用于添加下划线是样式.所以在Strict中是不能使用u标签
Transitional表示普通的, 这种模式是没有一些别的要求
例如可以使用font标签、u标签等
但是在企业开发中不会使用这些标签,因为这违背了HTML的本质, 而是将这些标签作为css的钩子使用
Frameset表示框架, 在框架的页面使用
后面学到框架/NodeJS 再做详细了解
常见的DOCTYPE有如下几种

HTML4.01:<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN''http://www.w3.org/TR/html4/loose.dtd'>XHTML 1.0<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>HTML5: <!DOCTYPE html>

有这么多规范我们学习过程中到底使用哪一种比较合适呢?
无论是HTML还是XHTML,过去企业级开发中用的比较多的大部分都是Transitional类型的文档声明
但是HTML5的时代已经到来,以上6中规范仅仅作为了解, 以后都用HTML5类型的文档声明, HTML5向下兼容(求此刻WC3心里阴影面积)
目前国内一线网站都更新到了HTML5的文档声明, 所以后续授课也是全程使用HTML5的文档声明
www.baidu.com (B)
www.taobao.com (A)
www.qq.com (T)
www.sohu.com(大奇葩)

HTML和XHTML、HTML5区别

在HTML的早期发展中，大部分标准都是所谓的retro-spec，即先有实现后有标准。在这种情况下，HTML标准不是很规范，浏览器也对HTML页面中的错误相当宽容。这反过来又导致了HTML开发者写出了大量含有错误的HTML页面
html语言本身有一些缺陷（例如：内容和形式不能分离；标签单一；数据不能复用等等），随着xml的兴起人们希望xml来弥补html的不足，但是目前有成千上万的网页都是用html编写的，所以完全使用xml来替代html还为时过早，于是W3C在2000年推出了xhtml1.0，建立xhtml的目的就是实现从html向xml的过度
为了规范HTML，W3C结合XML制定了XHTML 1.0标准，这个标准没有增加任何新的标签，只是按照XML的要求来规范HTML，并定义了一个新的MIME type application/xhtml xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查，如果页面有HTML错误，就要显示错误信息。但是由于已有的web页面中已经有了大量的错误，很多开发者拒绝使用新的MIME type。W3C不得已，在XHTML 1.0的标准之后增加了一个附录C，允许开发者使用XHTML语法来写页面，同时使用旧的MIME type，application/html，来分发页面
W3C随后在XHTML 1.1中取消了附录C，即使用XHTML 1.1标准的页面必须用新的MIME type来分发。于是这个标准并没有很多人采用
有了XHTML的教训，W3C在制定下一代HTML标准时（HTML5），就将向后兼容作为了一个很重要的原则。HTML5确实引入了许多新的特性，但是它最重要的一个特性是，不会break已有的网页。你可以将任何已有的网页的第一行改成<!DOCTYPE html>，它就成也一个HTML5页面，并且可以照样在浏览器里正常的展示。
简而言之
HTML语法非常宽松容错性强;
XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;
HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性

.htm 和 .html扩展名区别

DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm
但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
所以htm是为了兼容过去的DOS命名格式存在的

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。