标记语言：
html
特点：本身只能被读取，本身不具有行为能力和逻辑能力
脚本语言:
javascript，本身具有逻辑能力和行为能力，需要js的解析器解析执行
例：console.log(1+1);//2
编译语言：
java 本身开始具有逻辑能力和行为能力，需编译运行
例：system.out.print(1+1);//2
html：
注释 ctrl + /
核心属性： id唯一标识
class标识一类元素
title描述信息
style 样式
元素分类
1.块级元素：独占一行,用于结构的布局;可设置宽高
div
p：段落
h1-h6：1-6级标题
ul无序列表 ol有序列表
table:thead/tbody/caption/tr占据一整行
td/th共享一行
colspan：跨列数
rowspan：跨行数
form表单制作用
html根元素
body文档内容
2.行内元素：共享一行，用于内容的填充 span
img图片元素：src当前图片地址、alt文字显示、 ，特殊的行内元素，私有属性width、height宽、高
a 超链接
br：换行
input表单使用
相对路径file：//
块级可以嵌套行内元素。行内元素可嵌套行内，块级视情况嵌套块级
新增标签
progress进度栏
mark标记
video视频
audio音频
css：层叠样式表,不能脱离html单独存在
语法：1.属性名和属性值之间使用：隔开，2.多对属性之间使用分号隔开，3.最后一对属性可不加分号
css作用：美化html
速记写法：简写形式
速记写法：内边距padding:10px;//上下左右均为10px
padding:10px 20px;//上下 左右
padding:10px 20px 30px;//上 左右 下
padding:10px 20px 30px 40px;//上 右 下 左
外边距margin:
速记写法：border:1px solid red;
速记写法：border-width:1px;
底层写法：border-top-width
border-left-width
border-right-width;
border-bottom-width;
速记：border-style:solid;
速记：border-color:red;
注释：
1.注释写法 /*注释内容*/
2.注释作用 解释说明，便于代码维护和管理
3.注释能否嵌套使用 <!--注释内容--> css注释不能嵌套使用
<style>
选择器{
}
</style>
html中引入css方式：
1.行内样式：style属性
2.内联样式：style标签
3.外部引入：创建一个以.css为后缀名的文件，link标签：优先解析css，@import url()：优先解析html
引入方式的优先级：行内>内联/外部引入
就近原则：哪个样式更靠近元素，哪一个样式优先级就更高
1.选择器：
标签选择器：根据标签名称选择一类元素
id选择器：通过id属性选择一个元素 #value
类选择器：class为.value
普遍选择器：*代表选择所有
后代选择器：>：选择当前元素直接子元素,不包括孙代
空格：选择当前元素的所有后代元素，包括孙代元素
兄弟选择器：+：选择当前元素之后的一个兄弟元素
~：选择当前元素之后的所有兄弟元素
属性选择器：根据元素的属性选择一类元素 ：
[id]:选择当前页面中具有id属性的元素
[class='one']选择当前页面中具有class属性并且属性值为one的元素
[class~='one']选择当前页面中具有class属性并且属性值之一为one的元素
[class^='o']选择当前页面中具有class属性并且属性值以o开头
[class$='o']选择当前页面中具有class属性并且属性值以o结尾
[class*='o']选择当前页面中具有class属性并且属性值包含o字符
多选择器：使用逗号隔开多个选择器，逗号前后组合
div*5
p*3
div*5，p*3{
}
组合选择器：将多个选择器组合到一起使用
div#one：选择当前页面中所有div标签并且选择div标签中id为one的元素
div.one
伪类选择器：:伪类名称
:first-child
:last-child
:nth-child(number/odd奇数/even偶数)
与状态相关
:hover当鼠标悬停在某元素上时
:active当鼠标按下时的状态
:link当当前元素未被点击过的状态
:visited被访问过之后的状态
顺序：link>visited>hover>active
伪元素选择器：::行内属性
::first-letter第一个字符
::first-line第一行
::selection被选中的文本
::before
content如何将行内变成块级display
::after
选择器优先级：根据特性值进行比较，特性值越大，优先级越高
!important:不计入特性值，优先级最高，不建议使用
style属性：1000
id选择器：100
类选择器/伪类选择器/属性选择器：10
标签选择器/伪元素：1
设置样式：颜色单位：
1.关键字
2.rgb(); 值为0-255之间 r：red g:green b:bule
3.rgba(e,g,b,a); a值为0-1：0代表完全透明；1代表完全不透明
4.16进制颜色值 #fff白色
尺寸单位：1.px像素，绝对单位
2.em相对值单位，根据字体改变，默认字体大小16像素，1em=16像素
3.百分比 相对单位，相对于父级元素的尺寸
文本样式：
color：
font-size:
font-weight:
font-family:
text-indent:
text-:
text-tranform:
加载网络字体：
1.下载字体
2.设置/声明字体 @font-face
{
font-family:"自己的字体"；
src:url(字体地址)；
}
div{
font-family:"自己字体"
}
3.使用字体
字体图标库：fontawesome:
.css
index.html
1.link:
2.使用行内元素<span class="fa fa-***"></span>
iconfont:
.css
1.引入外部css文件link
2.使用<span class="iconfont 项目代码"></span>
继承：initial不继承/inherit继承
word-spacing:单词间距
letter-spacing：字符间距
word-break:break-all:设置超出父元素的部分是否换行显示
word-wrap:
overflow:
hidden:超出元素部分隐藏
scroll:超出元素部分以滚动条形式显示
width
height
min-width
min-height
max-width
max-height
display:元素的隐藏显示---
none;:元素的隐藏,隐藏元素所占空间
block;：元素的显示
visibility:
hidden:元素的隐藏，不会隐藏元素所占空间；相当于修改了元素透明度
visible:元素的显示
border-collapse: collapse;表格边框合并
caption-side:表格标题位置
------
列表样式：
list-style-type
list-style-position
list-style-image:url()
line-height
1.ol 有序列表
子元素li，默认从1开始
2.无序列表
子元素li
3.dl
dt:标题
dd:列表项
盒模型：标准盒模型/w3c盒子/默认盒模型：
box-sizing:content-box
特点：width->content
怪异盒子/边框盒子：
特点：width->盒子=connet+padding+border
box-sizing:border-box
盒子宽度=内容content+内边距padding+边框border
盒子样式：
background: -color
-image
-repeat
-clip
-origin
-position
-size:100px 100px;
100% 100%
cover:背景铺满整个屏幕（以y轴为基准）（尽量不要大图覆盖小图）
contain:背景铺满整个屏幕（以x轴为基准）
-attachment
border :
border-radius:20px
border:1px solid red
border-image-source:url()
border-image-slice:number:注意不加单位，默认单位px
border-image-repeat
表格：
border-collapse: 边框合并
caption-side:规定表格标题的放置方式
布局：
默认文档流：元素默认所在浏览器中的位置
1.display：
inline：将块级元素转换为行内元素
block：将行内元素转换为块级元素
inline-block：将当前元素转换为兼具行内和块级特性的元素
2.浮动布局
float:left/right
使用浮动属性不会遮盖文字,对行内元素设置浮动，会让行内元素可以设置宽高属性;
对于块级元素设置浮动，独占一行属性失效
浮动何时停止：1.当遇到父级边框时停止浮动
2.遇到其他浮动元素停止浮动
清除浮动特性：clear：left/right/both
1.在浮动元素和非浮动元素之间添加一个块级元素,给块级元素设置清除浮动
2.通过伪元素选择器，给所有浮动元素的父级元素使用,给所有浮动元素的父元素设置
:after{
content:"";
clear:left;
display:block;
}
3.定位布局
position:static 静态布局
absolute:绝对定位:默认脱离文档流
不保留定位前空间
默认情况下，绝对定位元素根据body左上角进行定位
当父元素具有定位属性时，子元素会根据父元素左上角进行定位
relative:相对定位:根据元素本身所在位置进行定位
不脱离默认文档流
保留定位前空间
fixed:固定定位 特点与绝对定位相似,使用了固定定位的元素，
不会随着滚动条的滚动而滚动
sticky:粘滞定位:relative+fixed
配合属性：left/right/top/bottom
外边距合并问题：
父子级：1.给父元素添加边框属性
2.将本应设置给子元素的margin设置给父元素的padding
3.给父级或子级添加一个浮动float属性
4.给父级或子级添加position:absolute属性
5.给父元素或子元素添加display:inline-block属性
6.给父元素添加overflow:hidden属性
扫一扫
507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
