您的位置：首页 > Web前端 > HTML5

HTML5+CSS

2020-06-29 04:33 211 查看

HTML

HTML（超文本标记语言）

表单

input：默认文本框，可选择radio（单选框）、checkbox（复选框）、submit（表单提交）、reset（重置）
普通文本框：
```
<input type="text" value="文本框" />
```
单选框：
```
<input type="radio" value="男" />
```

复选框：

<input type="checkbox" value="看书" />

表单提交按钮：
```
<input type="submit" value="提交" />
```
重置按钮：
```
<input type="reset" value="重置" />
```

select：下拉菜单，搭配子标签

<option>

textarea：文本域，一般使用场景为留言

form：表单，有active、method属性，active表示表单提交目标地址，method表示以get/post方法进行提交。

实体

空格：
```
&nbsp;
```
左尖括号：
```
&lt;
```
右尖括号：
```
&rt;
```

div+span

div标签，一般用于网页布局。span标签，局部标签，一般用于给某个元素添加样式

CSS2

一般来说，CSS设置样式属性百分比参考的是父级元素的宽度。
层叠样式表(Cascading Style Sheet)

<p style="font-size: 20px; color: red;">书山有路勤为径</p>
// 2.嵌入式（内嵌式）样式 使用场景: 样式不多
<style>
div {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
<div>
我是一个div
</div>
// 3.index.css 一般项目中使用 推荐使用
div {
width: 300px;
height: 300px;
background-color: orange;
}
<link href="index.css" rel="stylesheet">

css语法

选择器 {
属性名: 属性值;
}

选择器

基本选择器
标签选择器
```
div {
...
}
h2 {
....
}
```

类选择器（推荐经常使用）

// 类选择器就是给目标标签添加一个class属性，通过class名字来修改这个元素标签的样式
// 可以设置多个class名字，设置格式为： class="name1 name2 ..." 以空格分隔
<style>
.con {
background-color: red;
}
</style>

<div class="con">
这是内容
</div>

id选择器

// id选择器就是给目标标签添加一个id属性，通过id名字来修改这个元素标签的样式
// 每个标签/容器是唯一id，不允许出现相同id.
<style>
#con {
background-color: red;
}
</style>

<div id="con">
这是内容
</div>

通配符选择器

// *标识全局所有样式修改，一般我们也不用，都是把所有需要的元素都追加
* {
color: red;
}

// 推荐使用这种
div a img li {
color: red;
}

高级选择器

<style>
/*表示ul中所有li的颜色改为绿色*/
ul li {
color: green;
}
</style>

<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>

交集选择器

<style>
/*表示ul中所有li的颜色改为绿色，
注意千万不能有空格，加了空格就是后代选择器了*/
// 满足两者情况：既是div 而且class是box
div.box {
color: green;
}
</style>

<div class="box">
<ul>
<li>item</li>
</ul>
</div>
<div>这是第二个div</div>
<!--结果item字体颜色为绿色-->

并集选择器

/*用`,`隔开，表示公用同一个样式*/
div,p,h1,li {
color: yellow
}

css两性：继承性与层叠性
继承性：css中有一部分属性可以被继承。比如文字和文本的属性

color, font-size, font-family, text-*, font-*

。即便标签（元素）本身不设置，也能被加载。父元素的宽度可以被继承，但高度不可被继承，当子元素设置

height: 100%

时，取的是父元素的高度。

层叠性：

多种选择器都能定位到目标元素的情况下，样式采用权重最高的，

id选择器>class选择器>标签选择器

如果权重一致，以书写顺序有关，采用最后一个样式。
如果都没有指定到目标元素，则采用描述离目标元素最近的那个样式
多种选择器都没有直接选择元素，则看谁描述的近，就听谁的，假如描述的一样近，再比较权重，权重谁高听谁的，若权重还是一致，则看顺序，谁最后描述，就听谁的。

!important 提升权重，但无法提升继承权重。用法：

color: red !important

在属性后面添加即可。

<style>
.box1 #box2 .box3 p {
color: red;
}
/*这样是有效的*/
#box1 .box2 .box3 p {
color: blue !important;
}
/*这样是无效的*/
#box1 .box2 {
color: skyblue !important;
}
.	box1 .box2 #box3 p {
color: green;
}
</style>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>我的颜色到底听谁的</p>
</div>
</div>
</div>

font-*

font-size：可选属性

normal

italic

oblique

区别：

normal

表示无样式；

italic

表示假如英文字体本身有倾斜，则显示倾斜样式，若英文字体没有倾斜，则替换成倾斜的字体；

oblique

表示本身字体是倾斜，与字体本身无关。

text-*

white-space（对文字是否折行、换行）：
```
nowrap
```
（不换行）、
```
pre-wrap
```
（换行）
text-decoration（文字修饰）：
```
none
```
（去掉下划线），
```
underline
```
（下划线），
```
line-through
```
（中划线），
```
overline
```
（上划线）。
text-indent（文本缩进）：设置文本缩进，可以设置
```
1em 2em 3em .../10px 20px 30px .../10% 20% 30% ...
```
。这里的百分比参考的是自身容器的宽度。

盒模型

遵循原则：上-右-下-左，若少谁就找他的对立面。

建议优先使用

width > padding > margin

padding（内边距）：可以把容器内容撑开。
border：
```
border: 20px solid #ccc
```
有三个值分别是：粗细大小，实虚线，颜色。
border-width：可以单独设置border的值。

border-style：

solid(实现) dashed(虚线) dotted(点状线) double(双实线)

border-color：
```
red green blue ...
```
margin（外边距）：撑开与容器之间的距离。

overflow

可选项：

hidden(隐藏多余部分), visiable(默认显示), scroll(以滚动条方式显示全部内容), auto(自适应)

margin

塌陷
上下两个盒子会发生margin塌陷，margin值小的会叠加在margin值大的元素里面。
父子盒子也会发生margin塌陷，父子盒子中以较大margin为准。
居中
```
margin: 0 auto
```
让块级元素水平居中块级元素包括div、p、li、h1~h6等，但对行内元素无效。

块级元素(div, h1~h6, p)

可以设置宽高，设置宽高有效
独占一行
不设置宽度，默认继承父元素100%宽度
display：block

内联元素(span, strong, em, i)

不可设置宽高，设置宽高无效
可以与其他内联元素并排显示
宽高由内容撑开
display：inline

内联块元素(img, input)

可以设置宽高，设置宽高有效
可以与其他内联元素并排显示
宽高由内容撑开
display：inline-block

使用display默认是底部对齐，可使用

vertical-align: top;

将对齐方式改为顶部对齐。

标准文档流

三种布局之标准流（浮动、定位）

特点：

空白折叠
高矮不齐
内容在盒子内部默认从左往右、从上往下显示，遇到空间不够，自动换行

浮动（float）

三种布局之float（标准流、定位）。可设置

left、right、none(一般需要为none就不设置)

元素设置浮动属性会脱离标准流的控制（脱标）。
块级元素设置浮动，具有内联块元素的特征；内联元素设置浮动，设置宽高有效。
浮动找最近的父元素盒子对齐。

```
float: right(left)
```
浮动最初用于文字环绕效果
脱离标准流，不占位置，会影响标准流。
子盒子浮动，不会压住父盒子的
```
padding
```
和
```
margin
```
。
浮动元素改变元素的模式。

清除浮动

给父元素添加一个高度。一般不推荐，我们一般不设置父元素的高度。
clear: both; clear可选值有
```
both, left, right
```
。能够清除浮动造成的影响，但是不能靠儿子撑开父亲的高度。子元素的高度让父元素的
```
margin
```
失效了

外墙法：两个浮动元素的父元素之间设置一个

div

，设置方法2再设置高度，可以达到有

margin

的效果，但是父元素还是不能被子元素撑开。

/*css样式*/
.box1, .box2 {
width: 800px;
margin-bottom: 20px;
border: 10px solid red;
}
div p {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
background-color: yellowgreen;
}
.c1 {
clear: both;
}
.h20 {
height: 20px;
}
//html代码
<div class='box1'>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="c1 h20"></div>
<div class="box2">
<p></p>
<p></p>
<p></p>
<p></p>
</div>

内墙法：浮动最后放一个

div

，父元素能被子元素撑开，也能实现父元素设置的

margin

值。

/*css样式*/
.box1, .box2 {
width: 800px;
margin-bottom: 20px;
border: 10px solid red;
}

div p {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
background-color: yellowgreen;
}

.c1 {
clear: both;
}
//html代码
<div class='box1'>
<p></p>
<p></p>
<p></p>
<p></p>
<div class="c1"></div>
</div>
<div class="box2">
<p></p>
<p></p>
<p></p>
<p></p>
<div class="c1"></div>
</div>

溢出隐藏（推荐使用）：对浮动元素的父元素设置，
```
overflow: hidden;
```
父元素能寻找子元素最高的高度作为自己的高度。

隔行换色

odd：奇数列，从第一行下标为0开始，所以odd第一行为正常效果的第二行

even：偶数列

ul li:nth-child(even) {
background-color: #0f0;
}

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

a标签

a标签的伪类：

link(访问前), visited(访问后), hover(鼠标放上去), active(激活，按住不放时)

；先后顺序为love hate，简称爱恨原则

<style>
a: link {
color: red;
}
a: visited {
color: green;
}
a: hover {
color: blue;
}
a: active {
color: yellow;
}
</style>

<a href="#">这是一个超链接</a>

a标签文档标记

<div id='box'>

</div>

<a href="#box"></a>

透明度

rgba() & opacity

设置背景色透明度的方法有两种，

background-color: rgba(255, 0, 0, .5)

和

opacity: 0.5

，两者的区别是使用

rgba

只能修改背景色颜色透明度，不能影响内容，而opacity则会影响整个盒子包括文字内容都会起作用。

background

background：
```
background:#ccc url(images/i.png)
```
url表示设置背景图。
background-repeat：不设置默认平铺整个盒子，设置
```
no-repeat
```
不平铺整合盒子。

background-position：

background-position: 水平方向 垂直方向

设置盒子定位。默认left，top；还可以精确到px单位，也可以设置百分比，百分比设置的是盒子的宽-图片的宽看成100%。

/*负数往相反方向移动，正数往相同方向移动*/
选择器 {
background-position: center center;
background-position: 150px 150px;
background-position: 30% 50%;
}
/*整合起来写 url-图片地址 no-repeat-是否平铺 center top-图片显示位置 #000-颜色*/
选择器 {
background: url(images/1.jpg) no-repeat center top #000
}

background-attachment：fixed 固定背景图片，不随着滚动而消失

定位

相对定位

position: relative 设置定位方式为相对定位，相对于自己移动，一般用于微调。

/*做导航栏，给选中导航做边框，不移动，边框多宽，就移动几个像素*/
a {
position: relative;
top: -3px;
border 3px solid #ccc;
}

绝对定位

position: absolute 设置定位方式为绝对定位，若父（祖先）元素设置了

position: relative

，相对于父（祖先）元素移动，否则相对于body移动，绝对定位的元素脱离标准文档流

固定定位

position：fixed 设置定位方式为固定定位，以浏览器窗口为参考。

HTML5新增元素

新增标签

header
footer
nav

新增多媒体

audio 音频

<!--
属性：
src 要播放的音频的url
controls	显示播放控件
loop	循环播放
muted	静音
MPE\Ogg\Wav
格式		MIME-type
MP3		 audio/mpeg
Ogg		 audio/ogg
Wav		 audio/wav
-->
<audio controls>
<source src="多媒体路径" type="audio/ogg">
</audio>

video 视频

<!--
属性：
src 要播放的音频的url
controls	显示播放控件
loop	循环播放
muted	静音
height	播放器的高度
width	播放器的宽度
poster	预览图片
MPE\Ogg\Wav
格式		MIME-type
MP4		 audio/mp3
Ogg		 audio/ogg
WebM		 audio/webm
-->
<video controls>
<source src="多媒体路径" type="audio/ogg">
</video>

新增表单元素

```
<input type="email" name="usere">
```
用户邮箱
```
<input type="search">
```
搜索框

<input type="number" value="10" min="1" max="10" step="1">

<input type="range" value="5" min="1" max="10" step="1">

滑块

```
<input type="color">
```
取色框
```
<input type="submit">
```
表单提交
```
<input type="date">
```
日期选择器
```
<input type="datetime">
```
手动输入一个日期
```
<input type="datetime-local">
```
本地时间
```
<input type="month">
```
选择年、月
```
<input type="time">
```
选择小时、分钟
```
<input type="week">
```
选择年、周

选项列表

<input id="myCar" list="cars">
<datalist id="cars">
<option value="WEB"></option>
<option value="ASD"></option>
</datalist>

自动完成（autocomplete）

// on-打开 off-关闭
<input type="text" name="usere" autocomplete="on">

自动获取焦点（autofocus）

用户名：<input type="text">
密码：<input type="text" autofocus>

multiple 允许多个值，适用于email、file
pattern 正则验证
required 必填项
placeholder 提示信息

CSS3

选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面

浏览器私有前缀，加前缀是兼容老版本的写法

Gecko内核			CSS前缀为“-moz-”			如火狐浏览器
Webkit内核			CSS前缀为“-webkit-”		如Chrome、Safari
Presto内核			CSS前缀为“-o-”			如Opera(欧朋)
Trident内核			CSS前缀为“-ms-”			如IE

新增属性选择器

/*表示所有class中包含box的背景色都改成黄色*/
E[attr*="val"]	例：div[class*="box"]{background-color: yellow;}
/*表示所有class中以box开头的背景色都改成红色*/
E[attr^="val"]	例：div[class^="box"]{background-color: red;}
/*表示所有class中以box结束的背景色都改成粉色*/
E[attr$="val"]	例：div[class$="box"]{background-color: pink;}

新增结构性伪类选择器

/*选择父元素下的第一个子元素li*/
E:first-child{}		例：li:first-child{background-color: red;}
/*选择父元素下的最后一个子元素li*/
E:last-child{}		例：li:last-child{background-color: pink;}
/*选择父元素下的第n个子元素li n从1开始算*/
E:nth-child(n){}	例：li:nth-child(2){background-color: blue;}
/*n写even表示偶数行变色，n写odd表示奇数行变色*/
E:nth-child(n){}	例：li:nth-child(even){background-color: blue;}
/*n取值0 1 2 3  2n>=1*/
E:nth-child(n){}	例：li:nth-child(2n){background-color: blue;}
/*a*n+b	a表示序数*/
E:nth-child(n){}	例：li:nth-child(3n-2){background-color: blue;}
/*选择父元素中类型为h2的【正数第n个】子元素*/
/*even(偶数)	odd(奇数)*/
E:nth-of-type(n){}	例：.wrap h2:nth-of-type(2){background-color:red;}

新增状态伪类选择器

/*input type为text且状态未enabled的元素*/
input[type=text]:enabled{}
input[type=text]:disabled{}
input[type=text]:checked{}

边框属性

/*顺序为左上 右上 右下 左下 若少哪边就去找其对角*/
border-radius: 20px 20px 20px 20px;
/*边框阴影*/
box-shadow: X轴偏移, Y轴偏移, 模糊值, 颜色
box-shadow: X轴偏移, Y轴偏移, 模糊值, 增强值, 颜色
box-shadow: X轴偏移, Y轴偏移, 模糊值, 颜色, inset(内阴影)

背景属性

/*可设置具体像素、百分比、cover(等比放大)、contain*/
background-size(背景图大小): 宽度值, 高度值
/*content-box、padding-box、border-box*/
background-origin(背景图显示区域):
/*裁剪区域：border-box、padding-box、content-box*/
background-clip:

渐变(绘制一个背景图)

/*线性渐变*/
linear-gradient(颜色1, 颜色2);
linear-gradient(left, 颜色1, 颜色2);	// 从左向右渐变
linear-gradient(90deg, 颜色1, 颜色2); // 水平向右90°
/*重复线性渐变 top:方向, 颜色1百分比: 参考盒子从0到颜色1百分比高度 颜色2百分比: 参考盒子从0到颜色2百分比高度渐变颜色*/
repeating-linear-gradient(top, 颜色1 10%, 颜色2 20%)
/*径向渐变*/
radial-gradient(颜色1 百分比, 颜色2 百分比);
radial-gradient(方向1, 方向2, 颜色1 百分比, 颜色2 百分比);
/*参考的是*/
radial-gradient(像素值1, 像素值2, 颜色1 百分比, 颜色2 百分比);

用户界面

/*可选：both(垂直拉伸)、horizontal、vertical*/
resize: 规定是否由用户调整拉伸
// 盒子大小
box-sizing:border-box  // 此时盒子的width值包括左右padding左右border+内容
box-sizing: content-box // 默认值

多列布局

// 设置盒子每列宽度 auto-自适应(默认)
column-width: 200px;				// 栏目宽度
column-rule: 1px solid red; 		 // 栏目边框
column-gap: 28px;					// 栏目间距
column-count: 5;					// 栏目总数 会与width发生冲突

弹性盒子

布局模式

CSS2 盒模型+浮动+定位

CSS3 弹性盒子

display: flex;
display:inline-flex;
// 对父元素设置display: flex; 表示该盒子是弹性盒
// 主轴 flex-direction 设置主轴的方向，
//
flex-direction: row-reverse;	 此时主轴是水平方向，起点在右
flex-direction: column; 		 此时主轴是垂直方向，起点在上沿
flex-direction: column-reverse;   此时主轴方向是垂直方向，起点在下沿
flex-direction: row;	默认是row 此时主轴是水平方向，起点在左

主轴对齐方式

子元素在主轴中对齐方式
justify-content: flex-start;
// flex-start(起始位置对齐)、flex-end(末端位置对齐)、flex-center(居中对齐)、space-around(分散对齐)、space-between(两端对齐)

侧轴对齐方式

侧轴方向对齐方式(与主轴垂直，主轴若是水平，侧轴就是垂直)
align-items: flex-start;
// flex-start(起始位置对齐)、flex-end(末端位置对齐)、center(居中对齐)、stretch(拉伸，若子项目/子元素没设置高度，拉伸占满父元素)、baseline(基线)

弹性盒项目换行

flex-wrap: nowrap;			// 不换行
flex-wrap: wrap;			// 换行
flex-wrap: wrap-reverse;	 //	换行，起始位置在下

排列次序

flex-wrap: nowrap;			// 不换行
flex-wrap: wrap;			// 换行
flex-wrap: wrap-reverse;	 //	换行，起始位置在下

放大缩小

在容器中，根据容器宽度按比例放大
flex-grow: 0;			// 默认为0
flex-grow: 1;			// 比例放大1倍
flex-grow: 3;			// 比例放大3倍
------------------------------------------------
当子项目宽度比容器大，会按比例缩小
flex-shrink: 1;			// 默认为1
flex-shrink: 2;			// 缩小1倍

2D/3D

transition

transition: width, 2s;		//复合属性
transition-property			// 参与过渡的属性——默认 all 所有
transition-duration			// 过渡持续时间	可以写1s，也可以写1000ms
transition-delay			// 过渡延迟的时间	可以写s秒、ms毫秒
transition-timing-function	 // 时间函数（过渡的动画类型）
linear		匀速
ease-in		加速
ease-out	减速
ease		缓动
ease-in-out	先加速后减速

transform(2D动画)

translate 平移

// 水平向右 向下移动20px
transform: translate(20px, 20px);
// 水平向右移动20px
transform: translate(20px);
// 只能水平向右移动20px 若是负数，则向左移动
transform: translateX(20px);
// 只能竖直向下移动20px 若是负数，则向上移动
transform: translateY(20px);
// 绕着Z轴平移20px 若是正数，则向屏幕放大移动
transform: translateZ(20px);

rotate 旋转

// 以自身容器中心点为中心点，顺时针旋转30°
transform: rotate(30deg);
// 以自身容器中心点为中心点，逆时针旋转30°
transform: rotate(-30deg);

scale 放大

// 水平方向放大2倍，竖直方向放大2倍
transform: scale(2, 2);
// 水平方向和竖直方向放大2倍
transform: scale(2);
// 水平方向放大2倍
transform: scaleX(2);
// 竖直方向放大2倍
transform: scaleY(2);

skew 倾斜

// 水平方向倾斜30°, 竖直方向倾斜20°
transform: skew(30deg, 20deg);
// 水平方向, 竖直方向都倾斜20°
transform: skew(20deg);
// 水平方向倾斜30°
transform: skewX(30deg);
// 竖直方向倾斜30°
transform: skewY(30deg);

origin

// 动画结束之后，与原容器的左上角对齐
transform-origin: left top
// 动画结束之后，与原容器的左下角对齐
transform-origin: left bottom
// 动画结束之后，与原容器的右下角对齐
transform-origin: right bottom
// 动画结束之后，与原容器的中心对齐
transform-origin: center

transform(3D)

transform-style（若是正数，则往里转，若是负数，则往外转）

/*让嵌套子元素以3d空间展示*/
transform-style: preserve-3d;
/*让嵌套子元素以2d平面展示, 默认2d*/
transform-style: flat;
/*视距，加给父元素，只对3d变换元素有效，无穷大时接近于none，等于没有效果，通常设置500px~800px 近大远小*/
perspective: 500px;

帧动画

/*规定帧动画必须@keyframes run是自定义名字*/
@keyframes run {
0%, 100%{left:0;top:0;}
25%{left:200;top:0;}
50%{left:200;top:200;}
75%{left:0;top:200;}
}

@keyframes run {
from{left:0;top:0;}
to{left:200;top:0;}
}

E {
/*动画名称、动画持续时间、动画时间函数*/
animation: run 5s ease-in-out;
/*无限循环*/
animation: run 5s ease-in-out infinite;
/*逆向运动*/
animation: run 5s ease-in-out alternate;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航