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

来源:https://www.cnblogs.com/fecommunity/archive/2019/11/16/11872562.html
-Advertisement-
Play Games

HTML是前端頁面佈局中的重要組成部分，如何編寫出符合W3C規範的代碼一直是前端工程師關註的問題。 ...


1.如何理解HTML？

  1. HTML類似於一份word“文檔”
  2. 描述文檔的“結構”
  3. 有區塊和大綱

2.對WEB標準的理解？

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

對應的標準也分三方面：

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

2.1 結構層標準

結構化標準語言，就是W3C規定的主要包括HTML和XHTML以及XML，在頁面body裡面我們寫入的標簽都是為了頁面的結構。

  1. 標簽的書寫，需要開始和結束。單便簽除外；
  2. 塊級元素不能放在p標簽裡面。li內可以包含div標簽。
  3. 塊元素裡面可以放在塊和內聯，特殊的 p和 h1—h6裡面不要放塊元素，li和div可以放很多。因為這兩個標簽，本身就有容器的屬性
  4. 內聯裡面要放內聯，不要放塊。（嵌套關係）
  5. 結構與表現分離
  6. 命名一定要規範

2.2 表現層標準

表現標準語言主要包括CSS（Cascading Style Sheets）層疊式樣式表，通過CSS樣式表，W3C創建CSS標準的目的是以CSS取代HTML表格式佈局、幀和其他表現的語言，通過CSS樣式可以是頁面的結構標簽更具美感。

  1. 儘可能使用外部引入的方式，達到分離的目的
  2. CSS選擇器，優先順序
  3. 代碼簡潔

2.3 行為層標準

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

  • DOM是Document Object Model文檔對象模型的縮寫。DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的衝突，給予web設計師和開發者一個標準的方法，讓他們來訪問他們站點中的數據、腳本和表現層對像。

  • ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的標準腳本語言（JAVAScript）

3.對W3C的認識？

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

主要包含如下幾點：

3.1 對於結構的要求

  • 1）標簽字母要小寫
  • 2）標簽要閉合
  • 3）標簽不允許隨意嵌套

3.2 對於css和js的要求

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

4.什麼是前端語義化？

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

4.1 標簽是有語義的

h1~h6、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的版本問題？

  1. HTML4/4.0.1(SGML)(標簽允許不結束)
  2. XHTML(XML)（標簽必須結束，屬性必須帶引號，屬性必須有值，標簽屬性必須有值）
  3. HTML5（類似於HTML4的寫法）

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

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

  1. 新的區塊標簽：section,article,nav,aside
  2. 表單增強：日期、時間、搜索（修改type的類型實現）；表單驗證；placeholder
  3. 語義增強：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-h6、blockquote
空元素:br、meta、hr、link、input、img

9.HTML嵌套關係？

  1. 塊級元素可以包含行內元素
  2. 塊級元素不一定能包含塊級元素(p標簽不能包含div標簽)
  3. 行內元素“一般”不能包含塊級元素（a包含div是可以的）

10.HTML的預設樣式？

  1. 預設樣式的意義
  2. 預設樣式代理的問題
  3. 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標簽嗎？

  1. form標簽可以使用submit, reset
  2. 使用form可以直接一次性獲取所有的form窗體的數據屬性
  3. 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>

[!NOTE]
擴展思考：Form表單提交數據給一個非同源的網址，如在A網址(http://www.A.com)上直接向B網站(http://www.B.com)發送數據請求, 為什麼不會觸發瀏覽器的同源策略限制呢？


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySql 庫/表級操作 及 數據類型
    資料庫分類 關係型資料庫（SQL）：存儲方式固定，安全 非關係型資料庫（NoSQL）：存儲方式比較靈活，存儲數據的效率比較高，不太安全 MySQL是一種關係型資料庫管理系統（採用關係模型來組織管理數據的資料庫系統） 註意事項 大小寫：不嚴格區分，預設大寫為程式代碼，小寫為程式員寫的代碼 語句結束符： ...
  • Redis必備面試題《難點篇》
    Date:2019-11-12 讀前思考： redis每次必問的問題，在大腦裡面先回想一下，能否答出一二？ 題1：Redis雪崩瞭解麽？ 題2：瞭解Redis緩存穿透和擊穿麽？ 題3：你知道Redis緩存雪崩、穿透和擊穿 的三者區別嗎，可以結合具體的應用場景業務來說說？如何避免緩存雪崩、穿透和擊穿呢 ...
  • 數據挖掘
    ...
  • 數據可視化
    鏈接：https://bdcc.bigdataedu.org/block/50（需賬號登錄） ...
  • 數據採集
    鏈接：https://bdcc.bigdataedu.org/block/48（需賬號登錄） ...
  • MySQL 資料庫查詢數據，過濾重覆數據保留一條數據---（MySQL中的row_number變相實現方法）
    轉自： http://www.maomao365.com/?p=10564 摘要: 下文講述MySQL資料庫查詢重覆數據時，只保留一條數據的方法 實現思路: 在MySQL資料庫中沒有row_number函數，所以我們需變向實現此功能。 定義臨時變數 @keyId,@infoB 每次查詢時 都重新對 ...
  • 3-SQL過濾
    # 篩選最大生命值大於6000，最大法力值大1700的英雄，然後按照二者之和從高到低進行排序 SELECT NAME , hp_max, mp_max FROM heros WHERE hp_max > 6000 AND mp_max > 1700 ORDER BY ( hp_max + mp_ma ...
  • 第01講 Android開發系列---Activity
    一. Android系統版本及詳細信息 最新數據 https://developer.android.com/about/dashboards/ 二. Android項目初探 1. 使用android studio創建一個工程 Application Name：“My First App” Comp ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類