信推出小程序后，html5越來越火熱了，未來H5方向的專業(yè)人才必定水漲船高。

我整理了一些關(guān)于html的書籍

響應(yīng)式Web設(shè)計:HTML5和CSS3實(shí)戰(zhàn)

BenFrain (作者), 王永強(qiáng) (譯者)

推薦指數(shù)：★★★★

簡介：全書主要是帶領(lǐng)讀者做一個小網(wǎng)頁來寫的，其實(shí)響應(yīng)式的東西講得比較少，大半內(nèi)容是介紹H5和css3的基礎(chǔ)知識。如果同時想了解H5和css3和響應(yīng)式設(shè)計入門，這本書不錯。

HTML5移動Web開發(fā)實(shí)戰(zhàn)詳解

林瓏 (作者)

推薦指數(shù)：★★★★☆

簡介：本書由淺入深，全面、系統(tǒng)、詳盡地介紹了HTML5相關(guān)技術(shù)和其在移動開發(fā)領(lǐng)域的應(yīng)用。書中提供了大量的代碼示例，讀者可以通過這些例子理解知識點(diǎn)，也可以直接在開發(fā)實(shí)戰(zhàn)中稍加修改應(yīng)用這些代碼。《HTML5移動Web開發(fā)實(shí)戰(zhàn)詳解》涉及面廣，從基本原理到實(shí)戰(zhàn)，再到項(xiàng)目工作流，幾乎涉及一個合格的前端開發(fā)工程師需要具備的所有重要知識。

瘋狂HTML 5/CSS3/JavaScript講義

李剛 (作者)

推薦指數(shù)：★★★★

簡介：這是一本全面介紹HTML 5、CSS 3和JavaScript前端開發(fā)技術(shù)的圖書，系統(tǒng)地介紹了HTML 5常用的元素和屬性、HTML5的表單元素和屬性、HTML 5的繪圖支持、HTML5的多媒體支持、CSS 3的功能和用法、最前沿的變形與動畫功能等。除此之外，《瘋狂HTML 5/CSS 3/JavaScript講義》還系統(tǒng)地介紹了JavaScript編程知識，包括JavaScript基本語法、DOM編程，以及HTML 5新增的本地存儲、離線應(yīng)用、JavaScript多線程、客戶端通信支持、WebSocket編程等。

HTML5觸摸界面設(shè)計與開發(fā)

伍茲 (StephenWoods) (作者), 覃介右 谷岳 (譯者)

推薦指數(shù)：★★★★☆

簡介：《HTML5觸摸界面設(shè)計與開發(fā)》專注于觸摸界面的開發(fā)，內(nèi)容的結(jié)構(gòu)和優(yōu)化網(wǎng)站的思路大概一致。上半部分涵蓋了能使各類網(wǎng)站，特別是移動網(wǎng)站變快的基本概念。書的后半部分是專門講觸摸界面的，特別是盡可能地讓它們更平穩(wěn)和快速。本書適合具有一定經(jīng)驗(yàn)的Web開發(fā)者閱讀參考。

HTML5與CSS3權(quán)威指南(上下冊)(第3版)

陸凌牛(作者)

推薦指數(shù)：★★★★☆

簡介：本書分為上下兩冊。上冊全面系統(tǒng)地講解了HTML5相關(guān)的技術(shù)，以HTML5對現(xiàn)有Web應(yīng)用產(chǎn)生的變革開篇;下冊全面系統(tǒng)地講解了CSS3相關(guān)的技術(shù)，以CSS3的功能和模塊結(jié)構(gòu)開篇，順序講解了各種選擇器及其使用、文字與字體的相關(guān)樣式、盒相關(guān)樣式、背景與邊框相關(guān)樣式、布局相關(guān)樣式、變形處理、動畫、顏色相關(guān)樣式等內(nèi)容。

HTML5+CSS3+jQuery Mobile輕松構(gòu)造APP與移動網(wǎng)站

陳婉凌 著

推薦指數(shù)：★★★★☆

簡介：這是目前唯一一本真正的HTML5 App開發(fā)教材，目前已在復(fù)旦、北大、西安交大、北京理工等五十多所高校投入教學(xué)使用。它的特點(diǎn)是由淺入深、由易到難，將開發(fā)技巧、和開發(fā)工具結(jié)合在一起闡述，同時選取了多個商業(yè)項(xiàng)目APP的實(shí)戰(zhàn)案例進(jìn)行要點(diǎn)講解，通俗易懂。

和上面推薦的幾本書不同之處在于，本書是面向應(yīng)用型本科和高等職業(yè)院校設(shè)計的標(biāo)準(zhǔn)化教材，并經(jīng)過官方權(quán)威認(rèn)證，且該教材能與國家及國際權(quán)威認(rèn)證考試無縫對接。

html和css都是web前端的基礎(chǔ)，在這里，就給大家推薦幾個新手小白必去的網(wǎng)站！

1、w3school

http://www.w3school.com.cn

用來查找一些標(biāo)簽的屬性,每一個剛學(xué)習(xí)前端的伙伴,都會用到這個網(wǎng)站.

2.csdn

CSDN上可以獲得一些不錯的資訊,也可以找到很多需要的資料,也是一個交流的平臺,有些不懂得問題也可以找到人去解答.

3.開源中國

獲取到許多項(xiàng)目案例的源碼,獲得最新web前端發(fā)展的一些動向,資訊.

多年開發(fā)老碼農(nóng)福利贈送：網(wǎng)頁制作，網(wǎng)站開發(fā)，web前端開發(fā)，從最零基礎(chǔ)開始的的HTML+CSS+JavaScript。jQuery，Vue、React、Ajax，node，angular框架等到移動端小程序項(xiàng)目實(shí)戰(zhàn)【視頻＋工具＋電子書＋系統(tǒng)路線圖】都有整理，需要的伙伴可以私信我，發(fā)送“前端”等3秒后就可以獲取領(lǐng)取地址，送給每一位對編程感興趣的小伙伴

為你強(qiáng)力推薦經(jīng)典css書籍

1.精通CSS：高級Web標(biāo)準(zhǔn)解決方案（第2版）(Amazon第一CSS暢銷書全新改版)

本書將最有用的css書籍技術(shù)匯總在一起，還總結(jié)了css設(shè)計中的最佳實(shí)踐，討論了解決各種實(shí)際問題的技術(shù)，填補(bǔ)了一直以來css圖書的空白。

2.精通CSS+DIV 網(wǎng)頁樣式與布局

本書系統(tǒng)地講解了css層疊樣式表的基礎(chǔ)理論和實(shí)際運(yùn)用技術(shù)，通過大量實(shí)例對css進(jìn)行深入淺出的分析，主要包括css的基本語法和概念，設(shè)置文字、圖片、背景、表格、表單和菜單等網(wǎng)頁元素的方法，以及css濾鏡的使用。

3. CSS權(quán)威指南(第三版)

最新版《css權(quán)威指南》css書籍經(jīng)過全面更新，涵蓋了internet explorer 7，詳細(xì)介紹了各個css屬性以及屬性之間的相互作用，并指導(dǎo)你如何避免一些常見的錯誤。

希望對你有幫助，下一個優(yōu)秀的前端工程師就是你！

在前面：

在平常的學(xué)習(xí)中，我們已經(jīng)習(xí)慣了紙質(zhì)課本。但當(dāng)哪一天，書沒帶在身邊，或者需要預(yù)習(xí)下學(xué)期課程時，電子課本也不失為一種選擇。那么，接下來，給大家提供幾個好的電子課本網(wǎng)站。

1、易學(xué)啦

網(wǎng)址：https://www.yixuela.com/

易學(xué)啦是一個為中小學(xué)生提供免費(fèi)的學(xué)習(xí)資料、方法的網(wǎng)站，里面不僅有電子課本，還有各種筆記、視頻講解等。資源內(nèi)容涵蓋小學(xué)、初中、高中各個出版社的內(nèi)容。下圖可以看到，易學(xué)啦涵蓋了多達(dá)十幾個出版社的內(nèi)容。（可直接免費(fèi)觀看，非會員下載受限）

里面不僅有電子課本，還有各種筆記、視頻講解等

2、好多電子課本網(wǎng)

網(wǎng)址：http://www.haoduoyun.cc/

一個主要提供小學(xué)到初中課本教材的網(wǎng)站，包括人教版、譯林版、外研版等以及文言文、古詩文內(nèi)容，教材的內(nèi)容主要是小學(xué)語文和英語，中學(xué)語文、英語、歷史、道德，高中古詩文等，支持在線朗讀聽課，網(wǎng)址涵蓋內(nèi)容相對較少。

3、課件站

網(wǎng)址：http://www.kjzhan.com/

內(nèi)容還是很全的，小學(xué)、初中、高中的內(nèi)容基本都可以找到，不僅是課本，還有課件啊、視頻資料等，但網(wǎng)站頁面比較亂，雖然可以免費(fèi)下載，但要關(guān)注才能獲得下載方法。

4、教育部網(wǎng)站/各出版社網(wǎng)站

目前為止，最推薦的方法！沒有之一！

因?yàn)椋咔槠陂g，免費(fèi)觀看下載！

在二月份左右，中華人民共和國教育部就公布提供了各中小學(xué)教材編寫出版單位的電子版教材免費(fèi)下載鏈接。

原文及鏈接地址： （里面直接有中小學(xué)教材下載地址）
http://www.moe.gov.cn/jyb_xxgk/s5743/s5744/202002/t20200213_420774.html

同時，為了響應(yīng)國家的政策，各出版社也提供了免費(fèi)觀看或下載的方式，詳情可直接登錄出版社官網(wǎng)，官網(wǎng)鏈接就不放了，直接搜得到的。

5、網(wǎng)盤搜索

網(wǎng)盤之神奇，不用多說了吧？但缺點(diǎn)也很明顯，內(nèi)容的質(zhì)量無法判斷。這里提供一個用來搜電子課本評價較好的網(wǎng)站：

1、鳩摩搜索

網(wǎng)址：https://www.jiumodiary.com/

原本想提供兩個的，結(jié)果剛剛發(fā)現(xiàn)第二個已經(jīng)......沒了......

關(guān)注人質(zhì)綜合，帶你了解更多有趣實(shí)用的網(wǎng)站app！

文節(jié)選自霍格沃茲測試開發(fā)學(xué)社內(nèi)部教材

WEB 就是 World Wide Web 的縮寫，稱之為全球廣域網(wǎng)，俗稱 WWW。對于用戶來說其實(shí)就是由多個網(wǎng)頁組合在一起而形成一種服務(wù)。

WEB 前端負(fù)責(zé)展示一個網(wǎng)站當(dāng)中前臺網(wǎng)頁里的內(nèi)容。而網(wǎng)頁是由前端工程師使用 HTML 語言編寫而成的一種文件，它里面會包含文字、圖片、超鏈接、音頻、視頻等等這些內(nèi)容。

HTML 超文本標(biāo)記語言（Hyper Text Markup Language）就是用來描述網(wǎng)頁的一種計算機(jī)語言。

HTML發(fā)展

在互聯(lián)網(wǎng)最初的時候是沒有 HTML 的，只能通過網(wǎng)絡(luò)傳輸最簡單的文字內(nèi)容。隨著用戶的要求越來越多，同時也隨著技術(shù)的不斷發(fā)展，就出現(xiàn)了一種可以表達(dá)文字內(nèi)容之外的語言 HTML1.0。后來又慢慢發(fā)展到了現(xiàn)在的 HTML5，也就是現(xiàn)在常說的 H5。

HTML查看工具

在測試過程中，有時候需要通過工具去查看對應(yīng)的 HTML 代碼。在這里可以用瀏覽器自帶的開發(fā)者工具，打開這個工具的快捷鍵是 F12。

開發(fā)者工具是一個相當(dāng)強(qiáng)大的工具。可以查看修改 HTML，還可以調(diào)試 JS，可以修改 CSS，還可以查看網(wǎng)絡(luò)數(shù)據(jù)，并且還能進(jìn)行性能測試，非常的全能。對于 WEB 測試來說，是一個必須要掌握的工具。

要查看 HTML 源碼，只需要進(jìn)入開發(fā)者工具的 Elements 界面。在這里可以對 WEB 頁面上的元素進(jìn)行定位，并且查看整個 WEB 頁面的 HTML 源碼。

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

基本結(jié)構(gòu)

網(wǎng)頁是通過 HTML 語言來書寫。用 HTML 語言去書寫網(wǎng)頁有一些結(jié)構(gòu)是默認(rèn)必須存在的， 這個結(jié)構(gòu)就叫做網(wǎng)頁（HTML）骨架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML 基本標(biāo)簽

標(biāo)簽

標(biāo)簽就是 HTML 語言的發(fā)明者人為定義好的一些“單詞”，不同的標(biāo)簽代表了不同的功能。

標(biāo)簽有兩種常見的形式：

• 單標(biāo)簽：<標(biāo)簽名 />
• 雙標(biāo)簽：<標(biāo)簽名稱>

常見標(biāo)簽

• <!DOCTYPE html>：向?yàn)g覽器聲明當(dāng)前的文檔是 HTML 類型。
• <html> 與 </html> 之間的文本描述網(wǎng)頁，<html>是網(wǎng)頁當(dāng)中最大的一個標(biāo)簽，稱之為根標(biāo)簽。
• <head> 與 </head> 描述網(wǎng)頁頭部，里面的內(nèi)容是寫給瀏覽器看的。
• <meta charset="UTF-8"> 表示在設(shè)置當(dāng)前網(wǎng)頁的顯示編碼。
• <title> 與 </title> 之間文本為網(wǎng)頁的標(biāo)題，里面的內(nèi)容會在瀏覽器的標(biāo)簽頁上顯示。
• <body> 與 </body> 之間的文本是網(wǎng)頁主體，里面的內(nèi)容會顯示在瀏覽器的空白區(qū)域內(nèi)。
• <div> 與 </div> 之間定義網(wǎng)頁中的一個分隔區(qū)塊或者一個區(qū)域部分。
• <h1> 與 </h1> 之間的文本被顯示為標(biāo)題。
• <p> 與 </p> 之間的文本被顯示為段落。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
    <div>
        <h1>我的第一個網(wǎng)頁</h1>
        <p>網(wǎng)頁中的內(nèi)容</p>
    </div>
</body>
</html>

標(biāo)簽的屬性

HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。

屬性的基本格式為：<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2">

每個標(biāo)簽都可以擁有多個屬性。屬性必須寫在開始標(biāo)簽中，位于標(biāo)簽名的后面。屬性之間不區(qū)分順序。標(biāo)簽名與屬性、屬性與屬性之間使用空格隔開。任何屬性都有默認(rèn)值，省略該屬性表示使用默認(rèn)值。

在 HTML 里，屬性也有很多種，比如首先有全局屬性，全局屬性是所有的標(biāo)簽都可以使用的。然后還有事件屬性，事件大家可以理解為不同的操作。在不同的操作中，也有特殊的屬性可以定義。最后還有各個標(biāo)簽的一些獨(dú)有的屬性。

比如常見的全局屬性有:

• class：規(guī)定元素的類名
• id：規(guī)定元素的唯一 id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
    <div id="first" class="content">網(wǎng)頁中的內(nèi)容</div>
</body>
</html>

來霍格沃茲測試開發(fā)學(xué)社，學(xué)習(xí)更多軟件測試與測試開發(fā)的進(jìn)階技術(shù)，知識點(diǎn)涵蓋web自動化測試 app自動化測試、接口自動化測試、測試框架、性能測試、安全測試、持續(xù)集成/持續(xù)交付/DevOps，測試左移、測試右移、精準(zhǔn)測試、測試平臺開發(fā)、測試管理等內(nèi)容，課程技術(shù)涵蓋bash、pytest、junit、selenium、appium、postman、requests、httprunner、jmeter、jenkins、docker、k8s、elk、sonarqube、jacoco、jvm-sandbox等相關(guān)技術(shù)，全面提升測試開發(fā)工程師的技術(shù)實(shí)力。

獲取更多內(nèi)容：https://qrcode.testing-studio.com/f?from=toutiao&url=https://ceshiren.com/t/topic/16586