html和css原理,html和css概括总结

一、HTML学习

Ⅰ、HTML常见元素和理解

head区元素：页面中的一些资源或者信息描述，不会直接显示在页面中

body区元素：能够在页面上显示出来的内容

2.png

1. 列表标签

1.1 无序列表

属性：

type:

circle 空心圆

disc圆点

square正方形

• 项目一
• 项目二
• 项目三

1.2 有序列表

属性：

type类型：

1 阿拉伯数字

a 小写英文字母

A 大写英文字母

i 小写罗马数字

I 大写罗马数字

start:

序号的起始位置(比如：下面代码中 2 ，就是从 b 开始)

2. 时间
3. 金钱
4. 权利
5. 自由

1.3 自定义列表

---用来解释名词的列表

标签解释：

dl: definition-list 定义自定义列表

dt: definition-title 定义自定义项目

dd: definition-description 定义自定义描述

代码演示：

水果

苹果

香蕉

橘子

……

动漫

斗罗大陆

斗破苍穹

魔道祖师

……

☆ 无序列表

不以数字为开始，而是使用一个符号作为分项标记的列表。

☆ 有序列表

使用数字编号，分项带有顺序性质的列表。

☆ 定义列表

用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。

Ⅱ、表格table

表格

姓名性别爱好

小刘男唱歌小徐女小张男吹牛男吹牛

tt.png

2. html大纲

工具：h5o: (https://h5o.github.io/)

可以显示出HTML文档的结构，所以要求HTML结构要划分合理

3. HTML版本

image.png

4. 嵌套关系

image.png

解读：

p标签是块级元素，不能在包含块级元素

a标签是行内元素，却可以包含块级元素

a为什么可以包含块级元素呢？

--因为a标签在解读的时候是transparent， 不参与解读，就是当作不存在的。下面代码解读时相当于body中直接包了一个div

// 合法的

啦啦啦

// 不合法，因为a解读的时候是被自动去掉的，所以下面相当于p包裹了一个div,解读时会出错

啦啦啦

5. HTML面试真题

image.png

image.png

image.png

说明：

新的语义化元素，比如section，artical, header, main, footer ,,

表单增强，比如input里面的一些新特性，表单验证功能等

新的API

image.png

image.png

image.png

image.png

image.png

image.png

二、css学习

1. 非布局样式

1.1 字体

1.1.1 字体族：每个字体族都是一堆有相同特征的字体，比如衬线体和非衬线体。

注意：每一个字体族都包含很多的字体，当我们指定某个字体族的时候，系统会为我们选出这个字体族中的某个字体，但不能保证是什么字体

serif: 衬线体，字体周围会有一些装饰性的弯弯，勾勾，小横线……，比如宋体

sans-serif: 非衬线体，就是没有什么装饰性的东西，比如黑体

monospace: 等宽字体，就是每个字母所占据的宽度都是一样的

cursive: 手写体

fantasy: 花体

1.1.2 多字体fallback: 可以指定一系列的字体，如果前面的字体找不到，会依次往后面找

很多的网站都会有很长的字体，这是因为他们要去适配不同的平台，因为每个平台下都有自己独特的，显示最好的字体，而且我们要把范围小的字体尽量放到前面

比如：

font-family: "PingFang SC", "Microsoft Yahei", monospace;

mac的默认字体是PingFang SC，但是mac用户安装office时安装上了Microsoft Yahei字体，所以如果微软雅黑写在前面，那么会有一部分的mac用户会使用微软雅黑来渲染页面，而在mac上，PingFang SC是显示最好的

1.1.3 网络字体、自定义字体: 使用网络字体，或者使用自定义字体

注意：使用网络字体，注意跨域的问题

// 引用本地下载好的字体文件

@font-face {

font-family: "IF";

src: url(./IndieFlower.ttf)

}

.custom-font {

font-family: IF;

}

你好 hello world

引用外部网站为我们提供的字体css

// css里面已经包含了字体的定义，名字

.custom-font {

font-family: IF;

}

你好 hello world

1.1.4 iconfont: 字体图标

---阿里巴巴矢量字体图标库

1.2 背景

1.2.1 背景渐变

body {

background: yellow;

}

.c1 {

height: 90px;

/* background: rgba(0, 0, 0, .5); */

/* background: red; */

/* background-size: 30px 30px */

}

.c2 {

height: 90px;

/* background: -webkit-linear-gradient(left, red, blue); */ /*过时的写法*/

/* background: linear-gradient(to right, white, red, black, white); */

/* background: linear-gradient(0deg, red, blue); /*0度是从下到上，渐变角度是顺时针变化的 */

/* background: linear-gradient(45deg, red 0, green 10%, yellow 50%, blue 100%); */

background: linear-gradient(135deg, transparent 0, transparent 49.5%, blue 49.5%, blue 50.5%, transparent 50.5%, transparent 100%),

linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);

/*多背景叠加*/

background-size: 30px 30px; /*这个属性不仅适用于背景图片，同样适用于渐变*/

}

背景渐变画出的图：

111222.png

1.2.2 背景图

.c1 {

height: 900px;

background: red url(./111.png); /*颜色和背景图片的叠加，默认背景图片在上面*/

background-repeat: no-repeat; /*背景图默认是平铺的*/

background-position: left top; /*指定背景图片的位置*/

background-size: 150px 60px; /*控制背景图的大小*/

}

.c2{ /*精灵图的应用*/

width:20px;

height:20px;

background:url(./test_bg.png) no-repeat;

background-position: -17px -5px;

background-size: 261px 113px;

margin-bottom: 100px;

}

.c3{

width: 20px;

height: 20px;

background: url(./test_bg.png) no-repeat;

background-position: -169px -23px;

background-size: 261px 113px;

}

1.2.3 注意要点

背景是可以相互叠加的，所以纯色背景，线性渐变背景，中心发射背景通过叠加可以做出很多酷炫的效果

background-size不只是可以调节背景图片的尺寸，还可以调节渐变背景的尺寸。

背景图片与纯色背景叠加默认图片在上，背景图片默认平铺。

精灵图的使用就是因为背景图片可叠加这一重要特性。精灵图的好处：可以减少http请求的次数，页面响应速度快。

多分辨率适配：原理就是本来一个像素显示改成2到3个像素共同显示，就是把背景图缩小2到3倍

base64的使用：把一张图片的url转换成base64编码，就相当于把图片放在了css文件中，减少了单独请求图片的http次数，不过转码之后css文件体积会变大，加载css文件的时间会变长，所以一般对小图片才实行base64编码。

1.3 边框

1.3.1 边框的线型，大小，颜色

1.3.2 边框背景图

---将图片作为边框使用

.c2 {

width: 400px;

height: 200px;

border: 30px solid transparent;

border-image: url(./border.png) 30 stretch; /*默认stretch*/

border-image: url(./border.png) 30 repeat; /*简单粗暴，会有不完整的块*/

border-image: url(./border.png) 30 round; /*会适当压缩块，使之每个都完整*/

/*30是指在四个角30px的向内便宜，隔离出来不参与变形*/

}

1.3.3 边框衔接(三角形)

原理：边框的衔接是斜切的

.c3 {

width: 0;

height: 200px;

border-bottom: 80px solid red;

border-right: 80px solid transparent;

border-left: 80px solid transparent;

}

2. css布局

2.1 表格布局(过时)

特点：1. 表格布局语义化不明确

表格布局单元格内容会自动垂直居中

.left {

background: red;

}

.right {

background: yellow;

}

table {

width: 800px;

height: 200px;

border: 1px solid black;

border-collapse: collapse; /*边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性*/

}

左

右

表格布局display: table的使用，更加灵活

.left {

background: red;

}

.right {

background: yellow;

}

table {

width: 800px;

height: 200px;

border: 1px solid black;

border-collapse: collapse;

}

.table {

display: table;

width: 800px;

height: 200px;

margin-top: 20px;

border: 1px solid black;

}

.table-row {

display: table-row;

}

.table-cell {

display: table-cell;

line-height: 200px;

}

左

右

左

右

3. css动画总结

css动画分类：

transition 补间动画

keyframe 关键帧动画

逐帧动画

3.1 transition 补间动画

---补间动画，就是给出初始和结束状态，中间状态由css自行脑补

既然中间状态由css自己运算，那么就不可能所有的属性变化都能运算，只能部分能够运算。

可以进行补间动画的属性：

位置-平移(left/right/margin/transform)

方位-旋转(transform)

大小-缩放(scale)

透明度(opacity)

其他-线性变换(transform)

.container {

width: 100px;

height: 100px;

background: red;

/* transition: width 1s, background 3s; */

transition: all 1s;

/* transition-timing-function: ease-in-out; */

transition-timing-function: cubic-bezier(.2,-0.36,.7,1.36);

/*贝塞尔曲线由生成器生成*/

}

.container:hover {

width: 800px;

background: blue;

}

3.2 关键帧动画

相当于多个补间动画

与元素状态的变化无关(补间动画必须元素状态改变，动画才执行，比如上文中必须 hover 动画执行；关键帧动画则进入页面会直接执行)

定义更加灵活

.container {

width: 100px;

height: 100px;

background: red;

animation: run 1s;

/* animation-direction: reverse; */

animation-iteration-count: infinite; /*播放的次数*/

/* animation-play-state: paused; */ /*播放状态是开始还是暂停*/

/* animation-fill-mode: forwards; */ /*最后是停留在动画结束还是开始*/

}

@keyframes run {

0% {

width: 100px;

}

50% {

width: 800px;

}

100% {

width: 100px

}

}

3.3 逐帧动画

是使用关键帧技术来实现的

使用于无法补间计算的动画

资源较大

使用steps()

.container {

width: 100px;

height: 100px;

border: 1px solid red;

background: url(./animal.png) no-repeat;

animation: run 1s infinite;

animation-timing-function: steps(1)

/*表示时间与动画进度的关系，steps(1)代表每两帧之间有一个画面，使动画不去补间*/

}

@keyframes run{

0%{

background-position: 0 0;

}

12.5%{

background-position: -100px 0;

}

25%{

background-position: -200px 0;

}

37.5%{

background-position: -300px 0;

}

50%{

background-position: 0 -100px;

}

62.5%{

background-position: -100px -100px;

}

75%{

background-position: -200px -100px;

}

87.5%{

background-position: -300px -100px;

}

100%{

background-position: 0 0;

}

}