HTML&CSS基础
HTML：结构（页面元素和内容）
css：表现（网页元素的外观和位置等页面样式）
行为：JavaScript：行为（网页模型定义与页面交互）
排版标签
排版标签标题标签：h系列标签 重要程度依次递减
特点：独占一行、h1-h6文字逐渐减小
段落标签：p
特点：段落之间存在间隙、独占一行
文本格式化标签
场景：让文字加粗b strong、下划线u ins、倾斜i em、删除线s del等
语义：突出重要性的强调语境 strong、ins、em、del
图片标签
特点：单标签
src alt为图片标签的属性、属性之间没有顺序
src为属性名 =""为属性值
alt是替换文本 当图片不显示的时候显示的文字
title时提示文本 不仅可以为图片标签添加，还可以用于其他标签
width和height属性只需要给出一个值，另一个等比例缩放，好处就是图片不变形
路径的介绍
路径可分为：绝对路径（了解）相对路径（常用）
绝对路径例如：盘符开头：D\day01、完整的网络地址：https://www.itcast.cn
相对路径：从当前文件出发找目标文件的过程
相对路径之同级 ./表示当前位置
相对路径之下级 ：images/baobao.jpg
相对路径之上级：…/表示上级
音频标签：audio
视频标签：video
添加muted在静音状态下自动播放
链接标签
href的作用是调转地址
在新窗口打开：属性名为target、取值：_blank
列表标签
自定义列表：dl dt dd
去掉无序列表小黑点：
li {
/* 去除小圆点 */
list-style: none;
}
表格标签
table>tr>td
th为表头标签，有加粗效果
caption为表格大标题
结构标签：thead,tbody,tfoot
合并单元格
跨行并列：rowspan、跨列并列：colspan
遵循左上原则
列表标签
列表的应用场景
无序列表
有序列表
自定义列表
绝对路径
绝对路径：绝对路径例如：
盘符开头：D\day01
完整的网络地址：http://wdianjun.vcn.ink
特点：地址很长
相对路径
相对路径之同级 ./表示当前位置
相对路径之下级：如：images/baobao.jpg
相对路径之上级：如：../images/baobao.jpg
表单标签-input
input type="text"文本框
input type="password" 密码框
input type="radio" 单选框
input type="checkbox" 复选框
注意：
有相同name属性值的单选框为一组，一组中只能同时有一个被选
属性对于单选框有分组功能
占位符：placeholder
button按钮标签
如果不指定type值，button按钮默认为submit值
按钮要放在表单域(form)中才会有行为，否则就是一个普通按钮
按钮标签是双标签，可以插入其他标签如：图片
select下拉菜单
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
selected属性：下来菜单的默认选中
CSS：层叠样式表
css的引入方式
内嵌式：写在style标签中,一般写在head里
外联式：写在一个单独的.css文件中
行内式：写在标签的style属性中，大多数配合js使用
基础选择器
标签选择器
类选择器
id选择器
id必须是唯一的，不能出现两个标签有相同的id
通配符选择器
清除内外边距,获取所有标签
* {
margin: 0;
padding: 0;
}
字体和文本样式
字体：
字体大小
font-size: 14px;
字体粗细
font=weight
字体样式
font-style
字体类型
font-family
层叠性
建立在相同的权重下，如相同的选择器，后面的会覆盖前面的
复合属性
font复合书写顺序：font：style weight size family
注意：
顺序不能乱
如果之前已经写了零散的font属性，当心可能会覆盖掉之前的
水平居中对齐 text-aling:center
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
文本修饰
添加下划线
text-decoration: underline;
删除线
text-decoration: line-through;
上划线
text-decoration: overline;
清除下划线
text-decoration: none;
行高line-height
控制一行的上下行间距
让单行文本垂直居中可以设置 line-height : 文字父元素高度
注意如果同时设置了行高和font复合，注意覆盖问题
书写顺序：font：style weight size/line-height family
颜色取值
rgba表示法：( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )
取值范围0~1 ，1表示完全不透明
选择器进阶
复合选择器
后代选择器
根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
语法：选择器1 选择器2 {} 空格隔开
注意：后代包括：儿子、孙子…
并集选择器
作用：选中页面中 同时满足 多个选择器的标签
语法：选择器1选择器2 { css }
注意：交集选择器中的选择器之间是紧挨着的，没有东西分隔 ，交集选择器中如果有标签选择器，标签选择器必须写在最前面
交集选择器
交集选择器：标签选择器在前，类选择器在后，中间没有空格
id是唯一的，不能做交集
交集选择器只可能是 标签选择器 + 类选择器
hover伪类选择器
鼠标悬停在元素上的状态
可以用在任何标签上