学习HTML5CSS3

Posted 2021-03-29 Red rockz

H5、C3学习笔记 通过学习本篇内容你将了解H5和C3新增标签、选择器、样式等,后期H5、C3用于制作出PC网站、android网站

     概述

一、html5简介

它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML） 的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5 。

二、H5新变化

XHTML 可扩展超文本标记语言 XHTML是一种增强了的HTML，它的可扩展 性和灵活性将适应未来网络应用更多的需求 。 HTML5设计目的是为了在移动设备上支持多 媒体。增加了新特性：语义特性，本地存储特性，设 备兼容特性，连接特性，网页多媒体特性，三 维、图形及特效特性，性能与集成特性，CSS3 特性。 废弃一些元素和属性比如 font 、center 等...

三、H5优势和劣势

HTML5优势 提高可用性和改进用户的友好体验，更好的语义化标签 ，可以给站点带来更多的多媒体元素(视频和音 频) ，可以很好的替代FLASH和Silverlight ，当涉及到网站的抓取和索引的时候，对于 SEO很友好；，将被大量应用于移动应用程序和游戏 ，可移植性好。 HTML5 劣势  该标准并未能很好的被PC端浏览器所支持 ，IE9以下的浏览器几乎都不兼容。

     H5新增标签

新增语义化标签

<header>头部标签 <nav>导航标签 <main>主题标签 <article>独立的内容标签 <section>区段标签 <aside>侧边栏标签 <footer>尾部标签

 

新增多媒体标签

<audio>音频标签 语法格式：<audio controls="controls"><audio> <video>视频标签 语法格式：<video controls="controls"><video>

音频视频标签常见属性

属性	值	描述
autoplay	autoplay	音频视频就绪自动播放
controls	controls	向用户显示播放控件
loop	loop	放完是否继续播放该视频音频，循环播放
preload	auto、none	规定是否预加载视频音频
src	url	音频视频url‍‍
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
poster	Imgurl	加载等待的画面图片
muted	muted	静音播放

新增表单类型

属性值	描述
type="email"	限制用户输入必须为Email类型
type="url"	限制用户输入必须为URL类型
type="date"	限制用户输入必须为日期类型
type="time"	限制用户输入必须为时间类型
type="month"	限制用户输入必须为月类型
type="week"	限制用户输入必须为周类型
type="number"	限制用户输入必须为数字类型
type="range"	滑动条
type="tel" ‍	手机号码
type="search"	搜索框
type="color"	生成一个颜色选择表单

新增表单标签

<datalist>标签 <datalist> 标签规定了 <input> 元素可能的选项列表。  <datalist>元素包含了一组<option>元素，这些元素表示可以预定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值。 绑定的<input>标签必须设置list属性，属性值等于<datalist>标签的id属性值 <input type="text" list="city-list"><datalist id="city-list><option value="广州"></option><option value="上海"></option></datalist>

     CSS3

1.新增选择器

一、子级选择器

子级选择器用于选取带有特定父元素的元素。 书写语法：element1 > element2

二、兄弟选择器

选择器	简介
element1+element2	匹配同一个父元素中紧跟在element1后面的一个element2元素
element1~element2	匹配同一个父元素中在element1后面的所有element2元素

三、结构伪类选择器

选择器	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个元素E
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

nth-child(n)

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15......
n+5	从第5个开始（包含第5个）到最后，5 6 7 8 9 ……
-n+5	前5个（包含第5个），5 4 3 2 1 0……

E:nth-child(n) 和E:nth-of-type(n) 的区别 

E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件。 E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E会忽视其他同级的非同类型元素。

四、伪元素选择器

选择器	简介
E::before	在 E 元素内部的前面插入一个元素
E::after	在 E 元素内部的后面插入一个元素
E::first-letter	选择到了 E 容器内的第一个字母
E::first-line	选择到了 E 容器内的第一行文本

五、属性选择器

选择器	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性、且值以val开头的E元素
E[att$="val"]	匹配具有att属性、且值以val结尾的E元素
E[att*="val"]	匹配具有att属性、且值中含有val的E元素

选择器权重

基础选择器：id 选择器 > 类选择器 > 标签选择器 > *  伪类选择器、属性选择器 的权重等于类选择器 。  伪元素选择器 的权重等于标签选择器 。

2.盒模型

CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总 宽度和总高度。

content-box 标准模式 Standard 模式：标准模式中，盒子总体大小为 width(height) + padding + border，内容 区域是 width 和 height 部分。。  border-box怪异模式 Quirks 模式：怪异模式中，盒子总体大小为 width 和 height，添加了padding和border后， 内容区域会收缩。

属性值	简介
content-box	默认值，标准盒子模型，盒模型是外扩的。width 与 height 只包括内容的宽和高。 在 width 和 height 之外绘制元素的内边距和边框。
border-box	怪异模式，盒模型是内减的。width 和 height 属性包括内容，内边距和边框，但不包括外边距。 为元素指定的任何内边距和边框都将在已设定的 width 和 height 内进行绘制。

3.新增常用属性

3.1边框圆角

属性名：border-­radius 作用：设置边框的圆角。  属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。 简写方法  border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。border-radius: 左上角 右上角 右下角 左下角;  border-radius: 左上角 右上角和左下角 右下角 ;  border-radius: 左上角和右下角 右上角和左下角 ;  border-radius: 四个角相同; / 的属性值写法  border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法

浏览器兼容：Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持。

3.2文字阴影

在 CSS3 中，text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、 模糊距离，以及阴影的颜色：

属性值	简介
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

3.3边框阴影

在 CSS3 中，box-shadow 属性用于对盒子边框添加阴影

属性值	简介
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
spread	可选。阴影的尺寸
color	可选。阴影的颜色。
inset	可选。将外部阴影改为内部阴影

4.新增过渡属性

属性名：transition 作用：在不使用 Flash 动画或 javascript 的情况下，使用 transition 可以实现补间动（过渡效果）， 并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实 现平滑的过渡的动画效果。为了方便看效果，我们使用 :hover 切换状态。 语法格式：transition: 过渡的属性 过渡时间 运动曲线 延时时间；

transition-property过渡的属性

none 表示没有属性过渡  all 表示所有变化的属性都过渡  属性名 使用具体的属性名，多个属性名中间逗号分隔

时间 

过渡时间：以s秒为单位。 延时时间：以s秒为单位。0s也必须加单位。

transition-timing-function 时间曲线

值	描述
linear	规定以相同速度开始至结束的过渡效果
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in	规定以慢速开始的过渡效果
ease-out	规定以慢速结束的过渡效果
ease-in-out	规定以慢速开始和结束的过渡效果

5.2D转换

属性名：transform 作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可 以取代大量之前只能靠Flash才可以实现的效果。  属性值：多种转换方法的属性值，可以实现不同的转换效果。

位移 translate()

transform 的属性值为 translate() 时，可以实现位移效果。

书写语法:

值	说明
translate(x,y)	x,y分别为一个水平和垂直方向位移的距离，可以为px值或百分比，区分正负
translate(x)	只有一个数值，表示水平方向的位移

缩放 scale()

transform 的属性值为 scale() 时，可以实现元素缩放效果。

书写语法：

值	说明
scale(x, y)	x,y分别为改变元素的宽度和高度的倍数
scale(n)	只有一个值，表示宽度和高度同时缩放n倍
scaleX(n)	改变元素的宽度
scaleY(n)	改变元素的高度

旋转 rotate() 

transform 的属性值设置为 rotate() 时，实现元素的旋转。 书写语法：rotate(数字deg)其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有 一个属性值。 注意：元素旋转后，坐标轴也跟着发生转变。因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。

倾斜 skew()

transform属性值设置为 skew() 时，实现元素的倾斜。 书写语法：transform: skew(数字deg,数字deg); 两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个 数值不写默认为0

transform­-origin 属性

作用：设置调整元素的水平和垂直方向原点的位置。 调整元素的基准点。 属性值：包含两个，中间使用空格分隔。

值	说明
x	定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比
y	定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比

6.3D转换

透视属性 

属性名：perspective 作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。 属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。 注意：透视属性需要设置给 3D 变化元素的父级。

3D 旋转

3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值：

属性值:

值	说明
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

3D位移

属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应 轴的负方向移动。

属性值：

值	说明
translateX(x)	设置 X 轴的位移值。
translateY(y)	设置 Y 轴的位移值。
translateZ(z)	定义3D位移，设置Z轴的位移值。

transform-style属性

用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。

属性值: flat：所有子元素在 2D 平面呈现 ，preserve-3d：保留 3D 空间  3D 元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置 transform-style: preserve-3d，来使其变成一个真正的 3D 图形。一般来说，该属性设置给 3D 变换图形的父级元素。

7.动画

动画

css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 css3 动画制作分为两步：创建动画、绑定动画。

@keyframes 规则

@keyframes 规则用于创建动画。 在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。 需要使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to" ，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。 语法： @keyframes 动画名称 { 动画过程，可以添加任意百分比处的动画细节 }

animation 属性

需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。animation 属性用于对动画进行捆绑。  语法：div { animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间；} 其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。

     CSS3核心样式

字体属性

1.粗细 font-weight

作用：设置文字是否加粗显示。 属性名：font-weight，属于 font 属性的一个单一属性。 属性值有两种方式：单词类型、数字类型。

单词类型

属性值	说明
normal	默认值，定义标准的字体
bold	定义粗体字符，b、strong标签的默认值
bolder	定义更粗的字体
lighter	定义更粗的字体

数字类型

100-900 之间的整百数字。 数字越大，文字显示越粗。  其中 400 等价于 normal，700 等价于 bold。

2.字体风格 font-style

作用：设置文字是否斜体显示。 属性名：font-style，属于 font 属性的一个单一属性。 属性值： 单词。

属性值

属性值	说明
normal	设置正规的字体，大多数标签的默认值
italic	设置斜体的文字，主要针对英文，要求英文以字体中的斜体样式显示
oblique	设置斜体的文字，只是将文字倾斜显示，与字体无关

3.行高 line-height 

作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。 属性名：line-height，属于 font 属性的一个单一属性。

属性值

属性值	说明
px像素值	设置的行高的具体像素值
比分比数值	设置的本身字号像素值的百分比

文本属性

1.水平对齐 text-align

作用：设置文本水平方向的对齐。在盒子中，不论文本是单行还是多行，都会对应方向对齐。属性值：三个方向的单词

属性值

属性值	作用
left	居中对齐，大部分标签的默认值
center	居中对齐
right	居右对齐

2.文本修饰text-decoration

作用：设置文本整体是否有线条的修饰效果。

属性值

属性值	说明
none	没有修饰，大部分标签的默认值
overline	上划线
line-through	中划线，删除线，<del>标签的默认值
underline	下划线，<a>标签的默认值

3.文本缩进 text-indent

作用：设置段落首行是否进行缩进。

属性值

属性值	说明
px单位	表示首行缩进多少像素
em单位	首行缩进几个中文字符的位置
百分比	表示缩进文字所在标签的父级标签的width属性值的百分比

盒模型属性

概述

盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸 的属性，分别是宽度 width、高度 height、内边距 padding、 边框 border、外边距 margin。

1.宽度 width

作用：设置可以添加元素内容的区域的宽度。

属性值

属性值	说明
auto	默认值
px	像素值定义的宽度
%	定义参考父元素宽度width的百分比 宽度

2.高度height

作用：设置可以添加元素内容的区域的高度。

属性值

属性值	说明
auto	默认。浏览器会计算出实际的高度
px	像素值定义的高度。
%	定义参考父元素高度height的百分比高度

3.内边距 padding

作用：设置的是元素的边框内部到宽高区域之间的距离。 特点：可以去加载背景，不能书写嵌套的内容。 属性值：常用px为单位的数值。

4.边框border

作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层。属性值：由三个值组成，分为线的宽度、线的形状、线的颜色 。border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。

5.外边距margin

作用：设置的是盒子与盒子之间的距离。 特点：不能渲染背景。  属性值：常用 px 为单位的数值。

浮动属性

浮动是一种非常重要的布局属性。  属性名：float，漂流、浮动的意思。  属性值：left 左浮动  right 右浮动 作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。

背景属性

1.背景颜色 background-color

属性名：background-color 作用：在盒子区域添加背景颜色的修饰。  加载区域：在 border 及以内加载背景颜色。  属性值：颜色名、颜色值。

2.背景图片 background-image

属性名：background-image 作用：给盒子添加图片的背景修饰。  加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始。  属性值：url(图片路径)  url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径。

3.背景重复 background-repeat

属性名：background-repeat 作用：设置添加的背景图是否要在盒子中重复进行加载。  根据属性值不同，有四种重复加载方式。

属性值	作用
repeat	重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域
no-repeat	不重复，不论背景图是否大于盒子范围，都只加载一次图片
reapeat--x	水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
repeat­-y	垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复

4.背景定位 background-position

属性名：background-position 作用：主要用于设置不重复的图片在背景区域的加载开始位置。  属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法， 属性值都有两个，值之间用空格分隔。 第一个属性值：表示背景图片在水平方向的位置。  第二个属性值：表示背景图片在垂直方向的位置。

5.背景附着 background-attachment

属性名：background-attachment 作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。

属性值	说明
scroll	滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走。
fixed	固定的，背景图的定位的参考点从盒子 border 以内的左上顶点变为了浏览器窗口的左 上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口 的某个位置，不会随着页面滚动而滚走。