1/28 HTML歷史 和 HTML概述
歷史
Tim Berners-Lee 發明了全球資訊網
網際網路本質 內容共享
全球資訊網 基於互利網 實現輸入地址就能看到網頁
HTML語法小貼士
HTML全稱 Hyper Text Markup Language 超文字標記語言
H5 手機頁面 程式設計師沒有這個玩意 只有手機頁面
CRM學習法 copy run modify
<link rel="stylesheet" href="XXXXXXX" /> <<錯誤規範 會自動糾錯
<link rel="stylesheet" href="XXXXXXX" > <<正確規範
報錯檢查方法一
命令列下載 yarn global add node-w3c-validator
在vscode 用 node-w3c-validator -i 要檢查檔名稱
英語小課堂
heading 標題paragraph 段落 article 文章 aside 旁邊
body 身體 section 章節 main 主要 anchor 定點，錨
strong 強壯的 emphasis 強調 order 秩序 ordered 有順序的
unordered 無順序的 description 描述 term 術語 data 資料
quote 引用 block 塊 inline 行內 break 打斷
建立網頁
在VScode上用"!"建立主體 一般加 <html lang = "zh-CN">
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
標題標籤
<h1>這是一個標題。</h1>
<h2>這是一個標題。</h2>
<h3>這是一個標題。</h3>段落標籤
<p>這是一個段落</p>© -->
主要內容用main標籤包涵
次要內容用aside標籤包涵
章節標籤
section 雙標籤 將每個大章節包括在裡面
<article>元素表示文件、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可複用的結構，如在釋出中，它可能是論壇帖子、雜誌或新聞文章、部落格、使用者提交的評論、互動式元件，或者其他獨立的內容專案。 同時具有全域性屬性
所有的標籤都有的屬性即全域性屬性
class 屬性
<p class="one">這是一個class</p>contenteditable 可編輯 可以放在任何標籤裡面
<div contenteditable>contenteditable在這裡可以編輯</div>hidden 可以讓某個標籤以及內容看不見
<p hidden>hidden可以讓內容看不見</p>id 屬性 儘量少用ID屬性 不能確定一個頁面定義多少個同名字ID 取名id id的名字在哇網頁上只能是唯一的 style裡面就是"#"
<p id="two">這是一個id屬性</p>style屬性 就近原則 行內樣式優先 有JS的JS優先 因為會覆蓋style的內容
<p style="margin: 20px;">這是一個style屬性</p>tabindex屬性 0是最後一個 1，2，3 按順序訪問 -1 不讓找到 不必是連續的
<p tabindex="1">這是tabindex操作</p>title 屬性 滑鼠浮上 顯示文字提示
<p title="完整的內容">niahshxiajsbxhb</p>小技巧
文字溢位省略
預設樣式
每個瀏覽器都有自己獨特的預設樣式
用style的樣式來覆蓋預設樣式
每次寫網頁記得重置樣式 reset.css
內容標籤
ol>li 有序列表
ul>li 無序列表
<p>前端每天要做的事情有:有序列表</p>
<ol>
<li>發郵件</li>
<li>發郵件</li>
<li>發郵件</li>
<li>發郵件</li>
</ol>
<p>前端每天要做的事情有:無序列表</p>
<ul>
<li>發郵件</li>
<li>發郵件</li>
<li>發郵件</li>
<li>發郵件</li>
</ul>dl + dt + dd 自定義列表
<dl>
<dt>圖圖</dt>
<dd>一個動畫</dd>
</dl>小貼士： 在程式碼中 多個空格 在網上只顯示一個空格 如果想保留空格等便籤 就用per標籤包住 記得更換字型
<pre>這裡有很 多空格</pre>hr 一條橫線
br 換行
<hr>
我的上面有一條橫線
<p>這裡<br>
換行了</p>a 連結 target="_blank" 在新視窗開啟
<a href="#" target="_blank">這裡是連結</a>code 寫程式碼的 長和pre便籤連用 形成空格和換行
<pre>
<code>
$a = '你好'
console.log(a);
</code>
</pre>em標籤 強調 讓文字傾斜 strong標籤 讓字型加粗
兩者的區別
[引用於]（https://www.cnblogs.com/jjworld/p/5268575.html）
第一個層次的區別：
<em>標籤是告訴瀏覽器把其中的文字表示為強調的內容，把這段文字用斜體來
表示。如果只想使用斜體字來顯示文字的話，使用<i>標籤。除了強調以外，當引入新的術語或者在
引用特定型別的術語或概念時作為固定樣式的時候，也可以使用<em>標籤。
<strong>標籤和<em>標籤一樣，用於強調文字，但它強調的程度更高。
<strong>標籤中的內容用加粗的字型來顯示其中的內容。
第二個層次：em用來區域性強調，strong則是全域性強調。
第三個層次：em表示內容的著重點， strong表示內容的重要性。strong不會改變句子所在
第三個層次：em表示內容的著重點， strong表示內容的重要性。strong不會改變句子所在
第四個層次： em 表示語氣上的強調 strong 表示內容本身的重要性
<em>123</em>
<strong>123</strong>quote blockquote 引用 塊級引用
<p>老夫子說
<quote>我要天天開Q</quote>
</p>
<p>老夫子說
<blockquote>我要天天開Q</blockquote>
</p>