HTML中入門知識點的示例分析

這篇文章主要為大家展示了“HTML中入門知識點的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML中入門知識點的示例分析”這篇文章吧。

　　HTML (HyperText Markup Language) 不是一門編程語言，而是一種用來告知瀏覽器如何組織頁面的標(biāo)記語言。

　　HTML 可復(fù)雜、可簡單，一切取決于開發(fā)者。

　　它由一系列的元素（elements）組成，這些元素可以用來包圍不同部分的內(nèi)容，使其以某種方式呈現(xiàn)或者工作。 一對標(biāo)簽（ tags）可以為一段文字或者一張圖片添加超鏈接，將文字設(shè)置為斜體，改變字號，等等。

　　HTML 之父Tim Berners-Lee，稱之為李爵士2004年，英女皇他頒發(fā)大英帝國爵級司令勛章2017年，被頒發(fā)圖靈獎自己寫了第一個瀏覽器自己寫了第一個服務(wù)器用自己寫的瀏覽器訪問了自己寫的服務(wù)器發(fā)明了WWW，同時發(fā)明了HTML、HTTP和URL快捷鍵：感嘆號 ! + tabDOCTYPE：文檔類型

　　瀏覽器支持很多種文檔類型（HTML、XHTML…）。 表示告訴瀏覽器開始寫HTML了。html 標(biāo)簽是根標(biāo)簽

　　必須要寫（如果沒寫也會自動加上）可以把 lang 的屬性值改為 zh-CNhead 和 body 標(biāo)簽，雖然是 html 的子元素，但一般格式上不縮進head 標(biāo)簽里面存放看不見的元素viewport 視口、視窗章節(jié)標(biāo)簽，通常用于表示文章、書的層級（就是內(nèi)容框架）標(biāo)題 h2——h7章節(jié) section文章 article段落 p頭部 header腳部 footer主要內(nèi)容 main旁支內(nèi)容 aside劃分 div任何標(biāo)簽都可以有的屬性style標(biāo)簽，也有 contenteditable 屬性，可以被編輯

　　可以將 style 標(biāo)簽放到 body里面，然后添加  ，style 標(biāo)簽中的樣式內(nèi)容就會顯示在瀏覽器中，然后給style標(biāo)簽添加contenteditable 屬性，就可以在瀏覽器總直接修改樣式，并實時刷新id 用來表示【全局唯一的標(biāo)簽】id 的全局唯一性沒有保障，就算有兩個重復(fù)的 id，HTML 也不會提示我寫錯了

　　class足夠了，不到萬不得已不要用 id ，因為 id 重復(fù)使用也不會報錯，可能誤導(dǎo)開發(fā)者

　　<header id="xxx"></header>

　　<div id="xxx"></div>

　　#xxx{

　　}

　　id 中有很多不能使用的詞：parent、self、top &hellip;   控制臺輸入   彈出屬性列表中所有的詞都不能用，因為這些詞是 window 已經(jīng)有的全局屬性

　　<header id="top"></header>

　　<script>

　　top.style.border="10px solid red" // 直接調(diào)用不能獲取到top元素，與window對象中的全局屬性重名

　　var ele=document.getElementById("top") // 通過這種方式可以獲取到 top 元素，但單詞略復(fù)雜

　　</script>js 中寫   會覆蓋 div元素中的行內(nèi)樣式在瀏覽頁面時，網(wǎng)頁中按鈕都只通過鍵盤 tab 控制切換選中。而這里的 tabindex 屬性就是控制，切換的順序

　　被選中的會有一圈不明顯的藍色邊框

　　<a tabindex=1>首頁</a>

　　<p tabindex=3>一段話</p>

　　<footer tabindex=2>?版權(quán)所有</footer>

　　tabindex 可以是正數(shù)，不必是連續(xù)的tabindex 可以是 0，表示最后才被 tab 訪問tabindex 可以是 -1，表示不可被 tab 訪問單行文字溢出，使用省略號

　　將鼠標(biāo)移動到這段文字上時，應(yīng)該能展示出全部文字內(nèi)容，包括溢出隱藏的部分ordered list + list itemol ：有序列表ol 不能含有 li 之外的任何元素、字符

　　{{<figure src="" >}}unordered list + list itemul ：無序列表

　　{{<figure src="" >}}description list + term + datadl ：description list &mdash;&mdash; 描述列表dt ：description term &mdash;&mdash; 描述項dd ：猜測是 description data &mdash;&mdash; 描述信息

　　{{<figure src="" >}} preview 的縮寫用的較少html 特點：HTML 代碼里的多處空格、回車、tab 等內(nèi)容，默認會被轉(zhuǎn)化為一個空格pre 的作用是，可以保留開發(fā)者鍵入的空白位置（pre 有默認樣式，很丑，如下）

　　{{<image src="" caption="pre">}}等寬字體用 code 標(biāo)簽包裹的內(nèi)容，字符是等寬的。但默認內(nèi)容在同行展示，無法換行使用 pre 可以讓 code 的內(nèi)容換行

　　{{<image src="" caption="code & pre+code">}}水平分割線horizontal

　　{{<figure src="">}}break 的縮寫換行anchor 的縮寫超鏈接

　　href target

　　國內(nèi)開發(fā)習(xí)慣使用 _blank 在新標(biāo)簽打開鏈接。國外開發(fā)通常不寫 target，他們覺得會讓瀏覽器網(wǎng)頁越開越多（他們習(xí)慣：通過鼠標(biāo)中間點擊打開新標(biāo)簽頁，默認左鍵點擊同屏跳轉(zhuǎn)）emphasis 的縮寫emphasis 意為強調(diào)，效果字體斜體字體加粗表示重要quote 的縮寫quote 意為引用quote標(biāo)簽：內(nèi)聯(lián)，行內(nèi)，不換行引用塊級，換行

　　{{<image src="" caption="quote & blockquote">}}

以上是“HTML中入門知識點的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！