HTML CSS

最新推荐文章于 2022-04-19 21:39:01 发布

m0_59193458

最新推荐文章于 2022-04-19 21:39:01 发布

阅读量125

点赞数

分类专栏：选择器

本文链接：https://blog.csdn.net/m0_59193458/article/details/119040554

版权

选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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被选中

m0_59193458

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS

html 代表包含一个网页文档，是一个网页的根元素html文档中的代码是纯文档html叫超文本标记语言 head 代表文档的头部，配置网站图标配置网站标题配置网页SEO信息加载外部的JS和CSS引入外部资源 meta 代表控制信息，通过标签中的属性来提供页面控制，如:charset='UTF-8'控制编码格式大陆程序员用的基本都是utf-8 title 代表网页标题用来设置网页标题 body 代表文档的主体，包含数据、主体骨架、布局、样式、行...
复制链接

扫一扫