一、html css 以及js的關系
二、HTML 是什么？
HTML（htyper text markup language）：即超文本標記語言
超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
標記語言: 標記（標簽）構成的語言.
網頁==HTML文檔，由瀏覽器解析，用來展示的
靜態網頁：靜態的資源，如xxx.html
動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的
html文檔樹形結構圖：
三、什么是標簽
- 是由一對尖括號包裹的單詞構成 例如: <html> 所有標簽中的單詞不可能以數字開頭.
- 標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
- 標簽分為兩部分: 開始標簽<a> 和 結束標簽</a>. 兩個標簽之間的部分 我們叫做標簽體.
- 有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/> <hr/> <input /> <img />
- 標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>
四、標簽的屬性
- 通常是以鍵值對形式出現的. 例如 name="sex"
- 屬性只能出現在開始標簽 或 自閉和標簽中.
- 屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="sex"
- 如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
五、<!DOCTYPE html>標簽
由於歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在W3C標准出台以前，瀏覽器在對頁面的渲染上沒有統一規范，產生了差異(Quirks mode或者稱為CompatibilityMode)；由於W3C標准的推出，瀏覽器渲染頁面有了統一的標准(CSScompat或稱為Strict mode也有叫做Standarsmode)，這就是二者最簡單的區別。
W3C標准推出以后，瀏覽器都開始采納新標准，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標准出來以前，很多頁面都是根據舊的渲染方法編寫的，如果用的標准來渲染，將導致頁面顯示異常。為保持瀏覽器渲染的兼容性，使以前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上。
window.top.document.compatMode： //BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。 //CSS1Compat：標准模式，瀏覽器使用W3C的標准解析渲染頁面。
該屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會顯示不同的樣式。
如果你的頁面添加了<!DOCTYPE html>那么，那么就等同於開啟了標准模式，那么瀏覽器就得老老實實的按照W3C的標准解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。這就是<!DOCTYPE html>的作用。
六、head標簽
head標簽用於定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到css樣式表。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給用戶。
下面這些標簽可用在 head 部分：
<title>、<meta>、<link>、<style>、 <script>、 <base>
<head> 標簽在文檔的開始處，緊跟在 <html> 后面，並處於 <body> 標簽之前。文檔的頭部經常會包含一些 <meta> 標簽，用來告訴瀏覽器關於文檔的附加信息。
1.<meta>標簽
meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--頁面標題--> <title>head標簽</title> <!--設置頁面的編碼，防止亂碼現象 利用meta標簽， charset="utf-8" 這是屬性，以鍵值對的形式給出 k=v a=b 告訴瀏覽器用utf-8來解析這個html文檔 --> <meta charset="utf-8" /><!--簡寫--> <!--繁寫形式：（了解）--> <!--<meta http-equiv="content-type" content="text/html;charset=utf-8" />--> <!--頁面刷新效果--> <!--<meta http-equiv="refresh" content="3;https://www.baidu.com" />--> <!--頁面作者--> <meta name="Augus" content="Augus;11200297@qq.com" /> <!--設置頁面搜索的關鍵字--> <meta name="keywords" content="鴻鵠科技;軟件開發;項目維護" /> <!--頁面描述--> <meta name="description" content="鴻鵠科技詳情頁" /> </head> <body> </body> </html>
2.非<meta>標簽
<title>oldboy</title>
<!--link標簽引入外部資源-->
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
七、body標簽
body 標簽是定義文檔的主體。body 元素包含文檔的所有內容（如文本、超鏈接、圖像、表格以及列表等）body是用在網頁中的一種HTML標簽，標簽是用在網頁中的一種HTML標簽，表示網頁的主體部分，也就是用戶可以看到的內容，可以包含文本、圖片、音頻、視頻等各種內容
1.文本標簽
<!--標題標簽--> <h1>Windows11正式發布</h1> <h2>Windows11正式發布</h2> <h3>Windows11正式發布</h3> <h4>Windows11正式發布</h4> <h5>Windows11正式發布</h5> <h6>Windows11正式發布</h6>
<!--分割線 width:設置寬度 align:設置位置 left center right --> <hr width="30%" align="left"> <hr width="300px" align="left"> <!--段落標簽--> <p>™當 PC 在我們的生活中扮演着越來越重要的角色時，Windows 11 旨在讓您更接近您所熱愛的事物。</p> <p>Windows 一直是世界創新的舞台。它是全球企業的基石，助力眾多蓬勃發展的初創公司變得家喻戶曉。網絡在 Windows 上誕生並繁衍生息。我們許多人在這里寫下了第一封電子郵件，體驗了第一款 PC 游戲，編寫了第一行代碼。Windows 是人們創造、連接、學習和成就不凡的地方，如今它是一個 10 億多人所依賴的平台。</p> <p>我們肩負着為眾人設計的責任，不能掉以輕心。在過去一年半的時間里，我們使用 PC 的方式發生了難以置信的改變，我們從將 PC 融入生活，轉變成試圖將整個生活融入 PC。我們不僅可以使用設備開會、學習和完成工作，也可以和朋友一起玩游戲、觀看喜愛的節目，更有意義的是，我們可以用設備聯系彼此。在這個過程中，我們發現我們重塑了辦公室的社交，走廊里的聊天，鍛煉健身，酒吧的歡樂時光以及節日慶祝等等，這些活動都變得數字化。</p> <!--加粗傾斜--> <b>加粗</b> <i>傾斜</i> <u>傾斜</u> <!--換行標簽--> hello<br>world <!--中划線--> <del>暮靄程程楚天闊</del> <!--字體標簽font color:字體顏色 size:從1-7，由小到大 --> <font color="#a52a2a" size="7" face="宋體">暮靄程程楚天闊</font>
2.實體字符
在 HTML 中，某些字符是預留的。 HTML 中不能使用小於號（<）和大於號（>），這是因為瀏覽器會誤認為它們是標簽。如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。
PS：實體名稱對大小寫敏感！
3.多媒體標簽
<!--圖片img src:指定加載圖片 width：寬度 height:高度 title：設置鼠標懸停圖片時提示信息 alt：圖片加載失敗提示語 --> <img src="../resource/1.jpg" width="788" height="893" title="Jack" alt="圖片加載失敗提示語"> <!--音視頻 embed src:指定音頻文件 height：設置嵌入內容的高度。 width：設置嵌入內容的寬度。 --> <embed src="../resource/雞你太美.mp3"> <!--視頻--> <embed src="https://haokan.baidu.com/v?pd=wisenatural&vid=10943979664505719238" width="1000px" height="500px">
4.超鏈接標簽
<!--a標簽 href：可以使一個網頁，地址，頁面 target: _self:在原來頁面打開 _blank:在新的空白頁打開 --> <a href="hello.html">這是一個超鏈接</a><br> <a href="http://www.baidu.com">百度一下</a><br> <a href="http://www.baidu.com" target="_blank">百度一下</a><br> <!-- 圖片超鏈接 --> <a href="https://baike.baidu.com/item/%E4%B8%AD%E6%A3%AE%E6%98%8E%E8%8F%9C/3269070?fr=aladdin"><img src="./img/1.jpg"></a>
5.設置錨點
主要是給需要跳轉的點設置name屬性的值，然后執行a標簽href屬性中指定該值即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>錨點設置</title> </head> <body> <ul> <li><a href="#miao">去找用戶管理</a></li> <li><a href="#wang">去找訂單管理</a></li> <li><a href="#xing">去找商品詳情</a></li> <li><a href="#ren">去找系統設置</a></li> </ul> <a name="miao"></a> <h1>用戶管理</h1> <p>張三李四</p> <p>張三李四</p> <a name="wang"></a> <h1>訂單管理</h1> <p>張三李四</p> <p>張三李四</p> <a name="xing"></a> <h1>商品詳情</h1> <p>張三李四</p> <p>張三李四</p> <a name="ren"></a> <h1>系統設置</h1> <p>張三李四</p> <p>張三李四</p> </body> </html>
6.列表標簽
<!--無序列表 type:可以設置列表前圖標的樣式 type="square" 如果想要更換圖標樣式，需要借助css技術： style="list-style:url(img/act.jpg) ;" --> <ul> <li>黃渤</li> <li>沈騰</li> <li>曹琴</li> <li>李明</li> </ul> <!--有序列表: type:可以設置列表的標號：1,a,A,i,I start:設置起始標號 --> <ol type="I"> <li>黃渤</li> <li>沈騰</li> <li>曹琴</li> <li>李明</li> </ol>
7.表格標簽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <!-- table tr：代指行 th:表頭單元格加粗自動居中 th:代指單元格 border：設置邊框大小 cellspacing:設置單元格和邊框之間的縫隙 align： left center right background:設置背景圖片 rowspan：合並行 colspan:合並列 --> <table border="1px" cellspacing="0px" cellpadding="" background="../resource/1.jpg"> <tr> <th>姓名</th> <th>職位</th> <th>年齡</th> <th>技能</th> </tr> <tr> <td>紫衫龍王</td> <td rowspan="4">四大護教法王</td> <td>24</td> <td>珊瑚杖</td> </tr> <tr> <td>白眉鷹王</td> <td>39</td> <td>鷹爪功</td> </tr> <tr> <td>金毛獅王</td> <td>32</td> <td>七傷拳</td> </tr> <tr> <td>青翼蝠王</td> <td>35</td> <td>輕功</td> </tr> </table> </body> </html>
7.內嵌框架
iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）。
添加內嵌框架的語法:
<iframe src=" URL "></iframe>
主頁
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>主頁</title> </head> <body> <iframe src="導航.html" width="200px" height="200px"></iframe> <!-- 下面的iframe指定了其name屬性，name其他頁面內容要顯示的時候執行通過name屬性選擇即可 --> <iframe src="../img/1.jpg" width=300px" height="200px" name="myiframe"></iframe> </body> </html>
導航
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>明教四大法王</h1> <ul> <li><a href="../img/紫衫龍王.jpg" target="myiframe">紫衫龍王</a></li> <li><a href="../img/白眉鷹王.jpg" target="myiframe">白眉鷹王</a></li> <li><a href="../img/金毛獅王.jpg" target="myiframe">金毛獅王</a></li> <li><a href="../img/青翼蝠王.jpg" target="myiframe">青翼蝠王</a></li> </ul> </body> </html>
8.框架集合
frameset 元素可定義一個框架集。它被用來組織多個窗口（框架）。每個框架存有獨立的文檔。在其最簡單的應用中，frameset 元素僅僅會規定在框架集中存在多少列或多少行。您必須使用 cols 或 rows 屬性。里面如果只有一個框架用frame標簽，如果多個框架用frameset標簽，用cols 或 rows進行行，列的切割
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--框架集合：和body是並列的概念，不要將框架集合放入body中--> <frameset rows="20%,*,30%"> <frame /> <frameset cols="30%,40%,*"> <frame /> <frame src="index.html"/> <frame /> </frameset> <frameset cols="50%,*"> <frame /> <frame /> </frameset> </frameset> </html>
9.form表單
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get"> <!--表單元素--> <!--文本框: input標簽使用很廣泛，通過type屬性的不同值，來表現不同的形態。 type="text" 文本框，里面文字可見 表單元素必須有一個屬性：name 有了name才可以提交數據,才可以采集數據 然后提交的時候會以鍵值對的形式拼到一起。 value:就是文本框中的具體內容 鍵值對：name=value的形式 如果value提前寫好，那么默認效果就是value中內容。 一般默認提示語：用placeholder屬性，不會用value--》value只是文本框中的值。 readonly只讀：只是不能修改，但是其他操作都可以，可以正常提交 disabled禁用：完全不用，不能正常提交 寫法： readonly="readonly" readonly readonly = "true" --> <input type="text" name="uname" placeholder="請錄入身份證信息"/> <input type="text" name="uname2" value="123123" readonly="true"/> <input type="text" name="uname3" value="456456" disabled="disabled"/> <!--密碼框:效果錄入信息不可見--> <input type="password" name="pwd" /> <!--單選按鈕： 注意：一組單選按鈕，必須通過name屬性來控制，讓它們在一個分組中，然后在一個分組里只能選擇一個 正常狀態下，提交數據為：gender=on ，后台不能區分你提交的數據 不同的選項的value值要控制為不同，這樣后台接收就可以區分了 默認選中：checked="checked" --> 性別： <input type="radio" name="gender" value="1" checked="checked"/>男 <input type="radio" name="gender" value="0"/>女 <!--多選按鈕: 必須通過name屬性來控制，讓它們在一個分組中，然后在一個分組里可以選擇多個 不同的選項的value值要控制為不同，這樣后台接收就可以區分了 多個選項提交的時候，鍵值對用&符號進行拼接：例如下： favlan=1&favlan=3 --> 你喜歡的語言： <input type="checkbox" name="favlan" value="1" checked="checked"/>java <input type="checkbox" name="favlan" value="2" checked="checked"/>python <input type="checkbox" name="favlan" value="3"/>php <input type="checkbox" name="favlan" value="4"/>c# <!--文件--> <input type="file" /> <!--隱藏域--> <input type="hidden" name="uname6" value="123123" /> <!--普通按鈕：普通按鈕沒有什么效果，就是可以點擊，以后學了js，可以加入事件--> <input type="button" value="普通按鈕" /> <!--特殊按鈕：重置按鈕將頁面恢復到初始狀態--> <input type="reset" /> <!--特殊按鈕：圖片按鈕--> <img src="img/java核心技術.jpg" /> <input type="image" src="img/java核心技術.jpg" /> <!--下拉列表 默認選中：selected="selected" 多選：multiple="multiple" --> 你喜歡的城市： <select name="city" multiple="multiple"> <option value="0">---請選擇---</option> <option value="1">北京市</option> <option value="2" selected="selected">上海市</option> <option value="3">深圳市</option> <option value="4">南京市</option> <option value="5">蘇州市</option> </select> <!--多行文本框 利用css樣式來控制大小不可變：style="resize: none;" --> 自我介紹： <textarea style="resize: none;" rows="10" cols="30">請在這里填寫信息。。</textarea> <br /> <!--label標簽 一般會在想要獲得焦點的標簽上加入一個id屬性，然后label中的for屬性跟id配合使用。 --> <label for="uname">用戶名：</label><input type="text" name="uername" id="uname"/> <!--特殊按鈕：提交按鈕：具備提交功能--> <input type="submit" /> </form> </body> </html>
百度搜索練習
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表單</title> </head> <body> <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" /> <form action="https://www.baidu.com/s" method="get"> <input type="text" name="wd" placeholder="請輸入您想要搜索的內容"/> <input type="submit" name="" id="" value="百度一下" /> </form> </body> </html>
10、HTML 5 <input> 中type新增 屬性
可以參照w3c：
https://www.w3school.com.cn/html5/att_input_type.asp
11、HTML 5 <input> 中type新增 屬性
<!--HTML5新增屬性： multiple：多選 placehoder:默認提示 autofocus:自動獲取焦點 required:必填項 --> <input type="text" autofocus="autofocus"/> <input type="text" required="required" />