HTML基础-认识HTML

时间 2019-12-12

标签 html 基础认识栏目 HTML 繁體版

原文原文链接

HTML基础-认识HTML

转载自 https://www.jianshu.com/p/03308d04cf77javascript

什么是HTML

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

HTML的做用

1.首先利用记事本保存了一个标题和两段描述, 而后修改纯文本文件的扩展名为.html, 而后再利用浏览器打开

郑伊健

郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。[1] 1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》得到十大中文金曲奖。1996年至1997年连续两次得到”台湾十大偶像”奖。

2.打开以后发现显示的格式不对, 不对的缘由是由于在纯文本文件中全部文字都是同级别的, 浏览器不知道哪些文字表明什么意思. 也就是浏览器不知道哪些文字是标题, 哪些文字是段落...., 因此致使了显示的格式不正确css
3.正是由于如此, 因此HTML应用而生. HTML就只有一个做用, 它是专门用来描述文本的语义的. 也就是说咱们能够利用HTML来告诉浏览器哪些是标题, 哪些是段落.html
- 这些用于描述其它文本语义的文本, 咱们称之为标签. 而且这些用于描述文本语义的标签未来在浏览器中是不会被显示出来的
- 因此正是由于HTML的这些标签是专门用来描述其它文本语义的, 而且在浏览器中不会被显示出来, 因此咱们称这些文本为"超文本", 而这些文本又叫作标签, 因此HTML被称之为"超文本标记语言"

<h1>郑伊健</h1> <p>郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。[1] </p> <p>1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》得到十大中文金曲奖。1996年至1997年连续两次得到”台湾十大偶像”奖。</p>

注意事项:java
- 虽然咱们利用H1标签描述一段文本以后, 这段文本在浏览器中显示出来会被放大和加粗, 看上去咱们是利用HTML的标签修改了被描述的那段文本的样式. 可是必定要记住, HTML只有一个做用, 它是专门用来给文本添加语义的, 而不是用来修改文本的样式的
H1标签它的做用是什么?web
- 错误: H1标签能够用来修改文字的大小, 而且还能够将文字加粗
- 正确: H1标签的做用是用来告诉浏览器, 哪些文字是标题. 也就是H1标签是专门用于给指定的文字添加标题语义的

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来定制的。

Tim Berners-Lee（蒂姆·伯纳斯-李），万维网之父、html设计者、w3c创始人
百度百科

网页的固定格式

1.编写网页和写信同样都有一套规范和要求, 这套规范和要求中规定了写信的固定格式
2.写信基本结构

敬爱的江哥:
      您好!
      正文正文正文正文正文正文正文正文正文正文正文正文
正文正文正文正文正文正文正文正文正文正文正文正文
      此致
敬礼!
                                                              你的朋友 伊健
                                                              2066年6月6日

3.编写网页的步骤:
3.1.新建一个文本文档
3.2.利用记事本打开
3.3.编写THML代码
3.4.保存而且修改纯文本文档的扩展名为.html
3.5.利用浏览器打开编写好的文件windows
4.网页基本结构:浏览器

<html> <head> <title></title> </head> <body> </body> </html>

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

html标签

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

head标签

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

title标签

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

body标签

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

head内部标签

meta标签

1.为何会有乱码现象?app
- 由于咱们在编写网页的时候没有指定字符集
2.如何解决乱码现象?框架
- 在head标签中添加<meta charset="GBK" />, 指定字符集
3.什么是字符集ide
- 字符集就是字符的集合, 也就是不少字符堆在一块儿. 其实字符集很像咱们古代的"活字印刷术", 在活字印刷术中就是将不少刻有汉字的小章放到一个盒子中, 而后须要印刷文字的时候再去盒子中取这个小章出来用, 正是由于如此, 因此致使了乱码问题
- 假设北方人和南方人都拥有装满小章的盒子, 可是南方人和北方人在盒子中存储小章的顺序不太同样, 那么这个时候若是北方人和南方人都须要去取"李"字, 在南方人记忆中李字在第6个盒子的第6行的第6列中(666), 在北方人的记忆中李字在第8个盒子的第8行的第8列中(888). 那么此时若是让一个南方人去北方人的盒子中取"李"字的小章, 必然找不到,, 因此就致使了乱码问题
- 这个地方北方人的存储小章的盒子和南方人存储小章的盒子就对应网页中指定的字符集, 在网页中咱们常见的字符集有两个GBK/UTF-8, GBK就对应北方人存储的盒子, UTF-8就对应南方人存储的盒子
- 因此在网页中指定字符集的意义就在于告诉浏览器我用的是哪一个盒子, 你应该如何去查找才能找到对应的正确的内容
4.GBK(GB2312)和UTF-8区别
- GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些经常使用外文
  - 体积比较小
- UTF-8里面存储的世界上全部的文字
  - 提交比较大

5.那么在企业开发中咱们应该使用GBK(GB2312)仍是UTF-8呢?
- 若是你的网站仅仅包含中文, 那么推荐使用GB2312, 由于它的体积更小, 访问速度更快
- 若是你的网站除了中文之外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8
- 懒人推荐: 无论三七二十一, 一概写UTF-8便可
6.注意点:
- 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 不然仍是会出现乱码
- 因此仅仅指定字符集不必定能解决乱码问题, 还须要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题

HTML标签

HTML标签分类

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

<meta charset="UTF-8" />

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

<html>
</html>

HTML标签关系分类

并列关系(兄弟/平级)

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

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

<head>
        <meta charset="UTF-8" /> <title>百度一下,你就知道123</title> </head>

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命名格式存在的

做者：极客江南连接：https://www.jianshu.com/p/03308d04cf77 來源：简书简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。