2020/1/30 整理html与css中使用较少的点

最新推荐文章于 2023-04-10 17:25:53 发布

八条尾巴要不完

最新推荐文章于 2023-04-10 17:25:53 发布

阅读量206

点赞数 1

分类专栏： html回顾

本文链接：https://blog.csdn.net/weixin_42619900/article/details/104119773

版权

html回顾专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html:

1.编码问题：
文件保存的编码格式要和html编码声明一致。因为我们通常实在编译器内写代码，所以通常这个问题不会遇到，如果是在记事本这类文本编辑器里书写，那么文本格式就必须与代码中<meta charset="UTF-8">这个语句的格式一致

2.特殊符号
       语法： &符号名;
       小于 <
       大于 >
       小空格  
       大空格 &emsp;
       版权符号 ©其中，版权符号自己写的时候很少用到，不过如果做项目应该会常用

3.语义标签

html5新增的标签
页头/头部 header
主要内容 main
导航 nav
侧边栏 aside
页脚 footer
区域/节/块 section
文章 article

4.超链接
分类：外部链接/内部链接/锚点链接
语法：<a href="要跳转的地址" target="_self|_blank">要标记为链接的内容</a>
说明：href是设置要跳转的路径的
target是设置在哪里打开页面---
_self是在当前页面打开
_blank是在新窗口打开

5.图片 img
语法： alt属性一般要加上，用于图片不能正确加载的时候，显示的替代文本

6.通用属性
所有标签都有一个属性叫title，是鼠标悬停时显示的文本

7.音频：
<audio src="要引入的音频路径" controls autoplay loop>当标签不支持的时候，显示的提示文本</audio>
说明： src是设置播放音乐的路径的
controls属性是设置显示控件的
autoplay设置自动播放
loop是设置自动循环

8.表格
属性cellspacing是设置双线边框之间的间隔的，一般为0
属性cellpadding是设置单元格和内容之间的间隔，一般在10-20之间
跨行用rowspan,跨列用colspan
1.表格变成细边框
语法： border-collapse: collapse;
注意：必须和td的边框一起使用

2.设置表格单元格等分宽度
语法：table-layout: fixed;
width：。。。
注意：他必须配合表格的宽度一起使用

9.表单
自动获取焦点 autofocus

10.字体样式
语法：font-style:normal| italic| oblique
说明：italic| oblique都是实现斜体的，italic只在对应支持他的字体里面有效。

13.font复合属性
语法：font :font-style font-weight font-size/line-height font-family
说明：一次可以设置多个字体样式，但是有固定格式
最简单的形式也应该是font:font-size/line-height font-family，否则不生效

14.垂直对齐
语法：vertical-align：top |middle |bottom
注意：他只对支持valign特性的元素有效-比如：img和table

15.文本换行
语法：white-space:normal | pre |nowrap
normal是默认状态
pre是保留空格和换行，原样输出
nowrap是强制不换行
单行文本超出显示省略号（面试题***）
1.设置宽度 width:*px;
2.强制不换行 white-space:nowrap;
3.超出隐藏 overflow:hidden;
4.超出的标识是省略号 text-overflow: ellipsis;
5.文本超出、溢出标识的语法： text-overflow: ellipsis |clip
说明：ellipsis是省略号，clip是裁剪

字间距-> letter-spacing:*px;
词间距-> word-spacing:*px;

16.盒子模型
标准盒子模型和怪异盒子模型：他们都是盒子模型。
区别是：计算元素的实际宽高不一样
标准盒子模型的实际宽度 = 设置的宽度 + padding（左右）+边框（左右）
怪异盒子模型的实际宽度 = 设置的宽度
设置盒子模型：
语法：box-sizing:content-box | border-box
说明：content-box是标准盒子模型，border-box是怪异盒子模型
一般在手机端会使用怪异盒子模型。

17.清除浮动的4种方式：
方式1：给浮动元素的父亲设置高度；
方式2:给浮动元素添加一个空的兄弟元素div
然后给该div设置clear:both

说明：clear:both是清除前面兄弟的左右浮动。如果值为left代表清除前面的左浮动，为right代表清除右浮动、
方式3：给浮动元素的父亲添加一个类名clearfix
然后给clearfix后面添加一个有以下样式的伪元素
.clearfix:after{
content:"";
height:0;
display:block; //是一个块级元素
clear:both;
}
兼容IE6
.clearfix{
zoom:1;
}
方式4：给浮动元素父级添加一个overflow:hidden;

18.z-index:设置元素在Z轴上的堆叠顺序
注意：元素默认的z-index的值为0
z-index只有被设置了非static定位的元素才可以设置。

19. 用css实现三角形
1.设置一个宽高为0的盒子
2.设置所有边框为透明色
3.设置要保留的三角形对应的边的边框有颜色。

20.隐藏元素

css:

1.选择器
伪类选择器
       :link 超链接没有被点击的时候
       :hover 鼠标悬停的时候
       :active 激活的时候（鼠标点击按住不松的时候）
       :visited 已访问的链接
结构伪类选择器
1.child系列
注意：child系列强调在父元素里面的位次关系。
  2.type系列
type系列强调元素在父亲下面的所有同类型元素的顺序
E:empty 匹配为空的元素E(什么都不能有，包括空格和换行之类的)

否定伪类选择器
E:not(s) 匹配所有E元素，排除满足s条件的元素。

伪类选择器
E:before 在E元素之前添加内容
E:after 在E元素之后添加内容

注意：这两个选择器需要配合content属性一起使用
举例： p:after{
content:"添加在p后面的内容";
}
伪类和伪元素的区别：（面试题****）
1.概念上的区别：
伪类：是一种临时状态，只有状态被触发的时候才会生效
伪元素：是一个虚拟的dom节点。

2.表示方式上不一样
伪类用的单冒号
伪元素用的双冒号

4.伪元素选择器
::first-letter 第一个字符
::first-line 第一行文本
::placeholder 输入框的占位符
::selection 匹配鼠标选中内容的状态

2.获取焦点
语法： input:focus{ }
设置在input输入框获取到焦点的时候的样式（鼠标点击这个输入框后）