H5C3笔记

3.常用标签

h1~h6 标题标签 p 段落标签 hr 水平线标签 br 换行标签

div，span 无语义 一行能放一个div，能span

4.文本格式化标签

b，strong 均为加粗，strong有强调含义

i，em 文本斜体

s，del 文本加删除线

u，ins 文本加下划线

5.图像标签

<img src />

alt 图像不显示替代文字

title 鼠标悬停时内容

width,height 图像宽度和高度

border 设置图像边框宽度

6.链接标签

a href ="跳转目标" target=目标窗口弹出方式

target 可取值 _self 默认 _blank 在新窗口打开

7.表格 table

table用于定义一个表格标签。

属性（以下无需加单位）：border 边框粗细，cellspacing 两个单元格之间的空白间距；cellpadding 内容与左边框的距离；width 和height ；align 设置表格在网页中的水平对齐方式； tr标签用于定义表格中的行，必须嵌套在table标签中。 td用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

th 表头单元格 （分类名称）

caption 表格标题 现实中表格之上

cellspacing 设置单元格与单元格边框的空白间距 前边有边框这个属性没有设置为0的话就会形成每个单元格都有自己的边框包围的局面

cellpadding 设置单元格内容与单元格边框的空白键距

跨行合并 rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

先确定是跨行还说跨列，在相应的td中写属性最后在删除被合并的内容

8.列表和表单

无序列表 ul>li

有序列表 ol>li

自定义列表 dl>dt>dd dt内容，dd解释

input type="属性值" value="默认文本"

type 表单类型

value 默认显示文本

checked 默认选中状态

textarea 文本域

select下拉列表

form表单域

2D 转换transform

移动：x，y轴移动

transform: translate(x, y) transform: translateX(n) transfrom: translateY(n)

重点知识点

• 2D 的移动主要是指 水平、垂直方向上的移动

• translate 最大的优点就是不影响其他元素的位置

• translate 中的100%单位，是相对于本身的宽度和高度来进行计算的

• 行内标签没有效果

旋转 rotate

/* 单位是：deg */ transform: rotate(度数)

• rotate 里面跟度数，单位是 deg

• 角度为正时，顺时针，角度为负时，逆时针

• 默认旋转的中心点是元素的中心点

设置转换中心点

transform-origin: x y;

• 注意后面的参数 x 和 y 用空格隔开

• x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center

• 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

缩放 scale

transform: scale(x, y)

• 注意，x 与 y 之间使用逗号进行分隔

• transform: scale(1, 1): 宽高都放大一倍，相当于没有放大

• transform: scale(2, 2): 宽和高都放大了二倍

• transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致

• transform:scale(0.5, 0.5): 缩小

• scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

综合性写法： transform: translate() rotate() scale()

我们同时有位置或者其他属性的时候，要将位移放到最前面

动画

先定义动画，在调用定义好的动画

定义动画语法格式

@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } }

使用动画

div { /* 调用动画 / animation-name: 动画名称; / 持续时间 */ animation-duration: 持续时间； }

动画序列

• 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列

• 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100% ，有多个状态，可以中间区分一下，0-10%，执行什么效果，10%-20%执行什么效果。

  动画简写方式

  /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */ animation: name duration timing-function delay iteration-count direction fill-mode

• 简写属性里面不包含 animation-paly-state

• 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用

• 要想动画走回来，而不是直接调回来：animation-direction: alternate

• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

速度曲线

animation-timing-function: 规定动画的速度曲线，默认是ease

3D转换

3D 移动 translate3d

• transform: translateX(100px)：仅仅是在 x 轴上移动

• transform: translateY(100px)：仅仅是在 y 轴上移动

• transform: translateZ(100px)：仅仅是在 z 轴上移动

• transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离

• 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

透视

在网页中产生3d效果需要透视，

透视需要写在被视察元素的父盒子上面

translateZ

1. translateZ 与 perspecitve 的区别

   • perspecitve 给父级进行设置，translateZ 给 子元素进行设置不同的大小

3D 呈现 transform-style

• 控制子元素是否开启三维立体环境

• transform-style: flat 代表子元素不开启 3D 立体空间，默认的

• transform-style: preserve-3d 子元素开启立体空间

• 代码写给父级，但是影响的是子盒子

3D 旋转rotateX

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

1. 语法

   • transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度

   • transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度

   • transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度

   • transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

   3D 旋转 rotateY

   1. rotate3d

      • transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度

      • x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度

        • transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg

        • transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg

私有前缀

为了兼容老版本的写法

-moz- 代表firefox浏览器私有属性

-ms- 代表ie浏览器私有属性

-webkit-代表safari chrome私有属性

-o- 代表Opera私有属性

提倡写法

-moz-border-radius：10px；

-ms-border-radius：10px；

-webkit-border-radius：10px；

-o-border-radius：10px；

border-radius：10px；

css层叠样式表

css三种引入方式 1.行内样式（内联样式） 标签样式内直接style=“属性”

2.内部样式

<style></style>

3.外部样式 link引用 href表示路径

css基础选择器

/* CSS2 */
*                   /* 通配符选择器 */
#div                /* id 选择器 */
.box                /* 类名选择器 */
div                 /* 标签选择器 */
div p               /* 后代选择器：所有后代 */
div.box             /* 交集选择器 */  交集选择器 既有1也有2的特点并且的关系   选中 
div,p,span          /* 并集选择器 */   并集选择器 一起写同等属性
​
/* CSS3 */
div>p               /* 子代选择器：直接后代 */
d