HTML簡介
- HTML（Hypertext Makeup Language）超文本標記語言
- 它負責(zé)網(wǎng)頁的三要素之中的結(jié)構(gòu)
- HTML使用標簽的形式來標識網(wǎng)頁中的不同組成部分
- 所謂超文本指的是超鏈接笛厦，使用超鏈接可以讓我們從一個頁面跳轉(zhuǎn)到另一個頁面
HTML標簽
- HTML中的標記指的就是標簽
- HTML使用標記標簽來描述網(wǎng)頁
- 結(jié)構(gòu)
<標簽名>標簽內(nèi)容</標簽名>
<標簽名/>
- 標簽一般成對出現(xiàn)翁潘，但是也存在一些自結(jié)束標簽
<!--成對出現(xiàn)的標簽舉例-->
<p></p>
<!--自結(jié)束標簽舉例-->
<img/>
元素
- 我們還將一個完整的標簽成為元素
- 這里我們可以講元素和標簽認為是一個同義詞
HTML屬性
1.在標簽中（開始標簽或自結(jié)束標簽）還可以設(shè)置屬性
2.屬性是一個名值對（x=y）
3.屬性用來設(shè)置標簽中的內(nèi)容如何顯示
4.屬性和標簽名或其他屬性應(yīng)該使用空格隔開
5.屬性不能瞎寫捐迫，應(yīng)該根據(jù)文檔中的規(guī)定來編寫杂抽，
6.有些屬性有屬性值低千，有些沒有掌实。如果有屬性值蓖议，屬性值應(yīng)該使用引號引起來
HTML的注釋
<饮焦！-- -->
1.注釋中的內(nèi)容會被瀏覽器所忽略，不會在網(wǎng)頁中直接顯示皆串，但是可以在源碼中查看注釋
2.注釋用來對代碼進行解釋說明的
3.開發(fā)中一定要養(yǎng)成良好的編寫注釋的習(xí)慣淹办，注釋要求簡單明了
5.注釋還可以將一些不希望顯示的內(nèi)容隱藏
6.注釋不能嵌套
HTML的發(fā)展
- 1993年6月：HTML第一個版本發(fā)布
- 1995年11月：HTML2.0
- 1997年1月：HTML3.2（W3C推薦）
- 1999年12月：HTML4.01（W3C推薦）
- 2000年底：XHTML1.0（W3C推薦）
- 2014年10月：HTML5（W3C推薦）
進制問題
十進制(日常使用)
- 特點：滿10進1
- 計數(shù)：0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20
- 單位數(shù)字：10個 （0-9）
二進制（計算機底層的進制）
- 特點：滿2進1
- 計數(shù)：0 1 10 11 100 101 110 111
- 單位數(shù)字：2個 （0-1）
- 擴展：
所有數(shù)據(jù)在計算機底層都會以二進制的形式保存
-
可以將內(nèi)存想象為一個有多個小格子組成的容器，每一個小格子中可以存儲一個1或一個0,這一個小格子在內(nèi)存中被稱為1位（bit）
- 8bit = 1byte(字節(jié))
1024byte = 1kb(千字節(jié))
1024kb = 1mb(兆字節(jié))
1024mb = 1gb(吉字節(jié))
1024gb = 1tb(特字節(jié))
1024tp = 1pb
- 8bit = 1byte(字節(jié))
八進制(很少用)
- 特點：滿8進1
- 計數(shù)： 0 1 2 3 4 5 6 7 10 11 12 ... 17 20
- 單位數(shù)字：8個 （0-7）
十六進制(
- 一般顯示一個二進制數(shù)字時恶复，都會轉(zhuǎn)換為十六進制
- 特點：滿16進1
- 計數(shù)：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b 1c 1d 1e 1f 20 ..
- 單位數(shù)字：16個（0-f）
編碼問題
編碼
- 在計算機內(nèi)部怜森，文件都是以二進制編碼保存的。
- 所謂的二進制編碼就是指1和0谤牡，也就是我們的所有內(nèi)容都需要轉(zhuǎn)換為1和0
- 將字符轉(zhuǎn)換為二進制碼的過程稱為編碼
- 將二進制碼轉(zhuǎn)換為字符的過程稱為解碼
字符集
- 這就帶來一個問題副硅，中國的編碼是什么到底誰說了算
- 所以我們還需要一個東西稱為字符集，字符集規(guī)定了如何將文本轉(zhuǎn)換為二進制編碼
- 常見的字符集：ASKII翅萤、ISO8859-1恐疲、GBK、GB2312套么、UTF-8
亂碼
- 如果我們保存文件時使用的時utf-8進行編碼培己，而瀏覽器讀取頁面使用GB２３１２，這樣就會導(dǎo)致頁面中的內(nèi)容不能正常顯示胚泌，也就是我們所說的亂碼省咨。
- 所以我們只需要統(tǒng)一兩者使用的字符集就可以解決亂碼問題。
- 這里為了頁面有更好的使用性玷室，我們一般使用UTF-８
解決
- 保存文件的編碼我們可以直接通過編輯器指定零蓉，在VScode中笤受，可以通過單擊界面下方顯示字符集（一般顯示的是UTF－８）來指定文件的編碼,接下來就是要告訴瀏覽器使用什么字符集去解析文件
- 在HTML5中只需要使用meta標簽即可完成這個任務(wù)
<meta charset="utf-8">
文檔聲明
文檔聲明簡介
- 文檔聲明用來告訴瀏覽器當前網(wǎng)頁的版本
- html5的文檔聲明
<!doctype html>
<!Doctype HTML>
怪異模式
- 為了兼容一些舊的頁面,瀏覽器中設(shè)置了兩種解析模式
- 標準模式(Standards Mode)
- 怪異模式(Quirks Mode)
- 怪異模式解析網(wǎng)頁時會產(chǎn)生一些不可預(yù)期的行為,所以我們應(yīng)該避免怪異模式的出現(xiàn)
- 避免的最好方式就是在頁面中編寫正確的doctype
HTML網(wǎng)頁的基本結(jié)構(gòu)
<!-- 文檔聲明，聲明當前網(wǎng)頁的版本 -->
<!doctype html>
<!-- html的根標簽（元素）敌蜂，網(wǎng)頁中的所有內(nèi)容都要寫根元素的里邊 -->
<html>
<!-- head是網(wǎng)頁的頭部箩兽，head中的內(nèi)容不會在網(wǎng)頁中直接出現(xiàn)，主要用來幫助瀏覽器或搜索引擎來解析網(wǎng)頁 -->
<head>
<!-- meta標簽用來設(shè)置網(wǎng)頁的元數(shù)據(jù)章喉，這里meta用來設(shè)置網(wǎng)頁的字符集汗贫，避免亂碼問題 -->
<meta charset="utf-8">
<!-- title中的內(nèi)容會顯示在瀏覽器的標題欄，搜索引擎會主要根據(jù)title中的內(nèi)容來判斷網(wǎng)頁的主要內(nèi)容 -->
<title>網(wǎng)頁的標題</title>
</head>
<!-- body是html的子元素囊陡，表示網(wǎng)頁的主體芳绩，網(wǎng)頁中所有的可見內(nèi)容都應(yīng)該寫在body里 -->
<body>
<!-- h1網(wǎng)頁的一級標題 -->
<h1>網(wǎng)頁的大標題</h1>
</body>
</html>
實體
在網(wǎng)頁中編寫的多個空格默認情況會自動被瀏覽器解析為一個空格
在HTML中有些時候，我們不能直接書寫一些特殊符號, 比如：多個連續(xù)的空格撞反，比如字母兩側(cè)的大于和小于號
如果我們需要在網(wǎng)頁中書寫這些特殊的符號妥色，則需要使用html中的實體（轉(zhuǎn)義字符）
實體的語法：
&實體的名字;
- 常見的實體:
空格
> 大于號
< 小于號
© 版權(quán)符號
meta標簽
meta標簽的作用
meta主要用于設(shè)置網(wǎng)頁中的一些元數(shù)據(jù)，元數(shù)據(jù)不是給用戶看,而是給瀏覽器看的
meta標簽常見屬性
- charset 指定網(wǎng)頁的字符集
- name 指定的數(shù)據(jù)的名稱
- content 指定的數(shù)據(jù)的內(nèi)容
- keywords 表示網(wǎng)站的關(guān)鍵字遏片，可以同時指定多個關(guān)鍵字嘹害，關(guān)鍵字間使用,隔開
示例:
<meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數(shù)碼,配件,手表,存儲卡,京東"/>
<meta name="keywords" content="網(wǎng)購,網(wǎng)上購物,在線購物,網(wǎng)購網(wǎng)站,網(wǎng)購商城,購物網(wǎng)站,網(wǎng)購中心,購物中心,卓越,亞馬遜,卓越亞馬遜,亞馬遜中國,joyo,amazon">
- description 用于指定網(wǎng)站的描述, 網(wǎng)站的描述會顯示在搜索引擎的搜索的結(jié)果中
示例:
<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電、數(shù)碼通訊吮便、電腦笔呀、家居百貨、服裝服飾髓需、母嬰许师、圖書、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷僚匆、誠信的服務(wù)微渠，為您提供愉悅的網(wǎng)上購物體驗!"/>
- 將頁面重定向到另一個網(wǎng)站
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
title標簽
title標簽的內(nèi)容會作為搜索結(jié)果的超鏈接上的文字顯示
語義化標簽
簡介
在網(wǎng)頁中HTML專門用來負責(zé)網(wǎng)頁的結(jié)構(gòu)
所以在使用html標簽時，應(yīng)該關(guān)注的是標簽的語義咧擂，而不是它的樣式
標題標簽
- h1 ~ h6 一共有六級標題
- 從h1~h6重要性遞減逞盆，h1最重要，h6最不重要
- h1在網(wǎng)頁中的重要性僅次于title標簽松申，一般情況下一個頁面中只會有一個h1
- 一般情況下標題標簽只會使用到h1-h3云芦，h4-h6很少用
- 標題標簽都是塊元素
- 簡單來說, 在頁面中獨占一行的元素稱為塊元素（block element）
- 示例:
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
hgroup標簽
- hgroup標簽用來為標題分組，可以將一組相關(guān)的標題同時放入到hgroup
- 示例:
<hgroup>
<h1>回鄉(xiāng)偶書二首</h1>
<h2>其一</h2>
</hgroup>
p標簽
- p標簽表示頁面中的一個段落
- p也是一個塊元素
- 示例:
<p>在p標簽中的內(nèi)容就表示一個段落</p>
em標簽
- em標簽用于表示語音語調(diào)的一個加重
- 在頁面中不會獨占一行的元素稱為行內(nèi)元素（inline element）
- 示例
<p>今天天氣<em>真</em>不錯贸桶！</p>
- 注:語義化標簽對無障礙閱讀(例如為盲人提供的屏幕閱讀器)等技術(shù)有著重要的作用,千萬不能忽視!
strong標簽
- strong表示強調(diào)舅逸，重要內(nèi)容！
- 示例
<p>你今天必須要<strong>完成作業(yè)</strong>皇筛！</p>
引用標簽
blockquote
- blockquote 表示一個長引用
魯迅說：
<blockquote>
這句話我是從來沒有說過的堡赔！
</blockquote>
q
- q表示一個短引用
子曰<q>學(xué)而時習(xí)之，樂呵樂呵设联！</q>
換行標簽
- br標簽表示頁面中的換行
<p>在p標簽中的內(nèi)容就 <br> 表示一個段落</p>
塊元素與行內(nèi)元素(內(nèi)聯(lián)元素)簡介
塊元素（block element）
- 在網(wǎng)頁中一般通過塊元素來對頁面進行布局
行內(nèi)元素（inline element）
- 行內(nèi)元素主要用來包裹文字
塊元素與行內(nèi)元素的使用
- 一般情況下會在塊元素中放行內(nèi)元素善已，而不會在行內(nèi)元素中放塊元素
- 塊元素中基本上什么都能放
- p元素中不能放任何的塊元素
布局標簽（結(jié)構(gòu)化語義標簽)
- header 表示網(wǎng)頁的頭部
- main 表示網(wǎng)頁的主體部分(一個頁面中只會有一個main)
- footer 表示網(wǎng)頁的底部
- nav 表示網(wǎng)頁中的導(dǎo)航
- aside 和主體相關(guān)的其他內(nèi)容（側(cè)邊欄）
- article 表示一個獨立的文章
- section 表示一個獨立的區(qū)塊，上邊的標簽都不能表示時使用section
- div 沒有語義离例，就用來表示一個區(qū)塊换团，目前來講div還是我們主要的布局元素
- span 行內(nèi)元素，沒有任何的語義宫蛆，一般用于在網(wǎng)頁中選中文字
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
列表（list）
- 在html中也可以創(chuàng)建列表艘包，html列表一共有三種：
1、有序列表
2耀盗、無序列表
3想虎、定義列表 - 有序列表，使用ol(ordered list)標簽來創(chuàng)建無序列表
使用li表示列表項
<ol>
<li>結(jié)構(gòu)</li>
<li>表現(xiàn)</li>
<li>行為</li>
</ol>
- 無序列表叛拷，使用ul(unordered list)標簽來創(chuàng)建無序列表
使用li表示列表項
<ul>
<li>結(jié)構(gòu)</li>
<li>表現(xiàn)</li>
<li>行為</li>
</ul>
- 定義列表舌厨，使用dl標簽來創(chuàng)建一個定義列表
使用dt來表示定義的內(nèi)容
使用dd來對內(nèi)容進行解釋說明
<dl>
<dt>結(jié)構(gòu)</dt>
<dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu)，結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標題忿薇，哪里是段落</dd>
<dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu)裙椭，結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標題，哪里是段落</dd>
<dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu)署浩，結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標題揉燃，哪里是段落</dd>
</dl>
- 列表之間可以互相嵌套
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</li>
</ul>
超鏈接
超鏈接的含義
超鏈接可以讓我們從一個頁面跳轉(zhuǎn)到其他頁面铛只， 或者是當前頁面的其他的位置
定義超鏈接
- 使用 a 標簽來定義超鏈接
- 屬性：
1.href 指定跳轉(zhuǎn)的目標路徑,值可以是一個外部網(wǎng)站的地址,也可以寫一個內(nèi)部頁面的地址- 在開發(fā)中可以將#作為超鏈接的路徑的展位符使用
- 可以使用 javascript:; 來作為href的屬性它匕，此時點擊這個超鏈接什么也不會發(fā)生
- 可以直接將超鏈接的href屬性設(shè)置為#，這樣點擊超鏈接以后頁面不會發(fā)生跳轉(zhuǎn)厌蔽，而是轉(zhuǎn)到當前頁面的頂部的位置
- 只需將href屬性設(shè)置 #目標元素的id屬性值,就可以跳轉(zhuǎn)到頁面的指定位置弊攘，
<a href="#">這是一個新的超鏈接</a>
<br><br>
<a href="javascript:;">這是一個新的超鏈接</a>
2.target屬性抢腐，用來指定超鏈接打開的位置
可選值：
_self 默認值 在當前頁面中打開超鏈接
_blank 在一個新的要么中打開超鏈接
<a >超鏈接</a>
<a href="07.列表.html">超鏈接2</a>
- 超鏈接是也是一個行內(nèi)元素，在a標簽中可以嵌套除它自身外的任何元素
- 補充: id屬性（唯一不重復(fù)的）
- 每一個標簽都可以添加一個id屬性
- id屬性就是元素的唯一標識肴颊，同一個頁面中不能出現(xiàn)重復(fù)的id屬性
圖片標簽
- 圖片標簽用于向當前頁面中引入一個外部圖片
- 使用img標簽來引入外部圖片氓栈，img標簽是一個自結(jié)束標簽
- img這種元素屬于替換元素（塊和行內(nèi)元素之間，具有兩種元素的特點）
- img標簽的屬性屬性：
1. src 屬性指定的是外部圖片的路徑（路徑規(guī)則和超鏈接是一樣的）
2. alt 圖片的描述婿着，這個描述默認情況下不會顯示授瘦，有些瀏覽器會圖片無法加載時顯示,搜索引擎會根據(jù)alt中的內(nèi)容來識別圖片，如果不寫alt屬性則圖片不會被搜索引擎所收錄
3.width 圖片的寬度 (單位是像素)
4.height 圖片的高度
5.寬度和高度中如果只修改了一個竟宋，則另一個會等比例縮放 - 注意：
一般情況在pc端提完，不建議修改圖片的大小，需要多大的圖片就裁多大
但是在移動端丘侠，經(jīng)常需要對圖片進行縮放（大圖縮型叫馈） - 圖片的格式：
| 名稱 | 特點 | 用途 |
|---|---|---|
| jpeg(jpg) | 1.支持的顏色比較豐富 2.不支持透明效果 3.不支持動圖 |
一般用來顯示照片 |
| gif | 1.支持的顏色比較少 2.支持簡單透明 3.支持動圖 |
顏色單一的圖片，動圖 |
| png | 1.支持的顏色豐富 2.支持復(fù)雜透明 3.不支持動圖 |
顏色豐富蜗字，復(fù)雜透明圖片（專為網(wǎng)頁而生） |
| webp | 1.這種格式是谷歌新推出的專門用來表示網(wǎng)頁中的圖片的一種格式 2.它具備其他圖片格式的所有優(yōu)點打肝，而且文件還特別的小 3. 缺點：兼容性不好 |
|
| base64 | 將圖片使用base64編碼脂新，這樣可以將圖片轉(zhuǎn)換為字符，通過字符的形式來引入圖片 | 一般都是一些需要和網(wǎng)頁一起加載的圖片才會使用base64 |
- 使用圖片的一般原則
1.效果一樣粗梭，用小的
2.效果不一樣争便，用效果好的
內(nèi)聯(lián)框架
用途
用于向當前頁面中引入一個其他頁面
標簽
<iframe></iframe>
屬性
src 指定要引入的網(wǎng)頁的路徑
frameborder 指定內(nèi)聯(lián)框架的邊框
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
音視頻
音頻
audio 標簽用來向頁面中引入一個外部的音頻文件的
音視頻文件引入時，默認情況下不允許用戶自己控制播放停止
-
屬性：
- controls 是否允許用戶控制播放
- autoplay 音頻文件是否自動播放
- 如果設(shè)置了autoplay 則音樂在打開頁面時會自動播放, 但是目前來講大部分瀏覽器都不會自動對音樂進行播放
3.loop 音樂是否循環(huán)播放
4.src指定外部文件路徑- 除了通過src來指定外部文件的路徑以外断医，還可以通過source來指定文件的路徑
<audio controls>
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
視頻
使用video標簽來向網(wǎng)頁中引入一個視頻, 使用方式和audio基本上是一樣的
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
