- HTML 是誰發(fā)明的
- 1990年左右啄育，Tim Berners-Lee(蒂姆·伯納斯·李)發(fā)明了萬維網(wǎng)(亦作“WWW”英文全稱為“World Wide Web”)，同時發(fā)明了HTML出爹、HTTP和URL。他寫了第一個瀏覽器祭衩，寫了第一個服務(wù)器壹瘟，并且用自己的瀏覽器訪問了自己的服務(wù)器。
- HTML(Hyper Text Markup Language)是超文本標(biāo)記語言银室，是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言涂佃。HTML是一種基礎(chǔ)技術(shù)励翼，常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計網(wǎng)頁辜荠、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面汽抚。網(wǎng)頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網(wǎng)頁伯病。HTML描述了一個網(wǎng)站的結(jié)構(gòu)語義隨著線索的呈現(xiàn)造烁，使之成為一種標(biāo)記語言而非編程語言。
- HTML 起手寫法
使用VScode午笛，輸入!+Tab會出現(xiàn)
<!DOCTYPE html>
<!-- 聲明文檔類型為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">
<!-- 告訴IE使用最新的內(nèi)核 -->
<title>Document</title>
<!-- 標(biāo)題為Document -->
</head>
<body>
</body>
</html>
- 常用的表章節(jié)的標(biāo)簽
- h1~h6 標(biāo)題元素惭蟋，呈現(xiàn)了六個不同的級別的標(biāo)題，h1級別最高季研，而h6級別最低。
<h1>標(biāo)題一</h1>
<h2>標(biāo)題二</h2>
<h3>標(biāo)題三</h3>
<h4>標(biāo)題四</h4>
<h5>標(biāo)題五</h5>
<h6>標(biāo)題六</h6>
- section 章節(jié)元素誉察，表示一個包含在HTML文檔中的獨立部分与涡，它沒有更具體的語義元素來表示，一般來說會有包含一個標(biāo)題持偏。
<section>
<h1>介紹</h1>
<p>HTML(Hyper Text Markup Language)是超文本標(biāo)記語言...</p>
</section>
- article 文章元素驼卖，表示文檔、頁面鸿秆、應(yīng)用或網(wǎng)站中的獨立結(jié)構(gòu)酌畜，其意在成為可獨立分配的或可復(fù)用的結(jié)構(gòu)，如在發(fā)布中卿叽，它可能是論壇帖子桥胞、雜志或新聞文章、博客考婴、用戶提交的評論贩虾、交互式組件，或者其他獨立的內(nèi)容項目沥阱。
<article>
<p>HTML是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言...</p>
</article>
- p 段落元素缎罢，表示文本的一個段落。該元素通常表現(xiàn)為一整塊與相鄰文本分離的文本考杉，或以垂直的空白隔離或以首行縮進策精。
<p>第一段</p>
<p>第二段</p>
- header 頭部元素，用于展示介紹性內(nèi)容崇棠，通常包含一組介紹性的或是輔助導(dǎo)航的實用元素咽袜。它可能包含一些標(biāo)題元素，但也可能包含其他元素枕稀，比如 Logo酬蹋、搜索框及老、作者名稱，等等范抓。
<header>
<div>概述</div>
<div>項目</div>
<div>成果</div>
</header>
- footer 腳部元素骄恶，表示最近一個章節(jié)內(nèi)容或者根節(jié)點元素的頁腳。一個頁腳通常包含該章節(jié)作者匕垫、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息僧鲁。
<footer>
<p>? 2019 MDN</p>
</footer>
- main 主要元素，呈現(xiàn)了文檔的<body>或應(yīng)用的主體部分象泵。主體部分由與文檔直接相關(guān)寞秃，或者擴展于文檔的中心主、應(yīng)用的主要功能部分的內(nèi)容組成偶惠。
<main>
<p>HTML文檔由嵌套的HTML元素構(gòu)成春寿。</p>
<p>它們用HTML標(biāo)簽表示，包含于尖括號中忽孽，如`<p>`</p>
</main>
- aside 旁支元素表示一個和其余頁面內(nèi)容幾乎無關(guān)的部分绑改，被認為是獨立于該內(nèi)容的一部分并且可以被單獨的拆分出來而不會使整體受影響。其通常表現(xiàn)為側(cè)邊欄或者標(biāo)注框兄一。
<p>這是一段話厘线，主要內(nèi)容</p>
<aside>
<p>這不重要，參考注釋</p>
</aside>
- div 文檔分區(qū)元素出革，是一個通用型的流內(nèi)容容器造壮，它在語義上不代表任何特定類型的內(nèi)容，它可以被用來對其它元素進行分組骂束。
<div>
<p>HTML是一種基礎(chǔ)技術(shù)</p>
</div>
- 常用的全局屬性
- class 對標(biāo)簽進行標(biāo)記或分類耳璧，
<div class="master piece"> </div>
- contentedditable 可以直接在網(wǎng)頁中對于其內(nèi)容進行修改，它幾乎支持所有的HTML元素展箱。
<div contenteditable> This text can be edited by the user. </div>
<div hidden> 內(nèi)容隱藏. </div>
- id 定義了一個全文檔唯一的標(biāo)識符 (ID)楞抡。不到萬不得以，不使用<id>標(biāo)簽析藕。有時候不唯一時召廷，也不報錯。
<div id="1"> 全文檔唯一</div>
- style 可以將表現(xiàn)性質(zhì)賦予一個特定元素账胧。
<style>
.demo{
background:gray
}</style>
- title 鼠標(biāo)浮動在那里則會顯示完整內(nèi)容
<title>完整內(nèi)容</title>
小技巧：white-space:nowrap; //表示不換行
text-overflow:ellipsis; //溢出部分顯示為省略號
overflow:hidden; //溢出部分隱藏
//內(nèi)容太長的話經(jīng)過上面三行代碼竞慢，可以使多出部分顯示為"...",
- tabindex 指示其元素是否可以聚焦，以及它是否/在何處參與順序鍵盤導(dǎo)航治泥，通常使用Tab鍵筹煮。
eg: tabindex = 正值 表示該元素可以被選擇，按照從小到大依次被選取居夹。
tabindex = 0 表示該該元素最后被選取败潦。
tabindex = 負值 表示該元素不會被選取本冲，通常賦值‘-1’
- 常用的內(nèi)容標(biāo)簽
- ol+li 正向的列表，有序列表,注意ol中只能包含li作為唯一的內(nèi)容子集劫扒。
- ul+li 無序列表,注意ul中只能包含li作為唯一的內(nèi)容子集檬洞。
- dl+dt+dd 描述性的列表，dt做為被修飾的元素沟饥，dd用于修飾他添怔。
- a 超鏈接元素，加上target= ‘_blank’屬性贤旷，鏈接在新窗口打開广料，不加則在當(dāng)前窗口打開
- strong 表示內(nèi)容本身的重要性
- em 表示語氣上的強調(diào)
- code 插入代碼，用code標(biāo)簽包起來幼驶，代碼字體是的等寬的艾杏。
- pre 一般來說，HTML中內(nèi)容無論有多少個空格盅藻，回車购桑，tab都會被縮進成一個空格，加入pre可以保證所有空格保留萧求。
- hr 水平分割線
- quote 內(nèi)聯(lián)引用
- blockquote 塊級引用
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ul>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<dl>
<dt>描述元素</dt>
<dd>描述內(nèi)容1</dd>
<dd>描述內(nèi)容2</dd>
</dl>
<pre><code>a = 10; <br>console.log(a)</code></pre>
<hr />
<a href="" target="‘_blank’">超鏈接</a>
<em>期末</em>考試 <strong>重點</strong>內(nèi)容
<quote>內(nèi)聯(lián)引用</quote>
<blockquote>塊級引用</blockquote>
