详解HTML程序编写的标识与文本文档构造

    用HTML标识內容的目地是以便授予网页页面词义(semantic)。换句话说,便是要给你的网页页面內容授予一些客户代理商(user agent)可以了解的含意。

    HTML 要求了1组标识,用来给內容打上不一样的标识。每一个标识全是对它所包括內容的1种叙述。最常见的HTML叙述的是题目、段落、连接和照片。现阶段,HTML1共有114个标识,但依照 80/20 标准,应用在其中25个上下的标识便可以考虑80%的标识必须。

    HTML 全新的版本号 HTML5,又新要求了1批构造化标识,用于对有关內容的标识开展排序,从而更好地标准网页页面的总体构造。这些新标识包含<header>、<nav>(即 navigation,导航栏)、<article>、<section>、<aside>和<footer>。

1.标识的闭合

    针对每一个包括內容的元素(例如题目、段落和照片),依据它所包括的內容是否文字,有两种不一样的方法给它们加标识,1种是应用闭合标识,另外一种是应用非闭合标识。

1.1 文字用闭合标识

示例:<h1>Hello, CSS!</h1>
1.2 引入內容用自闭合标识

示例:<img src="images/dog.jpg" alt="This is my dog." >

    提醒:
    针对自闭合标识,XHTML 规定务必这样写:

XML/HTML Code拷贝內容到剪贴板
  1. <img src="images/dog.jpg" alt="This is my dog." />  

    而在 HTML5 中,能够省略最终那个表明关掉的斜杠,写成:
   

XML/HTML Code拷贝內容到剪贴板
  1. <img src="images/dog.jpg" alt="This is my dog." >  

2.特性

    提醒:视障客户应用的显示屏阅读文章器会高声读取 alt 特性的內容,因而1定要给标识的
    这个 alt 特性加上令人1听(或1看)就可以搞清楚的內容。

3.题目与段落
4.复合型元素

    HTML 不但要求了题目、照片和段落等基础的內容标识,还要求了用于建立目录、
    报表和表单等繁杂客户页面组件的标识,这些便是所谓的复合型元素,即它们是由多
    个标识相互组成的。

5.嵌套循环标识

简易地说,便是把1个标识嵌套循环在另外一个标识里边。
6.HTML5 模版

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.  <meta charset="utf⑻" />  
  5.  <title>An HTML Template</title>  
  6.  </head>  
  7.  <body>  
  8.  <!-- 这里是网页页面內容 -->  
  9.  </body>  
  10. </html>  

7.块级元素和行内元素

文本文档流实际效果:HTML 元素会依照它们各有在标识中出現的前后次序,先后从网页页面上方流向正下方。

    基本上全部HTML 元素的 display 特性要末为 block,要末为 inline。最显著的1个列外是 table 元素,它有自身特俗的 display 值。

    块级元素(例如题目和段落)会互相层叠在1起沿网页页面向下排序,每一个元素各自占1行。而行内元素(例如连接和照片)则会互相并列,仅有在室内空间不够以并列的状况下才会折到下1行显示信息。

    不管你想掌握哪一个 HTML 元素,第1个要问的难题都应当是:它是块级元素,還是行内元素?了解了这1点以后,便可以在撰写标识的情况下,料想到某个元素在原始情况下是怎样精准定位的,这样才可以进1步想好未来如何用 CSS 再次精准定位它。

有两点要了解的:

    块级元素盒子会拓展到与父元素同宽。

    行内元素盒子会 收拢包裹 其內容,而且会尽量包紧。

7.嵌套循环的元素

在标识中嵌套循环的是HTML标识,而在显示屏上嵌套循环的则是1个个的盒子。
8.文本文档目标实体模型

文本文档目标实体模型(简称 DOM)是从访问器的视角来观查网页页面中的元素和每一个元素的特性,由此得出这些元素的1个大家族树。根据DOM,能够明确元素之间的互相关联。在 CSS 中引入 DOM
中特殊的部位,便可以选定相应的 HTML 元素,并改动其款式特性。

CSS 实际操作 DOM 的全过程是先挑选1个或1组元素,随后再改动这些元素的特性。根据 CSS 改动了元素后,例如改动了宽度或在标识里插进了1个伪元素,这些转变会马上在 DOM 中产生,并反映在网页页面上。

简而言之,便是根据 HTML 标识来搭建 DOM,随后在网页页面第一次载入和客户与网页页面互动时,应用 CSS 来改动 DOM。