當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

零基础学HTML5和CSS3前端开发第一课

發(fā)布時(shí)間：2024/1/23 HTML 39 豆豆

生活随笔收集整理的這篇文章主要介紹了零基础学HTML5和CSS3前端开发第一课小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

課程目標(biāo)：

使用HTML5進(jìn)行網(wǎng)站布局
使用CSS3進(jìn)行網(wǎng)站美化
開(kāi)發(fā)精美的商業(yè)網(wǎng)站

第一章 HTML5基礎(chǔ)

概念：

網(wǎng)頁(yè) ：互聯(lián)網(wǎng)的基礎(chǔ)，網(wǎng)絡(luò)頁(yè)面,網(wǎng)頁(yè)：文字、圖片、聲音、視頻、VR虛幻等；網(wǎng)站：淘寶網(wǎng)、京東、亞馬遜、騰訊、新浪、網(wǎng)易、嗶哩嗶哩等，網(wǎng)站就是網(wǎng)頁(yè)的集合。瀏覽器：查看網(wǎng)頁(yè)的工具；主瀏覽器：谷歌瀏覽器Chrome、火狐瀏覽器、IE（Edge);360、2345、百度等這些瀏覽器，這些瀏覽器在國(guó)內(nèi)使用，內(nèi)核還是外國(guó)上述三種的；

1.HTML

HTML:超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language)，標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用。 HTML 不是一種編程語(yǔ)言（C、Java、python、R等），而是一種標(biāo)記語(yǔ)言 (markup language)，是網(wǎng)頁(yè)制作所必備的。“超文本”就是指頁(yè)面內(nèi)可以包含圖片、鏈接，甚至音樂(lè)、程序等非文字元素。目前版本是第5代，簡(jiǎn)稱為HTML5，該技術(shù)結(jié)合了 HTML4.01 的相關(guān)標(biāo)準(zhǔn)并革新。

2.WWW

2.1 www來(lái)源

WWW是環(huán)球信息網(wǎng)的縮寫(xiě)，（亦作“Web”、“WWW”、“‘W3’”，英文全稱為“World Wide Web”），中文名字為“萬(wàn)維網(wǎng)”，"環(huán)球網(wǎng)"等，常簡(jiǎn)稱為Web。分為Web客戶端和Web服務(wù)器程序。 WWW可以讓W(xué)eb客戶端（常用瀏覽器）訪問(wèn)瀏覽Web服務(wù)器上的頁(yè)面。是一個(gè)由許多互相鏈接的超文本組成的系統(tǒng)，通過(guò)互聯(lián)網(wǎng)訪問(wèn)。

發(fā)明者：蒂姆·伯納斯·李 (他是“互聯(lián)網(wǎng)之父”、“千年技術(shù)獎(jiǎng)”首位獲獎(jiǎng)?wù)?#xff0c;他是被全球人贊揚(yáng)的英國(guó)科學(xué)家。他，是蒂姆·伯納斯·李。他是萬(wàn)維網(wǎng)的發(fā)明者，南安普頓大學(xué)與麻省理工學(xué)院教授。2017年，他因“發(fā)明萬(wàn)維網(wǎng)、第一個(gè)瀏覽器和使萬(wàn)維網(wǎng)得以擴(kuò)展的基本協(xié)議和算法”而獲得2016年度的圖靈獎(jiǎng)。)

2.2 W3C

World Wide Web Consortium（萬(wàn)維網(wǎng)聯(lián)盟）
成立于1994年，Web技術(shù)領(lǐng)域最權(quán)威和具影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)
http://www.w3.org/
http://www.chinaw3c.org/

2.3W3C標(biāo)準(zhǔn)

結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言（XHTML 、XML）：網(wǎng)頁(yè)結(jié)構(gòu)html
表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言（CSS）:CSS
行為標(biāo)準(zhǔn)（DOM、ECMAScript ）：JS
3.協(xié)議

3.1http:

3.2 https:

HTTPS （全稱：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全為目標(biāo)的 HTTP 通道，在HTTP的基礎(chǔ)上通過(guò)傳輸加密和身份認(rèn)證保證了傳輸過(guò)程的安全性

4.HTML的基本結(jié)構(gòu)

理解網(wǎng)頁(yè)結(jié)構(gòu)：

<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body>身體 </body> </html>

5.第一個(gè)小程序

第一個(gè)小程序，都是“Hello World”。

使用記事本寫(xiě)個(gè)網(wǎng)頁(yè)，顯露一把。

使用更為快捷的開(kāi)發(fā)工具：EditPlus、HBuilderX、VSCode。

<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title></head><body>我是使用Editpuls的網(wǎng)頁(yè)頁(yè)面。！好處：可以鍛煉你記憶標(biāo)簽的能力,不會(huì)自動(dòng)出來(lái)一些提示標(biāo)簽。<div></div><span></span></body> </html> <!DOCTYPE html> <html><head><meta charset="utf-8"><title>第三個(gè)頁(yè)面，使用HBuilderX</title></head><body></body> </html>

html:標(biāo)記性的語(yǔ)言，這里面的元素，主要是標(biāo)簽。
詳見(jiàn)視頻哦。
6.標(biāo)簽

6.1.格式和常用標(biāo)簽

標(biāo)簽的規(guī)范，必須通過(guò)尖括號(hào)括起來(lái)；成對(duì)出現(xiàn)；雙標(biāo)記標(biāo)簽和單標(biāo)記標(biāo)簽；
標(biāo)簽關(guān)系：父子關(guān)系；兄弟關(guān)系；

6.2 HTML標(biāo)簽、Head標(biāo)簽、BODY標(biāo)簽

<!DOCTYPE html>  <html> <head><title>標(biāo)題三</title> </head> <body>缺點(diǎn)就是太快了，單詞你記不住。 </body> </html>

6.3.meta

meta:標(biāo)記信息；
charset:表示字符編碼，utf-8;en;GBK;
name=“author”:作者
name=“Keywords”:關(guān)鍵字;一般是baidu、谷歌搜索的時(shí)候，利于搜索喂食；
name=“description”:描述上面這些對(duì)應(yīng)的另外內(nèi)容是content直接使用content="內(nèi)容"來(lái)寫(xiě);也是搜索用；

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="author" content="張老師"><meta name="keywords" content="HTML5，CSS3，Java，前端學(xué)習(xí)"><meta name="description" content="淘寶網(wǎng) - 亞洲較大的網(wǎng)上交易平臺(tái)，提供各類(lèi)服飾、美容、家居、數(shù)碼、話費(fèi)/點(diǎn)卡充值… 數(shù)億優(yōu)質(zhì)商品，同時(shí)提供擔(dān)保交易(先收貨后付款)等安全交易保障服務(wù)，并由商家"><title>meta標(biāo)簽的講解!</title> </head> <body> </body> </html>

6.4 H1–>h6及hr標(biāo)簽

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>H1到H6標(biāo)簽及其Hr標(biāo)簽</title> </head> <body><h1></h1><hr><h1>HTML5學(xué)習(xí)開(kāi)始了</h1><h2>張老師開(kāi)始上課</h2><hr><h3>曾同學(xué)，表現(xiàn)良好</h3><h4>HTML5學(xué)習(xí)開(kāi)始了</h4><h5>HTML5學(xué)習(xí)開(kāi)始了</h5><h6>HTML5學(xué)習(xí)開(kāi)始了</h6> </body> </html>

6.5 p、br、pre標(biāo)簽

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>p標(biāo)簽br標(biāo)簽pre標(biāo)簽</title> </head><body><h1>滿江紅</h1><h2>岳飛</h2><hr><p>怒發(fā)沖冠，憑欄處瀟瀟雨歇。<br>抬望眼，仰天長(zhǎng)嘯，壯懷激烈。<br>三十功名塵與土，八千里路云和月。<br>莫等閑白了少年頭，空悲切。<br><br>靖康恥，猶未雪；臣子恨，何時(shí)滅！<br>駕長(zhǎng)車(chē)踏破賀蘭山缺。<br>壯志饑餐胡虜肉，笑談渴飲匈奴血。<br>待從頭收拾舊山河，朝天闕。</p><p>【注釋】：作者其它作品：更多>></p><p>來(lái)講解這段宋詞</p><p>這段宋詞的時(shí)代背景</p><hr><pre>怒發(fā)沖冠，憑欄處瀟瀟雨歇。抬望眼，仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑白了少年頭，空悲切。靖康恥，猶未雪；臣子恨，何時(shí)滅！駕長(zhǎng)車(chē)踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭收拾舊山河，朝天闕。 </pre> </body> </html>

6.6無(wú)序列表和有序列表

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>無(wú)序列表</title> </head><body><h1>清朝中興四大名臣</h1><hr><ul type="disc"><li>曾國(guó)藩</li><li>左宗棠</li><li>胡林翼</li><li>彭玉麟</li></ul><hr><ul type='circle'><li>曾國(guó)藩</li><li>左宗棠</li><li>胡林翼</li><li>彭玉麟</li></ul><hr><ul type='square'><li>曾國(guó)藩</li><li>左宗棠</li><li>胡林翼</li><li>彭玉麟</li></ul> </body></html>

6.6無(wú)序列表和有序列表

列表就是信息資源的一種展示形式。它可以使信息結(jié)構(gòu)化和條理化，并以列表的樣式顯示出來(lái)，以便瀏覽者能更快捷地獲得相應(yīng)的信息。

無(wú)序列表：沒(méi)有順序的列表，默認(rèn)有個(gè)小圓點(diǎn)。

應(yīng)用場(chǎng)景：一般用于無(wú)序類(lèi)型的列表，如導(dǎo)航、側(cè)邊欄新聞、有規(guī)律的圖文組合模塊等。

<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="author" content="張晨光"><meta name="keywords" content="HTML5的介紹，全球直播"><meta name="description" content="比爾蓋茨，扎克伯格，馬云，馬化騰親自主持"><title></title></head><body><ul type="circle"><li>華為</li><li>三星</li><li>一加</li></ul><ul type="square"><li>華為</li><li>三星</li><li>一加</li></ul><ul type="disc"><li>華為</li><li>三星</li><li>一加</li></ul></body> </html>

有序列表：

場(chǎng)景：一般用于排序類(lèi)型的列表，如試卷、問(wèn)卷選項(xiàng)等

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>有序列表</title></head><body><ol type="A"><li>冠軍</li><li>亞軍</li><li>季軍</li><li>四軍</li></ol></body> </html>

6.7 字體標(biāo)簽

b、I、U、strong、em等標(biāo)簽。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體標(biāo)簽</title> </head><body><h1>斗破蒼穹</h1><hr><b>天蠶土豆</b>天蠶土豆<i>蕭炎</i><u>藥老</u><em>心潮澎湃，無(wú)限幻想，迎風(fēng)揮擊千層浪，少年不敗熱血</em><br><strong>心潮澎湃，無(wú)限幻想，迎風(fēng)揮擊千層浪，少年不敗熱血</strong><p><font size='3' color='pink' face='楷體'>講述了天才少年蕭炎在創(chuàng)造了家族空前絕后的修煉紀(jì)錄后突然成了廢人，<br>種種打擊接踵而至。就在他即將絕望的時(shí)候，<br>一縷靈魂從他手上的戒指里浮現(xiàn)，一扇全新的大門(mén)在面前開(kāi)啟，<br>經(jīng)過(guò)艱苦修煉最終成就輝煌的故事。</font></p> </body></html>

6.8居中標(biāo)簽

center
6.9 圖片標(biāo)簽

圖片路徑是重點(diǎn)，首先是找到圖片，把圖片放到和網(wǎng)頁(yè)同一個(gè)文件夾，并且你要測(cè)試沒(méi)有這個(gè)圖片會(huì)出來(lái)叉號(hào)的效果.

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>居中和圖片標(biāo)簽</title> </head><body><center><h1>斗破蒼穹</h1></center><hr><img src="斗破.jpg" alt="請(qǐng)查找圖片路徑" title="斗破蒼穹"><img src="./斗破.jpg" alt="請(qǐng)查找圖片路徑" title="斗破蒼穹" width="400px" height="250px"><img src="../美女.jpg" alt="請(qǐng)查找圖片路徑" title="斗破蒼穹" width="250px" height="400px"><img src="https://qidian.gtimg.com/qd/images/logo.beebc.png" alt=""><img src="D:\html55555\美女.jpg" alt=""> </body> </html>

title：當(dāng)光標(biāo)放上去的時(shí)候，會(huì)出來(lái)這個(gè)提示信息。

src：source來(lái)源

加上寬width

高 height;

格式：width/height=“數(shù)字 px” px:就是計(jì)算機(jī)或者手機(jī)，多少像素；

新的圖片類(lèi)型：bmp、png、jpg、gif、jfif、webp

WebP（發(fā)音：weppy）是一種同時(shí)提供了有損壓縮與無(wú)損壓縮（可逆壓縮）的圖片文件格式，派生自影像編碼格式VP8，被認(rèn)為是WebM多媒體格式的姊妹項(xiàng)目，是由Google在購(gòu)買(mǎi)On2 Technologies后發(fā)展出來(lái)，以BSD授權(quán)條款發(fā)布。

WebP最初在2010年發(fā)布，目標(biāo)是減少文件大小，但達(dá)到和JPEG格式相同的圖片質(zhì)量，希望能夠減少圖片檔在網(wǎng)絡(luò)上的發(fā)送時(shí)間。2011年11月8日，Google開(kāi)始讓W(xué)ebP支持無(wú)損壓縮和透明色（alpha通道）的功能，而在2012年8月16日的參考實(shí)做libwebp 0.2.0中正式支持。根據(jù)Google較早的測(cè)試，WebP的無(wú)損壓縮比網(wǎng)絡(luò)上找到的PNG檔少了45%的文件大小，即使這些PNG檔在使用pngcrush和PNGOUT處理過(guò)，WebP還是可以減少28%的文件大小。

圖片存儲(chǔ)格式之一，由JPEG格式衍生而來(lái)，后綴為".jfif"。

JPEG本身只有描述如何將一個(gè)圖像轉(zhuǎn)換為字節(jié)的數(shù)據(jù)串流（streaming），但并沒(méi)有說(shuō)明這些字節(jié)如何在任何特定的儲(chǔ)存媒體上被封存起來(lái)。一個(gè)由獨(dú)立JPEG小組（Independent JPEG Group）所建立的額外標(biāo)準(zhǔn)，稱為JFIF（JPEG File Interchange Format，JPEG檔案交換格式），詳細(xì)說(shuō)明如何從一個(gè)JPEG串流，產(chǎn)出一個(gè)適合于電腦儲(chǔ)存和傳輸（像是在因特網(wǎng)上）的檔案。當(dāng)有人稱呼一個(gè)"JPEG檔案"，一般而言他是意指一個(gè)JFIF檔案，或有時(shí)候是一個(gè)Exif JPEG檔案。然而，也有其他以JPEG為基礎(chǔ)的檔案格式，像是JNG。

JPEG/JFIF是最普遍在萬(wàn)維網(wǎng)（World Wide Web）上被用來(lái)儲(chǔ)存和傳輸圖片的格式。它并不適合于線條繪圖（drawing）和其他文字或圖示（iconic）的圖形，因?yàn)樗膲嚎s方法用在這些圖形的型態(tài)上，會(huì)得到不適當(dāng)?shù)慕Y(jié)果（PNG和GIF格式通常是用來(lái)針對(duì)這種目的之圖形；GIF每一像素只有8位元，并不很適合于用在彩色照片，PNG可以被用來(lái)無(wú)失真地儲(chǔ)存照片，但是檔案太大讓它不適合在網(wǎng)頁(yè)上放照片）。
6.10超鏈接

網(wǎng)站：有很多內(nèi)容來(lái)組成，這些就是網(wǎng)頁(yè)組成，網(wǎng)頁(yè)與網(wǎng)頁(yè)之間、關(guān)聯(lián)就是通過(guò)超鏈接，來(lái)實(shí)現(xiàn)。

打開(kāi)到新窗口: target="_blank"

錨點(diǎn)案例

連接到郵箱聯(lián)系我

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><h1>網(wǎng)址導(dǎo)航</h1><hr><a href="demo02.html">百度</a><a href="demo03.html" target="_blank">網(wǎng)易</a><a href="demo04.html">新浪</a><a href="demo08.html" target="_blank">搜狐</a><a href="#">空鏈接</a><a href="mailto:83193980@qq.com">聯(lián)系作者</a> </body></html>

錨點(diǎn)案例

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><h1><center><a id='top'>黎明之劫</a></center></h1><hr><font size='2'>作者：未來(lái)少女</font><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><p>起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國(guó)內(nèi)最大文學(xué)閱讀與寫(xiě)作平臺(tái)之一，是國(guó)內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門(mén)戶網(wǎng)站，隸屬于數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)（(股票代碼：0772.HK)）旗下，總部位于上海。</p><a href="#top"><img src='./img/toTop.jpg' /></a> </body></html>

6.11 多媒體

了解多媒體包含的類(lèi)型：音頻、視頻、動(dòng)畫(huà)、圖片等

視頻video

video,指定視頻來(lái)源、是否播放。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><video src="./video/movie.mp4" controls width="400" autoplay muted></video><hr><video controls autoplay><source src="./video/video.webm" type="video/webm"><source src="./video/video.mp4" type="video/mp4"></video> </body></html>

音頻audio

聲音格式

MP3是一種音頻壓縮技術(shù)，其全稱是動(dòng)態(tài)影像專家壓縮標(biāo)準(zhǔn)音頻層面3（Moving Picture Experts Group Audio Layer III），簡(jiǎn)稱為MP3。它被設(shè)計(jì)用來(lái)大幅度地降低音頻數(shù)據(jù)量。如果你的站點(diǎn)是音樂(lè)類(lèi)型的，你可以選擇mp3格式。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><audio src="music/music.mp3" controls></audio><hr><audio controls><source src="music/music.mp3" type="audio/mpeg"><source src="music/music.ogg" type="audio/ogg"></audio> </body></html>

6.12 特殊符號(hào)

6.13 塊元素和行內(nèi)元素

塊元素
無(wú)論內(nèi)容多少，該元素獨(dú)占一行（p、h1-h6…）
行內(nèi)元素
內(nèi)容撐開(kāi)寬度，左右都是行內(nèi)元素的可以排在一行(a、strong、em…)

7.重點(diǎn)

圖片的插入

超鏈接的使用

8.難點(diǎn)

需要按照固定的步驟，把文件夾、圖片、網(wǎng)頁(yè)放到固定的目錄。

9.作業(yè)

1.制作宋詞《滿江紅》；

2.制作小米超鏈接；

3.音樂(lè)排行榜

參考代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>蝦米音樂(lè)排行榜</title> </head><body><h1>蝦米音樂(lè)排行榜    <a href='demo音頻.html'><font size='3'>更多</font></a></h1><hr><ul><li><img src="img/1.jpg" alt="" width="300"><p>推薦音樂(lè)金榜，No.1 雙節(jié)棍</p></li><li><img src="img/2.jpg" alt="" width="300"><p>推薦音樂(lè)金榜，No.1 雙節(jié)棍</p></li><li><img src="img/3.jpg" alt="" width="300"><p>推薦音樂(lè)金榜，No.1 雙節(jié)棍</p></li><li><img src="img/4.jpg" alt="" width="300"><p>推薦音樂(lè)金榜，No.1 雙節(jié)棍</p></li></ul> </body></html>

總結(jié)

以上是生活随笔為你收集整理的零基础学HTML5和CSS3前端开发第一课的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：安卓Android Studio开发ID
下一篇：零基础学前端开发之CSS基础