初识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. Oracle数据库中的分页--rownum

    1. 介绍 当我们在做查询时,经常会遇到如查询限定行数或分页查询的需求,MySQL中可以使用LIMIT子句完成,在MSSQL中可以使用TOP子句完成,那么在Oracle中,我们如何实现呢? Oracl ...

  2. 动态创建table表格页面出现undefined原因以及修改

    源代码: var html: if(lists) { html += '<a href="https://www.4001149114.com/NLJJ/member/sharecel ...

  3. Linux 查看内核版本命令的相关说明

    hostname 显示主机名称uname -a 显示内核版本详细信息,其中包括主机名称,发行厂商这个命令是看不到的. 如果要看发行版及厂商可使用命令:lsb_release –a uname -a后, ...

  4. 三种数据库访问——Spring3.2 + Hibernate4.2

    前三篇随笔中介绍了 用原生的JDBC访问数据库.一种高效的数据库连接池druid.用Spring的JDBC框架访问数据库. 本文继续介绍第三种数据库访问的解决方案:Spring3.2 + Hibern ...

  5. [转]Mongodb的下载和安装

    本文转自:https://www.cnblogs.com/htyj/p/8260602.html 下载 下载地址:http://dl.mongodb.org/dl/win32/x86_64  说明:z ...

  6. XP系统运行wpf程序出现透明现象的解决

    xp 虚拟机运行WPF程序的时候,有部分控件透明,在这儿有一个可能的解决方案: 关闭系统的硬件加速: 1. 按“WIN” + R 键,在“运行”输入框中输入“dxdiag”: 2. 在“DirectX ...

  7. [转]使用C#进行图像处理的几种方法

    最近做监控图像由彩色变灰处理的时候发现图像处理过程中,很慢很慢代码如下: int Height = this.picInfo.Image.Height;                    int ...

  8. jsonp跨域简单应用（一）

    转载:http://www.cnblogs.com/cyg17173/p/5865364.html ashx+jsonp+document.referrer   -- 一年前学的JSONP 跨域,一年 ...

  9. SpringMVC中文件上传

    在SpringMVC中上传文件是比较方便的.主要分为以下几个步骤: 1)在applicationContext.xml中增加相应类的引用 <bean id="multipartReso ...

  10. 7行代码看EntityFramework是如何运行

    这段时间在项目中运用Entity Framework作为底层数据交互框架.一个字,爽.不仅提高了开发效率,省了很多代码,而且数据库也规范了很多.按照网上的一些教程初步学习,然后实际运用了,再结合MVC ...