HTML原理與理解

阿新 • • 發佈：2018-11-19

HTML常見元素和理解
HTML版本
HTML元素分類
HTML元素巢狀關係
HTML元素預設樣式和定製化

HTML常見元素

在這裡插入圖片描述

<meta charset='utf-8'>//設定編碼
<meta name="viewport" content="width=device-width, initial-scale=1.0，maximum-scale=1.0，user-scalable=no">//檢視設定相關
<base href='/'>//為頁面上的所有連結規定預設地址或預設目標

案例

<!DOCTYPE html> 

<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <section>
        < 
h1>連結</h1>
        <a href="http://www.qq.com">騰訊網</a>
        <a href="http://www.taobao.com" target="_blank">淘寶網</a>
    </section>
    <section>
        <h1>表格</h1>
        <table border="1">
            <thead>
                <tr> 

                    <th>表頭1</th>
                    <th>表頭2</th>
                    <th>表頭3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>資料1</td>
                    <td>資料2</td>
                    <td>資料3</td>
                </tr>
                <tr>
                    <td colspan="2">資料1</td>//跨列
                    <td>資料3</td>
                </tr>
                <tr>
                    <td rowspan="2">資料1</td>//跨行
                    <td>資料2</td>
                    <td>資料3</td>
                </tr>
                <tr>
                    <td>資料2</td>
                    <td>資料3</td>
                </tr>
            </tbody>
        </table>
    </section>
    <section>
        <h1>表單</h1>
        <form method="GET" action="http://www.qq.com">
            <p>
                <select name="select1">
                    <option value="1">一</option>
                    <option value="2" selected>二</option>
                </select>
            </p>
            <p>
                <input type="text" name="text1" />
            </p>
            <p>
                <input type="password" name="password" />
            </p>
            <p>
                <input type="radio" name="radio1" id="radio1-1" />//name相同時只能選擇一個
                <label >選項一</label>
                <input type="radio" name="radio1" id="radio1-2" />
                <label for="radio1-2">選項二</label>//label進行選擇框關聯
            </p>
            <p>
                <button type="button">普通按鈕</button>
                <button type="submit">提交按鈕一</button>//出現在form中，表單提交至action指定的地址
                <input type="submit" value="提交按鈕二"/>//應用同上
                <button type="reset">重置按鈕</button>//初始化表單
            </p>
        </form>
    </section>
</body>
</html>

演示地址
tips：雖然用AJAX技術可以不通過submit來提交表單資訊，但是仍建議使用form格式，html標籤的語義化精確便於結合某些框架的使用。同時某些瀏覽器外掛的自動儲存使用者名稱密碼等功能也有可能受此影響。

## Html的理解

HTML“文件”
描述文件的“結構”
有區塊和大綱

在這裡插入圖片描述
文件有大綱結構清晰語義明顯

如何進行HTML語義化？

儘可能少的使用無語義的標籤div和span；在語義不明顯時，既可以使用div或者p時，儘量用p,
因為p在預設情況下有上下間距，對相容特殊終端有利；不要使用純樣式標籤，如：b、font、u等，改用css設定。
需要強調的文字，可以包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong預設樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
每個input標籤對應的說明文字都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。

HTML版本

html版本更新的時候一直在考慮加強語義化。

HTML 4 //結構規範化弱，屬於SGML，所以出現了XHTML
XHTML //結構非常嚴格標籤屬性小寫而且屬性必須有對應值，本質上是XML，如果需要使用符合 XML 規範的 XHTML 文件，則應該在文件中的標籤中至少使用一個 xmlns 屬性，以指定整個文件所使用的主要名稱空間
XHTML 2.0 //結構更加嚴格並不向前相容
HTML5 //發現結構嚴格並不適合發展方向，加強了語義化，增加了語義標籤，刪掉了無用標籤。

在這裡插入圖片描述

H5新增語塊標籤

section
article
nav
aside
header
footer

語義化

<em>強調文字</em><br>
<strong>加粗文字</strong><br>
<dfn>定義專案</dfn><br>
<code>一段電腦程式碼</code><br>
<samp>計算機樣本</samp><br>
<kbd>鍵盤輸入</kbd><br>
<var>變數</var>

強調文字
加粗文字
定義專案
一段程式碼
計算機樣本
鍵盤輸入
變數

表單增強

日期、時間、搜尋
表單驗證增強
Placeholder自動聚焦

新的API
離線、音視訊、圖形、實時通訊、本地儲存、裝置能力

分類和巢狀變更

HTML元素分類

按照樣式分類//H4

塊級 block 預設獨佔一行
行內 inline/內聯元素無法設定寬度和高度（img除外）
inline-block 比如select

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>default style</title>
</head>
<body style="width:200px">
    <div>DIV元素</div>
    <p><span style="width:1000px">內聯元素</span><em>內聯元素</em><strong>好巧，我也是內聯元素</strong></p>
    <p><select><option>下拉框</option></select><span>你猜左邊是什麼元素</span></p>
</body>
</html>

效果演示

按照內容分類//H5
在這裡插入圖片描述
點選檢視 W3C 官方介紹

HTML巢狀關係

塊級元素可以包含行內元素
塊級元素不一定能包含塊級元素比如<p><div></div></p>
行內元素一般不能包含塊級元素，也有一些可以，比如H5中的 <a><div></div></a>（H4不合法但是可以用，因為瀏覽器自動轉換）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>default style</title>
</head>
<body>
    <div><a href="#">DIV &gt; A</a></div>
    <a href="#"><div>A &gt; DIV</div></a>
    <p><a href="#"><div>P &gt; A &gt; DIV</div></a></p>
</body>
</html>

tip:HTML程式碼中為了避免瀏覽器將大於">“小於”<"號識別成標籤，使用&gt和&lt代替
示例中顯示a可以包含div 但是包含了div的a元素不可以再被行內元素包含了
演示地址

HTML預設樣式

預設樣式的意義
預設樣式帶來的問題
CSS Reset 主要是為了解決各個瀏覽器賦予的預設樣式不統一的問題

賦予元素基本樣式，可以在其基礎上進行增減，更加方便。
常用的CSS 最簡單的重置樣式

*{
	margin ：0;
	padding：0;
}

由此方案產生的效能問題可以忽略。
重置CSS有很多相關的CSS框架，可自行百度。

一些零碎的問題

doctpye的意義是什麼
規定檔案渲染的標準，知道元素的合法性

語義化的意義是什麼

開發者容易理解
機器容易理解結構
有利於SEO
semantic microdata 加強語義化

那些元素可以自閉合
input、img、br、hr、meta link 等

HTML和DOM的關係
HTML文件本質上就是一堆字串構成的文字，DOM是HTML經過解析之後形成的元素，DOM可以被JS操作。

property和attribute的區別
attribute是寫到Html文件中的對應元素的屬性，property是經過解析之後根據attribute生成的"特性"。
在這裡插入圖片描述

HTML原理與理解

目錄 HTML常見元素和理解 HTML版本 HTML元素分類 HTML元素巢狀關係 HTML元素預設樣式和定製化 HTML常見元素 <meta charset='utf-8'>//設定編碼 <meta name=

位運算子的原理與理解，嘗試通俗總結，歸納普通用法

文章目錄按位運算子 1.0 按位邏輯運算子 1.1 按位取反（二進位制反碼）：``~`` 1.2 按位與：``&`` 1.2.1 按位與"&"的原理 1.2.2 按位與"

easy原理與理解，EasyUI怎麼應用？author:songfuwfei

使用easyUI主要有這麼幾個步驟，首先是通過引入layout來進行頁面的整體佈局，然後用Layout進行頁面佈局（主要有北，西，中間幾個區域）西邊區域用於選單展示,然後我左邊用的是ztree樹, 出於安全考慮，我們首先做的是許可權，不同角色的人登入應該看到不同的許可權和內容

html原理簡介、第一個網頁服務器與客戶端

直接 ack 字符 time() true nec utf-8 RM 成了 #coding=utf-8 """ HTML： 20個標簽一套瀏覽器認識的規則學習規則。開發後臺程序：寫html文件本地測試：找到文件直接雙擊打

深入理解flutter的編譯原理與優化

bottom 熱更新 pre ted 符號註釋跟蹤 data 傳遞摘要：閑魚技術-正物問題背景對於開發者而言，什麽是Flutter？它是用什麽語言編寫的，包含哪幾部分，是如何被編譯，運行到設備上的呢？Flutter如何做到Debug模式Hot Reload快速生

深入理解［Master-Worker模式］原理與技術

() .exe 思想 thead 常用 ica ces 類的方法 and Master-Worker模式是常用的並行模式之一。它的核心思想是，系統由兩類進程協作工作：Master進程和Worker進程。Master進程負責接收和分配任務，Worker進程負責處理子任務。當各

深入理解［代理模式］原理與技術

如何理解代理模式？思考抽象問題最好的辦法就是具體化！比如我們需要為一個業務方法在執行前後記錄日誌，為了達到解耦的目的，我們可以再新建一個類並定義一個新的業務方法，該方法既可以呼叫原業務方法，又可以在呼叫前後進行日誌處理，例如： CarProxy.class public

Atitit spirngboot 訪問 html檔案總結自設計web伺服器原理與實現 Url路由壓力，讀取url，獲得專案更路徑絕對路徑，拼接為檔案路徑。讀取文建內容輸出即可目錄路徑 u

Atitit spirngboot 訪問 html檔案總結自設計web伺服器原理與實現 Url路由壓力，讀取url，獲得專案更路徑絕對路徑，拼接為檔案路徑。讀取文建內容輸出即可目錄路徑 upload。Html在專案跟目錄

正確理解Thread Local的原理與適用場景

ThreadLocal解決什麼問題由於 ThreadLocal 支援範型，如 ThreadLocal< StringBuilder >，為表述方便，後文用變數代表 ThreadLocal 本身，而用例項代表具體型別（如 StringB

Babel 外掛原理的理解與深入

現在談到 babel 肯定大家都不會感覺到陌生，雖然日常開發中很少會直接接觸到它，但它已然成為了前端開發中不可或缺的工具，不僅可以讓開發者可以立即使用 ES 規範中的最新特性，也大大的提高了前端新技術的普及（學不動了...）。但是對於其轉換程式碼的內部原理我們大多數

深入理解［Future模式］原理與技術

1.Future模式 Future模式和多執行緒技術密切相關，可以說是利用多執行緒技術優化程式的一個例項。在程式設計中，當某一段程式提交了一個請求，期望得到一個答覆。但非常不幸的是，服務程式對這個請求的處理可能比較慢，比如，這個請求可能是通過網際網路、HTTP或者Web Service等並不高效的方式呼

深入理解代理模式原理與技術

如何理解代理模式？思考抽象問題最好的辦法就是具體化！比如我們需要為一個業務方法在執行前後記錄日誌，為了達到解耦的目的，我們可以再新建一個類並定義一個新的業務方法，該方法既可以呼叫原業務方法，又可以在呼叫前後進行日誌處理，例如：代理模式的應用很多，比如Sprin

《從Paxos到zookeeper分散式一致性原理與實踐》理解

zookeeper的來由最大一個特點就是解決分散式一致性問題。簡單講，資料一致性就是指在對一個副本資料進行更新的同時，必須確保也能更新其他副本(其他副本可能在各個不同的伺服器節點)，否則不同副本之間的資料將不再一致。那麼解決這樣的一致性問題，大家肯定想到使用鎖，但使用簡單的使用鎖實在太

深入理解Spark 2.1 Core （一）：RDD的原理與原始碼分析

本文連結：http://blog.csdn.net/u011239443/article/details/53894611 該論文來自Berkeley實驗室，英文標題為：Resilient Distributed Datasets: A Fault-Toler

深入理解Spark ML：多項式樸素貝葉斯原理與原始碼分析

貝葉斯估計如果一個給定的類和特徵值在訓練集中沒有一起出現過，那麼基於頻率的估計下該概率將為0。這將是一個問題。因為與其他概率相乘時將會把其他概率的資訊統統去除。所以常常要求要對每個小類樣本的概率估計進行修正，以保證不會出現有為0的概率出現。常用到

深入理解L1、L2正則化原理與作用

art ida 似的得來 .net 最優化問題比較 nor 多維過節福利，我們來深入理解下L1與L2正則化。 1 正則化的概念正則化(Regularization) 是機器學習中對原始損失函數引入額外信息，以便防止過擬合和提高模型泛化性能的一類方法的統稱。也就是

深入理解Spark 2.1 Core （六）：Standalone模式執行的原理與原始碼分析

我們講到了如何啟動Master和Worker，還講到了如何回收資源。但是，我們沒有將AppClient是如何啟動的，其實它們的啟動也涉及到了資源是如何排程的。這篇博文，我們就來講一下AppClient的啟動和邏輯與物理上的資源排程。啟動AppClient 呼叫棧如下： S

深入理解【數字簽名】原理與技術

在騰訊工作已經第三週了，由於是支付業務，不免會涉及到加解密、數字簽名之類的安全手段，花了一天時間，學習了下數字簽名，整理髮出。 1.數字簽名概述在討論數字簽名之前，我們先來說說簽名。簽名，即自己寫自己的名字，尤其為表示同意、認可、承擔責任或義務。在實際生活中，一些方式（如字跡，指紋等）一直被用作簽名者身

std::move的原理與實現，右值引用的深入理解

這次我真的懂了。。。。首先C++11引入了右值引用 && ‘&&’這個要連起來看，是一個整體，C++多了一個關鍵字而已。不是引用的引用。是船新的一種語法。那有什麼用呢？額，引數的型別又多了一種！ void fun(int T) void fun(int&am

深入理解@LoadBalanced註解的實現原理與客戶端負載均衡

前提在閱讀這篇部落格之前,希望你對SpringCloud套件熟悉和理解,更希望關注下微服務開發平臺概述在使用springcloud ribbon客戶端負載均衡的時候，可以給RestTemplate bean 加一個@LoadBalanced註解，就能讓這個RestTemplate在請求時擁有客戶端負載均

HTML原理與理解

HTML常見元素

HTML版本

HTML元素分類

HTML巢狀關係

HTML預設樣式

一些零碎的問題

相關推薦