關於HTML的那些事

HTML基礎知識

meta標籤

<!-- SEO搜素引擎優化，儘可能讓本身的網站在搜索引擎有相關搜索時出現 -->
        <!--網站搜索時根據所提供的keywords獲得搜索結果-->
        <meta name="keywords" content="鮮花,廣州鮮花速遞,深圳鮮花速遞">
        <!--關於搜索結果的介紹-->
        <meta name="description" content="這是一個賣鮮花的網站">
        <!--字符集-->
        <!--出現亂碼的狀況，1.文件的字符集不是utf-8 2.meta charset不是utf-8-->
        <meta charset="UTF-8">
        <!--建立網站時，會有不少html頁面，但網頁首頁服務器會默認是index，因此默認起名字是index-->
        <!--重置文件reset.cssnormalize.css下載link便可-->

doctype做用，嚴格模式和混雜模式如何區分，它們有何意義？

doctype聲明位於HTML文檔的第一行，位於html標籤以前，用於告知瀏覽器解析器用什麼文檔標準解析這個文檔，doctype不存在或者格式不正確會致使文檔以兼容模式呈現

在兼容模式中，頁面以寬鬆的向後兼容的方式顯示，模擬老式瀏覽器的行爲以防止站點沒法工做。標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行。

若是HTML文檔包含形式完整的doctype，那麼他通常是以標準模式呈現，對於HTML4.01文檔，包含嚴格的DTD的doctype經常致使頁面以標準模式呈現，doctype不存在或者格式不對會致使文檔以混雜模式出現。

請描述一個網頁從開始請求到最終顯示的完整過程?

1.在瀏覽器輸入網址
2.發送至DNS服務器並得到域名對應的WEB服務器IP地址
3.與WEB服務器創建TCP鏈接
4.瀏覽器向WEB服務器的IP地址發送相應的HTTP請求
5.WEB服務器響應請求並返回指定的url的數據或錯誤信息。若是重定向，則重定向到新的url地址
6.瀏覽器下載數據後解析HTML源文件，解析的過程當中實現對頁面的排版，解析完成後在瀏覽器顯示基礎頁面
7.分析頁面中的超連接並顯示在當前頁面，重複以上過程直至無超連接須要發送，完成所有數據顯示。

html5爲何只須要寫<！DOCTYPE HTML>？

html5不基於SGML，所以不須要對DTD進行引用
html4.01基於SGML，所以須要對DTD進行引用

瀏覽器內核的理解

瀏覽器最重要或者說核心部分：渲染引擎，不過咱們通常稱之爲瀏覽器內核。負責對網頁語法的解釋（標準通用標記語言下的一個應用html，javascript）並渲染顯示的網頁。渲染引擎決定了瀏覽器如何顯示網頁內容以及頁面的格式信息，不一樣的瀏覽器內核對網頁編寫語法的解釋也有不一樣，所以同一網頁在不一樣瀏覽器內核的瀏覽器裏渲染顯示的效果也不一樣。
渲染引擎負責獲取網頁的內容，整理訊息，以及計算網頁的顯示方式

經常使用瀏覽器內核

Trident內核(MSHTML)：IE，360，搜狗
Gecko內核：FireFox
Presto內核：Opera7以上
（Opera內核原爲Presto 現爲Blink）
webkit內核：Safari，Chrome
（Chrome的Blink使webkit的分支）
EdgeHTML內核：Microsoft Edge
（此內核實際上是從MSHTMLfork來的，刪除了幾乎全部IE私有特性）

簡述一下對html語義化的理解

1.html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器，搜索引擎解析
2.即使在沒有css樣式的狀況下也能以一種文檔格式顯示，而且是容易閱讀的。
3.搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，有利於SEO
4.使閱讀源代碼的人更容易將網站分塊，便於閱讀，維護和理解。

行級元素和塊級元素分別有哪些？

行級元素：
a, em(強調),strong(粗體強調)，span,i(斜體),img,b(粗體),lable(表格標籤),
select(項目選擇),textarea(多行文本輸入框)sub（下標）
不能設置寬高寬高是內容的高度,能夠設置padding，只能設置左右的外邊距，不能設置上下外邊距
塊元素：
不設置高，靠內容充起來,寬度不設置的狀況下是充滿父級元素的
能夠設置寬高，外邊距，內邊距
div dl定義列表 dt dd ul 非排序列表
ol，p，h1-h6，table，fieldset form，
空元素：br hr
行內塊級元素 input和img

a標籤

href裏不只能夠是一個遠程地址，還能夠是一個本地文件

<a href="https://ww.baidu.com" target="_blank">百度一下</a>
    <!--target屬性值的說明
    _blank從新啓動一個新的頁面
    _parent是父級頁面打開
    _top是最上層的頁面打開-->

link和@impoort的區別

1.link屬於XHTML標籤，而@import是CSS提供的
2.頁面被加載時，link會同時被加載，而@import引用的css會等到頁面被加載完了再加載
3.import只在ie5以上才能被識別，而link是XHTML標籤，無兼容性問題
4.link方式的樣式權重高於@import的權重
5.使用dom控制樣式時的差異，當使用js控制dom去改變樣式的時候，只能使用link標籤。

列表標籤

ol,ul,li樣式重置:list-style:none
a樣式重置：text-direction ：none
ul，ol有上下16px的外邊距，左面40px內邊距

img標籤

<img id="zyl" src="resourses/zylbg.jpg" alt="圖片加載失敗" title="這是居老師的圖片">
<!--alt在圖片加載失敗時顯示 title是在鼠標放到圖片上顯示-->
<!--設置頁面頭的圖片第一種是a標籤裏嵌套img標籤。ie6下，若是a標籤包含img標籤，img會有一個邊框，須要樣式重置border=0-->
<!--當a標籤中有img標籤的時候：a標籤若沒有改變成block 則圖片的寬高會有錯誤-->
<!--當圖片做爲塊級元素的背景圖片出現的時候，若是塊級元素沒有設置高度那麼整個塊級元素將不顯示圖片-->
<!--background-position:center;//水平垂直居中
//right center //右側 垂直居中
//right bottom(top)//右側底部(頭部)-->

背景圖片大於要顯示的大小的時候
<!--background-position: center top;-->
<!--讓圖片顯示中間的部分-->
<!--background-size: auto 100%;-->
<!--適應要顯示的大小-->

table標籤

<table border="1">
        <tr>
            <td colspan="2">11</td>
    <!--跨列合併單元格-->
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
        </tr>
    </table>
<!--td能夠設置寬高跟行內塊級元素差很少，tr和table是塊級元素-->
<!--table標籤裏有border屬性，這個和style裏邊的border不一樣-->
<!--table裏面的屬性跨行時只能從上往下跨行不能從下往上跨行。-->
<!--跨列的時候若是左面的一列不見了，那麼右面的列會移到左面-->
<!--這個屬性能夠用在新聞網頁，當鼠標放在a標籤上的時候會顯示這種提示-->