首页
学习
活动
专区
工具
TVP
发布

HTML5CSS3权威指南【笔记】

一、Web时代的变迁 二、HTML5HTML4的区别 1.新增的元素:section、article、aside、header、hgroup、footer、nav、figure、video、audio...datalist、datagrid、keygen、output、source、menu 2.新增的input元素:email、url、number、range、Date Pickers 3.废除的元素: 能使用CSS...只有"on"和"off"值 hidden:浏览器不渲染该元素,使该元素处于不可见状态 spellcheck:对用户输入的文本内容进行拼写和语法检查 tabindex:每个tab是第几个被访问到 三、HTML5...概述 模块模块化结构,为了避免产生浏览器对于某个模块支持不完全的情况 十三、选择器 1.class属性缺点:本身没有语义;容易混乱; 2.CSS3提倡使用选择器来将样式元素直接绑定,减少样式表的代码书写量...,表示元素的宽度高度不包括内部补白区域,及边框的宽度高度,默认 border-box,表示元素的宽度高度包括内部补白区域,及边框的宽度高度 十七、背景和边框相关的样式 A.背景相关的新增属性

2.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

HTML5CSS3新特性

1、HTML5新标签和属性 1.1 兼容性前缀语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的。...文本框里面的list的值要和datalist里面的id属性值一致 3:label="值" 如果有label值,默认选中框里面读取label值.选择了label值文本框里面会赋值value的值 1.2.6 html5...hgroup 标题组 对标题或者子标题进行分组 figure figure的标题 figure的标题 mark 标记 默认有一个背景颜色为黄色 time 时间 时间 2、css3新特性 2.1 新增的属性选择器...在此之前,我们常用的选择器是:class选择器,id选择器 属性选择器,按照字面意思,都是根据标签中的属性来选择元素 css3新增的属性选择器: 选择器 例子 说明 ^ div[class^...2.2.3 伪元素选择器 利用css直接创建某个元素,而不用标签进行创建。

1.8K20

实践 HTML5CSS3 Media Queries

先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。...CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。  那么该怎么定义 media 呢,看下面的代码,你肯定能猜出个大概。 ” 字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。...有玩过 Canvas 的朋友一定知道,要想绘制出来的内容效果最佳的话,Canvas 自身的 width 和 height 属性值 style 中的 width 和 height 的比例应该恰好等于 devicePixelRatio

1.3K20

HTML5 新特性_CSS3新特性

一.HTML5概念: 1.什么是HTML5: (1)HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准; (2)HTML5 仍处于完善之中。...2.HTML5的起步: (1)HTML5 是 W3C(World Wide Web Consortium,万维网联盟) WHATWG 合作的结果 (2)为 HTML5 建立的一些规则: a.新特性应该基于...HTML、CSS、DOM 以及 JavaScript b.减少对外部插件的需求(比如 Flash) c.更优秀的错误处理 d.更多取代脚本的标记 e.HTML5 应该独立于设备 f.开发进程应对公众透明... Jetbrains全家桶1年46,售后保障稳定 (2)controls 属性供添加播放、暂停和音量控件,可加入宽度和高度, 之间插入的内容是供不支持 video 元素的浏览器显示的.../logo.gif /main.js manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。

5.3K30

实践 HTML5CSS3 Media Queries

先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。...CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。 那么该怎么定义 media 呢,看下面的代码,你肯定能猜出个大概。 ” 字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。...有玩过 Canvas 的朋友一定知道,要想绘制出来的内容效果最佳的话,Canvas 自身的 width 和 height 属性值 style 中的 width 和 height 的比例应该恰好等于 devicePixelRatio

1.8K100

HTML5视频音频

简单介绍 HTML5 对视频和音频特性规范文档的制定是被讨论最多的。除浏览器自带支持的明显好处外,评论点集中在浏览器提供商对音频/视频格式 的不同选择。...HTML5 提供的一个解决方案是 ,让你可以指定多个不同格式的源文件,以便于用户浏览器选择它认识的文件。对于 < IE9 和旧浏览器,你将需要一个折衷的解决方案。...当你第一次尝试 HTML5 的音频/视频,你可能会想知道这些可能对你有帮助的东东: 你的服务器必须支持你打算提供的音频/视频的 MIME 格式。你将需要检查一下其在本地服务器上是否被支持。...如果你使用 Safari 来检测 HTML5 的音频/视频支持,需要安装 QuickTime Player,没有QuickTime Player 的 Safari 什么都不能播放。...利用 MPEG Audio Layer 3 的技术,将音乐以1:10 甚至 1:12 的压缩率,压缩成容量较小的文件,而 对于大多数用户来说重放的音质最初的不压缩音频相比没有明显的下降。

2K40

CSS语法规则 — 重学CSS

所以 CSS 也不例外,它也有自己的一套语法体系。但是 CSS 标准是分散开的,我们想找到它完整的语法是非常的不容易的。所以我们这里先从 CSS 2.1 语法标准开始。...这里讲到的是 CSS 2.1 的 CSS 结构,在 CSS3 中我们有更多的 @ 规则 和 CSS 规则,我们首先要在 CSS3 中找到这两块的所有内容,然后补充到这个总体结构中,那么我们就可以形成 CSS...CSS @ 规则研究 @charset: https://www.w3.org/TR/css-syntax-3/ 在 CSS syntax 3 中在 CSS 2.1 中做了一个重新的定义 但是相对 CSS...2.1 基本没有什么变化 @import: https://www.w3.org/TR/css-cascade-4/ 然后 import 就在 css cascade 4 的规范里面 因为 CSS 的全称就是...Level 4 —— https://www.w3.org/TR/selectors-4/ Level 4 和 Level 3 是非常的相似的,但是它的选择器更复杂 增加了很多的伪类选择器、“或” 和 “

68741

基于 CSS3 Media Queries 的 HTML5 应用

先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。...CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。 那么该怎么定义 media 呢,看下面的代码,你肯定能猜出个大概。 ” 字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。...有玩过 Canvas 的朋友一定知道,要想绘制出来的内容效果最佳的话,Canvas 自身的 width 和 height 属性值 style 中的 width 和 height 的比例应该恰好等于 devicePixelRatio

96750

CSS flex 排版动画 — 重学 CSS

计算交叉轴方向 根据每一个行最大元素尺寸计算行高 根据行高 flex-align 和 item-align ,确定元素具体位置 CSS 动画 CSS 当中控制表现的无非就是三类: 控制元素位置和尺寸的信息...这个就是 CSS animation 的基本用法。...Transition 使用 Transition 的使用 animation 差不多,它也的属性一共有 4 条: transition-property —— 要变换的属性 transition-duration...CMYK RGB 我们从小讲到颜色都会说到红、黄、蓝三种原色,那么为什么是红黄蓝三种颜色呢?那又为什么红黄蓝三种颜色就能跳出所有其他的颜色和光呢?我们不是说光是不同的波长吗?...HSL HSV 这里我们就讲完颜色的基本原理了,但是在编程中我们就会发现 RGB 这个颜色或者是 CMYK 的颜色都并不好用。因为它们是跟我们对颜色的认知的直觉是不一致的。

1.3K51

CSS 排版正常流 —— 重学CSS

这一周我们重新回到《重学 CSS》系列,之前的文章中我们重新学习了《CSS 选择器》和《CSS 语法规则》。接下来我们就一起来讲讲 CSS 里面的排版正常流。...在讲解 CSS 当中的排版和正常流的时候,我们会按照属性的一些逻辑关系来分成几个部分来讲解学习。 盒 ( Box ) 讲到排版,我们需要引入的第一个概念就是 "盒"。...CSS 选择器中的是元素。 其实这里还可以加一个 "或",在《CSS 选择器》中讲到的,CSS 选择器选中的是元素或者是伪元素。 !! CSS 选择器中的元素,在排版时可能产生多个盒。...而在 HTML 里面,我们是有 "盒" 这样一个东西,在 CSS 的排版里我们只排两样东西。 盒 文字 !! 一切 CSS 的排版,都不会逃出这盒文字这样两东西。...正常流排版的整个过程,实现 flex 的过程比较类似,有这几个步骤: 收集盒文字进行 计算盒文字在行中的排布 计算行行之间的排布 !! 我们发现其实这个与我们 flex 的排版非常的像。

81421
领券