初识HTML和WEB标准

什么是 HTML？

  • HTML 超文本标记语言的缩写(Hyper Text Markup Language)
  • HTML 并不是编程语言，而是一种标记语言(markup language)
    • 标记 <英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
    • 标记语言 一套标记标签(markup tag)
    • 标记语言 和编程语言有一个编译过程不一样，它是直接将HTML页面交由浏览器解析执行的。
  • HTML 使用标记标签来描述网页，用于描述超文本内容的显示方式，如字体，颜色，大小等。
    • 超文本基本特征就是可以超链接文档。
    • 这些标记标签在浏览器解析完展示给用户看的时候是不会出现在页面的。

HTML 有什么用？

  • 作用 HTML用于描述文档语义。(html中，除了语义，其他什么都没有)

什么是HTML 标签？

* HTML 标记标签通常被称为 HTML 标签(HTML tag)

* HTML 标签是由尖括号包围的关键词，如<html>。

* HTML 标签通常是成对出现的，如<p>和</p>。

* 标签对中的第一个标签是开始标签，第二个(通常带"/"号)标签是结束标签。

* 开始标签和结束标签也被称为开放标签和闭合标签。

HTML标签 有什么用？

  • 作用: 不同的HTML标签给文本不同的语义。

    • 面试的时候问你，h1标签有什么作用？

      • 正确答案: h1标签用于给文本增加主标题的语义，且一个页面中只能有一个h1标签(文章名称只能有一个)
      • 错误答案: h1标签用于给文字加粗，加黑，增大。

HTML 文档 = 网页

web 浏览器的作用是读取HTML文档，并将其以网页的形式显示，浏览器不会显示当中的HTML标签，而是使用标签来解析页面的内容。

  • HTML文档 用于描述网页。
  • HTML文档 包含HTML标签和纯文本。
  • HTML文档 被称为网页(通俗术语)
  • 网页 可以看成是由各种标记组成的一个页面。
    • 主页(首页) 网站的起始页面或者导航页面。

例：

<html>

	<!-- 放在此类标签是注释，<html> 与 </html> 之间的文本用于描述网页 -->

	<body>

		<!-- <body> 与 </body> 之间的文本是可见的页面内容主体正文 -->

		<h1> 主标题：铁乐与猫学习HTML </h1>

		<!-- <h1> 与 </h1> 之间的文本被显示为主标题，有且只有一个 -->

		<p> 正文段落：学习HTML的第一天。</p>

		<!-- <p> 与 </p> 之间的文本被显示为段落 -->

	</body>

</html>

WEB标准

  • w3c 万维网联盟组织，制定web标准的机构。

  • web标准 制作网页遵循的规范，它不是一个标准，而是一系列标准的集合。
  • 网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）
  • 对应web标准也分三方面：结构化标准语言、表现标准语言、行为标准。
    • 结构化标准语言：主要是XHTML和XML，用于描述网页。
    • 表现标准语言：主要是CSS，用于对网页进行美化。
    • 行为标准：主要包括对象模型（如W3C DOM）、ECMAScript等，JS让网页富有生命力，动态。

代码标准

  • 必須结束标记

    • HTML可以打开多个标签而不要求一定要写对应的结束标签来关闭它们。
    • 这在XHTML中是不合法的。另外约定俗成也必須带结束标记。
    • XHTML要求有严谨的结构，所有标签必须关闭。
    • 如果是单独不成对的标签，在标签最后加一个"/"来关闭它。 
      * 双边标记 <span\></span>
      
* 单边标记 <br>转成<br />
  • 小写元素
    • HTML对大小写不敏感，XHTML对大小写敏感。
    • XHTML要求所有的标签和属性的名字都必须使用小写。
    • 大小写夹杂也是不被认可的。
      • 例dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
  • 合理嵌套
    • 所有的嵌套都必須按顺序。 
      * 例<p><b></p></b>必須修改为<p><b></b></p>
    • 一层一层的嵌套必須是严格对称。
  • 属性值加引号
    • 在HTML中，没有强制给属性值加引号，但在XHTML中，必須被加引号。 
      * 例<height=90>必須修改为：<height="90">
    • 特殊情况需要在属性值中使用双引号时可以用相应代表的特殊符号去引用。
  • 特殊符号
	* 任何小于号(<)，只要不是标签的一部分，都必须被编码为&lt;

	* 任何大于号(>)，只要不是标签的一部分，都必须被编码为&gt;

	* 任何与符号(&)，只要不是实体的一部分，都必须被编码为&amp;

	* 注：上面的特殊符号中间没有空格，且后面带分号。
  • 所有属性赋值

    • XHTML规定所有属性都必须有一个值，没有值的就重复本身。
  • "--"在注释中
    • “--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。

以上标准虽然只在XHMTL中要求规范，HTML中不算不合法，但程序员默认还是要遵循它们的。

HTML的基本语法特征

  • HTML对换行不敏感，对tab不敏感，换多少行和tab多少都不影响页面的结构。

    • HTML并不依靠缩进来表示嵌套，而是直接看标签的包裹关系。
    • 但是良好的缩进有助于阅读和理解代码，所以最好还是正确的使用缩进标签。
  • 空白折叠现象
    • HTML中所有的文字之间，如果有空格、换行、tab都只会被折叠成一个空格显示。
  • 标签要严格封闭

HTML与XHTML

  • XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。

    • 在XHTML中的字母X，表示“严格的”。
    • XHMTL与HTML4.0的标记基本上一样。
    • XHTML不同于HTML4.0，可称之为严格严谨的、纯净的HTML。
    • XHTML的主要目的是为了规范HTML4.0，也可以理解为HTML4.0的升级版。
    • 但是真正的升级版，HTML5极大的简化了DTD(规范)，也就是说HTML5中就不用区分XHTML和HTML了。
  • HTML的标记书写很不规范，有可能会造成其它的设备(ipad、手机、电视等)无法正常显示。
    • HTML4.01里面规定了普通和XHTML两大种规范。
    • HTML4.01这个版本是IE6开始兼容的。
    • HTML5是IE9开始兼容的。

文：铁乐与猫

2018-5-21

参考：

1、HTML简介

2、html介绍和head标签

3、baidu百科：web标准

初识HTML和WEB标准的更多相关文章

  1. web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

  2. 01-前言&WEB标准

    人生苦短,要学就只学有用的 [前端教学-前言] 初识web开发 我们先来认识一下web前端 其实前端的工作,大体的概括就是:根据美工给的设计稿,变成web网页,使用后天的接口实现数据的渲染,要是高端一 ...

  3. web标准之道——笔记

    字体设置 sans和sans-serif为通用字体,具体哪个字体被最终应用由浏览器决定,通用字体只有在其他字体都无效时才会被当作代替方案.通用字体应该放在最后面 sans衬线字体 容易阅读,一般使用在 ...

  4. 【转载】跟随 Web 标准探究DOM -- Node 与 Element 的遍历

    跟随 Web 标准探究DOM -- Node 与 Element 的遍历 这个是 Joyee 2014年更新的,可能是转战github缘故,一年多没有跟新了.这篇感觉还挺全面,就转载过来,如以前文章一 ...

  5. 深入理解Web标准（网站标准）

    深入理解Web标准(网站标准)   我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而 ...

  6. 我所理解的RESTful Web API [Web标准篇]

    REST不是一个标准,而是一种软件应用架构风格.基于SOAP的Web服务采用RPC架构,如果说RPC是一种面向操作的架构风格,而REST则是一种面向资源的架构风格.REST是目前业界更为推崇的构建新一 ...

  7. asp.net开发与web标准的冲突问题

    Visual Studio .net从2003到现在的2008,一路走来慢慢强大……从以前的vs2003能自动改乱你的html代码到现在在vs2008中都能直接对html代码进行w3c标准验证并提示了 ...

  8. 对WEB标准以及W3C的理解与认识

    按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论“^_^).但我认为,事实上从技术的角度上讲,这两个事物几乎没有任何相关性.web标准简而言之就是将页 ...

  9. 细谈WEB标准

    最近有些朋友很是疑惑web标准是什么,我在这里先做一个总结,有更好的见解的可以私信给我! 首先切入正题之前先谈一下什么叫DOCTYPE,DOCTYPE是document type(文档类型)的简写,主 ...

随机推荐

  1. elasticdump

    elasticdump备份elasticsearch里面的某个索引数据 1.     安装环境 需要node.npm.yarn # 去官方下载最新版本的nodejs #wget https://nod ...

  2. textarea的placeholder属性内容折行显示(PC和移动端端)

    1.PC端折行方法 placeholder="字体 字体" 可以使其折行显示   2.移动端折行方法 webkit内核 textarea::-webkit-input-placeh ...

  3. JavaScript学习总结(三)——闭包、IIFE、原型、函数与对象

    一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...

  4. ClickOnce 发布WinForm应用程序(非签名方式)

    ClickOnce IIS7发布WinForm应用程序,非签名方式(不勾选签名中的"为ClickOnce清单签名") 一.在D盘上建一个文件夹”MyAppPath”.      该 ...

  5. 撰写html标签的快捷方式1

    一: <ul> <li><a href=""></a></li></ul> 如果要写上面的标签,直接写 ul ...

  6. win10 系统下MyEclipse用SVN之后想切换用户的解决方法

    1.在svn 创建了两类账户,分别是管理员 和 开发人员. 2.代码同步到Myecclipse .使用的是 admin 管理员账户checkout. 3.提交代码的时候想用开发者账户user提交,发现 ...

  7. HDU3533(KB2-D)

    Escape Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  8. MPVUE - 使用vue.js开发微信小程序

    MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...

  9. [微信小程序]微信开发工具出现 1not found 编译 .wxss文件信息错误怎么办？

    错误代码: "1not found 编译 .wxss文件信息错误",如 下图 出现场景: 1.一般出现在安装新版本之后出现的状况,可能由于版本之间的兼容导致 解决办法: 1.重装整 ...

  10. 一道面试题让你与JS更近一步

    这是一道面试题, 请先思考,在看讲解 :) var param = 1; function main() { console.log(param); var param = 2; console.lo ...