目录
HTML
HTML是什么
Hyper Text Markup Language 超文本标记语言
超文本：有视频、音频、图片等，超越文本
标记语言：有一套标签
网页基本结构
<html>
<head>
</head>
<body>
这是网页的基本结构
</body>
</html>标签
标签：
- 是由<>包裹起来的对象
双标签：
- <div>aaa</div>
- <div>是开始标签，代表着一个元素的开始
</div>是结束标签，代表着一个元素的结束
aaa 为元素的内容，可以是标签，也可以是文本
- 整个称为元素，这里的是div元素
单标签：
- <br> <br />
标签的属性：
- 写在开始标签中，标签名之后，常以属性名="属性值"的形式出现
- 作用是为标签增加附加信息
- 注意
标签名和属性名之间要有空格，属性名和属性名之间也有空格
<div id="id01" class="div01">aaa</div>
特殊的属性 只有属性名
标签的关系：
<html>
<head></head>
<body></body>
</html>
- 包含关系 html和head的关系
- 并列关系 head和body
网页
<!-- 文档的声明 告诉浏览器用HTML5版本来显示网页
位置在html标签前，它不是标签，而是一个声明
-->
<!DOCTYPE html>
<!-- lang设置文档的语言 en 英文 -->
<!-- html 是根元素（根标签） 所有的标签都包含在里面-->
<html lang="en">
<!-- head是html文档的头部 它的内容不会显示在网页，主要用来设置文档的信息，比如标题，编码格式等 -->
<head>
<!-- charset设置文档编码格式 UTF-8使用最广泛，它能更好的兼容中文，避免中文乱码-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 文档的标题 显示在网页选项卡 -->
<title>Document</title>
</head>
<body>
冬夜读书示子聿（yu`）
宋-陆游
古人学问无遗力，少壮工夫老始成。
纸上得来终觉浅，绝知此事要躬行。
</body>
</html>标题标签
h标签
- 语义: 内容的标题
- 特点：文字加粗，独占一行
- 等级：h1~h6
段落标签
p标签
- 语义：文章的段落
- 特点：独占一行，段与段之间有间隔，一段里的文本会随着浏览器窗口变化，自动换行
换行标签
br 标签
- 语义：换行
- 特点：换行后，行与行之间没有间隔
转义字符
转义字符
- 页面显示的特殊字符
- 常见的
空格
< <
> >
版权符号 ©
文本格式化标签
b标签（bold）和 strong标签
- 语义：加粗
- 区别：b标签只是样式上的加粗效果，strong标签在语义上有强调的含义
i标签 (italic) 和em标签 (emphasized)
- 语义：斜体
s标签（strikethrough）和del标签（delete）
- 语义：删除
u标签（underline）和ins标签（insert text）
- 语义：下划线
sup标签
- 语义：上标
sub标签
- 语义：下标
标签的类型
块级元素
- 特点：
每一个块级元素都独占一行
块级元素里可以包含其它块级元素和行内元素
注意：p元素里不要嵌套块元素
- 常见的块级元素
<div> <h1> <p> ...
- 常用于页面布局
行内元素
- 特点：
不会独占一行，一行里可以有多个行内元素
行内元素可以包含行内元素，一般不会包含块元素
- 常见的
<b> <i> <u> <del> <span>
- 常用于包裹文字，方便设置样式
图片标签
img 标签
- 语义：图像
- 属性
src ：图片的路径
alt ：定义无法正常显示图片时的文字，通常就是图片内容的简要说明，比如，这是logo，头像
title ：定义鼠标悬停在图片时显示的文字
height： 定义图片的高度
width： 定义图片的宽度
路径：
- 相当于电子路线，通过它可以找到计算机或网络中的资源
- 相对路径
- 以当前文件未基础，寻找其它文件的路线
- 访问方式
./ 表示当前文件所在目录
../ 表示当前文件所在目录的上一级目录
/目录名/图片名 表示图片在当前目录的下一级目录中
- 绝对路径
- 资源在计算机中的完整地址，通常本地以盘符开头
- D:/HTML/img/猫猫.png
列表
有序列表
- <ol></ol> order list
- 列表项 <li></li>
- 通过ol 的type属性可以修改序号样式
1 阿拉伯数字（默认）
A/a 英文字母（大写/小写)
I/i 罗马数字 （大写/小写)
- ol 标签里只能放li标签
无序列表
- <ul></ul> unorder list
- 通过ul 的type属性可以修改项目符号样式
disc：实心圆（默认）
square： 实心方块
circle： 空心圆
- ul 标签里只能放li标签
自定义列表
- <dl></dl> definition list
- 列表项
dt： 术语/小标题
dd ：对术语的说明
- dl 标签里只能放dt和dd标签
超链接
a标签
- 语义：超链接 通过它可以跳转到其他页面或者是本页面的其他位置
- 属性： href 定义访问资源的路径
- 属性值：url(统一资源定位符)>>网址、html路径等
- 注意：href="JavaScript:;" 只是占位，页面不会变化
target 定义跳转的方式
- _blank 在新窗口打开
- _self 在本页面打开
- _ parent 在父页面打开
- 指定name 在某个对应name的iframe中打开
锚点
- 作用：定位 比如 回到顶部/文章目录
- 设置方法
a标签的href="#锚点的id属性值"
锚点元素设置id属性
表格
-必要的标签
table 定义一个表格
tr (table row) 表格的一行
td (table data cell) 表格一行中的一个单元格
th (table head cell) 表格标题行中的一格，加粗效果
- 属性
border 设置边框线 数字 ，如果border为0，内外边框都会消失
cellpadding 设置单元格的内边距 属性值：像素px，百分比
cellspacing 设置单元格与单元格的距离
align 设置整个表格在页面中的位置 center left right
width 设置整个表格的宽度
合并单元格
- 属性
rowspan="2" 合并2行
colspan="2" 合并2列
- 步骤
1.确定目标单元格——在那个td上写属性
2.判断合并行，还是列——写rowspan or colspan
3.计算合并的单元格数量—— 属性值
4.删除被占用的单元格
表单
表单域 form标签
-属性
action 设置提交路径
用来指定接受处理表单数据的服务器url地址
name 设置表单域的名字，用于区分同一页面的多个表单
method 设置提交方式
get
表单的数据会显示在地址栏中，有需要保密的数据不能用get
post
表单的数据不会显示在地址栏中，而是封装在表单体里
表单元素
- 输入框 input
- 按钮 button
input标签
input标签
-type 属性可以修改input的类型
text 文本框
password 密码框
submit 提交按钮 把表单的数据提交到服务器
radio 单选按钮
checkbox 复选框
reset 重置按钮
date 日期选择器
datetime-local 日期时间选择器
hidden 隐藏框
- name属性
定义表单元素的名字，它的值匹配用户输入的值和value中设置的值
一组单选按钮的name属性应该设置为一样的值
一组复选框的name属性应该设置为一样的值
- value属性
设置表单元素的值
- 其他属性
placeholder 设置输入框的提示信息
required 设置必填项
readonly 设置只读
label标签
-用于为input设置标注
select标签
select 标签
- 定义下拉列表
- option 标签设置选项
在option设置属性：selected="selected"，默认选择当前选项
- name属性和value属性
textarea标签
textarea
- 多行文本框
iframe标签
iframe 标签
- 设置内联框架，在一个页面中嵌入另外的页面
- src 默认显示的页面
frameborder 设置内联框架的边框
实现内联框架页面的切换
1.给iframe设置name属性
2.让a标签的target="iframe的name属性值"
注意：a标签的href写要显示的页面地址
css
css简介
网页的web标准：
-结构 (HTML)
-样式 (CSS)
-行为 (JavaScript)
CSS
- 层叠样式表 Cascading Style Sheets
- 用来设置网页元素的外观样式，比如颜色，背景，间距等等
代码规范
- 语法
选择器 {
//样式声明，一个或多个属性
属性名: 属性值;
属性名: 属性值;
}
- 代码风格
选择器，属性可以是全小写或者全大写，但是推荐小写
选择器和括号直接有一个空格
冒号和属性值之间有一个空格
css的使用方式
1.行内样式 (内嵌、内联样式)
-位置
在元素标签里定义一个style属性，它的属性值就是样式属性键值对
- 特点
只能对当前的一个元素起作用，多个元素需要一个个设置，不方便修改
行内样式优先级最高，基本不能通过其他两种方式修改
开发时尽量少用
2.内部样式
- 位置
在页面head标签中的style标签里定义
- 特点
可以同时为多个标签定义相同的样式，修改方便
只对当前页面起作用，不能跨页面使用
3.外部样式
- 位置
定义一个独立的.css文件，通过link引入到需要设置样式的HTML文件中
<link rel="stylesheet" href="css文件的地址">
- 特点
可以跨页面使用
字体属性
font-family
- 设置字体族，字体列表中考前的优先应用，
如果计算机中没有前面的字体，才会应用靠后的
- 计算机中的字体
win11 设置》个性化》字体
- 如果定义的字体族中，所有字体都没有，则显示默认字体
- 通用字体
关键字，不加引号
sans-serif 无衬线 monospace 等线 fangsong 仿宋
font-size
- 设置字体的大小
- 单位
像素 px
em 字体大小的倍数
rem 相对于html字体大小的倍数
font-weight
- 定义字体的粗细
- 属性值
- 关键字
normal 默认粗细
bold 加粗
bolder 比父元素更粗一点
- 数字 1~900
400 normal
font-style
-设置字体样式
- 属性值
italic 倾斜
normal 默认竖直
font
- 复合设置字体样式
- 属性顺序
（font-style font-weight) font-size font-family）
文本属性
line-height
- 设置行高
行高 = 上间距 + 文本高度（font-size） + 下间距
- 属性值
像素px
数字
em
...
text-indent
- 设置文本缩进
- 属性值
像素px，em
text-align
- 设置文本在块级元素中的位置
也可以设置行内元素在块级元素中的位置
- 属性值
center left right
color
-设置文本颜色
- 属性值
- 关键字
red blue green
- RGB
十进制表示
rgb(red,green,blue)
3个部分，取值范围：0~255
值越大，颜色越深，取0颜色消失
rgba(137, 43, 226, 0.618)
最后一个值是不透明度，取值范围0~1
十六进制
#rrggbb 比如：#8a2be2
取值范围：0~ff
#fff 白色
text-transform
- 设置文本大小写转换
- 属性值
uppercase 全大写
lowercase 全小写
capitalize 首字母大写
text-decoration-line
- 设置装饰线的位置
overline 在文本上方 underline 在文本下方(默认) none 没有下划线
text-decoration-style
-设置装饰线的样式
solid 实线(默认) dashed 虚线 wavy 波浪线
text-decoration-color
- 设置装饰线的颜色
text-decoration
- 复合写法
text-decoration: dashed orange underline;
- 取消下划线样式
text-decoration: none;
标签选择器
选择器的作用
1.用来匹配页面中符合条件的元素
2.为这些元素设置样式
标签选择器
- 语法
标签名 {} 标签名：h1，p，span...
- 特点
找到body下所有同名的标签
当页面有多个同名标签时，没有办法为某个标签单独设置样式
id选择器
id选择器
- 使用方法
1.为对应的标签设置id属性
2.在css中通过#id属性值匹配该标签
- 一个页面中id属性的值不能重复
类选择器
类选择器
- 使用方法
1.为对应的标签设置class属性，属性值称为类名
2.在css中通过.类名 匹配这些标签
- 和id选择器的区别
- 类名可以在一个页面中重复使用，只要需要设置的样式相同，就可以使用
- class属性可以有多个属性值，类名与类名之间用空格隔开
- 开发时通常用类选择器
通配符选择器
通配符选择器
- 语法
* {}
- 特点
1.选中body中所有的元素
2.通常用于清楚默认样式
后代选择器
元素与元素之间的关系
父元素和子元素
兄弟元素
祖先和后代元素
后代选择器
- 语法：
祖先选择器a 后代选择器b {}
两个选择器直接有一个空格，这两个选择器可以是标签名，类名，id选择器
- 特点
选中a下面的所有的b，b可以是a的儿子，孙子，曾孙...
子代选择器
子代选择器
-语法
父亲选择器a > 儿子选择器b {}
- 特点
b是a的儿子
并集选择器
并集选择器
- 语法
选择器1,选择器2 {}
- 特点
同时选中1和2
伪类选择器
伪类
- 用于处于特定状态的元素的类（伪的，不是真的写在class里的类）
特定状态：比如某个元素的第一个子元素，鼠标移上去时的元素
-语法
标签名:伪类 {}
p:first-child
- 找到作为第一个子元素的p元素
这个元素必须是父元素的第一个元素样式才会生效
- 不区分子元素的类型，在所有子元素中绝对第一
p:first-of-type
-找到同类子元素中的第一个
- 区分类型，在所有p中相对第一
伪元素选择器
伪元素
- 开头有::的关键字，早期也用:
before 在元素内前面添加
after 在元素内后面添加
- 相当于向HTML中添加一个新的元素，但是并没有真的改变HTML的结构
- 同样可以给伪元素添加样式
content 设置添加的内容
content: "文本";
content: url(图片的地址);
超链接的伪类
a:link
设置超链接没有被点击时的样式
.link01:visited
设置带有.link01这个类名的超链接，被点击后的样式
a:hover
设置鼠标悬停在超链接上时的样式
注意，:hover也可以用于设置其他元素，在鼠标悬停时的样式
a:active
设置鼠标点击超链接不放时的样式
同时定义的顺序：LVHA
属性选择器
属性选择器
[标签的属性名] 选中带有这个属性名的标签
[属性名='属性值'] 选中带有这个属性名且属性值也相等的标签
css的三大特性
三大特性
1.继承
在祖先元素中设置的样式，同样应用到了它的后代元素中
不是所有的样式都会继承
常见可以继承的样式
color font-, text-, line-
常见不可以继承的样式
背景相关 background-，布局相关 width
2.优先级（权重）
- 样式的冲突需要用优先级来解决
- 什么时候产生冲突
用不同的选择器选中了同一些元素，并且为相同的属性设置不同的值
- 当发生冲突时，优先级高的选择器设置的样式被应用
选择器 简单权重 规范权重
!important 无限大 无限大 慎用！！！
行内样式style 1000 (1,0,0,0)
id选择器 100 (0,1,0,0)
类选择器 10 (0,0,1,0)
标签选择器 1 (0,0,0,1)
继承 0 (0,0,0,0)
比较优先级时，把所有的选择器权重相加，在同量级下，相加的和越大的，优先级越高
算法案例：
1.选择器权重相加，值越大的优先级越高
div p {} 1+1 =2
.three p {} 10+1 =11 被应用
2.权重相加的和，不会越级进位
11个div {} 1+1+1+..+1=11
.three {} 10 不能越级，所以仍然是类选择器被应用
3.规范权重的比较
(4,3,2,1) 从左往右分为4档
.three (0,1,0) 类选择器，在第2档加1
#three (1,0,0) id选择器&
最低0.47元/天 解锁文章
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
