H5+Css3学习内容

目录

第一章：响应式设计基础

第二章：HTML5标签

---

第一章：响应式设计基础

     随着技术的发展和移动网站的普及，同时也推动着网站设计师要去重新思考他们的工作成果将如何在不同设备上呈现。想一想，你每天在手机和电脑上浏览网页的时间哪个更长？

1.1 什么是响应式设计

      简单说，响应式网站设计是一种允许设计和代码响应设备屏幕大小的方法。这意味着无论你使用的是4英寸安卓手机，iPad mini，还是40英寸的影院级显示器，你都将获得最优秀的浏览体验。

       最好的响应式网站基本上使用流体网格、自适应图像和 CSS 来改变网站的设计，并根据浏览器的宽度进行渲染。对于设计者来说，最终目标是在不同设备与平台实现无缝定制网站设计的用户界面UI 和用 户体验UX 。

1.2 响应式设计的重要性

       如果我们为一个 网站设计 、开发无数个版本适应每一种设备，这个过程不仅费时而且费钱，还会使网站无法使用未来先进的技术变革，而且几乎无法维护。而响应式设计就是网站设计有效解决方案。

      

响应式网站设计 的关键，在于了解你的受众以及他们用来浏览网站的设备。现在网站的流量有多少来自PC，多少来自平板，多少来自手机？美国网站的大约 56% 的流量来自移动设备。现在全球大约有 26 亿智能手机用户，而到2020 年，这个数字预计可达到 60 亿。移动设计将越来越重要。

        

      为不同设备设计网站是至关重要的，但涉及到不同的网络浏览器就变得更加复杂了。每个大型网络浏览器都有自己的移动版本，以不同方式渲染网站。另外，每个浏览器还有不同的版本– 毕竟你不能期待每个人都使用最新版。因此，设计适用于不同版本的浏览器也是非常重要的。

       当然也不用过于担心，对于业内人士来说，调整设计以适应不同版本浏览器和不同硬件设备是一场持续的战争。最好的答案就是，在尽可能多的设备上进行测试（并聘请非常棒的开发人员）

我应该按照什么尺寸设计网站？

      

      并不存在所谓的 “ 标准网站尺寸 ” 。设备的种类那么多，型号版本和屏幕分辨率一直在变。而每个网站吸引的用户所使用的设备有各有不同。比如，你很可能（在厨房里做饭时）选择在移动设备上查看菜谱，而（在想要用Photoshop做点什么时）选择在 PC 上搜索 PS 教程。

       你借助 Google Analytics 了解哪些浏览器和网页大小最适合你的网站。而面对浏览器大小和设备的无限组合，你到底应该怎么进行响应式设计呢？

尝试设计至少 3 种布局

        响应式网站设计应该针对不同浏览器宽度设计至少三种布局。下面的数字仅限举例，并不是固定标准。

 小： 768px 以下。大部分手机适用。

· 中： 768px – 992px 。大部分平板设备、部分大屏手机、部分小型上网本适用。

· 大：大于 992px 。大部分 PC 适用。

     

      这些布局中的每一个都应包含相同的文本和图形元素，但每个布局都应设计为根据用户的设备以最佳方式显示内容。缩小页面以适应小屏幕会降低内容的易读性，但如果你能将内容相应地缩小，并变成一栏，那么内容将更易于阅读。

1.3 HTML5 介绍

1.3.1 什么是 HTML5

HTML5 是对 HTML 标准的第五次修订版本， 2014 年 10 月由万维网联盟（ W3C ）完成标准制定。 HTML5 的设计目的是为了在移动设备上支持多媒体。

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01 的上一个版本诞生于 1999 年。自从那以后， Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

1.3.2 HTML 发展历程

HTML1.0 实际上应该没有 HTML1 ，所谓的 HTML1 是 1993 年 IETF( 互联网工作任务组）团队的一个

工作草案，并不是成型的标准

HTML2.0 1995 年 11 月作为 RFC1866 发布，于 2000 年 6 月 RFC2854 发布之后宣布过时

HTML3.2 1996 年 W3C 撰写新规范，并于 1997 年 1 月推出 HTML3.2 。

HTML4.0 与 HTML4.0.1

1997 年 12 月 18 日成为 W3C 的推荐标准。

1999 年 12 月 24 日成为 W3C 的推荐标准。其中只做了细微的调整。

2000 年 5 月 15 日发布，基于 HTML4.01 的 ISO HTML 成为了国际标准化组织和国际电工委员会的标

准，一直被沿用至今，虽然有小的改动，但大体方向没有四年大变化。

XHTML1.0

XHTML 指可扩展超文本标签语言，

是 HTML 与 XML （扩展标记语言）的结合物，包含了所有与

XML 语法结合的 HTML 4.01 元素。

2000 年 1 月 26 日发布，是 W3C 的推荐标准，后于 2002 年 8 月 1 日重新发布

XHTML1.1

2001 年 5 月 31 日发布。 XHTML1.0 是 XML 风格的 HTML4.01 。 XHTML1.1 主要是初步进行了模块

化。

XHTML2.0

XHTML 2 是一种通用的标记语言。但不及 HTML5 的冲击。 XHTML 2 的开发工作于 2009 年底停止，

而资源将用于推动 HTML 5 的进展。

HTML5.0

HTML5 本身并非技术，而是标准。它所使用的技术早已很成熟，国内通常所说的 html5 实际上是

html 与 css3 及 JavaScript 和 api 等的一个组合，大概可以用以下公式说明：

HTML5≈HTML+CSS3+JavaScript+API.

2012 年中期， W3C 推出了一个新的编辑团队，负责创建 HTML 5.0 推荐标准，并为下一个 HTML 版

本准备工作草案

WHATWG 指 Web Hypertext Application Technology Working Group 。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0 。在 2006 年，双方决定进行

合作，来创建一个新版本的 HTML 。

1.4 HTML 新特性

1. 语义化和结构

HTML5 提供了新的元素来创建更好的页面结构

2. 智能表单

表单 是实现用户与页面后台交互主要组成部分， HTML5 在表单的设计上功能更加强大。 input 类型

和属性的多样性大大地增强了 HTML 可表达的表单形式，再加上新增加的一些表单标签，使得原本

需要 JavaScript 来实现的控件，可以直接使用 HTML5 的表单来实现；一些如内容提示、焦点处理、

数据验证等功能，也可以通过 HTML5 的智能表单属性标签来完成。

3. 多媒体 HTML5 最大特色之一就是支持音频视频，在通过增加了、

两个标签来实现对多媒体中的音频、视频使用的支持，只要在 Web 网页中嵌入这两个标签，而无

需第三方插件（如 Flash ）就可以实现音视频的播放功能

4. 绘图画布 (canvas)

HTML5 的 canvas 元素可以实现画布功能，该元素通过自带的 API 结合使用 JavaScript 脚本语言在网

页上绘制图形和处理， HTML5 的 canvas 元素使得浏览器无需 Flash 或 Silverlight 等插件就能直接显

示图形或动画图像。

5. 数据存储

HTML5 较之传统的数据存储有自已的存储方式，允许在客户端实现较大规模的数据存储

6. 地理定位

现今移动网络备受青睐，用户对实时定位的应用越来，要求也越来越高。 HTML5 通过引入

Geolocation 的 API 可以通过 GPS 或网络信息实现用户的定位功能，定位更加准确、灵活。通过

HTML5 进行定位，除了可以定位自己的位置，还可以在他人对你开放信息的情况下获得他人的定

位信息。

1.5 浏览器对 HTML5 的支持

现代的浏览器都支持 HTML5 。

此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。

第二章：HTML5标签

1.1 废弃的标签

acronym

applet

basefont

big

center

dir

font

frame

frameset

noframes

strike

1.2 新增标签

1.2.1 语义和结构标签

a. 注释注解标签

<ruby>
     英雄
<rt>ying xiong</rt> 
</ruby>

b. 描述文档细节

<details> 
      <!-- 定义标题的 --> 
      <summary>中国医生</summary> 
      本片根据2020年抗击新冠肺炎疫情真实事件改编。讲述中国各地的白衣逆行者在这场浩大战役中纷 纷挺身而出、争分夺秒、浴血奋战在武汉前线，不顾自身安危守护国人生命安全的震撼故事 
</details>

c. 进度条

<progress value="0" max="100" id="pro">请升级浏览器</progress>
    已完成<span id="res">0%</span>
    <script>
       setInterval(function(){ 
            var pro=document.getElementById('pro') 
            var res=document.getElementById('res') 
            pro.value ++ 
            // proValue ++; 
            res.innerHTML=(pro.value / 100 * 100) + '%' 
            if(pro.value==100){ 
                      alert('上传完成') 
                      clearInterval(t) 
                 } 
          },500)
     </script>

d. 导航链接标签 nav

<nav>
      <a href="#">首页</a> 
      <a href="#">关于我们</a> 
      <a href="#">新闻资讯</a> 
      <a href="#">联系我们</a>
</nav>

e. 布局结构标签

header 定义文档的页眉部分

main 定义网页的主要内容部分

section 定义文档中的区段

article 文章内容部分

aside 定义其所处内容之外的内容，个人理解 侧边栏

footer 文档中的页脚部分

f. 内嵌框架标签 iframe src 定义显示文档的 url 地址

frameborder 是否显示框架周围的边框 0 表示不显示 1 表示不显示

marginHeight 定义顶部和底部的边距

marginWidth 定义左侧和右侧的边距

scrolling 是否显示滚动条 yes 显示 | no 不显示 | auto 自动

1.2.2 媒体标签

a. 视频标签 video

controls 是否显示播放面板

autoplay 自动播放 由于浏览器会拦截自动播放声音的视频，因此需要加上 muted 属性

muted 静音输出

poster 在视频为播放前，显示的图像 ( 封面 )

loop 设置视频循环播放

<!---->
<video src="sucai/tianwen.mp4" controls autoplay muted>
       浏览器不支持该标签，请升级浏览器
</video>
<!--通过source标签引入视频资源-->
<video controls loop poster="sucai/shanheling.jpg">
        浏览器不支持该标签，请升级浏览器
        <source src="sucai/tianwen.mp4" type="video/mp4"/> 
        <source src="sucai/tianwen.ogg" type="video/ogg"/> 
        <source src="sucai/tianwen.webm" type="video/webm"/>
</video>

b. 音频标签 audio

controls 是否显示播放面板

autoplay 自动播放 由于浏览器会拦截自动播放声音的视频，因此需要加上 muted 属性

muted 静音输出

loop 设置视频循环播放

<audio id="music" src="sucai/wuji.mp3" controls loop></audio>

1.2.3 表单相关

a. 表单信息分组

<!-- disabled 禁用整组表单元素-->
<fieldset disabled>
      <legend>
          分组标题
      </legend>
</legend>

b. 新增输入框类型

email 邮箱 提交时对输入的内容进行邮箱格式验证，允许空值提交

url 网址 需添加网址协议，如： http 或者 https

number 数字类型 整数

tel 手机号 移动端生效

color 调色板 收集的数据是 16 进制表示的颜色方式

date 日期控件

month 月份控件 选择月份

week 周控件 选择 一年中的多少周

time 时间控件 选择一天中的时间

邮箱类型：<input type="email" name=""> 
网址类型：<input type="url" name=""> 
number：<input type="number" name=""> 
tel：<input type="tel" name=""> 
color：<input type="color" name="color"> 
date：<input type="date" name=""> 
month：<input type="month" name=""> 
week：<input type="week" name=""> 
time：<input type="time" name="">

c. 新增属性

palceholder 设置输入框的提示信息

readonly 设置为只读属性

required 设置为必填

pattern 限制输入的值需满足该属性设置的正则表达式 待调试

multiple 允许一个以上的值 常用于多文件上传

autofocus 文档准备完成，自动获得焦点

d. 新增标签

label 为 input 元素定义标注

性别:<label>
             <input type="radio" name="sex"> 男
</label>
             <input type="radio" name="sex" id="female"><label for="female">女</label>

datalist 定义选项列表

<input type="text" name="province" list="province"> 
<datalist id="province">
            <option>北京</option> 
            <option>天津</option> 
            <option>河北</option> 
</datalist>