對HTML（HyperText Markup Language)的認識以及總結

時間 2019-11-12

標籤 html hypertext markup language 認識以及總結欄目 HTML 简体版

原文原文鏈接

1、HTML的基礎結構css

以上圖片能夠看出HTML的基礎結構：html

文檔聲明+<html>根元素（也叫頂級元素）------》<html>裏包括<head>元素+<body>元素web

文檔聲明：http://www.cnblogs.com/Jm-jing/articles/6973877.html、瀏覽器

<head>元素：主要包括三大類信息：工具

一、網頁基本信息佈局

文檔標題（瀏覽器標籤中顯示的文本）：<title>深刻了解 head 元素</title>

編碼格式：<meta charset="utf-8">（你可能還看到 gb2312格式，不過不建議使用），若是你的頁面出現亂碼，那通常就是編碼格式不對

視窗設置：<meta name="viewport" content="width=device-width, initial-scale=1.0">

搜索引擎優化相關內容： <meta name="description" content=「幫助你深層次瞭解HTML文檔結構」>

IE瀏覽器版本渲染設置：<meta http-equiv="X-UA-Compatible" content="ie=edge">

二、其餘文件連接性能

CSS 文件：<link rel="stylesheet" type="text/css" href="style.css">

JavaScript 文件：<script src=「script.js"></script>

三、廠商定製優化

比喻開啓雙核瀏覽器先河的360瀏覽器就定製了一個默認使用哪一個內核來渲染頁面，能夠設置爲webkit內核、IE標準，IE兼容三種模式。代碼分別爲：ui
<meta name="renderer" content="webkit">  
<meta name="renderer" content="ie-stand">  
<meta name="renderer" content="ie-comp"> 
相關參考連接：搜索引擎

　 http://www.cnblogs.com/Jm-jing/articles/6986967.html

　 http://www.cnblogs.com/Jm-jing/articles/6986998.html

補充：

從理論上講，<html>元素的子元素只能是<body>元素以及<head>元素，可是有一些網頁卻將<script>元素放在了<body>元素外，也就是<html>元素下，可是，卻沒有報錯？

HTML5標準中的HTML語法規則，若是在</body>後再出現<script>或任何元素的開始標籤，都是parse error，瀏覽器會忽略以前的</body>，即視做仍舊在body內。因此實際效果和寫在</body>以前是沒有區別的。

詳情請看：http://www.cnblogs.com/Jm-jing/articles/6974074.html

2、HTML樹

樹的特色：以主幹爲主，同時從主幹中延伸出不少的分支。所以，咱們能夠將HTML的代碼想象成一棵HTML樹，這樣便於咱們去理解。

父元素：包含另外一個元素的元素是被包含元素（即子元素）的父元素【一個元素能夠擁有多個子元素，但只能有一個父元素】

兄弟元素：具備同一個父元素的幾個元素互稱爲兄弟元素

補充一些提升Web性能的注意事項：　

一、避免過多層嵌套：

　層級越深的節點在初始化構建時，所佔內存越多。經過瀏覽器HTML解析器會將整個HTML文檔的結構存儲爲DOM樹結構。當節點嵌套層次越深，構建的DOM書層次也越深。因此，咱們在寫HTML頁面的時候，要想清楚要以怎樣簡潔卻又能表現整個HTML頁面的結構去寫代碼。

二、顯示設置圖片的寬高

有時須要在頁面加載完以前，就對頁面佈局進行定位。若頁面中的圖片沒指定尺寸，或尺寸與實際圖片大小不符，瀏覽器會在圖片下載完成後再"回溯"該圖片並從新顯示，從而浪費時間。因此最好爲頁面的圖片設置指定尺寸

3、HTML元素

元素的定義：兩個標籤連同它們之間的內容構成元素。

元素的用途：是用來向瀏覽器說明文檔內容的工具。其效果體如今內容之上

元素的特色：一、不一樣的元素有不一樣的確切含義。二、元素名不區分大小寫。三、語義元素可用來講明內容的含義以及內容的不一樣部分之間的關係。

元素類型：

一、元數據元素（metadata element）

　　定義：用來構建HTML文檔的基本結構，就如何處理文檔的瀏覽器提供信息和指示

　　元數據元素：<tittle> <base> <meta> <link> <script> <noscript>等等

二、流元素（flow element）

　　定義：是短語元素的超集，即全部短語元素都是流元素，但並不是全部流元素都是短語元素

　　流元素有：<noscript> <a>等等

三、短語元素（phrasing element）

　　定義：是HTML的基本成分

　　短語元素有：<script> <noscript> <a> <b>等等

四、其餘元素

　　有些元素沒法納入以上3種類型，這些元素要麼沒有特別意義，要麼只能用在一些很是有限的狀況下

　　例：<li>元素只能有3中父元素（<ul>/<ol>/<menu>）

詳情可參考：《HTML5權威指南》

補充

一、空元素

定義：元素的開始和結束標籤間並不是必定有內容，沒有內容的元素成爲空元素。（有些空元素爲空時沒有意義---<code>）
<p></p>
二、自閉合標籤

空元素能夠更簡潔地使用一個標籤表示
<code/>
三、虛元素

定義：有些元素只能使用一個標籤，在其中放置任何內容都不符合HTML規範。

表示：一、只使用開始標籤----><hr>

　　　二、在1的基礎上加一個斜槓符號，其形式與空元素一致

虛元素有：<img>、<hr>

四、行內元素以及塊級元素

塊級元素：

　　特色：默認佔據正行寬度

　　例：<p> <div> <h1> <ul> <ol> <li>

行內元素：

　　特色：同行顯示，默認寬度由內容決定

　　例：<a> <span> <i> <em> <img>

4、全局屬性

　　定義：它們用來配置全部元素的共有行爲，全局屬性能夠用在任何一個元素身上，不過這不必定會帶來有意義或者有用的行爲改變。

詳情請參考：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

5、總結

一、一個HTML頁面先從聲明出發，到結構，再到元素，最後到屬性。就是說，一個HTML頁面確定會包含聲明+結構+元素+屬性這4個基礎。

二、在寫一個網頁的結構前，要先想好頁面的佈局

三、儘可能作到語義化（多用H5元素），也是利於SEO

四、爲了提升性能，謹記不要多層嵌套，儘可能作到以最小的嵌套作出最好的結構

五、一個好的頁面，謹記要完善好<head>元素裏的內容，利於SEO

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。