关于html和css的笔记
1、html【超文本标记语言】 类似于快递上的地址，快递公司根据不同的地址发送目的地
1. 普通文本与超文本
普通文本
纯字符
超文本
字符，图片，超链接，视频，音频
hello world
段落
百度一下
2. 浏览器由上而下解析html文件，会将标签自动进行转换，变成浏览器页面元素显示
2、开发环境
编辑器
vscode、sublime
浏览器
firefox、chrome、IE
服务器
3、B/S架构【浏览器/服务器模式】
B Browser浏览器
S Server服务器
手机、电脑的浏览器 <--> 各类网站(服务器) <--> 数据库(java/python/nodejs)
演示资源库
4、html网页
1. 编写hello world
2. 结构
doctype 声明部分
html Html的根元素，用来包含html文档的所有元素
head 不会显示到浏览器视口中
title 显示在浏览器选项卡的标题
meta 用于设置元信息，配置
charset=utf-8
编码
编辑器 UTF-8
解码
浏览器
程序员 编写
浏览器 解析
body
网页主体
3. 基本语法
1) 注释 ctrl + /
2) 元素组成
开始标签、内容(文本或者子标签)、结束标签
hello world
hello world
3) 属性
在开始标签中可以添加属性
属性名不区分大小写
1. 核心属性【绝大多数标签都可以应用的属性】
id 文档内部的唯一标识
class 类
one
two
three
title 描述
style 样式，取值为css规则
css规则,键值对，键值之间通过冒号分割，规则之间通过分号分割
2. 特有属性【某些标签特有的】
a
href
target
img
alt
src
4) 元素分类
1. 块级元素
作用：作为页面框架，或者容器。是页面的主体
特性：
1) 独占一行空间
2) 默认宽度为100%，默认高度由子元素或者内容决定
3) 可以为其指定宽高 style="width:;height:;"
div 无意义的块元素
h1~h3 标题
font-size
font-weight
margin
p 段落
margin
html
body
margin
ul、li 无序列表，列表项
ul
margin
padding
list-style
li
ol、li 有序列表，列表项
ol
margin
padding
list-style
dl、dt、dd 有序列表
dl
margin
dd
margin
H5新增的块元素（语义化标签）
header(头)
nav
article（主体）
section (部分)
footer（脚）
video
audio
2. 行内元素
作用：点缀网页，填充内容
特性：
1) 与其他行内元素共享一行空间
2) 默认宽高由内容决定
3) 不能为其指定宽和高
4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素
span 无意义的行内元素
a 超级链接
默认样式
color
text-decoration
cursor
默认事件（js - dom） 点击事件
href
url
相对路径
绝对路径
锚点
target
_self 当前页打开
_blank 新建选项卡打开
img
src 图片地址
url http://
相对路径
绝对路径 file://从根目录开始
alt 图片找不到的时候显示的文本
![]()
strong
bold
b
em
i
sub
sup
...
3. 功能元素 （行内元素）
1) 表格
table
【属性】border、width、、、、
caption 表格标题
thead 表头部分
tr
th/td
tbody 表格主体部分【不可以省略】
tr
td/th
【属性】colspan、rowspan、width、align
td/th中可以放任意子元素
tfoot 表底部分
tr
td
【注意】：每一行中的列数应该是相等
案例：个人计划表
作业：制作个人简历、课表
2) 表单（前后台交互）
用户 -> 表单 -> 后台 -> 数据库
注册页面
登录页面
搜索框
form
action 后台接口地址
method 请求方式
get
参数拼接在url后面，通过?来分割
传递参数较少
post
参数存放在请求体中，安全
传递参数更多
enctype 编码方式
1. enctype='application/x-www-form-urlencoded'
浏览器就会将参数转换为【查询字符串 qs】格式
username=tom&password=123321&
2. multipart/form-data
当有附件在表单中的时候，enctype务必设置为这种格式
input
name: 作为参数中的key
value: 作为参数中的value,在按钮中务必指定value值
type:
text 单行文本框
password 密码框
submit 提交按钮
radio 单选按钮
checkbox 复选按钮
file 附件选择器
checked 单值属性 默认选择
placeholder 提示语
select
option
标签中的文本显示在网页中，提交的值应该是option的value值，当这个值没有设定的时候，提交的是标签中的文本
textarea
多行文本域
placeholder 提示语
第三方库
日期插件
地址选择器地址
附件上传
富文本
3) H5新增
标签
progress 进度条
output 表示用户动作产生的结果
datalist 表示其他控件可用的值
属性
type
date 日期
datetime-local 日期时间控件
time 时间控件
number 数字控件（只能输入数字）
range 范围控件（通过控制条可以调整取值）
search 搜索控件
tel 电话控件
url 地址控件
color 颜色控件
email email控件
前端三大要素：
html：木偶
css：化妆
javascript：动态展示
css:
1.什么是css？
cascading style sheets
层叠样式表
2.语法
1.属性名和属性值之间使用:隔开
2.多对属性之间使用;隔开
3.最后一对属性可以不加分号
id='one'
class='two'
style="根据css的语法进行设置"
title='mydiv'
div*10
速记写法：
简写形式：
div：10px
盒子：内容区+内边距+边框+外边距margin
padding-left:10px;
padding-right:10px;
padidng-top:10px;
padding-bottom:10px;
–>
简写：
padding:10px;//上下左右均为10px
padding:10px 20px;//上下 左右
padding:10px 20px 30px;//上 左右 下
padding:10px 20px 30px 40px;//上 右 下 左
margin-left:
-->
margin:
border:1px solid red;
border-width:1px;
border-top-width
border-left-width
border-right-width
border-bottom-width
border-style
border-color
3.注释
1.注释写法
/*注释内容*/
2.注释作用
解释说明
便于代码的维护和管理
3.注释能否嵌套使用
注释不能嵌套使用
内容-->
/*
/*
*/
*/
html中引入css的方式：
1.行内样式
style属性
2.内联样式
style标签
3.外部引入
创建一个以.css为后缀名的文件
link标签：优先解析css
不建议使用：@import url()：优先解析html
引入方式的优先级：
行内样式>内联/外部引入
就近原则：哪一个样式更靠近元素，那一个样式的优先级更高
内联样式
外部link标签：实际开发
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,p{
width:100px;
height:100px;
}
#one,p,.two{
}
div .outer1,div outer2{
}
div .outer1,outer2{
}
组合选择器：
将多个选择器组合到一起使用
div#one:选择当前页面中所有div标签并且选择div标签汇总id为one的元素
div.one{
}
伪类选择器：
:伪类名称
:first-child
:last-child
:nth-child(number/odd/even)
和状态相关的：
:hover:当鼠标悬停在某个元素上时
:avtive：当鼠标按下时的状态
:link：当当前元素未被点击过的状态
:visited：被访问过之后的状态
书写顺序：
link-》visited--〉hover--》active
伪元素选择器：
::伪元素名称
hello
::first-letter:第一个字符
::first-line：第一行
::selection:被选择的文本
::before
content:'text'/url()
::after
选择器优先级：
根据特性值进行比较，特性值越大，优先级越高
!important:不计入特性值，优先级最高,不建议使用
style属性：1000
id选择器：100
类选择器/伪类选择器/属性选择器：10
元素选择器/伪元素选择器：1
div{//1
}
#one{//100
}
盒子模型
1) 盒子属性
width
height
margin
margin-top
margin-right
margin-bottom
margin-left
margin
margin:10px; 上右下左
margin:0 10px; 上下为0，左右10px
margin:0 5px 10px; 上0，左右5px，下10px
margin:0 5px 10px 15px; 上右下左
border
border-width 边框宽度
border-style 边框线类型
solid 实线
dotted 点
dashed 虚线
double 双实线
border-color 边框线颜色
border-radius 边框圆角
速写
border:1px solid #333;
padding
padding-top
padding-right
padding-bottom
padding-left
box-shadow
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复方式
repeat-x
repeat-y
no-repeat
background-size 背景图片大小
background-size:100% 100%;
一个盒子的组成
width、padding、border、margin
2) 盒子分类
盒子可以通过box-sizing来设置分类
1. 内容盒子【W3C标准盒子】【默认】
box-sizing:content-box;
width = 内容宽
所占的宽 = width + padding + border + margin
2. 边框盒子【IE盒子】
box-sizing:border-box;
width = 内容宽 + padding + border
所占宽 = width + margin
margin:20px,border:10px,padding:10px;width:200px;分别计算两种盒子模型下所占的宽
内容盒子
所占的宽 = width + padding + border + margin
= 200 + 10*2 + 10*2 + 20*2
= 280px
边框盒子
所占的宽 = width + margin
= 200 + 20*2
= 240px
margin重叠【margin塌陷】
两个盒子上下排布，竖直方向的margin不叠加，只取较大的值作为两个盒子的间距
(水平方向的margin是可以叠加的)
布局：
默认文档流：
元素默认所在浏览器中的位置
从上到下，从左到右
1.display：
inline:将块级元素转换为行内元素
block：将行内元素转换为块级元素
inline-block：将当前元素转换为兼具行内和块级特性的元素
2.浮动布局
float:left/right;
浮动属性不会遮盖文字
对行内元素设置浮动，会让行内元素可以设置宽高属性
对于块级元素设置浮动，独占一行属性失效
浮动合适停止？
1.当遇到父级边框时停止浮动
2.遇到其他浮动元素停止浮动
清除浮动特性：
clear:left/right/both
1.在浮动元素之后添加一个块级元素,给块级元素设置清除浮动
2.给所有浮动元素的父元素设置::after{
content:'';
clear:left;
display:block;
}