【前端知識體系】HTML基礎知識強化總結

時間 2019-11-17

標籤前端知識體系 html 基礎知識強化總結欄目 HTML 简体版

原文原文鏈接

1.如何理解HTML？

HTML相似於一份word「文檔」
描述文檔的「結構」
有區塊和大綱

2.對WEB標準的理解？

Web標準是由一系列標準組合而成。一個網頁主要由三部分組成：結構層、表現層和行爲層。javascript

對應的標準也分三方面：css

結構化標準語言主要包括XHTML和HTML以及XML，
表現層標準語言主要包括CSS，
行爲標準主要包括對象模型，DOM、ECMAScript等

2.1 結構層標準

結構化標準語言，就是W3C規定的主要包括HTML和XHTML以及XML，在頁面body裏面咱們寫入的標籤都是爲了頁面的結構。html

標籤的書寫，須要開始和結束。單便籤除外；
塊級元素不能放在p標籤裏面。li內能夠包含div標籤。
塊元素裏面能夠放在塊和內聯，特殊的 p和 h1—h6裏面不要放塊元素，li和div能夠放不少。由於這兩個標籤，自己就有容器的屬性
內聯裏面要放內聯，不要放塊。（嵌套關係）
結構與表現分離
命名必定要規範

2.2 表現層標準

表現標準語言主要包括CSS（Cascading Style Sheets）層疊式樣式表，經過CSS樣式表，W3C建立CSS標準的目的是以CSS取代HTML表格式佈局、幀和其餘表現的語言，經過CSS樣式能夠是頁面的結構標籤更具美感。前端

儘量使用外部引入的方式，達到分離的目的
CSS選擇器，優先級
代碼簡潔

2.3 行爲層標準

行爲是指頁面和用戶具備必定的交互，同時頁面結構或者表現發生變化，標準主要包括對象模型（如W3C DOM）、ECMAScript並要求這三部分分離。html5

DOM是Document Object Model文檔對象模型的縮寫。DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的衝突，給予web設計師和開發者一個標準的方法，讓他們來訪問他們站點中的數據、腳本和表現層對像。java
ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的標準腳本語言（JAVAScript）jquery

3.對W3C的認識？

W3C對web標準提出了規範化的要求，也就是在實際編程中的一些代碼規範。程序員

主要包含以下幾點：web

3.1 對於結構的要求

1）標籤字母要小寫
2）標籤要閉合
3）標籤不容許隨意嵌套

3.2 對於css和js的要求

1）儘可能使用外鏈css樣式表和js腳本。使結構、表現和行爲分爲三塊，符合規範。同時提升頁面渲染速度，提升用戶的體驗。
2）樣式儘可能少用行間樣式表，使結構與表現分離，標籤的id和class等屬性命名要作到見文知義，標籤越少，加載越快，用戶體驗提升，代碼維護簡單，便於改版。
3）不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性。

4.什麼是前端語義化？

[!NOTE]
語義化就是是讓機器能夠讀懂內容，web頁面的解析是由搜索引擎來進行搜索，機器來解析。ajax

4.1 標籤是有語義的

h1~h六、thead、ul、ol等標籤，初期的語義化標籤：程序員利用HTML標籤的id和class屬性，進一步對HTML標籤進行描述，如對頁腳HTML標籤添加如id="footer"或者class="footer"的屬性（值）（使用有語義的對於須要聲明的變量和class，id）

4.2 HTML5的語義標籤

w3C採用了header/footer; section（章節、頁眉、頁腳）/article（內容區域）; nav導航；aside 不重要的內容；em(emphasize)/strong加強; i(icon)製做圖標

5.談一下頁面佈局架構？

CSS佈局：table佈局，float佈局，flex佈局（瀑布流佈局），inline-block佈局
三大框架，頁面架構

6.HTML的版本問題？

HTML4/4.0.1(SGML)(標籤容許不結束)
XHTML(XML)（標籤必須結束，屬性必須帶引號，屬性必須有值，標籤屬性必須有值）
HTML5（相似於HTML4的寫法）

[!NOTE]
關鍵點：HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言

7.HTML5新增的內容有哪些？

新的區塊標籤：section,article,nav,aside
表單加強：日期、時間、搜索（修改type的類型實現）；表單驗證；placeholder
語義加強：header/footer; section/article; nav導航；aside 不重要的內容；em(emphasize)/strong加強; i(icon)製做圖標

8.HTML的元素分類？

塊級元素block（方塊形狀，佔據一整行）：div ul ol li dl dt dd h1 h2 h3 h4…p
行內元素inline(一行中的某個位置)：a b span img input select strong（強調的語氣）
inline-block(行內，有寬高屬性)：selection

[!NOTE]
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素:br、meta、hr、link、input、img

9.HTML嵌套關係？

塊級元素能夠包含行內元素
塊級元素不必定能包含塊級元素(p標籤不能包含div標籤)
行內元素「通常」不能包含塊級元素（a包含div是能夠的）

10.HTML的默認樣式？

默認樣式的意義
默認樣式代理的問題
CSS Reset 的做用

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

11.使用ajax方式來提交數據能夠不使用form標籤嗎？

form標籤可使用submit, reset
使用form能夠直接一次性獲取全部的form窗體的數據屬性
form能夠較好地實現表單驗證等功能

11.1 Form表單提交

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="login test">   
</head>
<body>
<div id="form-div">
    <form id="form1" action="/users/login" method="post">
        <p>用戶名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="submit" value="登陸">&nbsp<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>

11.2 ajax提交

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function login() {
            $.ajax({
            //幾個參數須要注意一下
                type: "POST",//方法類型
                dataType: "json",//預期服務器返回的數據類型
                url: "/users/login" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服務端返回的數據(調試用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("異常！");
                }
            });
        }
    </script>
</head>
<body>
<div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用戶名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登陸" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>