第08章 HTML5和CSS3

最新推荐文章于 2024-11-01 19:34:36 发布

不睡觉的程序猿

最新推荐文章于 2024-11-01 19:34:36 发布

阅读量753

点赞数 17

分类专栏： HTML 文章标签： html5 css3

本文链接：https://blog.csdn.net/richieandndsc/article/details/137024546

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

万维网联盟（W3C）创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。HTML和CSS的标准就是由其来制定的。

HTML5是从HTML4的基础上发展而来的，是最新的 HTML 标准。HTML5 是专门为承载丰富的 web 内容而设计的，拥有新的标签支持图形和多媒体内容的呈现。HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机等等）之上运行。

对于CSS来讲，最新的标准就是CSS3了。标准化的CSS3有利于我们的Web前端开发，但是不同的浏览器厂商对CSS3的支持却有一些差距，这也让跨浏览器开发变得复杂。目前，市面上使用比较多的浏览器包括，Google Chrome浏览器，Microsoft IE浏览器，Microsoft Edge浏览器，腾讯QQ浏览器，搜狗浏览器，火狐浏览器，360安全浏览器，苹果Safari浏览器等等。我们做前端Web开发的时候，尽量使用这些浏览器全部测试一下我们写的网页代码。

Web前端开发的困难点，除了众多浏览器兼容问题之外，还有一个屏幕分辨率的问题。也就是说，屏幕尺寸不一样的话，对于标签的位置和大小也会受到影响。一般情况下，PC端的网页设计，我们都是将网页内容固定一个宽度（例如980像素），高度则根据内容进行自适应。而对于移动端网页设计而言，我们都是HTML5版本，HTML5最大的特点就是适配多种不同的设备浏览器，其中就包括让网页自适应屏幕的尺寸。当然，现在的大部分PC端浏览器也支持HTML5了，因此，我们可以统一使用HTML5来解决PC端和移动端的兼容问题和自适应问题。

首先，我们先看看HTML5文档结构是怎样的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>内容</body>
</html>

我们发现Html5的文档非常简洁啦。

接下来，我们来简单介绍一下H5新增加的特性。

1. HTML5 的<canvas>画布标签用于图形的绘制。<canvas>标签本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 脚本来完成。

2. HTML5 的SVG定义为可缩放矢量图形，它是一种使用 XML 描述 2D 图形的语言。SVG 图像可在任何的分辨率下被高质量地展示，而不会像普通图片放大后产生模糊的问题。

3. HTML5 使用地理定位，使用 JavaScript 脚本调用 getCurrentPosition() 方法来获得用户的位置。这个一般在手机浏览器中支持的，这个本质还是通过GPS获取的位置信息。而PC端浏览器则是通过IP地址定位的，这些信息则是由电信，移动等运营商或者第三方的服务商提供的位置数据。

4. HTML5的 <video> 标签提供了播放视频文件的功能。
例如，我们常见的mp4格式的视频文件，之前我们都是通过Flash进行视频播放。

<video width="800" height="600">
    <source src="temp.mp4" type="video/mp4">
</video>

5. HTML5 的 <audio> 标签提供了播放音频文件的功能。
例如，我们常见的mp3格式的音频文件。

<audio>
    <source src="temp.mp3" type="audio/mpeg">
</audio>

6. HTML5中新的语义标签：<header>, <nav>, <section>, <article>, <aside>, <footer>。
这些新增加的标签并没有特殊的含义，只是根据它的名称放置到页面的指定位置而已，起到一个快速布局的作用。如下图所示：

7. HTML5增加了多个新的Input输入框的 type 类型。

<input type="color" /> 颜色输入框
<input type="email" /> 电子邮件输入框
<input type="number" /> 只能输入数字
<input type="range" /> 滑块样式的输入框
<input type="search" /> 搜索输入框
<input type="tel" /> 电话输入框
<input type="url" /> 地址输入框

<input type="date" /> 日期输入框，可以获取年月日
<input type="datetime" /> 日期时间输入框，可以获取年月日时分秒
<input type="datetime-local" /> 本地时间输入框，可以获取年月日时分秒
<input type="month" /> 获取年月格式的日期
<input type="time" /> 获取时分秒格式的时间
<input type="week" /> 第几周输入框

大家可以自己试一试上面的标签，但是不一定被你的浏览器支持，有些标签需要在手机浏览器才能看出效果。

8. HTML5 增加了多个新的<input>输入框的标签属性。

autofocus 属性是一个布尔类型。autofocus 属性规定在页面加载时，input输入框会自动地获得焦点，方便我们直接录入数据。
required 属性是也是一个布尔类型。required 属性规定必须在提交之前填写输入框，也就是input输入框的value值不能为空。
placeholder 属性提供一种提示（hint）文本。这个提示文本会显示在输入框里面，当用户点击输入框的时候，这个提示文本就会消失。
pattern 属性描述了一个正则表达式用于验证 input输入框的值。pattern 属性适用于以下类型的<input>标签: text, search, url, tel, email 和 password。它的目的主要用来检查用户的输入是否符合正则表达式的验证规则。
formaction 属性用于描述表单提交的URL地址，该属性会覆盖<form>标签中的action属性。
formmethod 属性定义表单提交的方式，formmethod 属性覆盖了<form>标签的method属性。

<form action="abc.jsp" method="get">
    <input type="submit" value="提交" />
    <input type="submit" formaction="abc2.jsp" formmethod="post" value="提交2" />
</form>

上面的代码中，如果我们点击“提交”按钮，就会将表单数据提交到“abc.jsp”服务端。但是当我们点击“提交2”按钮的时候，则会将表单提交到“abc2.jsp”服务端。因为，我们使用了formaction和formmethod改变了原来form表单的提交方式。

9. HTML5的Web存储。之前的本地存储使用的是cookie技术，新的Web存储可以存储大量的数据，数据以键/值对存在，这些数据只允许该网页访问使用。Web存储数据的两个对象为：

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一浏览器窗口(或标签页)的数据，在关闭浏览器窗口或标签页之后将会删除这些数据。

需要注意的是，在使用 web 存储前，应检查浏览器是否支持 localStorage 和 sessionStorage这两个对象。如果不支持的话，还得使用cookie技术进行存储。

10. HTML5的WebSocket。它类似于Java的Socket通信，是一种持久性连接。WebSocket使得浏览器和服务器之间的数据交换变得更加简单，允许服务端主动向浏览器发送数据。现在，很多网站为了实现推送技术（服务器端主动发送消息给客户端浏览器），所用的技术都是 Ajax 轮询。轮询就是在特定的的时间间隔（如每5秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的方式很明显的缺点，就是会给我们的服务器端带来很大的压力。HTML5 定义的 WebSocket 连接，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

关于HTML5的更多内容，我们不再详细介绍了。

接下来，我们介绍CSS3，现在新的浏览器已经都支持 CSS3 属性。首先，我们介绍 CSS3 的边框，在 CSS3 中 border-radius 属性被用于创建圆角边框。我们创建一个“08_css3.html”的HTM5结构的文档，我们依然使用Adobe Dreamweaver 的菜单栏，点击“文件”->“新建”打开对话框

大家注意到红色线框指示的地方，也就是“文档类型”一栏，他是一个下拉框，默认就是我们的“XHTML 1.0”版本，我们需要点击它

然后选择“HTML5”这个版本，如下所示

其他设置还是我们之前的，最后点击右下角的“创建”按钮。

接下来，我们向<body>标签中添加如下代码

<style type="text/css">
.box { width:200px; height:200px; border:1px solid red; border-radius:25px; }
</style>

<div class="box"></div>

我们定义了一个<div>，宽和高都是200像素，并且四周是红色的1像素的实线边框。此时的边框是一个矩形，因为<div>标签呈现的就是一个矩形。但是当我们使用 “border-radius:25px;” 的时候，就可以让四个角变得圆滑，也就是圆角。这个圆滑的程度由我们定义的像素值来决定，像素值越大，圆角度越高。效果如下：

试想一下，如果这个圆角的圆滑程度越来越大，一直达到矩形的边长，会是什么效果呢？也就是将圆角改为“border-radius:200px;”，效果如下：

我们发现，它变成了一个圆形。当然，这已经是极限了，如果将圆角值改大，它依然是一个圆形。有时候，我们为了修改方便，经常这样写：border-radius:50%; 不管多大都是圆形。

接下来，我们说一说阴影。

CSS3 中的 box-shadow 属性被用来添加阴影，box-shadow语法：

box-shadow: offset-x offset-y blur spread color outset;
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];

offset-x：必需，取值正负都可。offset-x水平阴影的位置。
offset-y：必需，取值正负都可。offset-y垂直阴影的位置。

blur: 可选，只能取正值，阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。
spread：可选，取值正负都可，正值，阴影四周扩展扩大，负值阴影四周扩展缩小。
color: 可选，阴影的颜色，如果不设置，浏览器会取默认颜色，通常是黑色。
outset：可选，默认外部投影，inset内部投影。

这个box-shadow使用方式比较难理解，我们举例说明

<style type="text/css">
.bs { width:200px; height:200px; box-shadow:5px 5px 0px 0px #FF0000; }
</style>

<div class="bs"></div>

首先，我们发现它不是阴影，而是一个红色实线。其次，矩形有两条边没有阴影效果。因为默认是外部阴影，也就是<div>标签向外显示阴影效果。当我们设置x/y都是正值的时候，他们分别向x轴正方向（右边）和y轴正方向（下边）显示阴影效果。那么我们可以想象一下，矩形的上边缘和左边缘如果沿着x/y轴正方向（矩形内部）就无法显示阴影（外部阴影）。那怎么办呢？就是将 x/y 偏移值改成负数，就能显示四周阴影啦。代码如下所示：

.bs { width:200px; height:200px; box-shadow:5px 5px 0px 0px #FF0000, -5px -5px 0px 0px #FF0000; }

注意，我们写了两个阴影，一个是x/y正值，一个是x/y负值。接下来，继续修改blur数值。blur是模糊半径。我们将两个blur都调整为10px，如下所示：

.bs { width:200px; height:200px; box-shadow:5px 5px 10px 0px #FF0000, -5px -5px 10px 0px #FF0000; }

我们在浏览器中查看效果

一般情况下，我们都是根据背景色来设置阴影效果。

接下来，我们说说文本的阴影效果。CSS3 中使用 text-shadow 属性制作文本阴影。我们可以指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

text-shadow: offset-x | offset-y | blur | color

offset-x	必需。水平阴影的位置。允许负值。
offset-y	必需。垂直阴影的位置。允许负值。
blur		可选。模糊的距离。
color	    可选。阴影的颜色。

接下来，我们就来随意使用一下

<style type="text/css">
.fs { font-size:18px; color:#000; text-shadow: 2px 2px 2px #FF0000; }
</style>

<p class="fs">阴影效果的文字</p>

我们设置黑色字体，红色阴影，然后在浏览器中查看效果

接下来，我们介绍渐变。CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

<style type="text/css">
.lg { width:200px; height:200px; background: linear-gradient(to bottom, #333333, #cccccc); }
</style>

<div class="lg"></div>

我们定义了一个由颜色333333到cccccc的颜色渐变，方向是由上到下，效果如下：

当然，我们还可以从左到右：to right

我们也可以试一试径向渐变，代码如下

<style type="text/css">
.lg2 { width:200px; height:200px; background: radial-gradient(#333333, #cccccc); }
</style>

<div class="lg2"></div>

接下来，我们讲解一下 @font-face 。使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用 CSS3，网页设计师可以使用自定义的的任何字体。我们只需简单的将自定义的字体文件包含在网站中，它会自动下载给需要的用户。在 @font-face 规则中，我们必须首先定义字体文件和名称。

<style type="text/css">

@font-face { font-family: myFont; src: url(iconfont.woff); }

</style>

我们定义了一个名称为 “myFont” 的字体，使用的字体文件是 “iconfont.woff”。这个文件里面保存了8个矢量图标，该图标来源于“阿里巴巴矢量图标库”，网址为：https://www.iconfont.cn/ 。它的原理就是将图标制作成字体文件，然后按照字体的方式来使用。这样做的好处，不仅图标体积变小，而且放大后不会模糊，这就是矢量图标的优点。它如何使用呢？这里我们下载了“天猫图标库”里面的前8个矢量图标，如下所示：

上面显示了每个图片的使用方式，也就是下面的 “” ，它就代表了“小雨伞”的图标。接下来，我们将使用这些字体文件。

<style type="text/css">
/* 定义字体 */
@font-face { font-family: myFont; src: url(iconfont.woff); }
/* 使用字体 */
li { list-style:none; font-family:myFont; }
</style>

<ul>
    <li><span>&#xe600;</span><span>退货保障</span></li>
    <li><span>&#xe601;</span><span>活动优先</span></li>
    <li><span>&#xe602;</span><span>天猫派对</span></li>
    <li><span>&#xe603;</span><span>生日礼物</span></li>
    <li><span>&#xe604;</span><span>急速退款</span></li>
    <li><span>&#xe605;</span><span>客服优先</span></li>
    <li><span>&#xe606;</span><span>超值积分</span></li>
    <li><span>&#xe607;</span><span>天猫好券</span></li>
</ul>

我们在 li 标签中使用该字体，也就是说我们只要使用 “”，就可以得到小雨伞的图标了。至于为什么是“”来代表小雨伞的图标，它是字体文件中定义的，这个不需要我们深入了解。

接下来我们介绍CSS3 过渡 transition，它是从一种样式逐渐改变为另一种的效果。要实现这一点，不仅要指定要添加效果的CSS属性，还要指定效果的持续时间。

<style type="text/css">
.ts { width:100px; height:100px; background:red; transition:width 2s; }
.ts:hover { width:200px; }
</style>

<div class="ts"></div>

上述代码中“:hover”表示鼠标在标签上的样式效果。我们将鼠标放置到<div>上面的时候，它就会从100像素宽增加到200像素的宽，这个过程会在2秒钟内容完成。当鼠标移开后，又恢复之前的宽度。

如果我们同时变化它的宽度和高度的化，就等同于修改它的大小尺寸啦。这会帮助我们实现一些简单的动画效果。

接下来我们说说 CSS3 盒式结构大小。CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。不使用 CSS3 box-sizing 属性，也就是默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度

如果使用了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 计算中。我们还是使用案例演示一下。

<style type="text/css">
.div1 { width:100px;height:100px;padding:50px;background-color:green; }
.div2 { width:100px;height:100px;padding:50px;background-color:blue;box-sizing:border-box; }
</style>

<div class="div1"></div>
<div class="div2"></div>

默认情况下，我们的左右两边的padding是累加到div的宽高里面的，因此div1的实际宽高应该是200*200