css提取頁面元素唯一性_Part 1 · HTML5-01-HTML網頁開發、CSS基礎語法

技術標籤：css提取頁面元素唯一性

Part 1 · HTML5 網頁開發-01

第一章、HTML網頁開發、CSS基礎語法

第一節、HTML基礎

1、初識前端開發

前端開發是什麼？

前端開發是建立pc頁面或者APP頁面凡是能讓使用者看得見的頁面，把頁面呈現給使用者

核心技術：HTML、CSS、JavaScript，以及一些框架等等

前端三層：HTML（結構層）、CSS（樣式層）、JavaScript（行為層）

2、需要掌握的基礎知識點

HTML：HTML語法、HTML語義化、SEO基礎
CSS：CSS語法、頁面佈局、媒體查詢、CSS3
JavaScript：JavaScript基礎語法、（基礎的資料結構、WEB APIs、ES6+、模組化、TypeScript）

3、HTML概述

HTML（hypertext Markup language）超文字標記語言，用來搭建網頁結構的

4、網際網路訪問原理

http（hypertext transfer protocol）超文字傳輸協議，是客戶端瀏覽器或者其他程式與web伺服器之間的應用層通訊協議。

使用者向伺服器傳送http請求，訪問網站
伺服器響應http請求，根據請求響應一個html檔案，將HTML傳輸給客戶端

5、純文字格式，富文字格式

純文字格式：最常見的是.txt檔案，就是隻能儲存文字，不能儲存其他格式

HTML、CSS、JS檔案都是純文字格式檔案

富文字格式：常見的是.rtf檔案、.doc檔案，除了能儲存文字，還能儲存圖片等

6、THML基本概念

HTML HyperText Markup Language超文字標記語言（從語義化的角度搭建網頁結構） HTML是純文字檔案

7-9、HTML標籤語法+元素+屬性

標籤語法：雙標籤必須成對出現，結束標籤必須加關閉符，單標籤必須加關閉符 / ，（在HTML5中，單標籤可以不寫關閉符）
元素：HTML元素是從開始標籤到結束標籤的所有內容包括（開始標籤+元素內容+結束標籤）

容器級標籤：可以放任意內容，包含容器級標籤都可以放
文字級標籤：只能放文字或類似文字的內容，比如圖片、表單元素等

屬性：html中標籤的屬性，屬性名（key）屬性值（Value）

10-12、DTD+名稱空間+字符集

DTD：DocType Definition 文件宣告型別
名稱空間：遵循w3school
字符集常用UTF-8，包含最多文字的字符集

13、註釋

Ctrl+/ 快捷註釋

14-17、HTML常用標籤

標題標籤 <h1> <h2> <h3> <h4> <h5> <h6>
段落標籤 <p>
換行標籤 <br/> 單標籤

18、相對路徑

相對路徑從html本身出發，包含3個方向 ( / 是關閉符號）

同級查詢（目標檔案和html屬於同一級），直接檔名+字尾

例： <img src="tupian.jpg"/>

子級查詢（目標檔案在html同級的資料夾內），需要先找到檔名，再找到檔案

例： img src="image/tupian.jpg/

上級查詢（目標檔案在html母資料夾之外的檔案），需要先跳出母資料夾，用 ../ 跳出，如果跳出多級，就多寫幾個../

例: <img src="../../imagetupian.jpg/>

19、絕對路徑

絕對路徑絕對路徑不需要從HTML檔案出發，是直接從電腦硬碟查詢或者使用網址查詢，路徑是固定的

從碟符出發，檢視路徑（缺點，只有在本人的電腦能生效，換臺電腦就無法查詢。中文的路徑容易出錯）
網路圖片，檢視路徑

實際工作中: ==建議多使用相對路徑，可以適當使用網址形式的絕對路徑==

注意: 使用相對路徑必須將圖片或者檔案與HTML同時上傳，且保持相對路徑位置不變

20、HTML中的常用標籤`<img>`

<img>的屬性

width 屬性 <img src="../images/5.jpg" width="100"/>
heigth屬性 <img src="../images/5.jpg" height="200"/>
border邊框屬性 <img src="../images/5.jpg" height="300" border="20"/>
title滑鼠點選提示屬性 <img src="../images/5.jpg" height="300" title="點選檢視原始檔"/> 加提示屬性，可以提高使用者體驗
alt替換文字屬性
（圖片檢視失敗的情況，做替換使用，如果檢視到圖片，就不顯示）提高使用者體驗 <img src="../images/15.jpg" height="200" alt="這是一個微笑的圖片"/> 實際工作中 ==src 和alt 在<img>裡面是很重要的==

21、HTML中的常用標籤`<audio>`

音訊audio標籤（雙標籤）,需要新增控制檯，control屬性 <audio src="#" control="control"></audio>

22、HTML中的常用標籤`<a>`

<a>標籤，a稱anchor，中文意思“錨”，超級連結的含義 <a>為雙標籤作用：在指定的位置新增超級連結 <a>標籤常用的屬性:

href屬性全稱hypertext reference, 超文字引用，規定連結目的地址
target屬性用於網頁跳轉是否開啟新頁面 target_self 點選超連結，在當前頁面跳轉，不開啟新的頁面 target_blank 點選超連結，跳轉到新的頁面展示
title屬性，用法和<img>標籤裡面的title用法一樣（滑鼠點選提示），提高使用者體驗

23、錨點跳轉

錨點<a>跳轉 一、內面內的點對點跳轉

設定目的地錨點（頁面內部點對點跳轉，需要給目的地設定錨點）設定方法:

在需要設定錨點的標籤內加 id="###" 例：<h2 id="##">錨點位置</h2>（id命名在整個頁面具有唯一識別性）
在需要設定錨點的標籤上加<a name="##" ></a>空標籤,（同樣，name命名具有唯一性）例：<a name="##" ><h2>此標籤需要加錨點</h2></a>

添加出發地錨點連結（新增頁面內部錨點連結）

在需要加連結的位置設定<a>標籤，給<a>的href設定屬性值為 #id名或name名，用#開頭例:<a href="#id名或name名">跳轉到錨點位置</a>

二、跨頁面的點對點跳轉

設定目的地錨點設定方法:

跨頁面跳轉設定錨點，和頁面內跳轉一樣的設定

添加出發地錨點連結

連結到錨點，新增href屬性值，要先找到對應的頁面，屬性值寫成 “頁面#id&name” 例: <a href="同級頁面.html# id名或name名>跳轉到另外錨點位置<a/>

例：<a href="../../非同級頁面.html# id名或name名>跳轉到另外錨點位置<a/> 注：同級頁面直接寫文字名，非同級頁面要跳級查詢，根據實際情況，新增多少個../

24、HTML中的常用標籤`<ul>`

HTML 無序列表

ul : unordered list 定義無序列表大結構
li : list item 列表項，定義無序列表內的某一項 <ul>與<li>為巢狀關係，書寫快捷鍵ul>li注：<li>不能脫離<ul>單獨寫，但是<li>內部可以新增各種標籤，包括<ul>標籤, <li>是容器標籤

例：

<ul>
    <li>
      <ul>
        <li></li>
      </ul>
    </li>
    <li>
      <ul>
        <li></li>
      </ul>
    </li>
  </ul>

25、HTML中的常用標籤`<ol>`

HTML有序列表

ol : ordered list 定義一個有序列表的大結構，書寫快捷鍵ol>li
li : list item 列表項，定義無序列表內的某一項 <ol><li>和無序列表一樣，巢狀關係例：

   <ol>
      <li>
      </li>
   </ol>

26、HTML中的常用標籤`<dl>`

定義列表

dl : definition list ,定義一個自定義列表的大結構
dt : definition term,定義自定義列表中的一個主題
dd : definition description ,定義解釋項，描述解釋dd <dl></dl> <td></td> <dd></dd> 和有序列表無序列表一樣，巢狀關係，<td></td> <dd></dd>為同級

例：

   <dl>
      <dt></dt>
      <dd></dd>
   </dl>

27、HTML中的常用標籤`<div>`

div : division ,佈局標籤,分割、區域、跨度作用：劃分網頁區域，結構佈局
span : 小區域，小跨度，容器標籤 <div>和<span>是盒子標籤，容器標籤，內部可以放任意內容，沒有明確的語義，後期H5的佈局標籤更多，語義會更多 div劃大區域，span在大區裡面劃小區

28、HTML中的常用標籤`<table>`

表格標籤<table>

table : 表格定義整個表格大結構
tr : table rows 表格的行
td : table data 表格資料
th : table headdate 表頭三者為巢狀關係

例：

<table>
   <th>表頭</th>
   <tr>
    <td>資料</td>
   </tr>
</table>

29、合併單元格

合併單元格通過<th> <td>的兩個屬性進行設定

左右跨列合併：屬性 colspan （合併列）
上下跨行合併：屬性 rowspan （合併行） cols指的是列，rows指的是行 colspan 是跨幾列 rowspan 是跨幾行

30、表格分割槽

表格分割槽完整的表格<table>內部包含4個分割槽標籤（標題，頭部，主題，頁尾）

caption: 表格標題
tabel head ：thead 表格頭部
tabel body : tbody 表格主體
tabel foot : tfoot 表格頁尾注:書寫中，不論先後順序，瀏覽器會按照預設順序載入

31、表單

表單（表單域、提示資訊、表單控制元件）

表單域：容器，容納提示資訊+表單控制元件
提示資訊：提示表單控制元件裡面應該填寫什麼資訊
表單控制元件：用來裝輸入內容的

32、HTML中常用標籤`<form>`

表單域標籤功能性標籤（填寫的表單資訊想正確的提交到後臺伺服器就必須放在<form>標籤內），雙標籤，容器標籤
表單域標籤屬性

屬性名	屬性值	描述
cation	url	制定接收+處理表單的url地址
method	get/post	設定表單提交方式
name	自己定義	規定表單的名字

33-34-35、HTML中常用標籤`<input>`

表單域內的輸入<input>標籤 <input>是單標籤，（==所有單標籤都只能通過標籤屬性來實現各種功能==）注 :表單元素不能自動換行，所以需要加其他標籤來換行如<p><br/>
<input>標籤常用屬性

屬性名	屬性值	描述
type	text	單行文字輸入框
type	password	密碼輸入框
type	radio	單選
type	checkbox	複選框
type	button	普通按鈕
type	reset	重置按鈕
type	submit	提交按鈕
type	image	影象形式按鈕
type	file	定義輸入欄位和“瀏覽”按鈕，提供檔案上傳
name	自定義	定義控制元件的名稱
value	自定義	定義控制元件的預設文字值
size	數字	定義控制元件的寬度
checked	checked	定義選框控制元件的預設被選中項
maxlength	數字	定義允許輸入的最多字元數

書寫規則：

例：文字框+密碼框單行文字輸入框：使用者名稱 <input type="text"> 密碼輸入框：密碼 <input type="password">
例：單選框+複選框選擇性別： <input type="radio" name="w">男 <input type="radio" name="w">女 選擇興趣： <input type="checkbox">游泳 <input type="checkbox">跳舞 <input type="checkbox">閱讀

36、HTML中常用標籤`<textarea>`

表單域內的文字域<textarea> 例：寫一個30列，10行的文字域 <textarea name="#" id="#" cols="30" rows="10">自我介紹</textarea>

37、HTML中常用標籤`<select>`

表單域內的下拉選單 <select>內巢狀<option> 若要加選項組，<optgroup> 寫法：<select>內巢狀<optgroup>，<optgroup>內巢狀<option>

例：

  <select>
    <optgroup label="中國">
        <option value="#">重慶</option>
        <option value="#">川東</option>
        <option value="#">上海</option>
        <option value="#" selected="selected">北京</option>
    </optgroup>
    <optgroup label="英國">
        <option value="#">愛丁堡</option>
        <option value="#">丹迪</option>
        <option value="#">斯特林</option>
        <option value="#">劍橋</option>
    </optgroup>  
  </select>

38、HTML中常用標籤`<label>`

表單域的<label>標籤 <label>標籤的作用：幫助表單元素定義標註（標記），用於選項中，滑鼠放在選擇框附近可以選選擇到該選項書寫方法：

方法1：先定義id值，再for=id值例： <input type="checkbox" id="e"> <label for="e" >繪畫</label>
方法2：<label>標籤包含選擇標籤例： <label> <option value="#">重慶</option></label>

第二節、CSS基礎

1、CSS概念

CSS概念 css（cascading style sheets）層疊樣式表，從美觀的角度描述頁面樣式
CSS書寫規則：由兩個部分組成：選擇器+一條或多條宣告

2-3-4-5、CSS的樣式表

書寫方式根據書寫位置不同，CSS有四種書寫方式：內聯式、內嵌式、匯入式、外聯式

內聯式：寫在html標籤裡面的<style>標籤內樣式，（缺點：程式碼量太大，也影響html內標籤的語義，實際工作中，不會用到這種寫法）
內嵌式：寫在<head>標籤內部，<title>之下（缺點依然是程式碼多），包裹在<style>標籤內例：<style type="text/css"> 小型專案可以用
外聯式：寫在一個單獨的副檔名為.css的檔案中，在.css檔案書寫中，不需要再加<style>標籤，大型專案推薦使用 注：外聯式要引用在html檔案中才能加載出來，引入方式：在html中的<head>標籤內部使用<link>標籤引用 <link>標籤的屬性:

屬性名	屬性值
rel	"stylesheet"
href	css檔案路徑
type	"text/css”

匯入式：作用與外聯式基本相似，書寫方法：@input url(.css檔案的路徑) ，實際工作中用得少

6-7、CSS樣式規則語法和書寫風格

CSS樣式規則語法由兩個部分組成：選擇器+一條或多條宣告選擇器（html中需要更改樣式的標籤元素名）加上 {K:V；} K（屬性名）V（屬性值）例： tb{color:red;}
書寫風格

分行排版，樣式清晰,美觀，易於維護
全部放在一排，緊湊型（上傳伺服器的時候可以這樣，這種寫法佔空間小，上傳速度快些）

8-9-10、CSS常用屬性

CSS常用屬性

顏色屬性color，有三種顏色格式（1、十六進位制 2、英文式 3、rgb式）
字型樣式屬性font-family 首選字型根據設計圖來，因為每個人電腦字型庫裡面的字型集有差別，所以需要加備用字型，通常是宋體或微軟雅黑提示：如果有英文+中文的情況下，建議把英文字型寫在前面，中文字型寫在後面，應為是根據設定字型的先後順序依次載入。（一般中文字型都適用於英文，但是英文字型不全適用於英文）
字型大小屬性font-size

相對長度單位	描述
px	畫素值，最常用的單位
em	倍數，繼承祖先元素設定的字號倍數
%	繼承祖先元素設定字號的百分比


in	英寸
cm	釐米
mm	毫米
pt	點

注意：實際應用中，網頁中最小設定字號必須是12px,小於12px會出現相容問題，普遍用14px+,儘量用偶數數字的字號

11、CSS樣式屬性-盒子實體化三屬性

CSS樣式屬性-盒子實體化三屬性常用屬性名（width 、 height 、 background-color）

12、CSS的選擇器

CSS的選擇器（選擇HTML中需要新增樣式的標籤元素）

基礎選擇器：標籤選擇器、id選擇器、類選擇器、萬用字元選擇器
高階選擇器：後代選擇器、交集選擇器、並集選擇器

13、id選擇器

id選擇器，id必須唯一，必須以字母開頭，

書寫方式：#id屬性值，選擇範圍：只能選中一個標籤

14、類選擇器

類選擇器，通過標籤的class屬性去選擇標籤

書寫方式：.class屬性值
選擇範圍：頁面中所有class屬性值相同的標籤，命名必須以字母開頭，class屬性值可以與其他的class相同 class內可以加多個類名，同時作用於一個標籤上，兩個類名用空格隔開 注：實際工作中，class 選擇器用於CSS，id選擇器用於JavaScript

15、萬用字元選擇器

萬用字元選擇器書寫符號：* 作用於全部標籤，包括html標籤例: *{ background-color:red; } 整個頁面顏色為紅色

16、後代選擇器

後代選擇器（也叫包含選擇器）通過標籤之間的巢狀關係去選擇元素，高階選擇器是由於基礎選擇器組成

書寫方法：空格表示後代，基礎選擇器之間用空格分隔，祖-父-子關係,一步一步選擇後代，直到選擇到需要更改樣式的後代（可以層級選擇，也可以跳過中間層直接選到要改樣式的子集）

17、交集選擇器

交集選擇器基礎標籤進行連續書寫，如果有標籤選擇器參與，那麼標籤選擇器要寫在前面例，p.demo#id ul p ==IE6瀏覽器不支援連續交集的寫法==

18、並集選擇器

並集選擇器不同選擇器選擇的元素都要設定相同樣式的情況下，可以將之前的6種選擇器進行並集書寫，書寫方式；多個選擇器中間用逗號分隔例: body,div,.demo,#id,ul,p

19、CSS層疊式（繼承性）

CSS層疊式（繼承性+層疊性）
繼承性如果一個標籤沒有設定樣式，但是他的祖先級以前設定過，那麼這個標籤會從祖先級標籤繼承這些樣式，這就叫繼承性，（能被繼承的樣式是所有文字相關樣式屬性，其他的屬性不能能繼承）

20、CSS層疊式（層疊性-選中目標標籤）

層疊性當同一個標籤被設定了多個選擇器，按照規律層疊掉多餘的，最終顯示一個選擇器的樣式當目標標籤被選擇，層疊方法：

第一步：比較多個選擇器權重，權重高的層疊權重低的 ①、基礎選擇器的權重（選擇範圍越發的權重越小）例：萬用字元選擇器<標籤選擇器<類選擇器<id選擇器 ②、高階選擇器權重比較（比較組成高階選擇器的id個數，類個數，標籤個數）比較順序:id個數>類的個數>標籤的個數例： 2個不同的高階選擇器A、B，如果A裡面id個數為3，類的個數為2，B裡面id個數為2，類的個數為3，標籤個數為1，那麼層疊下來，最終顯示結果A選擇器設定的樣式。如果A裡面id個數為2，類的個數為2，B裡面id個數為2，類的個數為3，那麼最終顯示結果為B選擇器設定的樣式。
第二步：注：如果每個選擇器權重都一樣，那麼載入最後寫的CSS那個選擇器，後寫的層疊掉先寫的

21、CSS層疊式（CSS層疊性-目標標籤的祖先級被選中）

目標標籤的祖先級被選中選中的是目標的祖先級，文字樣式被繼承，也會出現層疊層疊方法：

第一步：就近原則，載入距離目標最近的選擇器樣式
第二步：如果祖先級的距離一樣，就判斷選擇器的權重，*<標籤選擇器<類選擇器<id選擇器
第三步：祖先級距離相同，權重也一樣，那麼載入最後寫的CSS那個選擇器，後寫的層疊掉先寫的

22、CSS層疊性-important&內行式

important和內行式

important 在比較權重的時候，important可以提升某條屬性的權重到最大在就近原則中使用important無效
內行式內行式權重高於所有其他選擇器，但是低於important