本筆記根據B站up主“黑馬前端”的視頻（BV14J4114768）配套食用
HTML簡介（p3）
了解網頁的基本組成
什么是HTML
說出常用的瀏覽器
能夠說出Web標準的三大組成部分
網頁的基本概念（p4）
HTML 超文本標記語言（Hyper Text Markup Languague）用來描述網頁的一種語言，是標記語。（卻別與編程語言）。
超文本 = 超鏈接+多元素
每一個網頁就是一個html文件，每個網站都擁有多個網頁。
常用瀏覽器+其內核（p5）
常用瀏覽器 Firefox,Chrome,Safari,Opera,IE,Edge
瀏覽器內核：負責讀取網頁內容，整理訊息，計算網頁的顯示方式兵器顯示界面
Web標準（p6）
Web 標準是由W3C組織和其他標準化組織制定的一系列標準的集合。
為什么需要Web標準
瀏覽器不同，頁面或者排版有差異，WEB標準可以便利讀者使用。
標準構成
結構：網頁元素進行整理分類 html
表現： 排版梅花，外觀樣式 CSS
行為： 交互 javascript
html 標簽（上） （p7）
學習主要內容
書寫規范
HTML 骨架標簽
開發工具
常用標簽
注釋+特殊字符
<html>
<head></head>
</html>
//并列關系，一般來說標簽都是雙標簽，但也有單標簽
<br />
//單標簽
一些基本標簽的意義以及html骨架（p8）（p9）
<html>
<head>
<title>頁面標簽名
</title>
</head>
<body>頁面內容</body>
</html>
VSCode工具創建頁面（p10）
主用VSCode,一些快捷鍵：
創建文件為html文件后，可以在頭位置寫一個!符來快速構建html文件框架（即上圖的html編碼）
Ctrl + +/-可以放大縮小視圖
可以通過左導航欄的對應文件右鍵->從文件夾中打開
vscode插件的安裝和使用（p11）
新增標簽（在使用vscode時自動生成框架（！）出現的幾個tag）（p11）
采用最新的html版本來顯示網頁 當前文檔的顯示語言，en為英文網頁。zh-CN定義語言為中文，和en對立，但無論如何定義，中英文都可以同步輸入，對某些瀏覽器有作用，可以讓瀏覽器判斷需不需要翻譯。 UTF-8稱為萬國碼，有這一句話就可以顯示大部分的字符，如果不寫有可能出現字符的亂碼。HTML常用標簽（p12）
根據標簽的語義，在核實的地方給一個最為合理的標簽，可以使得頁面結構更清晰，是標題可以給標題標簽，需要段落就給與一個段落標簽。
標題標簽：（p13）
-
雙標簽，相當于word的多級標題，標題標簽逐級遞減。 > 特點：每個標題都獨占一行且字體增大加粗
段落標簽:（p14）（p15）（p16）
**雙標簽** 使用段落標簽才能在瀏覽器中把文字分段**單標簽** 強制換行：頁面本身只會在寫滿一行文字才會換行，但這個單標簽可以強制換行
基礎標簽
為文字設置粗體，斜體，下劃線，與md文件相似，但通過標簽來確立
| 標簽名 | 意義 | 是否雙標簽(T:YES) |
|---|---|---|
| "strong/b" | 字體加粗 | T |
| "em/i" | 字體傾斜 | T |
| "del/s" | 刪除線 | T |
| "ins/u" | 下劃線 | T |
表格中所有的前一個標簽的強調性更強。
<div>和<span>標簽
兩個標簽沒有語義，更多屬于一個器皿（視頻成為盒子），用于裝內容。
<div>
可以看作一個大盒子，這個盒子單獨占一行，但對列沒有要求
<span>
看作小盒子，也是單獨占一行
圖像標簽和路徑（?）
<img>
用于定義html頁面中的圖像。
補充：在vscode使用嘆號+tab無法喚出模板
(解決方式)[https://blog.csdn.net/qq_52276628/article/details/125688809] 引用該文章。這個問題應該是大部分新版本的通病，而且大多數都是文中第三個問題。
html 常用案例：體育新聞案例（略）（p16）
文本格式化標簽（p17）
基礎標簽
為文字設置粗體，斜體，下劃線，與md文件相似，但通過標簽來確立
| 標簽名 | 意義 | 是否雙標簽(T:YES) |
|---|---|---|
| "strong/b" | 字體加粗 | T |
| "em/i" | 字體傾斜 | T |
| "del/s" | 刪除線 | T |
| "ins/u" | 下劃線 | T |
表格中所有的前一個標簽的強調性更強。
<div>和<span>標簽
兩個標簽沒有語義，更多屬于一個器皿（視頻成為盒子），用于裝內容。
<div>
可以看作一個大盒子，這個盒子單獨占一行，但對列沒有要求
<span>
看作小盒子，也是單獨占一行
圖像標簽和路徑（?）
<img>
用于定義html頁面中的圖像。
<img src="URL" alt="character">
當圖片無法顯示時，alt標簽中的字符內容可以替換圖片顯示
<img src="URL" title="character">
鼠標經過圖象時，會在鼠標旁邊標注title標簽中的字符
<img src="URL" alt="character" width="500" highth="500" border="100">
對于圖片的高度寬度進行修改。但一般來說只改高或寬一個屬性，再用等比例縮放修改圖像。(highth,width)
圖片的邊框border的粗細。用數據修改（這三個屬性單位都為像素）
總結
以上給予的附加標簽，alt,title,highth,width,border,都必須在標簽img之后，但這幾個屬性本身沒有優先。src必須存在，且放在img之后，屬性之前
路徑
目錄文件夾和根目錄
圖片等文件放在同一個文件夾中才能便于管理，所以出現的目錄文件夾和根目錄的講究
目錄文件夾就是普通文件夾，只是所有的素材都按一定順序保存在此，根目錄就是打開目錄文件夾的第一層
路徑
相對路徑：以圖片相對于html頁面的位置為參考
| 名稱 | 符號 | 說明 |
|---|---|---|
| 同一級路徑 | 空 | |
| 上一級路徑 | ../ | 上一級路徑指的是：包裹這個html文件的上一個文件中有圖片并使用他 |
| 下一級路徑 | / | 與上一級相反 |
和電腦命操作方式相似
絕對路徑
與相對路徑區分，用\，以盤符為開頭。或者以http在網上拿取網站
超鏈接標簽（p28）
語法格式
<a href="跳轉目標" target="c=窗口的彈出方式">文本或圖像</a>
a = archor 錨
| 屬性（target="——"） | 作用 |
|---|---|
| href | 指定連接目標的url地址，使該標簽有超鏈接的功能通過使用不同的內(使用herf="#名字"，在要被轉到的位置的標簽給與一個id="名字")外部標簽來選擇搜索外連接還是調到當前頁面的指定位置 |
| target="_" | 頁面的打開方式，其中 _self 為默認值，_blank 為在新窗口打開方式 |
示例：
<p>
<a herf="#live">
點擊這個按鈕：
</a>
</p>
<h1 id="live">
會直達這個標簽所在的位置
</h2>
注釋標簽！！！
格式
<!-- 注釋 -->
快捷鍵 crtl + /
注釋有多重要不用多說了
特殊字符
| 特殊字符 | 字符代碼 |
|---|---|
| (空格) | |
| < | < |
| > | > |
| & | & |
| （人民幣符） | ¥ |
| （版權符） | © |
| （注冊商標） | ® |
| （攝氏度符） | ° |
| 正負號 | ± |
| * | × |
| / | ÷ |
| 平方 | ² |
| 立方 | ³ |
用法，在文段中需要特殊字符時直接輸入以上字符代碼
html標簽下（p31-35）
表格標簽
<table>
<tr>
<th>第一號數據</th>
<th>第二號數據</th>
<th>第三號數據</th>
</tr>
<tr>
<td>第四號數據</td>
<td>第五號數據</td>
<td>第五號數據</td>
</tr>
</table>
</body>
</html>
<!-- 表格的基本框架，每個tr占1行，這個行全是td/th，且th是表頭標簽，這個標簽內的文字居中加粗顯示 -->
表格屬性：一般通過css設置，但單詞作為關鍵字，html和css都會使用(p36)
| 屬性 | 選擇 | 用法 |
|---|---|---|
| aligh | left,center,right | 表格對于頁面對齊方式，寫在table標簽內 |
| border | 1或（void） | 是否給表格寫入邊框 |
| cellpadding | 像素值 | 規定邊框與文字間的距離 |
| cellspacing | 像素值 | 邊框間空隙大小 |
| width/highth | 像素值 | 同圖片 |
表格結構標簽(p37)
<thead>
<!-- 表格頭部區域 -->
<tbody>
<!-- 表格身體區域 -->
合并單元格
- 合并單元格方式
跨行合并： rowspan=“合并單元格數”
跨列合并：colspan=“合并單元格數” - 找到目標單元格，寫上合并方式 = 合并的單元格數量。
列表標簽
列表：整齊，整潔
無序列表（重點）
<body>
<ul>
<li>榴蓮</li>
<li>榴蓮</li>
<li>罐頭</li>
</ul>
</body>
注：ul的下一級標簽只能有li標簽，但li標簽的下一級標簽沒有特殊要求
有序列表
<ol> 和ul相似;要求也相似，li。
自定義列表
<dl>父類</dl>
<dd>子1</dd>
<dd>子2</dd>
<dd>子3</dd>
表單標簽
目的：收集用戶信息
用戶填寫的內容：表單控件
表單域
在HTML標簽中,
浙公網安備 33010602011771號