HTML是一種超文本標記語言
超文本：超過了文本的限制，比普通文本更強大，除了文字信息，還可以定義圖片、音頻、視頻等內容。
標記語言：由標簽"<標簽名>"構成的語言。
CSS:層疊樣式表，用于控制頁面的樣式（表現）。
常見標簽
| 類別 | 標簽 | 說明 |
|---|---|---|
文本處理標簽 ? | <h1> - <h6> | 一級標題 - 六級標題(h1到h6字體逐漸變小) |
<br>、<p> | 換行、段落 | |
<strong>、<em>、<ins>、<del> | 文本加粗、傾斜、下劃線、刪除線（具有強調作用） | |
<a href="..."> | 超鏈接（屬性：href、target） | |
| ?圖片 音視頻標簽 ? | <img src="..."> | 圖片（路徑：絕對路徑、相對路徑） |
<audio src="...">、<video src="..."> | 音頻、視頻 | |
| 布局標簽 | <div>、<span> | 沒有語義的布局標簽，配合CSS實現頁面布局 |
| 表格標簽 | <table>、<thead>、<tbody><br><tr> / <th>、<td> | 表格、表頭、表格主體 行/單元格 |
表單標簽 ? | <form> | 定義表單（屬性：action、method） |
<input type="text/button"> | 表單項（文本輸入框、按鈕...） | |
<select> / <option> | 表單項（下拉列表/選項） |
| 類別 | 屬性 | 說明 |
|---|---|---|
| 盒子模型 | width, height | 作用：控制元素尺寸、內邊距、邊框、外邊距，從而控制頁面的布局展示<br>高度、寬度 |
| box-sizing | 高度和寬度的計算方式；content-box, border-box | |
| padding | 內邊距（上、右、下、左；上下、左右） | |
| border | 邊框 | |
| margin | 外邊距（上、右、下、左；上下、左右） | |
| flex彈性布局 | display | 作用：是一種一維的布局模型，為元素之間提供強大的空間分布和對齊能力。<br>flex: 使用flex布局 |
| flex-direction | 設置主軸方向（row: x軸，水平方向；column: y軸，垂直方向） | |
| justify-content | 子元素在主軸上的對齊方式 |
樣式
若是需要更改某個標簽下字體的顏色，有三種樣式
1、內部樣式
在style標簽里直接定義需要標簽字體的顏色（如以下代碼style標簽定義span標簽內的字體顏色）
2、行內樣式
在定義標簽時直接在標簽后跟需要的顏色（如以下代碼<span style="color:gray">2024年05月15日 20:07</span>）
3、外部樣式
通過調用外部css文件中的代碼為某個標簽定義顏色（如<link rel="stylesheet" href="css/news.css">）
下面為css文件中的內容
以下均為沒有內容的示例，可以自己往title等標簽內加入內容測試。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><!-- 內部樣式 --><style>span{/* 關鍵字 *//* color:gray; *//* RGB表示法 *//* color:rgb(255, 0, 0); *//* RGBA表示法 *//* color: rgba(255, 120, 0, 0.1); *//* 十六進制表示法 */color: #8e8282;}</style><!-- 方式三：外部樣式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><!-- 定義一個標題，標題內容：： --><h1></h1><!-- 定義一個超鏈接，里面展示 央視網 --><!-- a 超鏈接標簽href 屬性 超鏈接的地址target 屬性 超鏈接打開方式1、_blank 新窗口打開2、_self 當前窗口打開（默認）3、_parent 父窗口打開內容 超鏈接的文本 --><a href="http://www.cctv.com" target ="_blank">央視網</a> <!-- span為沒有語義的標簽，此處用于修改字體顏色 --><!-- 方式一：行內樣式 --><!-- <span style="color:gray">2024年05月15日 20:07</span> --><!-- 方式二：內部樣式 --><span>2024年05月15日 20:07</span></body>
</html>選擇器
以上的設置樣式的方法有缺陷，方式一、三會直接將所有span標簽的字體都設為灰色，方式二書寫步驟繁瑣，但選擇器可以解決這個問題。
選擇器有元素選擇器，類選擇器與id選擇器，其中元素選擇器就是上文介紹的方法
類選擇器
語法：在style標簽內? ?.類名{這個類需要的修改}，使用時在標簽后聲明是哪個類就行（如?<span class="cls" id="time">2024年05月15日 20:07</span>）
id選擇器
語法：在style標簽內 #id名{此id需要的修改}? ?，使用時標簽內聲明是哪個id即可（如?<span class="cls" id="time">2024年05月15日 20:07</span>）
優先級順序如下（從高到低）：
-
ID 選擇器（
#id）：優先級最高。 -
類選擇器（
.class）、屬性選擇器（如?[type="text"]）、偽類選擇器（如?:hover）：優先級次之。 -
元素選擇器（
div,?span?等）：優先級最低。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> </title><!-- 內部樣式 --><style>/* 元素選擇器 *//* span{color:gray;} *//* 類選擇器 *//* .cls{color:#f00;} *//* id選擇器 */#time{color:#0000ff; }</style><!-- 方式三：外部樣式 --><!-- <link rel="stylesheet" href="css/news.css"> --></head>
<body><!-- -----------------新聞標題------------------------ --><h1></h1><a href="http://www.cctv.com" target ="_blank"> </a> <span class="cls" id="time">2024年05月15日 20:07</span><!-- 換行 --><br></br><!-- -----------------新聞正文------------------------ --><!-- 定義一個視頻，引入video/news.mp4 --><!-- video標簽的屬性src :視頻地址沒有播放控件視頻不能播放controls :顯示播放控件autoplay :自動播放width :視頻寬度（建議寬度和高度只設計一個，另一個會等比例縮放）height :視頻高度單位：像素px % ：百分比（相對于父元素的百分比）--><video src="video/news.mp4" controls autoplay width="60%"></video><br></br><!-- 音頻播放器 --><!-- <audio src="audio/news.mp3" controls autoplay></audio> --><!-- 段落標簽：p --><p></p><P></P><!-- 定義一張圖片，引入img/1.gif --><!-- img標簽的屬性src :圖片訪問地址:1、絕對路徑1.1、絕對磁盤路徑：D:\我的文檔\桌面\HTML-CSS\img\1.gif1.2、絕對網絡路徑：https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051520034237647.gif2、相對路徑2.1、 ./ 表示當前目錄(可以省略)2.2、../ 表示上一級目錄alt :圖片描述width :圖片寬度height :圖片高度（建議寬度和高度只設計一個，另一個會等比例縮放）--><img src="img/1.gif" width="60%"></img></body>
</html>?
