html 与 css 知识点集合

yuqing521 2020-02-03 html5css3前端

# html与css知识点集合

# 1.文字位于块状元素的居中问题

方法：文字行高等于块状元素高度

line-height =200px;
height = 100px;

1
2

# 2.文字样式

css样式	描述
text - indent =2 em;	首行缩进2个字符
letter-spacing:2px;	字母间距
word-spacing:2px;	词语间距
font-weight :bold;	文字值描述normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。
text-decoration: none;	无文本样式
text-decoration: line-through;	删除线

# 3.光标（cursor）

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
x-resize	此光标指示矩形框的边缘可向某方向移动
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

# 4.块级元素与行级元素（display）

值	描述	特点
block	此元素将显示为块级元素，此元素前后会带有换行符。	独占一行
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。	无宽高
inline-block	行内块元素。（CSS2.1 新增的值）	有宽高，不独占一行

# block format context（bfc）

margin 塌陷

在文档流中，父元素的高度默认是被子元素撑开的

也就是说子元素有多高，父元素就有多高

但是当子元素设置浮动之后，子元素会完全脱离文档流

此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷

解决方法：

子元素添加

position:absolute; //设置绝对定位
display:inline-block;  //设置成行块级元素
float:left/right;  //设置浮动
overflow:hidden;  //超出边框隐藏

1
2
3
4

margin 合并

同级块级元素相对margin取其最大值

# 浮动流

所产生的浮动流的元素，块级元素看不见，产生bfc和文本（行级元素inline）以及文本能看见

父级包裹浮动流元素（取消浮动）

1.设置父级bfc（紧密包裹）

2.用无意义元素设置clear:both；

3.使用伪元素

伪元素在元素已经存在，默认为inline

div :after{
	content:"";  //样式为空
	clear:both;  //清除浮动
	display:block;  //设置块级元素
}

1
2
3
4
5

# 5.溢出容器打点显示

单行文字溢出打点

div {
  width: 100px;  //设置行宽
  white-space: nowrap;  //取消换行
  overflow: hidden;   //溢出隐藏
  text-overflow: ellipsis;   //溢出打点
}

1
2
3
4
5
6

多行文字溢出打点

div {
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3; //行数
          -webkit-box-orient: vertical;
    }

1
2
3
4
5
6
7
8

(用于-webkit-新版)

老版采用截断方式或者后端根据逻辑生成文本打点

# 6.背景图片

css样式	描述
background-attachment:	scroll（滚动），fixed（固定）
background-size:	设置背景照片长宽
background-repeat:	repeat/no-repeat 重复/不重复
background-position:	背景图片占位（长%宽% ）方位（center居中）

可设置多背景

# 7.图文共存

网速好时显示照片，网速差时显示文字

方法一：

padding-top:150px; //用内边距移除图片区域
over-flow:hidden; //溢出隐藏

1
2

方法二：

text-indent:100px;  //缩进移出背景图范围
while-space:nowrap;  //取消换行
over-flow:hidden; //溢出隐藏

1
2
3

# 8.！important 属性

提升属性权重,时期权重值无穷大

# 9.善于使用父级padding代替子集margin

# 10.css@规则

@keyframes, 描述 CSS 动画的中间步骤 .

@import, 告诉 CSS 引擎引入一个外部样式表

@media, 如果满足媒介查询的条件则条件规则组里的规则生效。

详情见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/At-rule

# 11.HTML 5 新增内容

# HTML 5 语义化标签

新增结构元素

<section>
  具有相似主题的一组内容(建议有标题内容不宜作为容器)
</section>

<article>表示文档、页面、应用或一个独立的容器</article>

<aside>
  页面的附属信息，在article内部是引述，外部常用于侧边栏
</aside>

<header>
  页眉通常包括网站标志、主导航、全站链接以及搜索框。
  也适合对页面内部一组介绍性或导航性内容进行标记。
</header>

<hgroup>
  将标题打包分组（主标题副标题）
</hgroup>

<footer>脚部信息</footer>

<nav>标记导航，仅对文档中重要的链接群使用</nav>

<figure>可附标题内容元素</figure>

<address>
  呈现文档的详细信息
</address>

<mark>突出强调</mark>

<progress>进度条</progress>

<metter>计数器</metter>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

form 标签

button 按钮

input 输入表单

output 输出表单

select 选择列表

textarea 义多行的文本输入控件

# HTML 5 新增input属性及类型

email 在提交表单时，会自动验证 email 域的值 url 在提交表单时，会自动验证 url 域的值。 number <input type="number" name="points" min="1" max="10" />

range range 类型显示为滑动条 <input type="range" name="points" min="1" max="10" />

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

Date pickers (date, month, week, time, datetime, datetime-local)

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

search search 域显示为常规的文本域。

color

# HTML 音视频

<!--单音频-->
<audio src ="#音频路径" controls="controls">浏览器不支持</audio>
<!--多音频-->
<audio controls="controls">
    <!--相同的音频，不同的格式-->
    <!--source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式-->
    <source src="#音频路径">
    <source src="#音频路径">
</audio>

1
2
3
4
5
6
7
8
9

<!--单视频-->
<video src ="#视频路径" controls="controls" height ="300px" width="300px" >浏览器不支持</video>
<!--多视频-->
<video controls="controls"height ="300px" width="300px">
    <!--相同的视频，不同的格式-->
    <!--source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式-->
    <source src="#视频路径">
    <source src="#视频路径">
</video>

1
2
3
4
5
6
7
8
9

# 企业思维

先定义css功能再写样式（css框架）

先初始有用的标签

如em标签重新定义用处（突出强调）

vertical-align:middle

# 样式重置与模块化

淘宝的样式重置

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

详情见：https://www.cnblogs.com/heyiming/p/5685865.html

H标签重新定义字体大小制作区块的标题

模块定义功能css（如清除浮动）

# title 小图标（fanvicon.ico）

fanvicon.ico 放在网站的根目录下

<link rel ="icon" href="./favicon.ico">

# base 标签

设置超链接中基础的URL

后续超链接从中的下级目录访问访问

<base target ="_blank"> 
<!--下面超链接在新页面打开-->

1
2

target 属性

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

# 字体图标

阿里图标库：https://www.iconfont.cn/

# css sprites 小图标集成一起用位置控制

（大公司为了少请求追求性能）需要精确设计

# Emmet语法规则

 id（#）,class（.）

 子节点（>），兄弟节点（+），上级节点（^）

 重复（*）

 分组（()）

 属性（[attr]）——id，class都有怎么能少了属性呢

 文本（{}）

一个$ 代表从零开始一位数递增，

如果想自定义从几开始递增的话就利用：$@+数字*数字*

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# IE滤镜代替css3的属性

IE 滤镜	W3C 滤镜
Alpha：设置透明层次.	grayscale 灰度
blur：创建高速度移动效果，即模糊效果.	sepia 褐色
Chroma：制作专用颜色透明.	saturate 饱和度
DropShadow：创建对象的固定影子.	hue-rotate 色相旋转
FlipH：创建水平镜像图片.	invert 反色
FlipV：创建垂直镜像图片.	opacity 透明度
glow：加光辉在附近对象的边外.	brightness 亮度
gray：把图片灰度化.	contrast 对比度
invert：反色.	blur 模糊
light：创建光源在对象上.	drop-shadow 阴影
mask：创建透明掩膜在对象上.
shadow：创建偏移固定影子.
wave：波纹效果.
Xray：使对象变的像被x光照射一样.

# a锚点跳转指定地方

<div id="#ch_title">这是文章标题</div>
<a href="#ch_title">文章标题</a>

1
2

# 取消父级对子集影响

很多属性子元素会默认继承父元素的属性，font-size，font-weight，color等，想要去除父元素对子元素的影响，可以对相应元素设置initial，如：font-size：initial；就可以清楚父元素的font-size对资源度的影响了。

# 使用伪类选择器:not 排除选择范围

<style>
.dom  div:not(:first-child){
	background:red;
}
</style>

1
2
3
4
5

说明:

:not(selector) 选择器匹配非指定元素/选择器的每个元素。

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

# `<meta>`标签

# name="referrer"

属性	值	描述
http-equiv	expires refresh	把 content 属性关联到 HTTP 头部。
name	author description keywords generator revisedothers	把 content 属性关联到一个名称。

该属性定义文档级元数据的名称。如果以下其中一个属性设置了itemprop, http-equiv or charset ，就不能在设置这个属性了。

author，就是这个文档的作者名称，可以用自由的格式去定义；
description，其中包含页面内容的简短和精确的描述。一些浏览器，如Firefox和Opera，将其用作书签页面的默认描述。
keywords, 包含与逗号分隔的页面内容相关的单词。
application-name，定义正运行在该网页上的网络应用名称；
generator, 包含生成页面的软件的标识符。
referrer 控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容：

# http-equiv="refresh"

 <meta http-equiv="refresh" content="5;url=https://www.baidu.com">

这个属性指定:

如果content 只包含一个正整数,则是重新载入页面的时间间隔(秒);
如果content 包含一个正整数并且跟着一个字符串,则是重定向到指定链接的时间间隔(秒)

<script>   
    // 以下方式直接跳转  
    window.location.href = 'https://www.baidu.com/';
    // 五秒以后再跳转
    setTimeout("javascript:location.href='https://www.baidu.com'", 5000);   
</script>

1
2
3
4
5
6

# name="viewport"

viewport, 它提供有关视口初始大小的提示，仅供移动设备使用。

Value	可能值	描述
`width`	一个正整数或者字符串 `device-width`	以pixels（像素）为单位，定义viewport（视口）的宽度。
`height`	一个正整数或者字符串 `device-height`	以pixels（像素）为单位，定义viewport（视口）的高度。
`initial-scale`	`一个0.0` 到`10.0之间的正数`	定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。
`maximum-scale`	`一个0.0` 到`10.0之间的正数`	定义缩放的最大值；它必须大于或等于`minimum-scale`的值，不然会导致不确定的行为发生。
`minimum-scale`	一个`0.0` 到`10.0`之间的正数	定义缩放的最小值；它必须小于或等于`maximum-scale`的值，不然会导致不确定的行为发生。
`user-scalable`	一个布尔值（`yes`或者`no`）	如果设置为`no`，用户将不能放大或缩小网页。默认值为`yes`。

Last Updated: 2021/1/18 下午8:16:51

CodeLife

Choose mode