web前端——html+css知识点总结(上)
前端开发语言介绍
HTML（Hypertext Markup Language）（描写结构）
超文本标记语言，作用是用来写页面的结构，描述网页的一种语言，使用标签来描述。
CSS（Cascading Style Sheets） 层叠样式表 （样式/表现）
css通常称为CSS样式表/层叠样式表，主要用于设置页面中文本内容（字体，大小，对齐方式等）、图片的外形（宽高。边框样式，边距等），样式定义如何显示html标签，简单理解就是给页面设置样式。
JS（JavaScript） 脚本语言 （行为/动作）
JavaScript是基于对象和事件驱动的解释性的脚本语言，主要目的其实就是增减web交互，加强用户体验。
基于对象：js是一种基于对象的语言，这意味着它能运用自己已经创建的对象，因此，许多功能可以来自脚步环境种对象的方法与脚步的相互作用。
事件驱动：JavaScript 可以直接对用户或者客户输入做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行。
解释性：浏览器可以直接识别和解析js代码。
关于js方面的内容在js笔记总结中详细记录。
HTML
- HTML文档称为网页，web浏览器读取HTML文档，并以网页的形式显示出它们
- .html是描述网页的格式
- 用标签（标记，元素）来描述页面，由关键字和尖角号组成的，标签通常都是成对出现的，也有单独出现的，成对出现的标签，前面的叫开始标签（开放标签），后面的叫结束标签（闭合标签），单独出现的一个标签叫做空标签或者自闭合标签。
页面的最基本结构
//这种声明文档方式是html5的方式,告诉浏览器的解析器使用哪种规范来解析该文档
<!DOCTYPE html> // 声明文档
<html>//html标签 除了声明文档以外，其他页面中所有内容都放在html标签中
<head>
<meta charset="UTF-8"> //meta标签 设置页面语言信息
<title></title>
</head> //head标签 页面的头部
<body>
//body标签 页面主体的部分
//页面中展示出来的部分放到body标签里面
</body>
</html>
meta 表示页面的编码格式
常用编码格式
- gb2312(国标2312，针对中文简体)
- gbk（国标扩）
- UTF-8(万国码)
注释
HTML
Css
/* 注释内容 */
Js
单行：
//注释内容
//注释内容
多行
/*注释内容
注释内容*/
注释快捷键 ctrl+/
浏览器及内核
- Chrome浏览器 webkit–>blink
- Firefox浏览器 gecko
- Safari浏览器 webkit
- Opera浏览器 presto–>webkit–>blink
- IE浏览器 trident
四大内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko。
浏览器的私有前缀
| 内核 | 浏览器 | 私有前缀 |
|---|---|---|
| Gecko内核 | 火狐浏览器 | -moz- |
| WebKit内核 | Chrome、Safari | -webkit- |
| Presto内核 | Opera(欧朋) | -o- |
| Trident内核 | IE | -ms- |
常用标签
- h1 主标题 一级标题(一般一个页面只有一个主标题，所以h1标签通常只用一次)
- h2 二级标题
- h3 3级标题
- h4 4级标题
- h5 5级标题
- h6 6级标题
- p 段落
- strong b 可以让文字加粗 都是内联标签，strong更具有强调的意义
- em i 可以让文字倾斜 都是内联标签，em更具有强调的意义
- div标签 没有任何语义 可以把它看做一个盒子或者一个块
- span 标签 没有任何语义 和div的区别就是一个是块一个是内联
- 无序列表
ul和li配合使用
ul和li是固定嵌套
ul的直接子元素只能是li
li的父元素可以是ul或者ol - 有序列表
ol和li配合使用
是固定嵌套
ol的直接子元素只能是li
有序列表和无序列表，列表项前面的序号或者点状使用list-style：none 去掉
ul{list-style: none;}
ol{list-style: none;} - 定义列表（自定义列表）
dl dt dd 配合使用，是固定嵌套关系
dl 是dt 和dd的父元素
dt 和dd是兄弟元素
dd是对dt的解释说明 - img标签
自闭合标签（空标签）
<img src="cai.png" alt=" " title="" width="100" height="100">
- src=“图片路径”
- alt=“图片的描述” 当图片加载不出来或加载失败时会显示里面的文字
- title=“图片标题” 当鼠标放到图片上时会显示里面的文字
- Width=“宽度”
- Height=“高度”
绝对路径与相对路径
绝对路径
- 具体的网址
- 从盘符开始的（不建议使用）
相对路径
- 当被引入文件和当前文件在同一个文件夹里 直接写图片名字（包含后缀名）
- 进入文件夹： 文件夹名/
- 出文件夹： …/
块标签、内联标签、内联块标签
块标签
- 单独占一行
- 可以设置宽高等样式
- h1 h2 h3 h4 h5 h6 p div ul li ol dl dt dd
内联标签（行内标签）
- 在同一行显示
- 不可以设置宽度
- 宽高由内容撑开
- strong b em i span
内联块标签（行内块标签）
- 在同一行显示
- 可以设置宽高等样式
- img
链接、表格、表单
a标签 （内联标签）
<a href="https://www.baidu.com/" target="_blank">打开百度</a>
//可以写绝对路径
<a href="复习.html" target="_blank">点击我打开复习.html</a>
//可以写相对路径
<a href="mimi.doc">点击我下载小秘密的文件</a>
//下载文件
<a href="#">我还不知道这个页面的路径</a>
//不知道具体路径是什么，写#占位
a标签有默认的文字颜色以及下划线
锚点链接
<body>
<a href="#eee">咏鹅</a> <br>
<a href="#yongliu">咏柳</a>
<a href="#wen">永春</a>
//跳转到当前页面的指定位置（点击咏鹅 跳到咏鹅这首诗的位置）
<div id="eee">鹅鹅鹅，曲项向天歌，<br>白毛浮绿水，红掌拨清波。</div>
<div id="yongliu">碧玉妆成一树高，万条垂下绿丝绦，谁知细叶谁裁处，二月春风似剪刀。</div>
<div id="wen">永春</div>
//跳转到另外一个页面的指定位置，指定的位置是another.html页面中
<p id="quan">四个圈</p>
//在当前页面的a标签的href属性里写“另外一个页面的路径#指定位置的id名”
<a href="another.html#quan">点击我跳转到另外一个页面的指定位置</a>
</body>
Id名
组成：
- a到z A到Z 0到9 中划线 下划线 以字母开头
- 同一个页面同样的id名只能用一次
br标签
- 强制换行
- 通常用在文本换行里
表格
之前：用来布局页面
现在：明显是表格的部分才使用表格布局（课程表，报表）
表格的宽高是由内容决定的，一列的宽度也是由内容决定的
如果给table标签设置宽度，每一列的宽度也是和内容有关，内容多的分配的宽度就多
想改变一列的宽度：只需要改变这一列中其中一个单元格的宽度
想改变一行的高度：只需要改变这一行中其中一个单元格的高度
1.关于表格的标签
（1） table标签：表格 所有的和表格有关的标签都要写在table标签中间
（2） tr 一行
（3） td 单元格
（4） th 表头单元格 （默认文字居中对齐，加粗）
（5） caption 表格的标题（放在table的子元素的位置，默认水平方向居中）
（6） thead 表格的头部
（7） tbody 表格的主体
（8） tfoot 表格的脚注
thead tbody tfoot的作用可以让表格的语义化更强
这里语义化是什么?以及他的作用
在页面里使用特有的标签和标签中特有的属性来格式化文档（标题 h标签，段落 p…）
语义化的好处：
- 在没有css的情况下，也能呈现很好的内容结构
- 方便开发和维护
- 对用户体验好
- 对seo好
2.在标签里写的属性
（1） 在table的开始标签里写border=“1”： 给表格设置边框
（2） cellspacing=“0” 单元格与单元格之间的距离
（3） cellpadding=“0” 单元格内容与边框之间的距离
（4） width=“” 给table或者单元格设置都可以
（5） height=“” 给table或者单元格设置都可以
（6） 跨列合并
- colspan=“2”
- 横着的两个单元格合并
- 在需要被合并的单元格的最左侧的单元格里写这个属性
（7） 跨行合并
- rowspan=“3”
- 竖着的3个单元合并
- 在需要被合并的单元格的最上面的单元格里写这个属性
3.在css里设置表格样式
初步认识css
语法：属性名:属性值 中间用冒号隔开
在head中加style标签，在标签中写样式
（1） 给表格设置边框
td{
border:10px solid green;
border:1px solid black;
border：//边框
10px: //边框的宽度
solid: //边框样式（实线）
black: //边框的颜色
}
（2） 让表格的边框合并成一条线，表格的边框和边框之间会存在空隙
table{
border-collapse: collapse;
}
表单
1. input标签 （内联块标签）
（1）type=“text” 文本框
（2）type=“password” 密码框
（3）type=“radio”
- 单选框中只想选中其中一项：起同样的name名字
- 点击文字把对应的单选框选中，给文字包label标签
- 在input标签里写id的名字，在label标签里写for=“id名”
<input type="radio" name="sex" id="boy" checked><label for="boy">男</label>
<input type="radio" name="sex" id="girl"><label for="girl">女</label>
（4）type=“checkbox” 复选框
（5）type=“submit” 提交按钮
（6）type=“reset” 重置按钮
（7）type=“button” 没有提交功能的按钮（通常用来启动某些js程序）
（8）type=“image” 用src引入图片路径 图片形式的按钮
（9）type=“file” 上传文件的按钮
2. 下拉框
select 和option配合使用 ，是固定嵌套
<select name="">
<option value="1991">1991</option>
<option value="1992" selected>1992</option>
</select>年
3.textarea
文本域
用户可以拖拽改变大小
在css里设置resize:none
4.form标签 表单（可以限制表单的提交范围）
表单相关属性
- value=“” 默认值
- placeholder=“请输入姓名” 提示用户输入的文字（html5新增内容）
- checked=“checked” 默认选中某项（用在单选框和复选框里的） 属性名和值相同，可以把值省略，直接写checked就可以了
- action="" 表单提交到什么位置
- method="" 表单提交方式 GET 不安全 有长度限制 POST 相对安全 没有长度限制
- selected 默认选中某一项（用在下拉框里的）
- size=“2” 下拉框里展示几项
- maxlength=“4” 最大长度
- disabled 禁用 数据不可以更改也不可以提交，背景默认是灰色
- readonly 只读 数据不可以被更改，但是可以被提交
标签嵌套规则
- 块标签里可以放其他标签，p标签里不要放块标签
- 内联标签里最好不要放块标签，但是a标签比较特殊
- a标签里不要放表单中的提交按钮，a标签里不要放a标签
认识css
属性名:属性值 中间用冒号隔开
语法：
选择器{
- 声明;
- 声明;
- 声明;
…
}
声明与声明中间用分号隔开
<style>
h2{
width: 100px; 宽度
height: 100px; 高度
background: skyblue; 背景
color:red; 文字颜色
</style>
}
css的三种引入方式
内部样式
写在html文件的head标签里，在head标签里写style标签，在style标签里按照css的语法写样式
<head>
<style>
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
只有这么一个html文件需要这些样式的时候
外部样式
新建一个css的文件，在css的文件里按照css的语法写样式
把css文件引入到html文件里
同一个css文件可以引入到多个html文件里
同一个html文件可以引入多个css文件
//在html文件的head标签里写link标签
<link rel="stylesheet" href="style.css" type="text/css">
//rel="stylesheet" 被引入文件和当前文件之间的关系是引入了外部样式表
//href="" css文件的路径
//type="text/css" css文件的类型
多个html文件需要共同的样式时
行间样式
写在标签的开始标签里
在开始的标签里写style=“”
<div style="width:100px;height:100px;background: yellow;"></div>
只有这么一个标签需要这个样式的时候
内部外部行间样式的优先级
遵循就近原则
通常情况下 行间>内部> 外部（内部外部优先级看先后顺序）
文字和文本相关样式
1. 字号(子元素可继承)
浏览器默认字号是16px
浏览器的最小字号是12px（火狐可以更小）
h标签的字号特殊
font-size：20px;
2. 文字是否加粗(子元素可继承)
font-weight:bold;
//normal 不加粗
//bold 加粗
//取值还可以是100到900
3. 文字是否倾斜(子元素可继承)
font-style: italic;
//italic;倾斜
//normal;不倾斜
4. 字体(子元素可继承)
安全字体：微软雅黑 宋体 楷体 黑体
可以设置多种字体，中间用逗号隔开
字体名字如果有空格，就必须加引号
font-family:'宋体'；
5. 行高(子元素可继承)
单位可以是px 也可以是字号的倍数
line-height:20px;
单行文字在垂直方向居中，设置文字的行高和盒子高度相等
6. 复合写法
font:italic normal 20px/50px '楷体';
font:是否倾斜 是否加粗 字号/行高 字体
其中字号和字体是不可以省略的
是否倾斜省略的话，默认是不倾斜
是否加粗省略的话，默认是不加粗
7. 文字颜色(子元素可继承)
color：
英文单词 red green blue等等
十六进制
#0到9 a到f
#ff0000 #f00
#ff00f0
#ff00ff #f0f
#00ffoo 没有o
前两位 红色
中间两位 绿色
后两位 蓝色
rgb(red,green,blue) 0到255
8. 文本对齐方式(子元素可继承)
可以让文字 内联块 内联元素在父元素里居中
text-align:left;
//left
//center
//right
9. 首行缩进(子元素可继承)
text-indent
单位 px em
em是一个相对的单位，是相对于font-size的一个单位
1em=20px 2em=40px
font-size:20px
10. 文本装饰
text-decoration：overline //上划线
//line-through 中划线
//underline 下划线
//none 去掉线
text-decoration： 什么位置的线 线的样式 线的颜色
位置：overline line-through underline
线的样式:solid 实线dotted 点状dashed 虚线wavy 波浪线
父元素的样式可以延伸到子元素里，但不是继承
11. 字母与字母之间的距离（文字与文字之间的距离）
letter-spacing:
可以继承
12.单词与单词之间的距离
word-spacing:
可以继承
选择器
1. 标签选择器
直接写标签的名字
div{}
p{}
div{
color:pink;
}
- class选择器（类选择器）
用.选中
<style>
.pink{color: pink;}
.big{font-size: 30px;}
</style>
<div class="pink big">邓超</div>
<div class="big">李晨</div>
3. id选择器
<style>
#dili{background: pink;}
</style>
<p id="dili">迪丽热巴</p>
class 和id的区别
同一个class名，可以多次使用
同一个标签，可以有多个class名
同一个id名，在一个页面只能用一次
同一个标签，只能有一个id名
4. 后代选择器
p1 和p2 全都选中
<div class="box">
<div class="box1">
<p>p1</p>
</div>
<p>p2</p>
</div>
5. 子代选择器（直接子元素选择器）
.box>p(选中box中p2)
<div class="box">
<div>
<p>p1</p>
</div>
<p>p2</p>
</div>
选择器还分为群组选择器、交集选择器、通配符（*）、伪类选择器。
-
群组选择器
用逗号隔开
.big,#chenyun,p,.chenhe,.list li{ color: yellow; } -
交集选择器
div.box{color: red;}
在这里插入代码片 选择所有div标签里，class名是box的 -
通配符 *
把所有标签都选中
可以用来清除浏览器的默认样式
*{margin: 0;padding: 0;list-style: none;} -
伪类选择器
-
a:link{color: red;} -
a:visited{color: yellow;} -
a:hover{color:pink;} -
a:active{color: green;}
:link 初始状态
:visited 访问过以后的状态
:hover 滑过的状态（鼠标悬停）
:active 鼠标按住的状态
注意顺序：l-v-h-a
选择器的优先级如何计算
行间 1000>id 100>class 10>标签 1
- 当选择到了同一个标签上时，比较权重，谁权重大谁优先级高
- 当选择到了同一个标签上，权重也相同时，看先后顺序，遵循就近原则
- 当选择到不同标签上，继承来的样式要小于给自己本身设置的样式
- 加了!important的样式，优先级会大于行间样式的优先级（也遵循继承来的样式优先级小于给自己本身设置的样式）