一、HTML知识
声明语句 html版本类型的声明 不是标签 !
页面跟标签 lang属性（laeng）语言属性 en=>英文 zh=>中文
设置网页基本信息 是双标签
meta 是单标签，设置网页具体信息 charset属性用来设置网页编码格式
设置网站标题
所有页面内容都在body中写
块标签 :独占一行
行标签 :在一行排列
二、行标签 和块标签
1.标签
别称：元素，盒子
承载超文档流的容器，所有的文本信息都必须写在标签中
根据有无闭合标签可分为
双标签：html body div span
2.单标签：meta
3.根据页面渲染结果，可分为：
块标签：div
一、独占一行，每个块标都会导致文本流换行
二、可以设置宽高,不设置高度是高度由内容撑开，不设置宽度时，宽度和父盒子等宽
三、可以嵌套标签 标签之间的嵌套关系我们拟人化的称为父子关系
行标签：span
1.可以在一行之间排列，但是如果超出父盒子的宽度则会换行（如果的单个行标签超出宽度此情况不换行）
2.不能设置宽高，宽高由内容撑开
3.嵌套块标签，但是不语法不规范，不建议！！！！
三、css引入方式
css有三种引入方式：
1.行间样式
优点：在标签中写，优先级高，通过style属性在写css
缺点：显得页面太过杂乱
2.内联样式
Document
将css代码写在页面的style标签中，从编译的角度上style可以写在html的任意位置
但是前端代码规范中，一般将style标签写在heat的闭合标签的上面
优点：可复用性高代码整洁，利于维护
缺点：会使代码变得很长，所以一般的小型项目和页面推荐使用内部样式
3.外联样式
在外部创建一个css文件
并在html文件中heat标签内title标签下，使用link标签引入
(link标签中herf属性内写要引入css的文件路径)
本层文件=> ./文件名.后缀名
上层文件=> ../文件夹.后缀名
上上层文件=> ../../文件夹.后缀名
下层文件=> ./文件夹名/文件名.后缀名
Document
优点：逻辑清晰
页面整洁
易于维护
可复用性高
缺点：加大了项目所占内存
所以一般多页面的项目推荐使用外联样式
优先级：
行间>内联>外联
四、选择器(一)
1.类选择器(也叫class选择器)
当同种选择器过多时，我们可以使用标签中class属性
给标签起个名字（类名）的方式选择多个标签， 用“.”选中这个class，并编写样式，一个标签可以有多个类名，每个类名以空格隔开。
2.标签选择器:
直接在style中使用标签选择器，在选择具体标签,与其相同的标签将全部被选中
3.id选择器：
需要在标签使用id这个属性 来设置id，用“#”号选中这个id
！！注意！！！
id具有唯一性，整个页面中id不能重复，一个标签中只能有一个id
区分理解 class和id：
人名相当于class 人名可以重复；
身份证号相当于id 身份证号不可能重复；
命名规范
按照W3C规范来说，命名有一下几种原则（包括文件或者文件夹命名，所有能遇到的命名）：
1.命名中只能存在 字母 数字 下划线
2.命名必须以字母开头
3.命名必须遵守语义化（好理解，容易记）
4.不要用拼音及拼音缩写，尽量用英文单词
两种命名方式
①.驼峰命名：
例如：商品列表 商品=>goods 列表=>list
=>goodsList(小驼峰) 推荐
=>GoodsList(大驼峰)
②.地中海命名(匈牙利命名)：
例如：商品列表 =>goods_list
选择器（二）
1、群组选择器
可以配合class 标签 id 等选择器一起使用
多个选择器以 逗号 隔开
2、组合选择器
详细的描述一个标签的属性或者签名
有几个class 就写几个class 学的越详细 优先级越高
!!!注意!!!!: 不能带空格
.f1,.f2,.f3,.f4{
}
3、后代选择器
父选择器与子孙选择器之间以 空格隔开（通俗来讲就是多选，只要含有选中的名字，都会被选中）
例如：
.f1 .f2 .f3{
}
4、子选择器
父选择器 与 子选择器 之间以 > 隔开
注意： 只能选择直属元素 不能选择后代元素
.f1>.f2{
}
五、常用的标签
1.ul和li标签
无序列表：每一行前面都有一个小点，通常我们用他来写列表或者，导航栏。
点 是默认效果
去掉默认效果，就叫样式初始化:
list-style-type: none;
按照规范ul标签下只能写li标签
- 1
- 2
- 3
- 4
ul和li都是块标签
ol和li标签：
这是有序列表，没有li标签前面都会有一个序号
去掉默认效果与ul和li标签一样：
list-style-type: none;
- a
- b
- c
- d
2. h1~h6标签
块标签，通常用来写大小标题
h1： 标签 通常一个页面只能存在一个h1标签
通常h1标签用来承载网站名或者logo
如果网站logo出现在多个地方，只给顶部的logo加h1标签
h2：可以有多个不限制数量，但是一般用来写网站 模块标题
这里是我的标签
这里是我的标签
这里是我的标签
这里是我的标签
这里是我的标签
这里是我的标签
3.p标签
通常用来承载大段的文字
p标签不能包块标签
这是一段文字
这是一大段文字
这是一大段非常长的文字
4.br标签
是一个功能性标签，在哪写哪里换行
br用到哪里哪
里就会换行
用到哪里哪
里就会换行
用到哪里哪
里就会换行
hr标签 生成一条线
5.用来写图片
src=>用来设置图片路径
alt=>当图片加载失败时的提示信息
自带 width 和 height 属性，不用写数值
img 标签可以设置宽高，一般只设置宽，会按比例缩放
![]()