1.自节数标签和复制
<!--(注释)注释不能嵌套
自结束标签
-->
<img>
<input>
2.标签中的属性
<font></font>
- 开始标签和自结束标签中设置属性
- 属性是个名值对color属性名 red属性值要用引号
- 属性用来设置标签中内容如何显示
3.网页的基本结构
- 迭代
网页版本
文档申明（当前版本）
html5的文档声明<!doctype html>
都大写也可以，写在第一行html外面
4.字符编码
- 字符集：编码和解码采用的规则
常见字符集：
ASCII（美国）、GB2312（中国）、UTF-8（万国码） - 可以通过meta标签来设置网页的字符集，避免乱码问题
<meta charset="utf-8">
5.文档的使用
- html的根标签（元素）网页中的所有内容都要写在根元素里
- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页
- meta标签用来设置网页的元数据
- title中的内容会显示在浏览器的标题栏，搜索引擎会根据title中的内容搜索网页中的主要内容
- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里
- h1网页的一级标签
- zeal离线文档查看器
6.vscode
!+Tab标签快捷键
ctrl+\注释的快捷键
插件：live server右键打开网页 、auy主题
内容+tab快速出来标签
7.实体
- 多个空格在浏览器里解析成一个空格，字母两侧的大于小于号不能直接写。
需要使用html中的实体（转义字符）
实体的语法：
&实体的名字；
eg: & nbsp;代表空格
& gt;大于号
8.mate标签
9.语义化标签
- 标题标签 4~6级基本不用
- 在页面中独占一行的元素是块元素
在p标签中的内容就表示一个段落
<hgroup>相关标签可以放在一起
<h1> </h1>
<h2> </h2>
</hgroup>
9.1标签表示元素语音语气的加重
在页面中不会独占一行的元素为行内元素
strong标签表示元素语义加重
blockquote 表示一个长引用 有缩进的效果
属于块元素
q表示一个短引用 自动加引号
br标签表示换行
10.块和行内
10.1块元素
- 在网页中一般通过块元素来对页面进行布局
10.2行内元素
- 行内元素主要用来包裹元素
注意：块元素基本什么都能放但是p元素中不能放块元素。
错误会在开发者工具里纠正 F12或右键检查
语义化标签2
结构化语义标签
- 1.header 头部 可以有很多
- 2.main 主体只有一个
- 3.footer 底部
注意标签与网页的兼容性
- 4.nav 表示网页的导航
- 5.aside 侧边栏
- 6.article 独立文章
- 7.section 表示一个独立的区块（就是其他）
- 8.div可以代替所有表示区块
- 9.span 行内元素
以上标签显示效果没有区别
11.列表
1.有序列表（1234…)
- 使用li标签来创建有序列表
eg:
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
2.无序列表（点点）
<ul>用作导航菜单
ul里可以嵌套
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
3.定义列表
- 使用dl标签来创建一个列表
- 使用dt来表示定义的内容
- 使用dd来对内容解释说明
12.超链接
使用a标签来定义超链接 （行内元素）
- a里可以嵌套除它自己外的所有标签
属性：
- herf 指定跳转的目标路径
- 值可以是内部或外部网页的地址
- 确保两个页面在同一个目录下
eg:
<a herf="https://www.baidu.com">超链接1</a>
<a herf="07.列表.html">超链接2</a>
12.相对路径
1.跳转到项目内部用相对路径
2.用./或…开头 可以省略不写
- ./表示当前所在目录
- …/当前文件所在目录的上一级目录
3./隔的是文件夹
13.图片标签
1.使用img标签（自结束标签）
- img是替换元素（具有块和行内元素的特点）
- 属性：
- src 属性指的是外部图片的路径（路径规则和超链接一样）
- alt 图片的描述，这个描述默认情况下不会显示，图片无法加载时会显示，搜索引擎会根据alt中的内容来识别图片
- width 图片的宽度（单位是像素）
- height 图片的高度
- 注意：一般情况下不建议修改图片大小，需要多大裁多大
<img src="./img/i.gif" alt="松鼠">14.图片格式
- ctrl+a全选
- ctrl+/注释
css
<p style="color:red;font-size: 60px">
内部样式表
<head>
<style>
p{
color:green;
font-style; 50xp;
}
</style>
</head>
外部样式表
外部.css文件中
<link rel="stylesheet"hret="./文件名.css">
元素选择器
-
元素选择器
- 标签名{}
-
id选择器#
- #red{
color:red;
}
- #red{
-
class选择器
- 和id相似，可以重复使用,一个元素可以多个class用空格隔开
- .blue{
color:blue
}
-
通配选择器
- 选中页面中所有元素
- *{}
-
交集选择器
- 选中符合多个条件的元素
div.red{
font-size: 30px;
}
.a.b.c{
color: blue;
}
- 选中符合多个条件的元素
-
并集选择器
- 同时选择多个选择器对应的元素，用逗号隔开
h1,span{
font-size: 30px;
}
- 同时选择多个选择器对应的元素，用逗号隔开
-
关系选择器
-
子元素选择器
- 选择父元素div的span
- div>span{
}
-
后代元素选择器
- 选择div后代的所有span
- div span{
}
-
兄弟选择器
- +链接两个相邻兄弟元素
- ~下面所有兄弟元素
-
属性选择器
- title指定标签标题（鼠标移动上去会显示小字）
- p[title]选择含有指定属性的元素，p可以省略不写就代表选择含有title的元素
- [title=abc][属性名=属性值]选择含有指定属性和属性值的元素
- [属性名^=属性值]选择属性值以指定属性值开头的元素
- [属性名$=属性值]选择属性值以指定属性值结尾的元素
- [属性名*=属性值]选择属性值含有指定属性值的元素，有就可以
-
伪类选择器
-
描述元素的特殊状态(从所有子元素里找)
- ：first-child第一个子元素
- ：last-child最后一个子元素
- : nth-child()选中第n个子元素（n从0开始）
- 特殊2n或even偶数，2n+1或odd奇数
-
找同类型的
- :first-of-type
- :last-of-type
- :nth-of-type()
-
否定伪类
- ：not()将符合条件的元素剔除
-
a元素的伪类
- 1、没有访问过的链接
a:link{}(link表示没访问过的链接)- 2、访问过的链接(只能改颜色)
a:visited{}(vistised表示访问过的链接)- 3、a:hover(表示鼠标移入)
- 4、a：active(表示鼠标点击)
-
为元素选择器
- ::开头
- ::first-letter
- ::first-line
- ::selection选中的内容
- ::before元素的最开始
- ::after元素的最结尾
- 注意：before\after必须与content连用
- 可以加一些特殊的元素
继承
- 后代元素会继承祖先的样式
- 背景相关，布局相关不会被继承
选择器的权重
<div id="box1" class="red">
权重
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0，0，0，0
继承样式 没有优先级
- 选择器的优先级进累加计算，并集选择器单独算
在一个样式后面加！important 最高
文档流（normal flow)
盒模型、盒子模型、框模型（box modle)
组成:
-
内容区（content)
- 大小width和height
backgrounf-color
- 大小width和height
-
内边距
- 内容区和边框之间是内边距
- 四个方向：
padding-top
<style> .inner{ width:100%; height:100%; background-color: yellow; } </style> <body> <div class="box1"> <div class="inner"></div> </div> <body> -
边框
- 边框宽度 border-width：
- （顺序，四个值）上右下左（三个）：上 左右 下（两个）：上下 左右
- 单独指定一个边的边框：border-xxx-width
- xxx可以是 top right bottom left
- 边框颜色border-color
- 边框样border-style:
- solid （实线）
- dotted 点状虚线
- dashed 虚线
- double 双线
- 边框宽度 border-width：
-
外边距
影响盒子位置
四个方向：
margin-top
上外边距，设置正值，元素向下移。左外边距，设置正值，右移
设置左上是移动自己
简写属性
border-top: 10xp solid red;
盒子的水平布局
-
一个元素在其父元素中，水平布局必须要满足以下等式
-
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度（必须满足）
-
0+0+0+200+0+0+0=800
-
0+0+0+200+0+0+600=800
-
如果相加不满足，称为过度约束，则等式会自动调整
调整情况：
-
如果这七个值中没有auto的情况，则浏览器会自动调整margin-right值以使等式满足
-
这七个值中有三个值和设置为auto
- width
- margin-left
- margin-right
-
如果某个值为auto，则会自动调整为auto的那个值使等式成立
- 0+0+0+auto+0+0+0=800
- auto+0+0+200+0+0+200=800
- auto+0+0+200+0+0+auto=800
-
如果将一个宽度和一个外边距设置为auto,则外边距为0，宽度最大
-
如果三个值都设置为auto，则外边距都是0，宽度最大
-
如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同值
-
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
-
实例
- width:xxxpx;
- margin:0 auto;
-
垂直方向的布局
-
子元素是在父元素内容区中排列的：
-
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
-
使用 overflow 属性来设置父元素如何处理溢出的子元素
-
可选值：
- visible,默认值 子元素会从父元素中溢出
- hidden溢出元素裁剪，剩下内容不显示
- scroll通过滚动条，查看完整内容，垂直和水平双方向的
- auto根据需要生成滚动条
-
overflow-x:
-
overflow-y:
外边距的折叠
- 相邻垂直方向外边距会折叠（margin-top;margin-bottom)
- 兄弟元素间相邻外边距会取较大值
- 如果一正一负相加
- 都负取绝对值较大的
- 父子元素
- 子元素会传递给父元素
- 改用padding或者加边框1px再让margin-top减1px
行内元素盒模型
- 宽度高度不能设置
- padding\border\margin可以设置但是垂直方向没有影响
- display
- inline行内
- inline-block行内块，既可以设置宽高又不会独占一行，尽量不用
- block块
- table表格
- none隐藏，下拉菜单
- visbility
- visible默认值，元素显示
- hidden元素隐藏但是位置占着
默认样式
*{
margin:0;
}
- 去掉项目符号
- list-style:none;
- 只需要引入去除浏览器样式
- 重置样式表>
盒子的大小
-
默认情况下，盒子可见框的大小由内容区、内边框和边框共同决定
-
box-sizing计算盒子尺寸
- content-box默认值，宽度高度用来设置内容区大小
- border-box 整个盒子大小
阴影和圆角
- 把boeder换成outline（轮廓）用来设置元素的轮廓线
- 用法和border一模一样 好处不会影响可见框大小
- outline:10px red solid;
- box-shadow:设置元素阴影效果不影响布局
- 第一个值 水平偏移量 正数向右 负数向左
- 第二个值 垂直偏移量 正数向下 负数向上
- 第三个值 阴影模糊半径
- 第四个值 颜色 rgba(0,0,0,3) 透明
- border-radius 设置圆角
- border-top-left-rsdious:r1,r2左上角 r1不等于r2椭圆 r1=r2⚪
- border-bottom-right-rsdious:r1,r2右下角
- border-radious:r1,r2,r3,r4分别指四个角：左上，右上，右下，左下
- border-radious:r1,r2,r3分别指：左上，右上左下，右下
- 50%圆形
- 20px 40px横；纵
浮动
!浮动
高度塌陷和BFC
- 子元素浮动无法撑起父元素，父元素塌陷
clear
1056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
