admin管理员组文章数量:1033067
WEB前端入门 学习记录
注：笔记仅为记录视频零碎知识，不适用于零基础系统学习
一、常用HTML知识
1、HTML实体
显示结果 | 描述 | 实体名称 | 实体编号 |
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
￠ | 分（cent） | ¢ | ¢ |
£ | 镑（pound） | £ | £ |
¥ | 元（yen） | ¥ | ¥ |
€ | 欧元（euro） | € | € |
§ | 小节 | § | § |
© | 版权（copyright） | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
更多html实体参考手册：HTML ISO-8859-1 参考手册 来源：W3SCHOOL
2、meta标签
记录网页的元数据
代码语言：javascript代码运行次数：0运行复制<meta charset="utf-8">//网站编码
<meta name="keywords" content="css">//关键字
<meta name="description" content="good">//描述
<meta http-equiv="refresh" content="3;url=;>//重定向3、语义化标签
3.1常用的标签
（1）标题标签（块级元素block element）
·独占一行
·共有h1 ~ h6六级标题（上面的语义化标签就是h2标题），h1在网页中的重要性仅次于title标签，一般情况下一个页面只会有1个h1，h4~h6一般很少用
（2）p标签(块级元素block element）
·独占一行
·表示页面中的一个段落
（3）hgroup标签
可以把一组相关的标签同时放入标签组
（4）em标签（行内元素inline element）
表示语音语义的加重，强调作用（表示为斜体）
（5）strong标签（行内元素inline element ）
表示强调，表现为加粗
（6）blockquote标签 (块级元素block element）
长引用（表现为缩进）
（7）q标签
短引用（表现为加双引号）
代码语言：javascript代码运行次数：0运行复制<p>鲁迅说：</p>
<blockquote>
我没说过这句话
</blockquote>
<p>孔子曰：</p>
<q>
学而时习之
</q>
<!--以下为上述代码执行结果--!>鲁迅说：
我没说过这句话
孔子曰：
学而时习之
实际上代码结果应该为图片中所示，上面引用出现背景颜色是因为网站模板预设导致
3.2块元素与行内元素
（1）作用
块元素一般来对页面进行布局，行内元素主要用来包裹文字
（2）其他要求
·一般情况下，会在块元素中放行元素，而不会在行元素中放块元素
·浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。比如：标签写在了根元素的外部，比如p元素中嵌套了块元素，比如根元素出现了除head和body以外的元素·····
3.3 布局/结构化语义标签
（1）header、main、footer标签
header表示网页的头部
main表示网页的主体部分
footer表示底部
（2）nav标签
表示网页中的导航
（3）aside标签
和主题相关的其他内容（侧边栏）
（4）article标签
表示单独的文章
（5）section标签
表示一个独立的区块
上面的标签都不能使用时可以使用section
（6）div标签
没有语义，就用来表示一个区块
（7）span标签
行元素，没有任何语义
4、超链接 <a>标签
<a>标签是一个行内元素，但是a标签可以嵌套除自身之外的所有元素。（正常情况下行内元素只能嵌套行内元素）
代码语言：javascript代码运行次数：0运行复制<a href="">xxx</a>
1、调用代码内的文件一般使用相对路径，本层目录下的文件使用./ 上一级目录下的文件使用../
2、href="#"表示回到顶部
3、锚点：可通过id属性（不可使用class）跳转到任意位置(H5新增)，之前name方式已经废除
4、占位符：<a href="favascript:;"></a>5、图片标签
自结束标签<img src="" alt="" width=" px" height=" px">,替换元素（基于块和行内元素之间）
·高度和宽度其中只改变一个，图片会等比例缩放。
·jpeg（jpg）颜色比较丰富，不支持透明效果，不支持动图。一般用来显示图片
·gif 支持的颜色较少，支持简单透明，支持动图。
·png支持的颜色丰富，支持复杂透明，不支持动图
·webp 具备其他图片的优点，且文件较小；缺点：兼容性差。本站因运营成本原因自2020年9月20日起全面启用webp格式图片 文章链接
6、内联框架
代码语言：javascript代码运行次数：0运行复制<iframe src="; width="" height="" frameborder="0或1"></frame>7、音视频播放
·音频
代码语言：javascript代码运行次数：0运行复制<audio src="" controls autoplay loop ></audio>
如果设置了autoplay，在页面打开时音乐会自动播放。
但是：目前大部分浏览器为了用户体验不会对音乐自动播放（IE不会考虑这个问题）(1)如果有人用IE8，如何在不使用JS的情况下输出“浏览器不支持”的提示文字
代码语言：javascript代码运行次数：0运行复制<audio controls>
您的浏览器不支持播放音频，请升级浏览器
<source src="xxx.mp3">
</audio>(2)IE8支持什么格式
代码语言：javascript代码运行次数：0运行复制<embed src="" type="audio/mp3" width="" height=""> //不好用，不指定width和height时丑的一批 ·视频
代码语言：javascript代码运行次数：0运行复制<video controls>
<source src="">
</audio>二、CSS相关知识
1、CSS使用方法1-内联样式（不推荐）
直接在标签内部通过style属性来设置元素的样式
代码语言：javascript代码运行次数：0运行复制<p style="color:red;font-size:80">111</p>不方便维护，生产环境不要使用内联样式。
2、CSS使用方法2-内部样式表
代码语言：javascript代码运行次数：0运行复制<head>
...
方式1：元素选择器（根据标签名选择）
div{
color:red;
}
方式2：其他选择器方式（后续介绍）
...
</head>3、CSS使用方法3-外部样式表
新建一个style.css文件，调用方式：
<link rel="stylesheet" href="./style.css"此种方式还可调用浏览器缓存机制。
4、CSS基本语法
选择器 + 声明块
声明块由一个一个的声明组成，中间用;隔开
声明是一个明值对结构，一个样式名对应一个样式值。中间为：
5、CSS选择器
5.1常用选择器
（1）元素选择器
代码语言：javascript代码运行次数：0运行复制p{}
div{}
h1{}（2）id选择器（id唯一）
代码语言：javascript代码运行次数：0运行复制#box{} //注：写代码时id一定要唯一，不能重复（重复时CSS没问题，JS就有问题了）（3）类选择器（class可重复使用）
代码语言：javascript代码运行次数：0运行复制.outer{}多个不同的标签可以使用同一个class
同一个标签也可以使用不同class，比如div的类为outer、a、b
代码语言：javascript代码运行次数：0运行复制<div calss="outer a b"></div>（4）通配选择器
代码语言：javascript代码运行次数：0运行复制*{backgroud-color:tomato;}5.2复合选择器
（1）交集选择器：元素.类名
比如要选择类名为outer的div标签
代码语言：javascript代码运行次数：0运行复制div.outer{}（2）并集选择器：同时选中多个元素
语法：选择器1，选择器2，·····，选择器n{} 比如同时让<h2>和<p>都变成绿色
代码语言：javascript代码运行次数：0运行复制h2,span{color:green;}5.3关系选择器
（1）父子元素
父元素：直接包含子元素的元素叫父元素
子元素：直接被父元素包含的元素叫子元素
（2）祖先元素
直接或间接包含后代元素的元素叫做祖先元素
父元素也是他的祖先元素
（3）兄弟元素
拥有相同父元素的元素是兄弟元素
举例1：选中元素内的某个子元素 【 语法：父元素>子元素>子元素···· 】
代码语言：javascript代码运行次数：0运行复制<div>
<p>
①我是div的p元素
<span>②我是div的p元素的span元素</span>
</p>
<span>③我是div的span元素</span>
</div>
举例：选中div中的子元素span（即选中③）
div>span{}
举例：找div的孙子span（选中②）
div>p>span举例2：选中元素内所有同类型的后代元素【语法：祖先 后代】
代码语言：javascript代码运行次数：0运行复制<div>
<p>
①我是div的p元素
<span>②我是div的p元素的span元素</span>
</p>
<span>③我是div的span元素</span>
</div>
举例：选中div中的所有的后代元素span（即选中③）
div span{}举例4：选择下一个兄弟元素【语法：前一个+下一个】
代码语言：javascript代码运行次数：0运行复制<div>
<p>
①我是div的p元素
<span>②我是div的p元素的span元素</span>
</p>
<span>③我是div的span元素</span>
<span>④我是div的span元素</span>
<span>⑤我是div的span元素</span>
</div>
举例：选中p后边的兄弟元素（即选中③）
p+span{}注意：这种语法只能选择离得最近的那个兄弟元素，所以对④、⑤没有作用
举例5：选择下面所有的兄弟元素【语法：前一个~下一个】
对于上面的例子，使用p~span{}选择即可对③④⑤同时生效
举例6：关系选择器和复合选择器可以混用
代码语言：javascript代码运行次数：0运行复制<div>
<p>
①我是div的p元素
<span>②我是div的p元素的span元素</span>
</p>
<span>③我是div的span元素</span>
</div>
<div class="second">
<span>④我是第二个div的span元素</span>
</div>
举例：选中第二个div中的子元素span（即选中④）
div.second>span{}ps：vs code集成了一个插件，使用css语法用于快速书写html布局
1、输入ul>li*5,按Tab键，快速生成以下
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
2、输入div+div*5，按Tab键，快速生成6个兄弟div
3、输入div>p.outer，按Tab键，快速生成以下代码
<div>
<p class="outer"></p>
</div>5.4属性选择器
（1）选择含有指定属性的元素【语法：[属性名]{}】
代码语言：javascript代码运行次数：0运行复制<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="hello">儿童相见不相识</p>
<p>笑问客从何处来</p>
举例:选中前三句
[title]{color:red}其他的例子：
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有元素的元素
5.5伪类选择器
伪类（不存在的类、特殊的类）用于描述一个元素的特殊状态，比如，第一个子元素、被点击的元素、鼠标移入的元素···
伪类一般使用:开头
举例1：选中第一个子元素:first-child
代码语言：javascript代码运行次数：0运行复制<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
ul>li:first-child{}另外，选择最后一个子元素为:last-child;选择第n个子元素为:nth-child(n),
n的特殊用法：①这里的n如果为某一个具体的数字，就是选中第几个
②如果写n，默认选中所有。
③如果写2n，选中偶数位子元素；也可以写even
④如果写2n+1，选中奇数位子元素；也可以写odd
-child是针对所有的子元素进行排序，比如ul下第一个子元素是span，但是却写ul>li:first:child{}是不会生效的。
举例2：选中第一个同类型的子元素：first-of-type
代码语言：javascript代码运行次数：0运行复制<ul>
<span>sss</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
如果想要选中第一个li，选择器如下
ul>li:first-of-type{}举例3：除去某一个元素：not（li：nth-child（3））
代码语言：javascript代码运行次数：0运行复制<ul>
<span>sss</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
除了第三个li，其他都变成绿色；，选择器如下
ul>li:not(:nth-of-type(3)){}5.6超链接伪类（a标签的伪类）
（1）修改颜色
：link表示没访问过的链接（正常的链接）
<a href=";>打开过的链接</a>
<br>
<a href=";>没打开过的链接</a>
假设第一个a标签打开过，第二个a标签没打开过
现在想要选中第二个a标签，就在style中输入
a:link{}
现在想要选中第一个a标签，就在style中输入
a:visited{}:link和:visited伪类只能用于a标签
出于隐私原因，:visited伪类只能修改链接颜色，其他都无法修改！
（2）改变鼠标移入时的状态
：hover
a:hover{
font-size: large;
}（3）改变鼠标点击时的状态
：active
5.7伪元素选择器
p::first-letter{}表示第一个字母
p::first-line{}表示第一行，会随窗口大小永远选中第一行
p::selection{}表示选中的元素
::before{}元素的开始
::after{}元素的最后
before和after必须结合content属性来使用
举例：用CSS语法在div开头加入某些文字
代码语言：javascript代码运行次数：0运行复制<head>
<style>
div::before{
content: 'heihei';
color: green;
}
</style>
</head>
<body>
<div>
Hello!
</div>
</body>效果：
5.7选择器权重
通过不同的选择器选择相同的元素，并且设置了不同的值，此时发生样式冲突。
①选择器优先级（权重）： !important>内联样式>ID选择器>类（伪类）选择器>元素选择器>通配选择器>继承的样式
②如果是混合选择器，权重相加，但只能超过同级选择器，再叠加也不会超过上一级。
③同权重选择器，最新的（ 后面的 ）生效。
④某一个样式后面添加 !important，该样式获取全局最高优先级。
注：！important开发中必须慎用，这玩意儿用JavaScript都改变不了它的样式。
5.8 CSS选择器练习
这里使用GitHub上一位大神的例子，因为GitHub访问较慢，所以将代码在本地部署，练习地址如下：/，答案参阅.html
7、样式继承
（1）概念
发生在祖先和后代之间。
便于开发,利用继承可以将通用样式统一设置在祖先元素上，比如直接在body里面设置font-size，则全文的字体大小的都会变化
代码语言：javascript代码运行次数：0运行复制<p>
我是p
<span>
我是p内的span
</span>
</p>
此时如果在style里面设置p{color:red;}，则p中的span也会变红（2）注意点
①不是所有的样式都被继承，比如背景相关、布局相关。
三、布局相关(layout)
1、文档流
（1）元素在文档流中的特点
块元素
块元素在页面中独占一行（自上向下垂直排列）
默认宽度是父元素的全部（会把父元素撑满）
默认高度是被内容撑开
行内元素
不对独占页面的一行，只占用自身的大小
从左向右水平排列，如果一行中不能容纳，则元素会换到第二行继续自左向右排列
默认高度和默认宽度都是被内容撑开
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2020-10-25 ，如有侵权请联系 cloudcommunity@tencent 删除语法web浏览器前端入门WEB前端入门 学习记录
注：笔记仅为记录视频零碎知识，不适用于零基础系统学习
一、常用HTML知识
1、HTML实体
显示结果 | 描述 | 实体名称 | 实体编号 |
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
￠ | 分（cent） | ¢ | ¢ |
£ | 镑（pound） | £ | £ |
¥ | 元（yen） | ¥ | ¥ |
€ | 欧元（euro） | € | € |
§ | 小节 | § | § |
© | 版权（copyright） | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
更多html实体参考手册：HTML ISO-8859-1 参考手册 来源：W3SCHOOL
2、meta标签
记录网页的元数据
代码语言：javascript代码运行次数：0运行复制<meta charset="utf-8">//网站编码
<meta name="keywords" content="css">//关键字
<meta name="description" content="good">//描述
<meta http-equiv="refresh" content="3;url=;>//重定向3、语义化标签
3.1常用的标签
（1）标题标签（块级元素block element）
·独占一行
·共有h1 ~ h6六级标题（上面的语义化标签就是h2标题），h1在网页中的重要性仅次于title标签，一般情况下一个页面只会有1个h1，h4~h6一般很少用
（2）p标签(块级元素block element）
·独占一行
·表示页面中的一个段落
（3）hgroup标签
可以把一组相关的标签同时放入标签组
（4）em标签（行内元素inline element）
表示语音语义的加重，强调作用（表示为斜体）
（5）strong标签（行内元素inline element ）
表示强调，表现为加粗
（6）blockquote标签 (块级元素block element）
长引用（表现为缩进）
（7）q标签
短引用（表现为加双引号）
代码语言：javascript代码运行次数：0运行复制<p>鲁迅说：</p>
<blockquote>
我没说过这句话
</blockquote>
<p>孔子曰：</p>
<q>
学而时习之
</q>
<!--以下为上述代码执行结果--!>鲁迅说：
我没说过这句话
孔子曰：
学而时习之
实际上代码结果应该为图片中所示，上面引用出现背景颜色是因为网站模板预设导致
3.2块元素与行内元素
（1）作用
块元素一般来对页面进行布局，行内元素主要用来包裹文字
（2）其他要求
·一般情况下，会在块元素中放行元素，而不会在行元素中放块元素
·浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。比如：标签写在了根元素的外部，比如p元素中嵌套了块元素，比如根元素出现了除head和body以外的元素·····
3.3 布局/结构化语义标签
（1）header、main、footer标签
header表示网页的头部
main表示网页的主体部分
footer表示底部
（2）nav标签
表示网页中的导航
（3）aside标签
和主题相关的其他内容（侧边栏）
（4）article标签
表示单独的文章
（5）section标签
表示一个独立的区块
上面的标签都不能使用时可以使用section
（6）div标签
没有语义，就用来表示一个区块
（7）span标签
行元素，没有任何语义
4、超链接 <a>标签
<a>标签是一个行内元素，但是a标签可以嵌套除自身之外的所有元素。（正常情况下行内元素只能嵌套行内元素）
代码语言：javascript代码运行次数：0运行复制<a href="">xxx</a>
1、调用代码内的文件一般使用相对路径，本层目录下的文件使用./ 上一级目录下的文件使用../
2、href="#"表示回到顶部
3、锚点：可通过id属性（不可使用class）跳转到任意位置(H5新增)，之前name方式已经废除
4、占位符：<a href="favascript:;"></a>5、图片标签
自结束标签<img src="" alt="" width=" px" height=" px">,替换元素（基于块和行内元素之间）
·高度和宽度其中只改变一个，图片会等比例缩放。
·jpeg（jpg）颜色比较丰富，不支持透明效果，不支持动图。一般用来显示图片
·gif 支持的颜色较少，支持简单透明，支持动图。
·png支持的颜色丰富，支持复杂透明，不支持动图
·webp 具备其他图片的优点，且文件较小；缺点：兼容性差。本站因运营成本原因自2020年9月20日起全面启用webp格式图片 文章链接
6、内联框架
代码语言：javascript代码运行次数：0运行复制<iframe src="; width="" height="" frameborder="0或1"></frame>7、音视频播放
·音频
代码语言：javascript代码运行次数：0运行复制<audio src="" controls autoplay loop ></audio>
如果设置了autoplay，在页面打开时音乐会自动播放。
但是：目前大部分浏览器为了用户体验不会对音乐自动播放（IE不会考虑这个问题）(1)如果有人用IE8，如何在不使用JS的情况下输出“浏览器不支持”的提示文字
代码语言：javascript代码运行次数：0运行复制<audio controls>
您的浏览器不支持播放音频，请升级浏览器
<source src="xxx.mp3">
</audio>(2)IE8支持什么格式
代码语言：javascript代码运行次数：0运行复制<embed src="" type="audio/mp3" width="" height=""> //不好用，不指定width和height时丑的一批 ·视频
代码语言：javascript代码运行次数：0运行复制<video controls>
<source src="">
</audio>二、CSS相关知识
1、CSS使用方法1-内联样式（不推荐）
直接在标签内部通过style属性来设置元素的样式
代码语言：javascript代码运行次数：0运行复制<p style="color:red;font-size:80">111</p>不方便维护，生产环境不要使用内联样式。
2、CSS使用方法2-内部样式表
代码语言：javascript代码运行次数：0运行复制<head>
...
方式1：元素选择器（根据标签名选择）
div{
color:red;
}
方式2：其他选择器方式（后续介绍）
...
</head>3、CSS使用方法3-外部样式表
新建一个style.css文件，调用方式：
<link rel="stylesheet" href="./style.css"此种方式还可调用浏览器缓存机制。
4、CSS基本语法
选择器 + 声明块
声明块由一个一个的声明组成，中间用;隔开
声明是一个明值对结构，一个样式名对应一个样式值。中间为：
5、CSS选择器
5.1常用选择器
（1）元素选择器
代码语言：javascript代码运行次数：0运行复制p{}
div{}
h1{}（2）id选择器（id唯一）
代码语言：javascript代码运行次数：0运行复制#box{} //注：写代码时id一定要唯一，不能重复（重复时CSS没问题，JS就有问题了）（3）类选择器（class可重复使用）
代码语言：javascript代码运行次数：0运行复制.outer{}多个不同的标签可以使用同一个class
同一个标签也可以使用不同class，比如div的类为outer、a、b
代码语言：javascript代码运行次数：0运行复制<div calss="outer a b"></div>（4）通配选择器
代码语言：javascript代码运行次数：0运行复制*{backgroud-color:tomato;}5.2复合选择器
（1）交集选择器：元素.类名
比如要选择类名为outer的div标签
代码语言：javascript代码运行次数：0运行复制div.outer{}（2）并集选择器：同时选中多个元素
语法：选择器1，选择器2，·····，选择器n{} 比如同时让<h2>和<p>都变成绿色
代码语言：javascript代码运行次数：0运行复制h2,span{color:green;}5.3关系选择器
（1）父子元素
父元素：直接包含子元素的元素叫父元素
子元素：直接被父元素包含的元素叫子元素
（2）祖先元素
直接或间接包含后代元素的元素叫做祖先元素
父元素也是他的祖先元素
（3）兄弟元素
拥有相同父元素的元素是兄弟元素
举例1：选中元素内的某个子元素 【 语法：父元素>子元素>子元素···· 】
代码语言：javascript代码运行次数：0运行复制<div>
<p>
①我是div的p元素
<span>②我是div的p元素的span元素</span>
</p>
<span>③我是div的span元素</span>
</div>
举例：选中div中的子元素span（即选中③）
div>span{}
举例：找div的孙子span（选中②）
div>p>span举例2：选中元素内所有同类型的后代元素【语法：祖先 后代】
代码语言：javascript代码运行次数：0运行复制<div>
<p>
①我是div的p元素
<span>②我是div的p元素的span元素</span>
</p>
<span>③我是div的span元素</span>
</div>
举例：选中div中的所有的后代元素span（即选中③）
div span{}举例4：选择下一个兄弟元素【语法：前一个+下一个】
代码语言：javascript代码运行次数：0运行复制<div>
<p>
①我是div的p元素
<span>②我是div的p元素的span元素</span>
</p>
<span>③我是div的span元素</span>
<span>④我是div的span元素</span>
<span>⑤我是div的span元素</span>
</div>
举例：选中p后边的兄弟元素（即选中③）
p+span{}注意：这种语法只能选择离得最近的那个兄弟元素，所以对④、⑤没有作用
举例5：选择下面所有的兄弟元素【语法：前一个~下一个】
对于上面的例子，使用p~span{}选择即可对③④⑤同时生效
举例6：关系选择器和复合选择器可以混用
代码语言：javascript代码运行次数：0运行复制<div>
<p>
①我是div的p元素
<span>②我是div的p元素的span元素</span>
</p>
<span>③我是div的span元素</span>
</div>
<div class="second">
<span>④我是第二个div的span元素</span>
</div>
举例：选中第二个div中的子元素span（即选中④）
div.second>span{}ps：vs code集成了一个插件，使用css语法用于快速书写html布局
1、输入ul>li*5,按Tab键，快速生成以下
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
2、输入div+div*5，按Tab键，快速生成6个兄弟div
3、输入div>p.outer，按Tab键，快速生成以下代码
<div>
<p class="outer"></p>
</div>5.4属性选择器
（1）选择含有指定属性的元素【语法：[属性名]{}】
代码语言：javascript代码运行次数：0运行复制<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="hello">儿童相见不相识</p>
<p>笑问客从何处来</p>
举例:选中前三句
[title]{color:red}其他的例子：
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有元素的元素
5.5伪类选择器
伪类（不存在的类、特殊的类）用于描述一个元素的特殊状态，比如，第一个子元素、被点击的元素、鼠标移入的元素···
伪类一般使用:开头
举例1：选中第一个子元素:first-child
代码语言：javascript代码运行次数：0运行复制<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
ul>li:first-child{}另外，选择最后一个子元素为:last-child;选择第n个子元素为:nth-child(n),
n的特殊用法：①这里的n如果为某一个具体的数字，就是选中第几个
②如果写n，默认选中所有。
③如果写2n，选中偶数位子元素；也可以写even
④如果写2n+1，选中奇数位子元素；也可以写odd
-child是针对所有的子元素进行排序，比如ul下第一个子元素是span，但是却写ul>li:first:child{}是不会生效的。
举例2：选中第一个同类型的子元素：first-of-type
代码语言：javascript代码运行次数：0运行复制<ul>
<span>sss</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
如果想要选中第一个li，选择器如下
ul>li:first-of-type{}举例3：除去某一个元素：not（li：nth-child（3））
代码语言：javascript代码运行次数：0运行复制<ul>
<span>sss</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
除了第三个li，其他都变成绿色；，选择器如下
ul>li:not(:nth-of-type(3)){}5.6超链接伪类（a标签的伪类）
（1）修改颜色
：link表示没访问过的链接（正常的链接）
<a href=";>打开过的链接</a>
<br>
<a href=";>没打开过的链接</a>
假设第一个a标签打开过，第二个a标签没打开过
现在想要选中第二个a标签，就在style中输入
a:link{}
现在想要选中第一个a标签，就在style中输入
a:visited{}:link和:visited伪类只能用于a标签
出于隐私原因，:visited伪类只能修改链接颜色，其他都无法修改！
（2）改变鼠标移入时的状态
：hover
a:hover{
font-size: large;
}（3）改变鼠标点击时的状态
：active
5.7伪元素选择器
p::first-letter{}表示第一个字母
p::first-line{}表示第一行，会随窗口大小永远选中第一行
p::selection{}表示选中的元素
::before{}元素的开始
::after{}元素的最后
before和after必须结合content属性来使用
举例：用CSS语法在div开头加入某些文字
代码语言：javascript代码运行次数：0运行复制<head>
<style>
div::before{
content: 'heihei';
color: green;
}
</style>
</head>
<body>
<div>
Hello!
</div>
</body>效果：
5.7选择器权重
通过不同的选择器选择相同的元素，并且设置了不同的值，此时发生样式冲突。
①选择器优先级（权重）： !important>内联样式>ID选择器>类（伪类）选择器>元素选择器>通配选择器>继承的样式
②如果是混合选择器，权重相加，但只能超过同级选择器，再叠加也不会超过上一级。
③同权重选择器，最新的（ 后面的 ）生效。
④某一个样式后面添加 !important，该样式获取全局最高优先级。
注：！important开发中必须慎用，这玩意儿用JavaScript都改变不了它的样式。
5.8 CSS选择器练习
这里使用GitHub上一位大神的例子，因为GitHub访问较慢，所以将代码在本地部署，练习地址如下：/，答案参阅.html
7、样式继承
（1）概念
发生在祖先和后代之间。
便于开发,利用继承可以将通用样式统一设置在祖先元素上，比如直接在body里面设置font-size，则全文的字体大小的都会变化
代码语言：javascript代码运行次数：0运行复制<p>
我是p
<span>
我是p内的span
</span>
</p>
此时如果在style里面设置p{color:red;}，则p中的span也会变红（2）注意点
①不是所有的样式都被继承，比如背景相关、布局相关。
三、布局相关(layout)
1、文档流
（1）元素在文档流中的特点
块元素
块元素在页面中独占一行（自上向下垂直排列）
默认宽度是父元素的全部（会把父元素撑满）
默认高度是被内容撑开
行内元素
不对独占页面的一行，只占用自身的大小
从左向右水平排列，如果一行中不能容纳，则元素会换到第二行继续自左向右排列
默认高度和默认宽度都是被内容撑开
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2020-10-25 ，如有侵权请联系 cloudcommunity@tencent 删除语法web浏览器前端入门本文标签： WEB前端入门 学习记录
版权声明：本文标题：WEB前端入门 学习记录 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1748002730a2240193.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论