1.什么是HTML、CSS

HTML即超文本標記語言：

超文本：超越了文本的限制，比普通文本更強大。除了文字信息，還可以i當以圖片、音頻、視頻等內容

標記語言：由標簽構成的語言

HTML標簽都是預定義好的。

HTML代碼直接在瀏覽器中運行，HTML標簽由瀏覽器解析。
CSS

CSS：層疊樣式表，用于控制頁面的樣式（表現）。
官方文檔網址：w3school 在線教程

2.HTML的語法特點

html中的標簽不區分大小寫
html的標簽屬性值使用單引號或雙引號均可
html的語法結構比較松散

3.HTML的快速體驗

新建文本文件，后綴名改為.html
編寫html結構標簽
在<body>中填寫內容

示例代碼

<html><head><title>標題（頭）</title></head><body>身體</body></html>

4.開發工具推薦：VS Code

安裝步驟網上很容易找到

5.基本標簽&樣式

5.1.標題

5.1.1.標題排版

圖片標簽：<img>
src:指定圖片的url（絕對路徑/相對路徑）

width:圖像的寬度（px像素/%相對于父元素的百分比）

height:圖像的高度（px像素/%相對于父元素的百分比）

一般width或height只設置一個，另外一個會等比例縮放

路徑的書寫方式：
絕對路徑：

1.絕對磁盤路徑

2.絕對網絡路徑：在瀏覽器中右鍵圖片->在新標簽頁中打開圖像（得保證互聯網上有這張圖片，并且保證打開的時候是聯網的

相對路徑（推薦寫法）：
./：當前目錄，可以省略

../：上一級目錄，不可以省略
```
<img src="./img/news_logo.png" width="300px" height="100px" >
```
標題標簽：<h1> - <h6>
水平線標簽：<hr>
沒有任何意義的標簽：<span>
- 該標簽是一個在開發網頁時會大量用到的沒有語義的布局標簽
- 特點：一行可以顯示多個（組合行內元素），寬度和高度由內容撐開

5.1.2.標題樣式

CSS引入方式：
行內樣式：寫在標簽的style屬性中（不推薦）
```
<h1 style="..." >
</h1>
```
內嵌樣式：寫在style標簽中（可以寫在頁面任何位置，但通常約定寫在head標簽中
```
<style>...</style>
```
外聯樣式：寫在一個單獨的.css文件中（需要通過link標簽在網頁中引入）

.css <link href>

顏色的表示形式

表示方式	表示含義	取值
關鍵字	預定義的顏色名	red,green,blue(這三種顏色是三原色)
rgb表示法	紅綠藍三原色，每項取值范圍：0-255	rgb(0,0,0),rgb(255,255,255),rgb(255,0,0)
十六進制表示法	`#`開頭，將數字轉換稱十六進制表示	#000000,#ff0000,#cccccc,簡寫：#000，#ccc

CSS選擇器：用來選取需要設置樣式的元素（標簽）

元素選擇器

元素名稱 {color: red;
}

<元素名稱>要設置的元素</元素名稱>

id選擇器

#id屬性值 {color:red;
}

<元素名稱 指定id >要設置的元素</元素名稱>

類選擇器

.class {color: red;
}

<元素名稱 指定類別class>要修改的元素</元素名稱>

優先級：id選擇器 > 類選擇器 > 元素選擇器

css屬性：
- color：設置文本的顏色
- font-size：字體大小（注意：得加px）

5.1.3.超鏈接

標簽：

<a href="..." target="..." >名稱</a>

屬性：
- href：指定資源訪問的url
- target：指定在何處打開資源鏈接：
  - _self：默認值，在當前頁面打開
  - _blank：在空白頁面打開
CSS屬性：
- text-decoration：規定添加到文本的修飾，none表示定義標準的文本
- color：定義文本的顏色

5.2.正文

5.2.1.正文排版

視頻標簽：<video>
- src:規定視頻的url
- controls:顯示播放的控件
- width:播放器的寬度
- height:播放器的高度
音頻標簽：<audio>
- src：規定音頻的url
- controls：顯示播放控件
段落標簽：<p>
文本加粗標簽：<b> / <strong>
換行標簽：<br>
CSS樣式
- line-height：設置行高
- text-indent：定義第一個行內容的縮進
- text-align：規定元素中的文本的水平對齊方式
注意
- 在HTML中無論輸入多少個空格，只會顯示一個。可以使用空格占位符：

5.2.2.頁面布局

盒子：頁面中所有的元素（標簽），都可以看作是一個盒子，由盒子將頁面中的元素包含在一個矩形區域內，通過盒子的視角更方便的進行頁面布局
盒子模型的組成（從內向外）：內容區域(content)、內邊距區域(padding)、邊框區域(border)、外邊距區域(margin)
布局標簽：在實際開發網頁中，會大量頻繁的使用div和span這兩個沒有語義的布局標簽。
標簽：<div>、<span>
特點：
- div標簽
  - 一行只顯示一個(獨占一行)
  - 寬度默認是父元素的寬度，高度默認由內容撐開
  - 可以設置寬高(width, height)
- span標簽
  - 一行可以顯示多個
  - 寬度和高度默認由內容撐開
  - 不可以設置寬高(width, height)
CSS屬性
- width：設置寬度
- height：設置高度
- border：設置邊框屬性
- padding：內邊距
- margin：外邊距
- 注意：
  - 如果只需要設置某一個方位的邊框、內邊距、外邊距，可以在屬性名后加上-位置，如：padding-left

表格、表單標簽

表格標簽

場景：在網頁中以表格（行、列）形式整齊展示數據
標簽：

標簽	描述	屬性/備注
`<table>`	定義表格整體，可以包裹多個`<tr>`	`border`：規定表格邊框的寬度 `width`：規定表格的寬度 `cellspacing`:規定單元之間的空間
`<tr>`	表格的行，可以包裹多個`<td>`
`<td>`	表格單元格（普通），可以包裹內容	如果是表頭單元格，可以替換為`<th>`,這個`th`標簽有加粗居中的效果

表單標簽

場景：在網頁中主要負責數據采集功能，如注冊、登錄等數據采集。
標簽：<form>
表單項：不同類型的input元素、下拉列表、文本域等。
- <input>:定義表單項，通過type屬性控制輸入形式
  - type取值：
    1. text：默認值，定義單行的輸入字段
    2. password：定義密碼字段
    3. radio：定義單選按鈕
    4. checkbox：定義復選框
    5. file：定義文件上傳按鈕
    6. data/time/datatime-local：定義日期/時間/日期時間
    7. number：定義數字輸入框
    8. email：定義郵件輸入框
    9. hidden：定義隱藏域
    10. submit/reset/button：定義提交按鈕/重置按鈕/可點擊按鈕
- <select>:定義下拉列表，<option>定義列表項
- <textarea>:定義文本域
屬性：
- action:規定當提交表單時項何處發送表單數據，URL。如果不指定，默認提交到當前頁面
- method:規定用于發送表單數據的方式。GET、POST
  - get:在url后面拼接表單數據，比如：?username=12&age=213，url長度有限制（大小有限制），默認值
  - post：在消息體（請求體）中傳遞的，參數大小無限制的
- 注意：表單項必須有name屬性才可以提交

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單項標簽</title>
</head><body><form action="" method="post">姓名：<input type="text" name="name"> <br><br>密碼：<input type="password" name="password"> <br><br>性別： <label><input type="radio" name="gender" value="1">男</label><label><input type="radio" name="gender" value="2">女</label> <br><br>愛好：<label><input type="checkbox" name="like" value="1">Java</label><label><input type="checkbox" name="like" value="2">C++</label><label><input type="checkbox" name="like" value="3">Python</label><label><input type="checkbox" name="like" value="4">c語言</label><br><br>文件：<input type="file" name="file"> <br><br>生日：<input type="date" name="birthday"> <br><br>時間：<input type="time" name="time"> <br><br>日期時間：<input type="datetime-local" name="datatime"> <br><br>郵箱：<input type="email" name="email"> <br><br>電話：<input type="number" name="phonenumber"> <br><br>學歷：<select name="degree"><option value="">---------請選擇---------</option><option value="1">大專</option><option value="2">本科</option><option value="3">碩士</option><option value="4">博士</option></select><br><br>描述：<textarea name="description" cols="30" rows="10"></textarea> <br><br><input type="hidden" name="id" value="1"><!-- 表單常見按鈕 --><input type="button" value="可點擊按鈕"> &nbsp;&nbsp;<input type="reset" value="重置按鈕">&nbsp;&nbsp;<input type="submit" value="提交按鈕"></form>
</body></html>