html常用知识点

1、前端页面的组成：HTML（超文本标记语言，结构层）、css（层叠样式表，表现层）、JavaScript（脚本语言，行为层）
2、HTML文档结构
3、HTML语法：<标签></标签> 双标签
<标签名 /> 单标签
4、html注释内容：
css注释内容：/* css注释内容 ctrl + / 或Ctrl+ shift + / */
5、标签——元素、标记
div标签：<div>[内容]</div> 盒子
特点：宽度100%； 高度自适应； 独立成行
img标签：<img src="图片的URL地址" alt="替换文本"/>
特点：v默认横向显示；换行和空格都会解析成空格
ul-li标签：无序列表 (css标准规定，ul里要放li,li里面可以放任意)

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

特点：宽度100%；高度自适应；独立成行；自带外间距margin和内填充padding；自带列表符（list-style: none; ）

7、选择器：
类选择器：结构中：<div class="box">
      样式中：.box{ 属性：属性值}
ID选择器：结构中：<div class="box">
      样式中：#box{ 属性：属性值}
群组选择器（分组选择器）：具有相同样式时使用，选择器之间用逗号隔开
样式中：

.box1,
.box2,
.box3{
}

伪元素选择器：
element:before{ content:""; } 在元素内部，内容之前添加一个内容
element:after{ content:"";} 在元素内部，内容之后添加一个内容
标签选择器 <div></div>
      样式中：.div{}
后代选择器 ：选择器之间用空格隔开
结构中:

 <div class="box1"></div>
<div class="box2"></div

样式中：.box1 box2

子类选择器：用父类类名>子类类名
样式中:box1>box2

后代选择器和子选择器区别
(直接上代码)

后代选择器 又称为包含选择器。如上面两个例子：后代选择器选择的是box1后面所有的box2
子选择器：选择父类为box1里的所有box2
子选择器只能选择自己的子类，第二级元素，而不能选择第二级别以下的元素？

div > p {
 <!-- 选择 p 元素成功-->
}

div > strong {
 <!-- 选择 strong 元素失败-->
}

<div>
 <p><strong>子选择器</strong></p>
</div>


<div>
 <p><strong>子选择器</strong></p>
</div

后代选择能指定的对象，只要是元素下面的元素，无论几级，都能选定。

div p {
 <!-- 选择 p 元素成功-->
}

div strong {
 <!-- 选择 strong 元素成功-->
}

<div>
 <p><strong>后代选择器</strong></p>
</div>


<div>
 <p><strong>后代选择器</strong></p>
</div>

伪类选择器:
element:hover{ 鼠标悬停到element上时，显示的样式 }(常用：hover,link)

* 通配符选择器：匹配所有的元素,(用于清楚样式，css reset)

兄弟选择器

<div class="box"></div>
<div class="box1">
.box +box1{}

8、属性: 属性值;
width属性，宽度，单位像素px
height属性，高度，单位像素px
background-color属性，背景颜色，颜色结点（关键词 red）、十六进制色值（取值范围0-9a-f，#ff0000）
border-radius属性，圆角，单位%、px 值可能一个值、两个值、三个值、四个值

2D转换：
transform: rotate(ndeg);旋转 单位deg角度
transform: scale();缩放 没有单位 0-1表示缩小，1表示正常，1以上表示放大
transform: scale(x,y) x表示沿着水平放下缩放，y表示沿垂直方向缩放
transform: translate(xpos,ypos);位移，单位%、px
transform-origin: 设置基点位置

帧动画：
1）定义帧动画 @keyframes 动画名称{ }
2) 引用帧动画 animation: 动画名称 动画的执行时间 动画类型 延迟时间 动画执行的次数 反向轮流播放 停留在终点位置;
animation-delay 延迟时间，单位s、ms

position:
position: absolute; 绝对定位 不占位 left/right属性，top/bottom属性(如果上级上上级没定位，根据boday定位)
position: relative; 相对定位 占位

border属性，边框
border: border-width border-style border-color;
border-color 值可以是一个值 两个值 三个值 四个值
border-top、border-right、border-bottom、border-left

overflow属性，溢出处理
overflow: hidden; 溢出隐藏
img图片：默认横向显示，空格换行解析成空格
(小细节：如何让图片适应div:给图片宽高设置100%)

z-index属性，层级设置，(需要与position配合使用才会生效

ext-align属性，文本对齐方式
text-align: center; 文本水平居中
(小细节：文字垂直居中：line-height:盒子高度)

text-decoration属性，文本装饰线
text-decoration: underline; 下划线

color属性，文字颜色
font-size属性 (字号)
font-family属性 (字体系类)
line-height属性 (行高)
margin属性，外间距
margin: 0 auto; 盒子的水平居中，必须与width属性配合使用才会生效
margin-top属性值 上外间距
margin-left属性
margin-right属性
float属性
transition属性 (过度效果) 例如：transtion:width:2s;
all(全部属性都变化) 时间；

(小细节：盒子垂直居中：top:50%; left:50%; transform:-50%,-50%)

有关透明

background-color:white;
 opacity: 0.6;		/*都透明里面内容也透明*/	 
 
 background-color: rgba(255,255,255,0.4);/*表示只有背景透明内容还是原来样式*/

显示隐藏:
display:none;不占位
display:block;显示

渐变色
background-image:linear-gradient(方向，颜色 范围，颜色 范围)
(小细节考虑浏览器兼容性)
镜像渐变：
background-image:radial-gradient(center,颜色 范围，颜色 范围)

盒子阴影
box-shadow:x-shadow y-shadow blur 阴影大小 阴影颜色 (内阴影or外阴影)
多阴影之间用都好隔开

最后

以上就是贪玩大米最近收集整理的关于html常用知识点的全部内容，更多相关html常用知识点内容请搜索靠谱客的其他文章。