整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一棵树最好的时间是六年前，其次是现今。
Thebesttimetoplantatreewas10yearsago.Thesecondbesttimeisnow.
目录
书籍信息
明天我们要读的书是《HTML5与CSS3基础教程》(第9版)，是一本Web后端开发入门级别的书籍。它的作者是(美)乔·卡萨博纳(JoeCasabona)，译者是望以文。
内容提要：本书系统地讲解了HTML5和CSS3基础知识以及实际运用技术，通过大量实例深入浅出地剖析网页制做的方方面面。书中除了介绍了文本、链接、媒体、表格、列表、表单等网页元素，并且介绍了怎样为网页设计布局，添加动态疗效等；另外，还涉及上线、测试、优化和无障碍性等内容。通过学习本书，中级水平的读者即可创建网站，而中中级水平的开发人员也可以快速了解HTML5新元素、CSS3的魔幻疗效、响应式Web设计以及各类最佳实践。
第1章哪些是HTML和CSS1.1哪些是HTML
HTML是超文本标记语言（hypertextmarkuplanguage）的简称。
HTML主要负责处理两件事情：
描述网页是哪些样（结构）的，以及定义这种页面的语义。
哪些是标记语言？
实际上，网站是由好多不同的部份构成的。
各类各样的数据（不止于文本，超文本）——文本、图像、音频视频以及可下载的媒体——都是网站的组成部份。那些文件——网站的每位组成部份——都储存在服务器上，供用户访问。
从服务器访问网站如同订订餐一样。你从喜欢的饭店外卖（通过互联网发送恳求），卧室工作人员（服务器）选择你购买的餐食，之后送货员（再度通过互联网）将食物（网站的文件）送到你家旁边（你的计算机）。
所有那些数据都以人可以理解的形式呈现在浏览器之中。
因为人和计算机读取数据的方法并不相同，因而须要用某种方式来告诉计算机如何以结构化的方法呈现数据（即渲染），进而让人可以理解。
服务器发送给你的不仅原始数据文件，还带有一个或多个用HTML编撰的文件。延续前面订餐的类比，你可以将HTML文件想像成便当盒。它充当容器，因而井井有条地储存各种类型的数据，并以一定的排列方法呈现。
这就是标记的来历。HTML文件就是由一些特殊代码标记的文本文件，正是这种特殊的代码告诉浏览器怎样在屏幕上显示从服务器接收的数据。HTML标记是嵌在文本里的一系列文本标签，用于告诉计算机（主要是指浏览器）网站的外形是如何的（结构是如何的，文本、图片等是怎样摆放的）。
为此，语义十分重要，由于它为这种标签（也成为元素）赋于含意。比如，有一个（表示一级标题）HTML元素，它告诉浏览器和搜索引擎其包含的文本是一个标题——不是通常的标题，而是最重要的标题。
其实你可以将一堆纯文本装入文件中并在浏览器中打开它，但这种文本是没有结构和涵义的。这样的文本将全部一起呈现，没有视觉层次，只是一团文字。
在一个简单的Word文档中，你可以听到几个不同大小的标题、几个有所分隔的段落以及一些格式为宋体或粗体的文本。
这些视觉上的层级结构能让读者快速地理解怎样处理这种文本——哪些地方代表一个新的区块，文本的重点在那里，等等。在Word中，你可以使用“样式”窗格执行这种操作；在网页里则是通过将HTML标签添加到HTML文件来实现的。
1.1.1创建简单的HTML层级结构
（1）打开windows上的记事本，或则Mac上的TextEdit。
（2）输入以下代码：
Bigger Headings are more important（标题越大越重要）
This is smaller（这个小一点）
This is smaller still（这个更小）
This is body copy,and is most common.（这是正文，也是最常见的。）
（3）保存为hierarchy.html（层次体系.html）
（4）双击该文件，在浏览器中打开。疗效如下：
1.1.2当前的版本：HTML5
HTML的当前版本是HTML5。这一版本引入了好多新元素，并简化了好多标记（标签/元素）。
刚才步入HTML的奇妙世界，直接使用HTML5便意味着拥有了大量出众的功能，但是这种功能得到了挺好的支持。同时，要晓得，HTML5是向后兼容的，它的大多数功能是对新旧浏览器都是有效的。
“向后兼容”——
backwardcompatibility(向后兼容)=downwardcompatibility(向上兼容)也就是向过去兼容，即现今设计的软件要考虑旧版本的数据能够不能用。
向后兼容：Windows10要能运行为Windows3.1开发的程序
forwardcompatibility(往前兼容)=upwardcompatibility(向下兼容)也就是向未来兼容，即现今设计的软件要考虑未来能够不能用。
往前兼容：Windows3.1要能运行为Windows10开发的程序
原文链接：
好在浏览器对HTML的版本甚至标记中的错误都相当宽容，因而毋须害怕因为代码错误造成页面完全错乱。
1.2哪些是CSS
假如说HTML提供了网页的结构，这么CSS便提供了款式。
从名子就可以看出，CSS是层叠款式表（cascadingstylesheet）的简称，
用于描述网页的外型——规定颜色、字体、间距等。
HTML使用标记，而CSS则使用规则集（ruleset）。规则集是像如下所示的代码：
h1 {
color: black;
font-size:30px;
}CSS意韵嘉园网站：
CSSZenGarden:TheBeautyofCSSDesign
CSSZenGarden是展示CSS工作原理的一个很棒的网站。可以访问该网站，观看到在保持HTML标记不变的情况下，仅通过修改CSS来改变页面的外型。
尽管浏览器自身一般提供了一些默认款式，
——在浏览器中可见到浏览器自身默认给h1元素设置的款式（useragentstylesheet用户代理款式表）
并且我们可以很容易地使用自己的款式来覆盖它们，也就是使用被叫做款式表（stylesheet）的CSS文件。
当前版本：CSS3
CSS的当前版本是CSS3。随着浏览器和计算机显得越来越强悍，CSS也在不断发展。
使用CSS3，可以拥有动漫功能、更多视觉疗效以及对布局功能（如列和网格）更好的支持。
动漫
加载动漫
布局（大瀑布流）
同HTML相比，CSS3对浏览器支持情况的依赖程度更高。对于HTML，假如浏览器碰到不支持的标签，都会将其当成纯文本来处理，因而其呈现一直是正常的。并且旧的浏览器可能不支持CSS3中较新的功能，这时页面的外型都会遭到较大影响。
CanIuse?网站:
CanIuse...SupporttablesforHTML5,CSS3,etc
后端开发的时侯经常须要检测浏览器的兼容性，(CanIUse)是一个针对后端开发人员订制的一个查询CS、JS在各流行浏览器中的特点和兼容性的网站，可以挺好的保证网页的浏览器兼容性。有了这个工具可以快速地了解到代码在各个浏览器中的疗效。
1.3HTML和CSS是怎样一起工作的
虽然HTML和CSS对网站来说功能定位不同，但它们在学习材料上面常常是合在一起讲解的。
这是由于它们是制做现代网站所必须的两种核心语言。虽然从技术角度看，仅有HTML就可以构成网页，但没有CSS的话，得到的只是一个极其平静的网站，看上去好似Word文档一样。
没有CSS的易迅网页
带有CSS的易迅网页
兴奋人心的时代
因为HTML5与CSS3之间的协同作用，我们生活在一个特别兴奋人心的网站建立时代。
一些功能得到了原生支持，HTML的语义化程度和无障碍性也越来越高。
——扩展
1.概念:
HTML5语义化
是指，合理地使用语义化的标签来创建网页页面结构。【用正确的标签做正确的事】
在阅读本文之前，您应该对html和css，javaScript有基础的了解，推荐使用w3cshool来学习基础知识。
轻量级工具有:
记事本 优点：系统自带，免安装，轻量级，缺点：几乎没有任何额外功能，额，换行除外！
notepadd++
notepad++ 优点:轻量级，启动速度快，语法提示，代码着色，可折叠代码块，代码行提示等等，缺点：插件少，功能还是不够强大！
submit3
Submit:优点：轻量级，界面美观，通过插架功能，几乎是最优秀的轻量级编辑器之一(特别是近几年非常火爆) 缺点：对于国内cms,论坛类程序，混合标签的首末判定还是不够智能，代码提示功能太弱!还有就是配置麻烦，折腾人！
Dreawear:国人喜欢破解版的cs6和cc版，以前的web开发必备，现在已经有点落伍的味道。优点：所见即所得，代码语义分析非常强悍(没有之一)，图形化操作，功能强大。缺点：启动速度慢(重量级编辑器通病)，界面太low，对js的支持不够智能！
Atom:github出品 优点：免费、功能强大、界面也美观，缺点：启动速度慢。
Webstorm:jetbrains出品，本身是作为一款javascript开发功能，被广大中国开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
web前端最基本的组成语言有html,css,javaxript。举个形象的例子来说明他们各自的用途：比如盖房子：html相当于最基础的砖块，组成了房子的基本构成内容；css相当于钢筋框架和涂料，控制了砖块摆放的位置和墙壁的颜色；javascript相当于各种电器的开关和门窗把手，控制了房子的各种执行动作。由此可见，html是网页的基本元素，比如<title>,<h1>,<p>...,css控制了网页元素的样式和外观，比如宽和高width和height,背景颜色background-color:red,外边距margin:10px;javascprit控制了元素的各种执行动作和交互式反应,比如onmousehover事件(鼠标移动到元素上方要发生的事件),onload(网页载入事件要发生的事件)。在互联网技术发展日新月异的今天，我们实际使用的htm事实上基本已经被xhtml技术所替代，css发展出了以移动优先为原则,响应式的bootstrap,Foundation,SemanticUI,Pure,以及国产的AmazeUI,layui等优秀前端框架，javascript发展出了jQuery,Prototype为首的快速，简洁框架，现在的react和angular和vue重量级框架更是如日中天。关于框架介绍和各种实战技巧我们在后续篇章一一道来，我们先来看下他们的发展历史：
HTML没有1.0，因为关于它的初版存在争议，1995年HTML 2.0面世，1997年由国际官方组织W3C推出了HTML 3.2以及HTML 4.0标准，后面W3C(万维网联盟)也渐渐变成Web技术领域的权威，经过漫长的演变，2014年，HTML 5标准最终面世。
HTML 2.0——1995年11月，RFC 1866发布
HTML 3.2——1997年1月14日，W3C发布推荐标准
HTML 4.0——1997年12月18日，W3C发布推荐标准
HTML 4.01——1999年12月24日，W3C发布推荐标准
HTML 5——2014年10月28日，W3C发布推荐标准
CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。
JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了......在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和Java没什么关系。
JavaScript 1.0获得了巨大的成功，Netscape随后在Netscape Navigator 3（网景浏览器）中发布了JavaScript 1.1。之后作为竞争对手的微软在自家的IE3中加入了名为JScript（名称不同是为了避免侵权）的JavaScript实现。而此时市面上意味着有3个不同的JavaScript版本，IE的JScript、网景的JavaScript和ScriptEase中的CEnvi。当时还没有标准规定JavaScript的语法和特性。随着版本不同暴露的问题日益加剧，JavaScript的规范化最终被提上日程。
1997年，以JavaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufactures Association）该协会指定39号技术委员会负责将其进行标准化，TC39来此各大公司以及其他关注脚本语言发展的公司的程序员组成，经过数月的努力完成了ECMA-262——定义了一种名为ECMAScript的新脚本语言的标准。第二年，ISO/IEC（国标标准化组织和国际电工委员会）也采用了ECMAScript作为标准（即ISO/IEC-16262）。
文档结构
元素语法
属性语法
<!DOCTYPE ....>是强制性的
XHTML 文档必须进行 XHTML 文档类型声明（XHTML DOCTYPE declaration）。
<html>, <head>, <title>, 和 <body> 元素也必须存在，并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。
参考网站：w3cshool,csdn
件编程难学？html基础，跟着淼哥学php全栈之路7
感谢小伙伴们的持续关注，小编这几天太忙了，是在抱歉没有及时更新文章，请见谅。
上次我们讲解了web开发的基础知识，也知道了web开发的原理。
这次我们继续讲解web开发语言html。上次课程我们介绍了web开发中html就相当骨骼，css就相当于样式，js就相当于动作。
那么究竟什么才是html呢？究竟如何来学习呢？
?HTML(HyperTextMark-upLanguage)即超文本标记语言
?HTML 是用来描述网页的一种语言。
?HTML 不是一种编程语言，而是一种标记语言
html并不是真正意义上的编程语言，而是由一套标签和内容组成的标记语言。
标记语言是一套标记标签 (markup tag)
?HTML 使用标记标签来描述网页。（换句话说，碰到浏览器认识的标签，就按照这个标签的意义来渲染网页）
?HTML 文档包含了HTML 标签及文本内容。
?HTML 文档也叫做 web 页面
?HTML 文档描述网页
?HTML 文档包含 HTML 标签和纯文本
?HTML 文档也被称为网页
?Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
html是由W3C这个组织维护的。如果不清楚的小伙伴，可以查看我的上一篇文章了解内容。
我将html的学习阶段分三个阶段、初级、中级、高级。（当然高级也不难）o(*￣︶￣*)o
1、html编写方法
?使用手工编写
记事本和各类IED进行编写，文件名存为.htm .html格式。
?使用可视化HTML编辑器
Frontpage、Dreamweaver等所见即所得的编辑器进行编写。
?由web服务器（或称HTTP服务器）一方实时动态的生成
由WEB相关编程语言，动态生成html文件。
有的小伙伴，可能不清楚如何开启电脑显示后缀名。
我的电脑是windows10操作系统。这样就可以在电脑中显示文件的后缀名了。
其中.html就是我们的网页了。
2、html文件命名
?*.htm或*.html
?无空格
?无特殊字符（例如&符号）只可以有”_”，只可以为英文、数字（为什么不能以中文方式命名？）
?区分大小写
?首页文件名默认为：index.htm或index.html 和其他动态语言文件如index.php index.asp index.jsp
为什么不建议中文命名！
1、计算机是老外开发的、操作系统是老外开发，HTML语法也是老外开发的、所以网页文件默认也就只能按老外的命名规则了（用英语）中文需要经过一定的转码才能让浏览器认识，不然根本不认识
2、这个就是中文命名的后果咯。找不到对应的路径下的文档。
The requested URL /demo/qzb/????o????é?￠.html was not found on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
2、 使用Apache或Nginx（web服务器）部署时需要修改配置才能支持中文、外国的软件默认都不支持中文的, 建议不要使用中文作为文件名。
3、html的基本架构
?一个HTML文档是由一系列的元素和标记组成。
<head></head>元素和标签都是一个意思。标签都是成对出现的。当然也有单闭合标签后面讲。
?元素名不区分大小写，HTML用标记来规定元素的属性和它在文件中的位置，HTML超文本文档分文档头和文档体两部分
在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
4、HTML代码格式
<!DOCTYPE html>-------------------------DOCTYPE 声明了文档类型
<html> ------------------------------------文档类型html开始标记
<head> -----------------------------------头部标记
<title>我的第一个标题</title>
</head> ----------------------------------头部结束标记
<body> ---------------------------------文件主体
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body> ----------------------------------文件主体结束
</html> ----------------------------------文档类型html结束标记
<html> 与 </html> 之间的文本描述网页。
<body> 与 </body> 之间的文本是可见的页面内容。
<h1> 与 </h1> 之间的文本被显示为标题。
<p> 与 </p> 之间的文本被显示为段落。
head部分 有点像人的思想，不能被别人看到的，有很多内容是给http协议和电脑看的信息。
body部分，是浏览器具体渲染的内容，可以被别人看到的内容。
5、从html历史来认识html。
现在我们常常习惯于用数字来描述HTML的版本（如：HTML5 这是一个泛称），但是最初的时候我们并没有HTML1，而是1993年IETF团队的一个草案，并不是成型的标准。
两年之后，在1995年HTML有了第二版，即HTML2.0。
有了以上的两个历史版本，HTML的发展可谓突飞猛进。
1996年HTML3.2成为W3C推荐标准。之后在1997年和1999年，作为升级版本的4.0和4.01也相继成为W3C的推荐标准。
在2000年基于HTML4.01的ISO HTML 成为了国际标准化组织和国际电工委员会的标准。
于是被沿用至今，这期间虽然有点小的改动但大方向上终归没有什么变化。
从1993-2000之间短短的7年时间，HTML 语言有着很大的发展，基于诸多人的努力，终于产生了我们现在用的HTML语言。
由于当时html的前端程序员编写html页面杂乱无章，比如<h1>标签有开始，没有结束标签</h1>，于是w3c组织又出了一种新的标记语言打算代替html语言。就是我们知道的XML语言（eXtensible Markup Language，可扩展标记语言）来替代html。
但是w3c组织是在是太天真了。习惯已经养成了，程序员很难改掉自己编写的习惯，所以这个计划没能完成。
于是在html的基础上，来了一个叫xhtml的标记语言，xhtml和html4没有任何区别，只是多了几个小规定。
?XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
?XHTML 的目标是取代 HTML。
?XHTML 与 HTML 4.01 几乎是相同的。
?XHTML 是更严格更纯净的 HTML 版本。
?XHTML 是作为一种 XML 应用被重新定义的 HTML。
?XHTML 是一个 W3C 标准。
?XHTML 是 HTML 与 XML（扩展标记语言）的结合物。
?XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。
XHTML和html的区别？
而xml也改变了自己的命运，后来也被广泛应用，主要作用是传输和存储。（后面会讲到）
w3c这个组织在2004年的时候认为Html已经发展到了巅峰，就一直没有进行更新。
这个时候出现了一种新的技术，叫ajax改变了整个web领域的格局。 WHATWG（Web Hypertext Application Technology Working Group 互联网应用科技工作小组）这个组织，在2004年就说w3c不发布，我自己发布Web Applications 1.0（html5前身）。
于 2007 年被 W3C 接纳， 并成立了新的 HTML 工作团队。
在 2008 年 1 月 22 日，第一份正式草案已公布,预计将在 2010 年 9 月正式 向公众推荐。WHATWG 表示该规范是目前正在进行的工作，仍须多年的努力。
换句话，W3C这个组织看到了WHATWG发布的版本，发现原来html还可以这么玩？不行html一直是由我来维护的。来吧，把这个必须交给我维护.........就有了现在的html5.
而现在的h5是一个泛称，并不单单指的是html的版本。而是指html5+css3+javascript的一个统称。
6、html标签的分类
?标签分两种结构：双闭合标签和单闭合标签
双闭合标签
<标签名 属性名1=值1 属性名2=值2 ..>标签中的内容</标签>
单闭合标签
<标签名 属性1=值1 属性2=值2 ../>
例如：
<input type=text id=“name”/>
7、<!DOCTYPE>声明（DTD）
<!DOCTYPE>是用来声明文档类型的，浏览器只有了解文档的类型，才能正确的显示文档。（声明必须是 HTML 文档的第一行，位于 <html> 标签之前）
从web诞生早期至今，已经发展处多个HTML版本：
对于已经发布了这么多的版本，那么浏览器该如何解释这些版本的html网页呢？到底你的网页是利用哪个版本的标记语言来写的呢？是用html2.0还是html5版本来写的呢？比如我用html3.2版本写了一个很大的项目。如果要修改这个项目要修改好几年。这个时候就体现出DTD的作用了。
就是使用DTD来进行区分的。
我们来看看常用DTD的格式吧。
HTML 顶级元素 可用性 "注册//组织//类型 标签//定义 语言""URL"；
上面是一个html的格式。
例：
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5
<!DOCTYPE html>
看出来区别了吧。以前的DTD在编写的时候，简直是程序员的噩梦。反正我是记不住，有可以记得住的大神吗？也可以站出来指教指教。o(*￣︶￣*)o开玩笑了。
那么以前的DTD到底是什么意思呢？我们来继续分析。
以XHTML的DTD为示例，我们来讲解下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
当然，如果掌握了DTD的语法，我们就知道如何来定义DTD了。具体会在讲解PHP解析XML来详细讲解DTD定义。
DTD显示会有两种模式
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式（怪异模式）中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。简单的说，就是尽可能的显示能显示的东西给用户看。
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现
标准模式与兼容模式（怪异模式）各有什么区别?（了解即可）
1.width不同
在严格模式中 ：width是内容宽度 ，元素真正的宽度=margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
在兼容模式中 ：width则是元素的实际宽度 ，内容宽度=width - ( padding-left + padding-right + border-left-width + border-right-width)
2.兼容模式下可设置百分比的高度和行内元素的高宽
在Standards（标准）模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
在standards（标准）模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
3.用margin:0 auto设置水平居中在IE下会失效 使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决） body{text-align:center};#content{text-align:left}
4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效。
有的小伙伴可能会说。小编你写的这些我看不懂。没关系，等你学了后面的知识在回过头来看，就会懂了。现在就知道有区别就可以了。
今天就写这么多吧。下篇文章继续带领小伙伴来认识html。
小编手写不宜，请小伙伴们多多留言点赞哦。。小编十分感谢。
（注：本内容属于原创，未经许可严禁抄袭。内容真实性已考证，图片来源于网络，图片如有侵权请联系作者删除）
*请认真填写需求信息，我们会在24小时内与您取得联系。
