HTML和CSS回顾(大纲)

竹青虫

前端/CSS/HTML

发布于：Apr 27, 2020

详细内容

一.HTML基础练习

1.1.使用记事本编写第一个网页

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Hello World
    </body>
</html>

1.2.使用VSCode编写网站

安装VSCode
VSCode安装插件
VSCode配置信息

1.3.元素的使用

1.3.1元素的单标签和双标签

img/input
div/p/span/strong/h1~6

1.3.2.元素的嵌套关系

父元素/祖先元素/子元素/兄弟元素

1.3.3.元素属性写法

1
2
3

<p class="" title-"123">
    
</p>

1.4.注释的使用

二.HTML基本元素

2.1.html元素

根元素
lang属性：设置语言
- 翻译工具
- 语音合成

2.2.head元素

字符编码
- charset=”utf-8”
title

2.3.h/p/strong元素

2.4.code-br-hr元素

2.5.字体实体

>：>
<：<

2.6.span/div

2.7.img元素

src属性
alt属性

2.8.a元素

href：指定超链接
target：
- _self
- _black
- _parent
- _top
- 指定值
- 和iframe结合使用
base元素→http://www.baidu.com
a元素的锚点链接
a元素和img元素结合

三.CSS的基本使用

3.1.CSS引入方式

内联样式 style
文档样式表
外部样式表

3.2.CSS常用选择器

通配选择器
元素选择器
id选择器
类选择器

3.3.最常用CSS属性

width
height
color
background-color
font-size

3.4.颜色设置方式

关键字：red/orange/blue
十六进制：#fffabc
rgb：rgb(r,g,b)
rgba：rgba(r,g,b,a)

四.文字和字体

4.1.文字属性设置

text-decoration
- 下划线
- 删除线
- none
letter-word-spacing
text-transform
text-indent：
- 缩进
text-align:
- 内容对齐
- left
- right
- center
- 行内元素

4.2.字体属性设置

font-size
font-family
font-weight
font-style
- 斜体
font-varient(不常用)
line-height
- 间距等分
font缩写属性：
- font-size/line-height/font-family

五.CSS其他选择器

5.1.属性选择器

1	[title="abc"]{}

**5.2.后代和子代选择器

.box a{
    
}
.box>a{
    
}

5.3.相邻兄弟和全兄弟选择器

div+p{
    
}
div~p{
    
}

5.4.交集和并集选择器

div.box{
    
}
div,.box{
    
}

5.5.伪类选择器

目标伪类：:target
元素状态伪类：:enable
动态伪类：
- :link
- :visited
- :focus
- :hover
- :active
结构伪类
- nth-child
  - 数字
  - n
- nth-last-child
- nth-of-type
- nth-last-of-type
- only-child
- root
- empty
- :not

5.6.伪元素使用

::first-letter
::first-line
::before
::after

六.CSS特性

6.1继承

多去查文档MDN
一般和文字相关的都是可以继承的
- font-size
- line-height
- color

6.2.层叠

后面写的会层叠前面
权重：
- !important
- id:100
- class:10
- 元素:1

七.其他HTML元素

7.1.列表元素

ol li
ul li
dl dt dd
list-style:none

7.2.table

border-collapse:collapse
单元格合并
- 课程表

7.3.表单

input

八.CSS元素类型

8.1.元素的类型

展示方式：
- 块级元素
- 行内元素
浏览器是否替换方式：
- 替换元素
- 非替换元素
display:
- inline
- block
- inline-block’
- none
visibility:visible/hidden
overflow
- scroll：超出部分隐藏可滚动查看
- auto：有超出部分可以滚动，没有就正常显示
- visible：默认值超出依然可见
- hidden：超出部分隐藏
元素之间的空隙是如何产生的
- 浮动解决
- flex
元素的嵌套
- 块级元素可以嵌套行内元素
- p元素不要嵌套div元素

九.CSS的盒子模型

9.1.重要的几个属性

content:
- width
- height
- max_width
- min-width
- max-height
- min-height
padding
- padding缩写属性
margin:
- margin缩写属性
- 传递和折叠问题
  - 只有上下会传递和折叠
border
- border:1px solid red;
行内元素：
- width/height/margin-top/margin-bottom无效
- padding-top/bottom/border-top/bottom比较特殊
  - 看起来有设置但不占空间
设置圆角效果
- border-radius
设置轮廓
- outline
设置阴影
- box-shadow: x偏移量 y偏移量向外扩展模糊度颜色;
文字阴影
水平居中的不同方式
- text-align
- margin:0 auto;

十.背景的设置

background-image
background-color
background-repeat
background-size
background-position
background-attachment
background缩写属性:
光标：cursor:pointer
精灵图

十一.定位的使用

position:
- static
  - 非定位元素
- relative
  - 相对于自己的位置
- absolute
  - 祖先元素的定位元素
  - 子绝父相
- fixed
  - 相对视口

十二.浮动

浮动的十六个规则
1. 浮动元素会从文档正常流中删除，但它仍会影响布局。
2. 浮动非替换元素必须为其指定width，否则元素的width会趋于0而导致浮动元素不能完整显示。
3. 一旦元素具有了浮动属性，它便成为了一个块级元素。
4. 浮动元素的左右外边界不能超出包含块的左右内边界。
5. 浮动元素永不会重叠。
6. 浮动元素不会超过容器的上padding。
7. 后浮动的元素永不会超过先浮动元素的顶端。
8. 浮动元素会尽可能高地放置，便这个高受限于规则6和规则7。
9. 浮动元素的下边界没有要求，因此当容器不足以容下浮动元素时，浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素，而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是：让容器也浮动。
10. 浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。
11. 如果浮动元素设置了负的外边距、这将破坏规则4、6、7。
12. 当浮动元素的width>容器的width时，这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定）。
13. 浮动重叠规则：行内框(如strong)与浮动元素重叠时，其边框、背景、内容均位于浮动元素之上；块框与浮动元素重叠时，其边框、背景在浮动元素之下，而内容在浮动元素之上。
14. 对某个元素应用clear:left，意味着这个元素的左边不能有浮动元素。
15. clear不能用于非块级元素，比如<br/>，在大多数浏览器看来它是一个非块级元素，因此如果对br应用clear来清除浮动不会有任何效果，除非改变br的display:block。
16. 如果某元素应用clear清除浮动，则此元素设置的上外边距值会被忽略，但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素与浮动元素之间有一个明确的间隔，可以在浮动元素上设置下外边距。

十三.CSS补充

13.1.transform

translate
scale
rotate
skew
transition

13.2.vertical-align

13.3背景颜色渐变

background:linear-gradient

13.4.HTML5元素补充

语义化标签：
- nav
- header
- footer
- section
- article
- aside
多媒体元素
- video
- audio
input补充
- 属性：autofocus/multiple/size/placeholder
- type补充：
  - email
  - date
  - time
  - color
  - ……

13.5.flex布局

flex-container
- display:flex/inline-flex
- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-flow缩写属性
- align-content:换行
flex-items
- order
- align-self
- fiex-grow
- flex-shrink
- flex-basis
- flex

13.6.网络字体

使用网络字体
字体图标
- 阿里icon

13.7.动画补充

关键帧动画
- @keyframes
- animation:name duration function;
3D
- perspective
- transform-style:preserve-3d

13.8.文字的换行

test-wrap：

值	描述
normal	只在允许的换行点进行换行。
none	不换行。元素无法容纳的文本会溢出。
unrestricted	在任意两个字符间换行。
suppress	压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

white-space:nowrap
text-overflow:ellipsis;
overflow:hidden;

/*显示两行文本并且显示省略号的办法*/
display: -webkit-box
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
overflow:hidden;

/*显示一行文本并且显示省略号的方法*/
/*文字超出后是否自动换行*/
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

13.9.移动端适配

视口设置

1	<meta name="viewport" content="width=device-width,initial-scale=1.0">

rem设置
- 相对html字体大小
- 问题一：设置不同html的font-size
  - 媒体查询
  - js代码
- 问题二：动态计算rem值
  - vscode插件
  - webpack postcss-pxtorem
  - less/sass计算

JavaScript入门（上）

JavaScript入门（上）详细内容一.JavaScript简介1.1. 什么是JavaScript 官方概念：跨平台的脚本语言平台：运行环境，这里一般指操作系统跨平台：在各种操作系...

媒体元素-Video-Audio

HTML5增加了对媒体类型的支持（在HTML5之前是通过flash或者其他插件实现的）音频：<audio> 视频：<video> HTML<audio&g...