山靈 HiFi 新品預熱：MTW200 真無線耳機、EM5 臺式流媒體音樂中心
阿新 • • 發佈：2021-05-12
W3C
- 1994年 伯納斯李建立了w3c
- w3c為了制定網頁開發的標準。使用同一個網頁在不同的瀏覽器中有相同的效果
- 結構、表現、行為三個部分構成一個網頁
網頁的結構
- 結構html：用來描述頁面的結構
- 表現Css：控制頁面中元素的樣式
- 行為js：用來響應使用者的操作
標籤中的屬性
- 屬性：在標籤中（開始標籤或者自結束標籤）設定屬性
- 屬性： 是一個鍵值對：x=y ；用來設定標籤中的內容如何顯示
- 屬性和標籤之間用空格隔開
font color = "red" - 屬性名是w3c中規定好了的，如果有屬性值，那麼通過單引號或者雙引號來包裹
網頁的基本結構
網頁的迭代
- html4.0
- xhtml2.0
- html5
文件宣告（doctype）
- 用來告訴瀏覽器是啥版本
- html5的文件宣告：
<!doctype html>不區分大小寫哦 放在html首行 - 嚴格來說 doctype不屬於html中的標籤
關於進位制
數數的方式
啥進位制，滿啥 就進1 進1後從0開始，啥進位制，就幾位算滿了
- 二進位制：滿2進1 ； 0 1 10 11 100
- 十進位制：滿10進1 從0到9 （單位數字）到了10 這裡進了1位，從0又開始
- 十六進位制
- 八進位制
關於編碼
- 編碼：將字元轉成二進位制的過程
- 解碼：將二進位制碼轉字元
- 規則：字符集（charset) 例如：ASCII碼錶
亂碼問題
如果編碼和解碼採用的字符集不同，則會出現亂碼，常見的就是ASCII、ISO8591、 GB2312、UTF- 8(萬國碼)
設定字符集
<meta charset='utf-8'>
html文件規範
<!-- 文件宣告 聲明當前網頁的版本 --> <!doctype html> <!--- html的根標籤（元素） 網頁所有都在根元素中 --> <html> <!-- 是網頁的頭部，head中的內容不會再網頁中出現，主要是用來瀏覽器和搜尋引擎計解析（爬蟲） --> <head> <!-- meta 用來設定元資料，這裡設定了網頁的字元型別，避免亂碼 --> <meta charset='utf-8'> <!-- title中的內容會顯示在瀏覽器的標題欄，搜尋引擎主要根據titile中的內容來判斷網頁的主要內容 --> <title>我是標題</title> </head> <!-- body是html的資源數，表示網頁的主題，網頁中所有的內容都應該在body裡 --> <body> <!-- h1 是網頁的一級標題 --> <h1> 大標題哦 </h1> </body> </html>
VScode外掛推薦
名稱: Chinese (Simplified) Language Pack for Visual Studio Code
名稱: Ayu
名稱: Live Server
實體
-
在網頁中，編寫多個空格，瀏覽器會自動解析成一個空格
-
在htm中，我們不能直接書寫一些特殊符號，比如大於小於號
-
如果我們需要在網頁中，不想要瀏覽器將這些特殊符號進行轉義了 則需要使用轉義字元
-
實體的語法： &實體的名字;
-
參考https://www.w3school.com.cn/html/html_entities.asp
Meta
- mete主要用來設定網頁中的 元資料
- charset ：指定網頁的字符集
- name：指定的是資料的名稱
- content 指定的資料內容
- keywords 表示網站的關鍵字 多個關鍵字，使用英文逗號分割
<meta name="keywords" content="我愛吃魚香茄子">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
重定向
- 使用http-equiv :refresh
- content第一個引數是等待時間，單位是秒
- 後面是定向地址
<meta http-equiv="refresh" content="3;url=https://blog.yxqz.top">
語義化標籤
- html主要就是學習語義化標籤，也就是對整體網頁架構的搭建。網頁的用途是幹啥，來規範的使用相關的標籤
- 使用html標籤的時候，只關注標籤的語義，而不是樣式
例如H1標籤
h1 在網頁中重要性僅次於titile，一般情況一個頁面只有一個h1
塊元素
- 在頁面中佔一行的元素
- 標題標籤都是快級元素
<h2>ｈｅｌｌｏｗｏｒｌｄ</h2>
標題組hgroup
將相關的標題放在hgroup中來分組管理
<hgroup>
<h1>我是一級標題</h1>
<h2>我是二級標題</h2>
</hgroup>
em語調加重
<p>今天你很<em>好</em></p>
強調Strong
強調預設有加粗效果
<!-- strong 表示強調，重要內容 -->
<p>今天你很<strong>好看</strong</p>
blockquote長引用
<!-- blockquote 表示一個長引用，也是一個塊級元素，獨佔一行 -->
<p>我愛吃<blockquote>yxqz</blockquote</p>
q短引用
<!-- q表示一個短引用 行內元素，語言引用 -->
<p>我要<q>吃一大堆的茄子</q></p>
相對路徑
- 當我們要跳轉到伺服器內部頁面的時候
- 使用相對路徑，都使用
./../開頭 ./可以省略，如果不寫./和../預設就是./
./ 表示當前檔案所在的目錄
../ 表示當前目錄的上一級目錄下的檔案
超連結
- 從一個頁面跳轉到其他的頁面，或者是當前頁面的某個位置
- a標籤
- 連結也是一個行內元素，在a標籤中可以巢狀（除a）任何的元素
vscode的快捷鍵 alt+shift+下或者上 複製
href屬性：指定跳轉的目錄
href的值：
-
可以是一個外部網站的地址
-
可以是內部的頁面地址 這裡需要區分相對路徑和覺對路徑
trage屬性：用來指定超連結開啟的位置
trage的值：
- _self 預設值：在當前頁面中開啟超連結
- _blank 在一個新的視窗開啟超連結
id 屬性： 唯一不重複
- 在開發中，可以用#作為href的佔位符
- 也可以javascripot:; 佔位符
- 可以直接將超連結的href屬性設定#，點選超連結後頁面不會跳轉，而是轉到當前頁面的頂部位置
<!-- trage屬性：
用來指定超連結開啟的位置
_self 預設值：在當前頁面中開啟超連結
_blank 在一個新的視窗開啟超連結
-->
<a href="./07-列表.html" target="_blank">超連結</a>
<a href="#dibu" >回到底部 </a>
<!-- lorem -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
<!--
id 屬性 唯一不重複
在開發中，可以用#作為href的佔位符
也可以javascripot:; 佔位符
可以直接將超連結的href屬性設定#，點選超連結後頁面不會跳轉，而是轉到當前頁面的頂部位置 -->
<a id="dibu" href="#" >回到頂部 </a>
圖片標籤
- 圖片標籤用來向當前頁面引入一個外部圖片
- 使用img標籤來引入外部圖片，img是一個自結束標籤
- src: 外部圖片的路徑（ 規則和超連結一樣）
- alt：圖片的描述，預設情況是不顯示的，圖片在無法載入，或者是無法找到圖片
- width：指定圖片的寬度（單位是畫素）
- height：指定圖片的高度
- 如果只修改了高度，或者只修改了寬度，預設另一個等比例縮放（正方形）
- 搜尋引擎也會通過alt的內容來識別圖片，如果不寫alt，搜尋引擎收錄
- 在pc端，不建議修改圖片的大小，需要多大，就直接用原生多大的圖片，移動端就需要對圖片進行縮放（大圖縮小，非原生圖片）
<img src="http://p9.qhimg.com/bdr/__85/t0199ac0a6f007265ee.jpg" alt="魚香茄子">
圖片格式
- jpeg（jpg）：支援顏色比較豐富，不支援動圖，一般照片
- gif：支援的顏色比較少，支援動圖，支援簡單透明，一般顏色單一的動圖
- png：顏色豐富，支援複雜透明，不支援動圖，顏色豐富，複雜透明圖片（網頁最多）
- webp：谷歌新推的專門用來網頁中的圖片的一種格式，具備上面的三種功能，缺點：老瀏覽器無法識別
- base64：將圖片使用base64編碼，將圖片轉成字元，通過字元來引入圖片（我認為在持久化資料庫很方便啊，一起請求就完事了，提高網站的響應速度），一般和網頁一起載入
效果一樣用小的，效果不同用效果好的
推薦base64：base64圖片線上轉換工具 - 站長工具 (chinaz.com)
內聯框架（iframe）
- src 指定引入的網頁的路徑
- frameborder：指定的內聯框架的邊框
- 內聯框架中的網頁不會被爬蟲
<iframe src="https://blog.yxqz.top/" width="800" height="600" frameborder="0"></iframe>
音視訊
- audio：用來向頁面中引入一個外部的音訊檔案，也是一個替換標籤
- 音視訊檔案引入的時候，預設情況下是不能讓使用者自己控制播放的
- controls：是否使用者控制播放（控制器），是判斷這個屬性是否存在。
- autoplay：音訊自動播放，如果設定了autoplay ，則音樂在開啟頁面後就自動播放，大部分瀏覽器都不會自動播放
- loop：迴圈播放
<audio src="./resource/audio.mp3" controls loop autoplay></audio>
除了通過src指定外部檔案，可以通過source標籤的src來指定
source
- 使用soruce可以控制版本問題
- source可以解決引入多個資源的問題
- 在第一個source標籤中的資源無法使用時候，那麼就可以執行下一個source標籤資源
- 使用source標籤，可以在之前只使用src的基礎上使用多個src（例如一個音訊，多個格式，mp3,ogg，mp3不支援 ，就使用source其他的音訊 格式）
- 適合在瀏覽器版本的適配或者資源格式適配
- source也是一種替換標籤
- 使用source標籤引入資源的時候，如果有同種資源，同種格式，只要瀏覽已經識別了，那麼其他相同的source引入的資源就不會被識別了。embed也是類似，例如下面的mp3格式，有兩個相同格式的資源，但是隻會解析一個資源
<audio controls>
<source src="./resource/audio.mp3" >
<source src="./resource/audio.mp3" >
<source src="./resource/audio.ogg" >
</audio>
其實現在使用src直接引入或者source標籤引入，不相容的時候都會有友好的提示的
embed
-
相容老版本ie
-
需要指定type的檔案型別: audio/mp3 這裡的audio 代表的是音訊資源格式是mp3
-
一般和source搭配使用
例如下面的程式碼。在某個ie版本或其他瀏覽器版本無法識別到ogg格式的時候，則會讀取embed中的資源
<audio controls>
<source src="./resource/audio.mp3" >
<source src="./resource/audio.mp3" >
<source src="./resource/audio.ogg" >
<embed src="./resource/audio.ogg" type="audio/ogg">
</audio>
video
引入視訊檔案