自学 HTML 和 CSS，有哪些好的教材和网站教程推荐？

信推出小程序后，html5越来越火热了，未来H5方向的专业人才必定水涨船高。

我整理了一些关于html的书籍

响应式Web设计:HTML5和CSS3实战

BenFrain (作者), 王永强 (译者)

推荐指数：★★★★

简介：全书主要是带领读者做一个小网页来写的，其实响应式的东西讲得比较少，大半内容是介绍H5和css3的基础知识。如果同时想了解H5和css3和响应式设计入门，这本书不错。

HTML5移动Web开发实战详解

林珑 (作者)

推荐指数：★★★★☆

简介：本书由浅入深，全面、系统、详尽地介绍了HTML5相关技术和其在移动开发领域的应用。书中提供了大量的代码示例，读者可以通过这些例子理解知识点，也可以直接在开发实战中稍加修改应用这些代码。《HTML5移动Web开发实战详解》涉及面广，从基本原理到实战，再到项目工作流，几乎涉及一个合格的前端开发工程师需要具备的所有重要知识。

疯狂HTML 5/CSS3/JavaScript讲义

李刚 (作者)

推荐指数：★★★★

简介：这是一本全面介绍HTML 5、CSS 3和JavaScript前端开发技术的图书，系统地介绍了HTML 5常用的元素和属性、HTML5的表单元素和属性、HTML 5的绘图支持、HTML5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画功能等。除此之外，《疯狂HTML 5/CSS 3/JavaScript讲义》还系统地介绍了JavaScript编程知识，包括JavaScript基本语法、DOM编程，以及HTML 5新增的本地存储、离线应用、JavaScript多线程、客户端通信支持、WebSocket编程等。

HTML5触摸界面设计与开发

伍兹 (StephenWoods) (作者), 覃介右谷岳 (译者)

推荐指数：★★★★☆

简介：《HTML5触摸界面设计与开发》专注于触摸界面的开发，内容的结构和优化网站的思路大概一致。上半部分涵盖了能使各类网站，特别是移动网站变快的基本概念。书的后半部分是专门讲触摸界面的，特别是尽可能地让它们更平稳和快速。本书适合具有一定经验的Web开发者阅读参考。

HTML5与CSS3权威指南(上下册)(第3版)

陆凌牛(作者)

推荐指数：★★★★☆

简介：本书分为上下两册。上册全面系统地讲解了HTML5相关的技术，以HTML5对现有Web应用产生的变革开篇;下册全面系统地讲解了CSS3相关的技术，以CSS3的功能和模块结构开篇，顺序讲解了各种选择器及其使用、文字与字体的相关样式、盒相关样式、背景与边框相关样式、布局相关样式、变形处理、动画、颜色相关样式等内容。

HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站

陈婉凌著

推荐指数：★★★★☆

简介：这是目前唯一一本真正的HTML5 App开发教材，目前已在复旦、北大、西安交大、北京理工等五十多所高校投入教学使用。它的特点是由浅入深、由易到难，将开发技巧、和开发工具结合在一起阐述，同时选取了多个商业项目APP的实战案例进行要点讲解，通俗易懂。

和上面推荐的几本书不同之处在于，本书是面向应用型本科和高等职业院校设计的标准化教材，并经过官方权威认证，且该教材能与国家及国际权威认证考试无缝对接。

html和css都是web前端的基础，在这里，就给大家推荐几个新手小白必去的网站！

1、w3school

http://www.w3school.com.cn

用来查找一些标签的属性,每一个刚学习前端的伙伴,都会用到这个网站.

2.csdn

CSDN上可以获得一些不错的资讯,也可以找到很多需要的资料,也是一个交流的平台,有些不懂得问题也可以找到人去解答.

3.开源中国

获取到许多项目案例的源码,获得最新web前端发展的一些动向,资讯.

多年开发老码农福利赠送：网页制作，网站开发，web前端开发，从最零基础开始的的HTML+CSS+JavaScript。jQuery，Vue、React、Ajax，node，angular框架等到移动端小程序项目实战【视频＋工具＋电子书＋系统路线图】都有整理，需要的伙伴可以私信我，发送“前端”等3秒后就可以获取领取地址，送给每一位对编程感兴趣的小伙伴

为你强力推荐经典css书籍

1.精通CSS：高级Web标准解决方案（第2版）(Amazon第一CSS畅销书全新改版)

本书将最有用的css书籍技术汇总在一起，还总结了css设计中的最佳实践，讨论了解决各种实际问题的技术，填补了一直以来css图书的空白。

2.精通CSS+DIV 网页样式与布局

本书系统地讲解了css层叠样式表的基础理论和实际运用技术，通过大量实例对css进行深入浅出的分析，主要包括css的基本语法和概念，设置文字、图片、背景、表格、表单和菜单等网页元素的方法，以及css滤镜的使用。

3. CSS权威指南(第三版)

最新版《css权威指南》css书籍经过全面更新，涵盖了internet explorer 7，详细介绍了各个css属性以及属性之间的相互作用，并指导你如何避免一些常见的错误。

希望对你有帮助，下一个优秀的前端工程师就是你！

在前面：

在平常的学习中，我们已经习惯了纸质课本。但当哪一天，书没带在身边，或者需要预习下学期课程时，电子课本也不失为一种选择。那么，接下来，给大家提供几个好的电子课本网站。

1、易学啦

网址：https://www.yixuela.com/

易学啦是一个为中小学生提供免费的学习资料、方法的网站，里面不仅有电子课本，还有各种笔记、视频讲解等。资源内容涵盖小学、初中、高中各个出版社的内容。下图可以看到，易学啦涵盖了多达十几个出版社的内容。（可直接免费观看，非会员下载受限）

里面不仅有电子课本，还有各种笔记、视频讲解等

2、好多电子课本网

网址：http://www.haoduoyun.cc/

一个主要提供小学到初中课本教材的网站，包括人教版、译林版、外研版等以及文言文、古诗文内容，教材的内容主要是小学语文和英语，中学语文、英语、历史、道德，高中古诗文等，支持在线朗读听课，网址涵盖内容相对较少。

3、课件站

网址：http://www.kjzhan.com/

内容还是很全的，小学、初中、高中的内容基本都可以找到，不仅是课本，还有课件啊、视频资料等，但网站页面比较乱，虽然可以免费下载，但要关注才能获得下载方法。

4、教育部网站/各出版社网站

目前为止，最推荐的方法！没有之一！

因为，疫情期间，免费观看下载！

在二月份左右，中华人民共和国教育部就公布提供了各中小学教材编写出版单位的电子版教材免费下载链接。

原文及链接地址：（里面直接有中小学教材下载地址）
http://www.moe.gov.cn/jyb_xxgk/s5743/s5744/202002/t20200213_420774.html

同时，为了响应国家的政策，各出版社也提供了免费观看或下载的方式，详情可直接登录出版社官网，官网链接就不放了，直接搜得到的。

5、网盘搜索

网盘之神奇，不用多说了吧？但缺点也很明显，内容的质量无法判断。这里提供一个用来搜电子课本评价较好的网站：

1、鸠摩搜索

网址：https://www.jiumodiary.com/

原本想提供两个的，结果刚刚发现第二个已经......没了......

关注人质综合，带你了解更多有趣实用的网站app！

文节选自霍格沃兹测试开发学社内部教材

WEB 就是 World Wide Web 的缩写，称之为全球广域网，俗称 WWW。对于用户来说其实就是由多个网页组合在一起而形成一种服务。

WEB 前端负责展示一个网站当中前台网页里的内容。而网页是由前端工程师使用 HTML 语言编写而成的一种文件，它里面会包含文字、图片、超链接、音频、视频等等这些内容。

HTML 超文本标记语言（Hyper Text Markup Language）就是用来描述网页的一种计算机语言。

HTML发展

在互联网最初的时候是没有 HTML 的，只能通过网络传输最简单的文字内容。随着用户的要求越来越多，同时也随着技术的不断发展，就出现了一种可以表达文字内容之外的语言 HTML1.0。后来又慢慢发展到了现在的 HTML5，也就是现在常说的 H5。

HTML查看工具

在测试过程中，有时候需要通过工具去查看对应的 HTML 代码。在这里可以用浏览器自带的开发者工具，打开这个工具的快捷键是 F12。

开发者工具是一个相当强大的工具。可以查看修改 HTML，还可以调试 JS，可以修改 CSS，还可以查看网络数据，并且还能进行性能测试，非常的全能。对于 WEB 测试来说，是一个必须要掌握的工具。

要查看 HTML 源码，只需要进入开发者工具的 Elements 界面。在这里可以对 WEB 页面上的元素进行定位，并且查看整个 WEB 页面的 HTML 源码。

HTML基本结构

基本结构

网页是通过 HTML 语言来书写。用 HTML 语言去书写网页有一些结构是默认必须存在的，这个结构就叫做网页（HTML）骨架。

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

</body>
</html>

HTML 基本标签

常见标签

<!DOCTYPE html>：向浏览器声明当前的文档是 HTML 类型。
<html> 与 </html> 之间的文本描述网页，<html>是网页当中最大的一个标签，称之为根标签。
<head> 与 </head> 描述网页头部，里面的内容是写给浏览器看的。
<meta charset="UTF-8"> 表示在设置当前网页的显示编码。
<title> 与 </title> 之间文本为网页的标题，里面的内容会在浏览器的标签页上显示。
<body> 与 </body> 之间的文本是网页主体，里面的内容会显示在浏览器的空白区域内。
<div> 与 </div> 之间定义网页中的一个分隔区块或者一个区域部分。
<h1> 与 </h1> 之间的文本被显示为标题。
<p> 与 </p> 之间的文本被显示为段落。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <div>
        <h1>我的第一个网页</h1>
        <p>网页中的内容</p>
    </div>
</body>
</html>

标签的属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。

属性的基本格式为：<标签名属性1="属性值1" 属性2="属性值2">

每个标签都可以拥有多个属性。属性必须写在开始标签中，位于标签名的后面。属性之间不区分顺序。标签名与属性、属性与属性之间使用空格隔开。任何属性都有默认值，省略该属性表示使用默认值。

在 HTML 里，属性也有很多种，比如首先有全局属性，全局属性是所有的标签都可以使用的。然后还有事件属性，事件大家可以理解为不同的操作。在不同的操作中，也有特殊的属性可以定义。最后还有各个标签的一些独有的属性。

比如常见的全局属性有:

class：规定元素的类名
id：规定元素的唯一 id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <div id="first" class="content">网页中的内容</div>
</body>
</html>

来霍格沃兹测试开发学社，学习更多软件测试与测试开发的进阶技术，知识点涵盖web自动化测试 app自动化测试、接口自动化测试、测试框架、性能测试、安全测试、持续集成/持续交付/DevOps，测试左移、测试右移、精准测试、测试平台开发、测试管理等内容，课程技术涵盖bash、pytest、junit、selenium、appium、postman、requests、httprunner、jmeter、jenkins、docker、k8s、elk、sonarqube、jacoco、jvm-sandbox等相关技术，全面提升测试开发工程师的技术实力。

获取更多内容：https://qrcode.testing-studio.com/f?from=toutiao&url=https://ceshiren.com/t/topic/16586

在线咨询

上一篇：HTML 颜色
下一篇：使用CSS获取笔记本纸张效果

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

自学 HTML 和 CSS，有哪些好的教材和网站教程推荐？

1、易学啦

2、好多电子课本网

3、课件站

4、教育部网站/各出版社网站

5、网盘搜索

HTML发展

HTML查看工具

HTML基本结构

基本结构

HTML 基本标签

标签

常见标签

标签的属性

您的项目需求