https://blog.csdn.net/qq_43645678/article/details/88807566

html基礎知識：

1. 瀏覽器概念

HTML基礎標籤

1. html標籤

<html lang="en" dir="ltr"></html>

注意點

html 標籤是HTML頁面的根元素，其中的lang屬性可用於標記網頁或部分網頁的語言
en定義語言爲英語,zh-CN定義語言爲中文
lang這個屬性不僅僅可以用在html標籤上

作用：

根據根據lang屬性來設定不同語言的css樣式，或者字體。
告訴搜索引擎做精確的識別
讓語法檢查程序做語言識別
幫助翻譯工具做識別
幫助網頁閱讀程序做識別
當搜索引擎或者瀏覽器拿到語言標籤後，有可能做一些針對指定語言的輔助操作等等

注意點

dir是國際化屬性中的一員，dir屬性定義了文字在瀏覽器中的排列方向.
如果定義整個HTML文檔的排列方向應該在html標籤中定義dir屬性,
其它HTML標籤也可以定義dir屬性.
默認值：ltr – 代表左到右的排列方式 rtl – 代表右到左的排列方式

2. head標籤

<head></head>

定義和用法

head 標籤用於定義文檔的頭部，它是所有頭部元素的容器。
head 中的元素可以引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關係等。
絕大多數文檔頭部包含的數據都不會真正作爲內容顯示給讀者。
下面這些標籤可用在 head 部分：base, link , meta , script , style , 以及 title 。
title 定義文檔的標題，它是 head 部分中唯一必需的元素

3. 常用的meta標籤

搜索引擎優化（seo）；
定義頁面使用語言；
自動刷新並指向新的頁面；
實現網頁轉換時的動態效果；
控制頁面緩衝；
網頁定級評價；
控制網頁顯示的窗口等！

	<!-- 聲明文檔使用的字符編碼 -->
	<meta charset='utf-8'>
	
	<!-- http-equiv屬性 -->
	<meta http-equiv="參數" content="參數變量值">
	
	<!--Expires(期限)--設定網頁到期時間，一旦網頁過期，必須到服務器上重新傳輸--必須使用GMT的時間格式。-->
	<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">

	<!-- Pragma(cache模式)--禁止瀏覽器從本地計算機的緩存中訪問頁面內容--這樣設定，訪問者將無法脫機瀏覽-->
    <meta http-equiv="Pragma" content="no-cache">

	<!-- Refresh(刷新)--自動刷新並指向新頁面--其中的2是指停留2秒鐘後自動刷新到URL網址-->
    <meta http-equiv="Refresh" content="2; URL=http://www.baidu.com"> //(注意後面的引號，分別在秒數的前面和網址的後面)

	<!-- Set-Cookie(cookie設定)--如果網頁過期，那麼存盤的cookie將被刪除--必須使用GMT的時間格式-->
    <meta http-equiv="Set-Cookie" content="cookie value=xxx; expires=Friday,12-Jan-200118:18:18GMT；path=/">

	<!-- Window-target(顯示窗口的設定)--強制頁面在當前窗口以獨立頁面顯示--用來防止別人在框架裏調用自己的頁面-->
	<meta http-equiv="Window-target" content="_top">	

	 <!-- content-Type(顯示字符集的設定)--設定頁面使用的字符集--meta標籤的charset的信息參數如GB2312時，代表說明網站是採用的編碼是簡體中文；meta標籤的charset的信息參數如UTF-8時，代表世界通用的語言編碼；-->
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">

	<!-- content-Language（顯示語言的設定）-->
	<meta http-equiv="Content-Language" content="zh-cn"/>

	<!-- imagetoolbar--指定是否顯示圖片工具欄，當爲false代表不顯示，當爲true代表顯示-->
	<meta http-equiv="imagetoolbar" content="false"/>

	<!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

	<!-- 優先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

	<!--name屬性-->
	<meta name="參數" content="具體的參數值">
	
	<!-- 頁面關鍵詞 -->
    <meta name="keywords" content=""/>

	<!-- 頁面描述 -->
    <meta name="description" content="不超過150個字符"/>
    
    <!-- robots(機器人嚮導)--robots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引--content的參數有all,none,index,noindex,follow,nofollow。默認是all -->
    <!--all：文件將被檢索，且頁面上的鏈接可以被查詢-->
    <!--none：文件將不被檢索，且頁面上的鏈接不可以被查詢-->
    <!--index：文件將被檢索-->
    <!--follow：頁面上的鏈接可以被查詢-->
    <!--noindex：文件將不被檢索，但頁面上的鏈接可以被查詢-->
    <!--nofollow：文件將被檢索，但頁面上的鏈接不可以被查詢-->
    <meta name="robots" content="all">
    
    <!-- 網頁作者 -->
    <meta name="author" content="name, [email protected]"/>
    
    <!-- generator的信息參數，代表說明網站的採用的什麼軟件製作 -->
	<meta name="generator" content="信息參數"/>
    
    <!-- copyright的信息參數，代表說明網站版權信息 -->
	<meta name="copyright" content="信息參數">

	<!-- revisit-after代表網站重訪,7days代表7天，依此類推 -->
	<meta name="revisit-after" content="7days">

4. link標籤

link 標籤定義文檔與外部資源的關係。
link 標籤最常見的用途是鏈接樣式表。
註釋：link 元素是空元素，它僅包含屬性。
註釋：此元素只能存在於 head 部分，不過它可出現任何次數

<head>
	<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

5. title標籤

<title>文檔標題</title>

定義和用法

title 元素可定義文檔的標題。
瀏覽器會以特殊方式來使用標題，並通常把它放置在瀏覽器窗口的標題欄或狀態欄上。
文檔加入用戶的鏈接列表或收藏夾或書籤列表時，標題將成爲該文檔鏈接的默認名稱。
提示： title 標籤是 head 標籤中唯一要求包含的東西。
dir–(rtl/ltr)–規定元素中內容的文本方向;
lang–(language_code)–規定元素中內容的語言代碼;

6. body標籤

<body>文檔內容</body>

定義和用法

body 元素定義文檔的主體。
body 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。）

7. style標籤

<html>
	<head>
		<style type="text/css">
			h1 {color:red}
			p {color:blue}
		</style>
	</head>
	<body>
		<h1>Header 1</h1>
		<p>A paragraph.</p>
	</body>
</html>

定義和用法

style 標籤用於爲 HTML 文檔定義樣式信息。
在 style 中，您可以規定在瀏覽器中如何呈現 HTML 文檔。
type 屬性是必需的，定義 style 元素的內容。唯一可能的值是 “text/css”。
如需鏈接外部樣式表，請使用 link 標籤。
style 標籤支持 HTML 中的全局屬性。 style 標籤支持 HTML 中的事件屬性

8. HTML 標題

<body>
	<h1>這是標題 1</h1>
	<h2>這是標題 2</h2>
	<h3>這是標題 3</h3>
	<h4>這是標題 4</h4>
	<h5>這是標題 5</h5>
	<h6>這是標題 6</h6>
</body>

定義和用法

- h1 - h6 標籤可定義標題。 h1 定義最大的標題。 h6 定義最小的標題。
- 由於 h 元素擁有確切的語義，因此請您慎重地選擇恰當的標籤層級來構建文檔的結構。
- 因此，請不要利用標題標籤來改變同一行中的字體大小。
- 相反，我們應當使用層疊樣式表定義來達到漂亮的顯示效果。

9. HTML 段落

<body>
	<p>這是一個段落。</p>
	<p>這是一個段落。</p>
	<p>這是一個段落。</p>
</body>

定義和用法

- p 標籤定義段落。
- p 元素會自動在其前後創建一些空白。瀏覽器會自動添加這些空間，也可以在樣式表中規定

10. HTML 文本標籤

<body>
	//文本換行
	<br>
	
	//文本加粗
	<b>加粗內容</b>
	<strong>加粗內容</strong>
	
	//文本傾斜
	<em></em>  <i></i>
	
	//水平線
   	<hr />空標記
	
	//刪除線樣式
	<s>內容</s>
</body>

11. HTML 鏈接

<body>
	<a href="http://www.runoob.com">這是一個鏈接使用了 href 屬性</a>
</body>

定義和用法

- a 標籤定義超鏈接，用於從一張頁面鏈接到另一張頁面。
- a 元素最重要的屬性是 href 屬性，它指示鏈接的目標。
- 所有瀏覽器中，鏈接默認外觀：下劃線藍色(未訪問)–下劃線紫色(已被訪問)–下劃線紅色(活動鏈接)
- 可以使用 CSS 僞類向文本超鏈接添加複雜而多樣的樣式

提示和註釋

- 如果不使用 href 屬性，則不可以使用如下屬性：download, hreflang, media, rel, target
  以及 type 屬性。
- 被鏈接頁面通常顯示在當前瀏覽器窗口中，除非您規定了另一個目標（target 屬性）。
- 請使用 CSS 來設置鏈接的樣式。

12. HTML 錨鏈接

通過創建錨點鏈接，用戶能夠快速定位到目標內容。

創建錨點鏈接分爲兩步：

<body>
	1. 使用 “ <a href="#id名"> 鏈接文本 </a> ” 創建鏈接文本；
	2. 使用相應的 id 名標註跳轉目標的位置。
</body>

13. HTML 圖片標籤

<body>
	<img src="https://img-blog.csdnimg.cn/20190401220956175.png" alt="some_text">
</body>

定義和用法

- 從技術上講，img 標籤並不會在網頁中插入圖像，而是從網頁上鍊接圖像。
- img 標籤創建的是被引用圖像的佔位空間。
- img 標籤有兩個必需的屬性：src 屬性和 alt 屬性。
- img 標籤支持 HTML 中的全局屬性。
- img 標籤支持 HTML 中的事件屬性。

14. HTML 特殊字符標籤

15. 註釋標籤

在HTML中還有一種特殊的標籤——註釋標籤。
如要在HTML文檔中添些便於閱讀理解但又不顯示在頁面中的註釋文字，就需使用註釋標籤。
註釋內容不顯示在瀏覽器窗口，但作爲HTML文檔內容一部分，也會被下載到用戶計算機上，查看源代碼時就可以看到。
其基本語法格式如下

<body>
	 <!-- 註釋語句 -->   ctrl + /       或者 ctrl +shift + / 
</body>

HTML列表標籤

<body>
	標籤		描述
	<ul>		定義無序列表。
	<ol>		定義有序列表。
	<li>		定義列表的項目。
	<dir>		定義目錄列表。不贊成使用。
	<dl>		定義定義列表。
	<dt>		定義定義列表中的項目。
	<dd>		定義定義列表中項目的描述。
	<menu>		定義命令的菜單/列表。
	<menuitem>	定義用戶可以從彈出菜單調用的命令/菜單項目。
	<command>	定義命令按鈕。
</body>

注意：

1.無序列表默認實心黑色圓點，type屬性可改變，共三個值：
disc（默認）,circle（空心圓點）,square（實心黑色方塊）
2.有序列表默認數字排序，type屬性可以改變，有好幾個值：1（數字）, a（字母）等等；shart屬性可以改變排序從第幾個開始，比如數字排序，start=“2”,排序第一個就不再是 1 ，而是 2 。
3.ul ol dl 之間是可以相互嵌套的

HTML表格標籤

<body>
	標籤		描述
	<table>		定義表格
	<caption>	定義表格標題。
	<th>		定義表格中的表頭單元格。
	<tr>		定義表格中的行。
	<td>		定義表格中的單元。
	<thead>		定義表格中的表頭內容。
	<tbody>		定義表格中的主體內容。
	<tfoot>		定義表格中的表注內容（腳註）。
	<col>		定義表格中一個或多個列的屬性值。
	<colgroup>	定義表格中供格式化的列組。
</body>

HTML表單標籤

<body>
	標籤			描述
	<form>		定義供用戶輸入的 HTML 表單。
	<input>		定義輸入控件。
	<input type="text"> --- 文本輸入
	<input type="radio"> --- 定義單選按鈕
	<input type="submit"> --- 提交按鈕
	<textarea>	定義多行的文本輸入控件。
	<button>	定義按鈕。
	<select>	定義選擇列表（下拉列表）。
	<optgroup>	定義選擇列表中相關選項的組合。
	<option>	定義選擇列表中的選項。
	<label>		定義 input 元素的標註。
	<fieldset>	定義圍繞表單中元素的邊框。
	<legend>	定義 fieldset 元素的標題。
	<isindex>	不贊成使用。定義與文檔相關的可搜索索引。
	<datalist>	定義下拉列表。
	<keygen>	定義生成密鑰。
	<output>	定義輸出的一些類型。
</body>

HTML表單標籤屬性

<body>
	<form accept-charset="UTF-8"> --- accept-charset 屬性 --- 規定在被提交表單中使用的字符集（默認：頁面字符集）
	
	<form action="action_page.php"> --- action 屬性 --- 定義在提交表單時執行的動作
		注意：如果省略 action 屬性，則 action 會被設置爲當前頁面
	
	<form autocomplete="off"> --- autocomplete 屬性 --- 規定瀏覽器應該自動完成表單（默認：開啓）

	<form ectype="application/x-www-form-urlencoded"> --- enctype 屬性 --- 規定被提交數據的編碼（默認：url-encoded）
	
	<form method="GET/POST"> --- method 屬性 --- 規定在提交表單時所用的 HTTP 方法（GET 或 POST）
		1. 使用 GET：表單提交是被動的（比如搜索引擎查詢），並且沒有敏感信息。
		注意：GET 最適合少量數據的提交。瀏覽器會設定容量限制。

		2. 使用 POST：表單正在更新數據，或者包含敏感信息（例如密碼）。
		注意：POST 的安全性更加，因爲在頁面地址欄中被提交的數據是不可見的。
	<form name="firstname"> --- name 屬性 --- 規定識別表單的名稱（對於 DOM 使用：document.forms.name）

	<form novalidate> --- novalidate 屬性 --- 規定瀏覽器不驗證表單

	<form target="_blank"> --- target 屬性 --- 	規定 action 屬性中地址的目標（默認：_self）
	
</body>

HTML表單元素

<body>
	<input>元素及輸入類型
	<input type="text"> --- 文本輸入
	<input type="password"> 定義密碼字段
	<input type="radio"> --- 定義單選按鈕
	<input type="checkbox"> --- 定義複選框
	<input type="submit"> --- 提交按鈕
	<input type="number"> --- 用於應該包含數字值的輸入字段
	<input type="date"> --- 用於應該包含日期的輸入字段
	<input type="color"> --- 用於應該包含顏色的輸入字段
	<input type="range"> --- 用於應該包含一定範圍內的值的輸入字段
	<input type="month"> --- 允許用戶選擇月份和年份。
	<input type="week"> --- 允許用戶選擇周和年。
	<input type="time"> --- 允許用戶選擇時間（無時區）。
	<input type="datetime"> --- 允許用戶選擇日期和時間（有時區）。
	<input type="datetime-local"> --- 允許用戶選擇日期和時間（無時區）。
	<input type="email"> --- 用於應該包含電子郵件地址的輸入字段。
	<input type="search"> --- 用於搜索字段（搜索字段的表現類似常規文本字段）。
	<input type="tel"> --- 用於應該包含電話號碼的輸入字段。
	<input type="url"> --- 用於應該包含 URL 地址的輸入字段。
	
	<select> 元素（下拉列表）
	<option> 元素定義待選擇的選項
		注意：列表通常會把首個選項顯示爲被選選項。我們能夠通過添加 selected 屬性來定義預定義選項
	<textarea> 元素定義多行輸入字段（文本域）
	<button> 元素定義可點擊的按鈕
</body>

HTML 多媒體標籤

<video src="">
</video>

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

src: 告訴video標籤需要播放的視頻地址
autoplay: 告訴video標籤是否需要自動播放視頻
controls: 告訴video標籤是否需要顯示控制條
poster: 告訴video標籤視頻沒有播放之前顯示的佔位圖片
loop: 告訴video標籤循環播放視頻. 一般用於做廣告視頻
preload: 告訴video標籤預加載視頻, 但是需要注意preload和autoplay相沖, 如果設置了autoplay屬性, 那麼preload屬性就會失效
muted:告訴video標籤視頻靜音
width/height: 和img標籤中的一模一樣

audio 標籤

<audio src="">
</audio>

<audio>
    <source src="" type="">
</audio>

audio標籤的使用和video標籤的使用基本一樣, video中能夠使用的屬性在audio標籤中大部分都能夠使用, 並且功能都一樣. 只不過有3個屬性不能用, height/width/poster

CSS基礎：

1. CSS 概述

CSS支持更豐富的文檔外觀
CSS可以爲任何元素的文本和背景設置顏色
允許在任何元素外圍設置邊框
允許改變文本的大小，裝飾（如下劃線），間隔，甚至可以確定是否顯示文本

2. CSS 語法格式

<style type="text/css">
        標籤名稱{
            屬性名稱: 屬性對應的值;
            ...
        }
</style>

style標籤必須寫在head標籤的開始標籤和結束標籤之間(也就是必須和title標籤是兄弟關係)
style標籤中的type屬性其實可以不用寫, 默認就是type="text/css"
設置樣式時必須按照固定的格式來設置key: value;其中:不能省略, 分號大多數情況下也不能省略(當有多個屬性時, 最後一個可以省略)
值的不同寫法和單位
如果值爲若干單詞，則要給值加引號
如果要定義不止一個聲明，則需要用分號將每個聲明分開
空格和大小寫不影響CSS樣式
用逗號將需要分組的選擇器分開，被分組的選擇器可以分享相同的聲明
子元素從父元素繼承屬性

3. 選擇器

1. 元素（類型）選擇器

文檔的元素就是最基本的選擇器。
如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，
比如 p、h1、甚至可以是 html 本身。

<style>
	html {color:black;}
	h1 {color:blue;}
	h2 {color:silver;}
</style>

2. 通配符選擇器

該選擇器可以與任何元素匹配，就像是一個通配符。

* {color:red;}

3. 選擇器分組

通過分組，創作者可將某些類型的樣式“壓縮”在一起，這樣就可以得到更簡潔的樣式表。
可以將任意多個選擇器分組在一起，對此沒有任何限制。

h2, p {color:gray;}

4. 聲明分組

對聲明分組，一定要在各聲明的最後使用分號，因爲瀏覽器會忽略樣式表中的空白符。
與選擇器分組一樣，聲明分組也是一種便利的方法，可以縮短樣式表，使之更清晰，
也更易維護。

h1 {
	  font: 28px Verdana;
	  color: blue;
	  background: red;
  }

5. 派生選擇器

通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。
派生選擇器允許你根據文檔的上下文關係來確定某個標籤的樣式。

li strong {
    font-style: italic;
    font-weight: normal;
  }

6. id 選擇器

id 選擇器可以爲標有特定 id 的 HTML 元素指定特定的樣式。
id 選擇器以 “#” 來定義。
id 屬性只能在每個 HTML 文檔中出現一次。
在現代佈局中，id 選擇器常常用於建立派生選擇器。
id 選擇器即使不被用來創建派生選擇器，它也可以獨立發揮作用

<p id="intro">This is a paragraph of introduction.</p>
#intro{background:silver;}

類選擇器與id選擇器的區別

只能在文檔中使用一次：在一個 HTML 文檔中，ID 選擇器會使用一次，而且僅一次。
不能使用 ID 詞列表：ID 選擇器不能結合用，因爲 ID 屬性不許有以空格分隔的詞列表。
ID 能包含更多含義：可以獨立於元素來選擇 ID。
區分大小寫：類選擇器和 ID 選擇器可能是區分大小寫的。這取決於文檔的語言。HTML 和 XHTML 將類和 ID 值定義爲區分大小寫，所以類和 ID 值的大小寫必須與文檔中的相應值匹配

8. 多類選擇器

在 HTML 中，一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。
把兩個類選擇器鏈接在一起，僅可選擇同時包含這些類名的元素（類名的順序不限）。
如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。
在 IE7 之前的版本中，不同平臺的 Internet Explorer 都不能正確地處理多類選擇器。

<p class="important warning">
	This paragraph is a very important warning.
</p>
.important.warning {background:silver;}

9. 屬性選擇器

對帶有指定屬性的 HTML 元素設置樣式。
只有在規定 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。
在 IE6 及更低的版本中，不支持屬性選擇。
屬性選擇器在 XML 文檔中很有用，因爲 XML 語言針對元素和屬性的用途
指定元素名和屬性名。

1. 簡單屬性選擇
例：

a[href][title] {color:red;}

2. 根據具體屬性值選擇
注意：

這種格式要求必須與屬性值完全匹配。
如果屬性值包含用空格分隔的值列表，匹配就可能出問題。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

3. 根據部分屬性值選擇
如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。
如果忽略了波浪號，則說明需要完成完全值匹配。
p[class~="important"] {color: red;}

4. 特定屬性選擇類型
*[lang|="en"] {color: red;}
上面這個規則會選擇 lang 屬性等於 en 或以 en- 開頭的所有元素。

10. 後代選擇器

後代選擇器可以選擇作爲某元素後代的元素。

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
h1 em {color:red;}
h1 em 選擇器可以解釋爲 “作爲 h1 元素後代的任何 em 元素”。

11. 子元素選擇器

子元素選擇器只能選擇作爲某元素子元素的元素。

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
h1 > strong {color:red;}
選擇作爲 h1 元素子元素的所有 strong 元素

12. 相鄰兄弟選擇器

相鄰兄弟選擇器可選擇緊接在另一元素後的元素，且二者有相同父元素。

h1 + p {margin-top:50px;}
選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素

僞類沒看：.......................

4. CSS樣式插入

1. 外部樣式表

<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

2. 內部樣式表

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

3. 內聯樣式

<p style="color: sienna; margin-left: 20px">
	This is a paragraph
</p>

4. 多重樣式

如果某些屬性在不同的樣式表中被同樣的選擇器定義，
那麼屬性值將從更具體的樣式表中被繼承過來。

5. CSS 樣式屬性

1. 背景屬性

CSS 允許應用純色作爲背景，也允許使用背景圖像創建相當複雜的效果。

css3 新背景屬性

2. 文本屬性

CSS 文本屬性可定義文本的外觀

3. 字體屬性

CSS 字體屬性定義文本的字體系列

4. 鏈接屬性

我們能夠以不同的方法爲鏈接設置樣式。

5. 列表屬性

CSS 列表屬性允許你放置、改變列表項標誌，或者將圖像作爲列表項標誌。

6. 表格屬性

CSS 表格屬性可以幫助您極大地改善表格的外觀。
CSS Table 屬性

7. 輪廓屬性

輪廓是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。

6. CSS 三大特性

1. 繼承性

作用：
- 給父元素設置一些屬性, 子元素也可以使用, 這個我們就稱之爲繼承性
示例代碼：

 <style>
        div{
            color: red;
        }
</style>
<div>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>

<!--p會變成紅色-->

注意點:
- 並不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性纔可以繼承
- 在CSS的繼承中不僅僅是兒子可以繼承, 只要是後代都可以繼承
繼承性中的特殊性
- <a>標籤的文字顏色和下劃線是不能繼承的
- <h>標籤的文字大小是不能繼承的

2. 層疊性

CSS全稱 Cascading StyleSheet (層疊式樣式表), 其中的層疊就是指層疊性

作用:
- 層疊性就是CSS處理衝突的一種能力
示例代碼：

<style>
   p{
        color: red;
    }
    .para{
        color: blue;
    }
</style>
<p id="identity" class="para">我是段落</p>

<!-- 最終顯示藍色, 因爲紅色被覆蓋掉了 -->

注意點:

層疊性只有在多個選擇器選中"同一個標籤", 然後又設置了"相同的屬性", 纔會發生層疊性

3. 優先級

作用:
- 當多個選擇器選中同一個標籤, 並且給同一個標籤設置相同的屬性時, 如何層疊就由優先級來確定
優先級判斷的三種方式
- 間接選中就是指繼承
- 如果是間接選中, 那麼就是誰離目標標籤比較近就聽誰的

<style>
 li{
    color: blue;
   }
  ul{
    color: red;
   }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最終顯示藍色 -->

相同選擇器(直接選中)

如果都是直接選中, 並且都是同類型的選擇器, 那麼就是誰寫在後面就聽誰的

<style>
 p{
            color: blue;
      }
    p{
            color: red;
      }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最終顯示紅色 -->

不同選擇器(直接選中)

如果都是直接選中, 並且不是相同類型的選擇器, 那麼就會按照選擇器的優先級來層疊
id>類>標籤>通配符>繼承>瀏覽器默認

<style>
  #identity{
            color: purple;
        }
        .para{
            color: pink;
        }
        p{
            color: green;
        }
        *{
            color: blue;
        }
        li{
            color: red;
        }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最終顯示紫色 -->

3. 優先級權重

1. 權重的計算規則

首先先計算選擇器中有多少個id, id多的選擇器優先級最高
如果id的個數一樣, 那麼再看類名的個數, 類名個數多的優先級最高
如果類名的個數一樣, 那麼再看標籤名稱的個數, 標籤名稱個數多的優先級最高
如果id個數一樣, 類名個數也一樣, 標籤名稱個數也一樣, 那麼就不會繼續往下計算了, 那麼此時誰寫在後面聽誰的
注意點:
只有選擇器是直接選中標籤的才需要計算權重, 否則一定會聽直接選中的選擇器的

2. !important

作用:

用於提升某個直接選中標籤的選擇器中的某個屬性的優先級的, 可以將被指定的屬性的優先級提升爲最高

<style>
        #identity{
            color: purple;
            font-size: 50px;
        }
        .para{
            color: pink ;
        }
        p{
            color: green !important;
        }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最終顯示綠色 -->

注意點:

!important只能用於直接選中, 不能用於間接選中
通配符選擇器選中的標籤也是直接選中的
!important只能提升被指定的屬性的優先級, 其它的屬性的優先級不會被提升
!important必須寫在屬性值得分號前面
!important前面的感嘆號不能省略

7. CSS 盒子模型

1. CSS 框模型概述

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。

背景應用於由內容和內邊距、邊框組成的區域。
內邊距、邊框和外邊距都是可選的，默認值是零。
增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。
外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

還有四點沒看完.......

8. CSS 定位

1. CSS定位概述

基本思想：
允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、
另一個元素甚至瀏覽器窗口本身的位置。

可以使用 display 屬性改變生成的框的類型.

(將 display 屬性設置爲 block，可以讓行內元素（比如 a 元素）表現得像塊級元素一樣)
(把 display 設置爲 none，讓生成元素沒有框, 該框及內容不再顯示，不佔用文檔空間。)
(把文本添到塊級元素（比如 div）開頭。即使沒把文本定義爲段落，它也當作段落對待)

幾個定位........

6. CSS浮動

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
一個浮動元素儘量向左或向右移動，直到外邊緣碰到包含框或另一個浮動框邊框爲止。
浮動元素之前的元素將不會受到影響。浮動元素之後的元素將圍繞它。
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 “inherit”。
假如一行上只有極少空間可供浮動元素,這元素會跳至下一行,這過程持續到某一行有足夠空間爲止。

7. CSS浮動問題

背景不顯示：
由於浮動產生，如果父級設置CSS背景顏色或圖片,父級不能被撐開,導致背景不能顯示

邊框不撐開:
如果父級設置CSS邊框屬性,由於子級使用float屬性,產生浮動,父級不被撐開,
導致邊框不隨內容被撐開.

margin padding設置值沒正確顯示:
浮動導致父級子級之間設置css padding, margin屬性值不正確
特別是上下邊的padding和margin不能正確顯示。

8. CSS清除浮動

1. 對父級設置適合CSS高度
2. clear:both清除浮動：

新建樣式選擇器CSS命名爲“.clear”,對應選擇器樣式爲“clear:both”
在父級“”結束前加此div引入“class=“clear””樣式
3. 父級div定義 overflow:hidden:

因爲overflow:hidden屬性相當於是讓父級緊貼內容，
這樣即可緊貼其對象內內容（包括使用float的div盒子），
從而實現了清除浮動。
對父級CSS選擇器加overflow:hidden樣式，可以清除父級內使用float產生浮動。
優點是可以很少CSS代碼即可解決浮動產生。

9. CSS 對齊問題

1. 使用 margin 屬性來水平居中對齊

可通過將左和右外邊距設置爲 “auto”，來對齊塊元素。

.center
{
	margin-left:auto;
	margin-right:auto;
	width:70%;
	background-color:#b0e0e6;
}
把左和右外邊距設置爲 auto，規定的是均等地分配可用的外邊距。結果就是居中的元素

2. 文本居中對齊

如果僅僅是爲了文本在元素內居中對齊，可以使用 text-align: center;

.center {
    text-align: center;
    border: 3px solid green;
}

3. 圖片居中對齊

要讓圖片居中對齊, 可以使用 margin: auto; 並將它放到塊元素中

img {
    display: block;
    margin: auto;
    width: 40%;
}

4. 使用 position 屬性進行左和右對齊

絕對定位元素會被從正常流中刪除，並且能夠交疊元素。
當使用 position 屬性時，請始終設置 !DOCTYPE 聲明

.right
{
	position:absolute;
	right:0px;
	width:300px;
	background-color:#b0e0e6;
}

5. 使用 float 屬性來進行左和右對齊

當使用 float 屬性時，請始終設置 !DOCTYPE 聲明

.right
{
	float:right;
	width:300px;
	background-color:#b0e0e6;
}

6. 使用 padding 垂直居中對齊

.center {
    padding: 70px 0;
    border: 3px solid green;
}

7. 使用 line-height 垂直居中對齊

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代碼: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

8. 使用 position 和 transform 垂直居中對齊

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

其他還沒看........

初識 javascript基礎：

1. JavaScript 簡介

JavaScript（縮寫：JS）是互聯網上最流行的腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。
最早是在 HTML（標準通用標記語言下的一個應用）網頁上使用，用來給 HTML 網頁增加動態功能。
JavaScript是一種腳本語言，其源代碼在發往客戶端運行之前不需經過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。

腳本語言
JavaScript 是一種解釋型的腳本語言, C、C++等語言先編譯後執行,而JavaScript 是在程序的運行過程中逐行進行解釋。
基於對象
JavaScript 是一種基於對象的腳本語言,不僅可以創建對象, 也能用現有對象
內置大量現成對象，編寫少量程序可以完成目標
簡單
JavaScript 語言中採用的是弱類型的變量類型,對使用的數據類型未做出嚴格的要求, 是基於 Java 基本語句和控制的腳本語言,其設計簡單緊湊
可以使用任何文本編輯工具編寫
只需要瀏覽器就可以執行程序
動態性
JavaScript 是一種採用事件驅動的腳本語言,它不需要經過 Web 服務器就可以對用戶的輸入做出響應。
跨平臺性
JavaScript 腳本語言不依賴於操作系統,僅需要瀏覽器的支持。

3. JavaScript 的作用

HTML 頁面是靜態的，而 JavaScript 可以彌補 HTML 語言的缺陷，實現 Web 頁面客戶端的動態效果。
JavaScript 可以輸出字符、數字、以及 HTML。

JavaScript 作用：

動態改變 HTML 內容，屬性，樣式
動態顯示或隱藏 HTML 元素
驗證表單數據
響應事件

4. JavaScript 的組成

1. ECMAScript
JavaScript的語法標準
ECMA是一個組織，即歐洲計算機制造商協會
ECMAScript是ECMA制定的腳本語言的標準, 規定了一種腳本語言實現應該包含的基本內容
JavaScript是腳本語言的一種,所以JavaScript也必須遵守ECMAScript標準,包含ECMAScript標準中規定的基本內容
2. DOM
JavaScript操作網頁上的元素的API
3. BOM
JavaScript操作瀏覽器的部分功能的API

5. JavaScript 的使用場景

網頁特效
動態數據處理
移動端開發（RN，Weex）
服務端開發（Node.js）
命令行工具（Node.js）
物聯網與人工智能（Ruff）
遊戲開發（cocos2d-js）

2. JavaScript 基本語法入門

1. JS 書寫樣式

1. 行內式

雖然可以寫在標籤的屬性中，但是結構與行爲耦合，不方便維護，不推薦使用

方式一：
<button onclick="alert('今天天氣很好!');">今天天氣?</button>
方式二：
<a href="javascript:alert('你點疼我了！！');">點我</a>

2. 頁內式

<script></script>標籤中的js代碼一般寫在文檔的尾部
網頁是從上至下加載, 而js代碼通常是給標籤添加交互(操作元素), 所以需要先加載HTML, 否則如果執行js代碼時HTML還未被加載, 那麼js代碼將無法添加交互(操作元素)
HTML頁面中出現<script>標籤後，就會讓頁面暫停等待腳本的解析和執行。無論當前腳本是內嵌式還是外鏈式，頁面的下載和渲染都必須停下來等待腳本的執行完成才能繼續。
所以如果把js代碼如果寫在<head>中, 那麼js代碼執行完畢之前後續網頁無法被加載

方法一：文檔尾部
<body>
   ......
   <script type="text/javascript">
      alert("今天天氣很好！");
   </script>
</body>

方法二：文檔頭部
<head>
	<meta charset="utf-8">
	<script>
		console.log("hello world")
	</script>
</head>

3. 外鏈式

在 HTML 中從外部引入 JavaScript，通過調用.js 爲後綴的文件來引入
從外部引入 JS 文件放在 body 的結尾處，因爲網頁加載是從上到下加載
如果在開頭引入 JS 文件，有些代碼不能正確執行
外鏈式的script代碼塊中不能編寫js代碼, 即便寫了也不會執行

<script type="text/javascript" src="index.js">
   alert("今天天氣很好！"); // 不會被執行
</script>

由於每次加載外鏈式的js文件都會發送一次請求, 這樣非常消耗性能, 所以在企業開發中推薦將多個JS文件打包成爲一個JS文件,以提升網頁的性能和加載速度

<script type="text/javascript" src="01-js書寫格式.js"></script>

在外部文件中放置腳本有如下優勢：

分離了 HTML 和代碼
使 HTML 和 JavaScript 更易於閱讀和維護
已緩存的 JavaScript 文件可加速頁面加載

2. 輸出 HelloWorld

JavaScript 沒有任何打印或者輸出的函數。
JavaScript 可以通過不同的方式來輸出數據。

1. 使用彈出警告框

通過 alert()方法輸出數據。控制瀏覽器彈出一個警告框

<script>
	window.alert("我是警告框。");
</script>

2. 使用彈出輸入框

在網頁中彈出輸入框，一般用於接收用戶輸入的信息

prompt("Hello, World！");

3. 使用彈出提示框

在網頁中彈出提示框，顯示信息，該方法一般與if判斷語句結合使用

 confirm("Hello，JavaScript！");

4. 直接寫入HTML文檔

通過 document.write()方法來輸出想要顯示的內容。
如果在文檔已完成加載後執行 document.write，整個 HTML 頁面將被覆蓋。

<script>
	document.write("這是輸入內容，輸入到HTML中")
</script>

5. 寫到控制檯

通過 console.log()將數據寫入到控制檯，數據只在控制檯中顯示，並不顯示在網頁中。
通過 console.log()方法寫入到控制檯中，頁面是沒有我們輸入的這個數據。
通常 console.log()被用來檢查錯誤。

<script>
	console.log("Hello World!");
	console.warn("警告輸出！"); 
	console.error("錯誤輸出！"); 
</script>

6. 使用 innerHTML

<script>
 	document.getElementById("demo").innerHTML = 5 + 6;
</script>

3. JS 語句

5. JavaScript 標識符
1. 標識符格式

標識符中可以含有字母、數字、_、$
標識符不能以數字開頭
標識符不能是ES中的關鍵字或保留字
在 JavaScript 中預定義的運算符如：+、-、*、/、%不可以用於定義標識符
標識符一般都採用駝峯命名法
在JS底層保存的標識符采用的是Unicode編碼，所以UTF-8中所有的字符都可以作爲標識符
2. Smalltalk 法則

每個標識符可以有若干個單詞左右連接而成
常量標識符應該全部使用大寫字母來表示區別
一般標識符應該全部使用小寫字母以示區別
特殊常量標識符應該以大寫字母開頭以示區別
函數的標識符應該以小寫字母開頭以示區別
不要使用JavaScript 中預定義保留的關鍵字
JavaScript 嚴格區分大小寫字母

6. JavaScript 註釋
JavaScript 註釋可用於提高代碼的可讀性。註釋不會被執行。
註釋常用來調試程序，因爲註釋掉的代碼並不會被執行。
在寫代碼的時候，註釋是很有必要的，提高了代碼的可讀性。要養成寫註釋的習慣。
注意點
單行註釋可以嵌套單行註釋、多行註釋
多行註釋可以嵌套單行註釋
多行註釋不能嵌套多行註釋

<script>
	1. 單行註釋：以 // 開頭。
	2. 多行註釋：以 /* 開始，以 */ 結尾。
</script>

4. JS 基本概念

1. JavaScript 關鍵字

2. JavaScript 變量

3. JavaScript 常量

https://blog.csdn.net/qq_43645678/article/details/93380462

- JavaScript語言用於程序控制或者執行特定操作的英語單詞
- 它們是被JavaScript語言賦予了特殊含義的英文單詞
- 注意點
- 關鍵字不能用作變量名、函數名
- 關鍵字嚴格區分大小寫
- 常見關鍵字
- 變量是用於存儲信息的"容器"。
  
  在應用程序中，使用變量來作爲值的符號名
  變量的名字又叫做標識符，其需要遵守一定的規則
  格式： var 變量名 = 變量值;
  用 var 聲明的且未賦初值的變量，值會被設定爲 undefined
  變量的作用域
  
  所有函數之外聲明的變量，叫全局變量，因爲它可被當前文檔中任何其他代碼所訪問
  在函數內部聲明的變量，叫做局部變量，因爲它只能在該函數內部訪問
  在函數內聲明的變量在函數外使用會出錯，引用錯誤
  聲明變量要在使用變量之前，如果在使用變量之後聲明變量，會返回 undefined
  變量名對大小寫敏感，a 和 A 代表不同的兩個變量
參考於.....................
- - JavaScript 中的用 const 來聲明定義常量。
  - const 定義的常量必須初始化，不初始化會報錯。
  - 常量在第一次定義之後不可再次賦值，如果在嚴格模式下運行會報錯。

前端html面試題及答案

html基礎知識：

HTML基礎標籤

1. html標籤

注意點

2. head標籤

3. 常用的meta標籤

4. link標籤

5. title標籤

6. body標籤

7. style標籤

8. HTML 標題

9. HTML 段落

10. HTML 文本標籤

11. HTML 鏈接

12. HTML 錨鏈接

13. HTML 圖片標籤

14. HTML 特殊字符標籤

15. 註釋標籤

HTML列表標籤

HTML表格標籤

HTML表單標籤

HTML表單標籤屬性

HTML表單元素

HTML 多媒體標籤

audio 標籤

CSS基礎：

1. CSS 概述

2. CSS 語法格式

3. 選擇器

1. 元素（類型）選擇器

2. 通配符選擇器

3. 選擇器分組

4. 聲明分組

5. 派生選擇器

6. id 選擇器

8. 多類選擇器

9. 屬性選擇器

10. 後代選擇器

11. 子元素選擇器

12. 相鄰兄弟選擇器

4. CSS樣式插入

1. 外部樣式表

2. 內部樣式表

3. 內聯樣式

4. 多重樣式

5. CSS 樣式屬性

2. 文本屬性

3. 字體屬性

4. 鏈接屬性

5. 列表屬性

6. 表格屬性

7. 輪廓屬性

6. CSS 三大特性

2. 層疊性

3. 優先級

3. 優先級權重

7. CSS 盒子模型

1. CSS 框模型概述

8. CSS 定位

1. CSS定位概述

6. CSS浮動

7. CSS浮動問題

8. CSS清除浮動

9. CSS 對齊問題

初識 javascript基礎：

1. JavaScript 簡介

3. JavaScript 的作用

4. JavaScript 的組成

5. JavaScript 的使用場景

2. JavaScript 基本語法入門

1. JS 書寫樣式

2. 輸出 HelloWorld

3. JS 語句

4. JS 基本概念