-
html
-
html 代表包含一个网页文档,是一个网页的根元素 html文档中的代码是纯文档 html叫超文本标记语言
-
head 代表文档的头部,配置网站图标 配置网站标题 配置网页SEO信息 加载外部的JS和CSS 引入外部资源
-
meta 代表控制信息,通过标签中的属性来提供页面控制,如:charset='UTF-8'控制编码格式 大陆程序员用的基本都是utf-8
-
title 代表网页标题 用来设置网页标题
-
body 代表文档的主体,包含数据、主体骨架、布局、样式、行为事件和回调函数 用来存放网页的内容的,我们写的99%的代码 都是在body里面
-
框架:
-
<!DOCTYPE html> <!-- lang是语言的标签 en 表示英语 --> <html lang="en"> <head> <meta charset="utf-8">> <title></title> </head> <body> </body> </html>
-
h1-6 h1的字体最大 通常用到h3 用来写文字主题
-
div 是容器标签,代表一个网页的某个区域 class="nav"表示给他这个div起了一个名字 他仅仅就是一个容器,没有什么特殊含义,也没有什么语义 用来布局
-
hr 水平分割线
-
br 换行符
-
p 代表一个段落,包含段落中的内容
-
strong和b 加粗标签
-
i和em 斜体标签
-
u和ins 表示带下划线
-
s 表示中划线
-
del 表示被删除
-
img 插入图片
-
span 代表一个行内文本,一般用于需要特别处理的行内文本标记
-
a a标签:超链接标签 点一下会跳转到新的页面 接_self 在当前选项卡跳接_blank 打开一个新的选项卡
-
# 是一个锚点链接
-
dl 包裹 那么就告诉浏览器 你这个里面是一个自定义列表
-
dt 是自定义列表的一个小标题
-
dd 是自定义列表里的内容
-
ol 有序列表
-
ul 无序列表
-
li 代表一个列表项目
-
table 代表一个表格,包含很多表格元素
-
tr 代表一行
-
th 代表表格数据的名称 表头
-
td 代表每一个表格
-
button 代表一个按钮
-
form 代表一个表单,可以内含很多表单组件,一般用于用户数据提交
-
input 代表一个表单组件,通过type来切换不同功能,一般用于数据的输入
-
label标签 他会绑定input 帮助我们获取焦点
-
text 代表文本
-
password 代表密码输入框,输入的密码会被转换成一个黑点或者星号
-
number 数字
-
radio 收单机的意思 表示单选
-
checkbox 表示多选
-
checked 默认选中
-
textarea 表示文本区域
-
select 代表一个下拉框,包含多个下拉选项 与option使用
-
option 代表下拉选项
-
css 对网页进行布局和美化的 先布局后美
-
选择器:
- id选择器 #id名{ } 使用id可以快速且唯一的寻找到元素引用
- class选择器 .类名{ } 前面是"." 类和标签属于多对多关系,一个类可以有多个标签
- 标签选择器 标签名{ } 前面什么都不要加 通过标签名可以找到文档中所有同名标签
-
通配符选择器 *{ } 全选 这种选择器通常配合magran padding用于消除默认内外边距
-
后代选择器 div p{ } 表示div中的所有p都被选中,不论p是div的儿子辈还是孙子辈
-
儿子选择器 div>p{ } 表示div中所有p都被选中 但只能选中儿子辈的p
-
兄弟选择器 div+p{ } 表示div后紧挨的p被选中
-
并集选择器 div~p{ } 表示div都所有标签都会被选中
-
div, p, li{ } 对多个元素组合执行相同的操作
-
div.box1{ } 表示文档中,所有class中含有box1的div被选中
-
排除选择 ul li:not(box){ } 表示ul中排除类名为box的标签
-
属性选择器: [id]{ } 表示有id属性即可 [id][class]{ }表示id和class属性都必须有
-
[id],[class]{ }表示id和class有一个即可
-
[id="box1"]{ } 表示选中id这个属性 属性值为box1的元素
-
[id^=box]{ }表示选中id属性值以box开头的
-
[id$="1"]{ }表示选中id属性值是以1结尾的元素
-
[id*="o"]{ }表示选中id属性值中有o的元素
-
[class~="item2"]{ } 使用class一次性起了多个名字 使用~=可以使用其中一个名字
-
链接伪类选择器:
-
某元素:link{ } 表示当此元素未被访问时的样式(即初始默认样式)
-
某元素:hover{ } 表示当鼠标移到此元素上时的样式
-
某元素:active{ } 表示当鼠标点击瞬间(未释放鼠标)时的样式
-
某元素:visited{ } 表示当此元素被访问过时的样式
-
某元素:target表示当我们跳转到锚点后锚点的样式
-
位置伪类选择器:
-
div:nth-child(1){ } 和div同级的第一个元素如果是div的话就被选中 不是就不会选中
-
div:last-child{ } 表示当前级别最后一个元素
-
div:first-child{ }表示当前级别第一个元素
-
div:nth-of-type(1){ }他表示的是每一级别中第一个div被选中