前端学习笔记
head基础
注释：便于开发人员对开发项目解释和说明性的文字
快捷键是 ctrl+/
注释不会被应用程序解析
html 超文本标记语言，严格意义上来讲，不是一个开发语言
html5 html的第五个版本，添加了一些新标签和api，使用h5必须在页面的开头添加以下代码
```<!DOCTYPE html>```
它的含义是 声明当前文档类型是 html5 标准的文档，这样浏览器在解释渲染的时候会按照h5的标准解析
html文档是由标签组成
标签分为单标签和双标签，他们的闭合方式不同
单标签：··<img />
双标签：<div> 内容 </div>
head标签
head标签中的内容不会渲染在页面中
主要是源信息标签
<meta /> 作用是：设置网站的源信息
charset 属性，用来定义文本的编码格式
UTF-8 万国码，目前开发中的最常用
gb2312:中文码
通常都把 charset 的值设置成 UTF-8 ,如果不设置charset属性，可能会导致页面乱码，解决方案是设置成UTF-8即可
author 属性：用来定义网站的作者，一般是公司的名字
keywords 属性：用来定义网站的关键字，如果有多个关键字，用英文逗号隔开，关键字最好不要超过10个
精准的keywords值，更加有利于SEO(搜索引擎优化)
description 这个属性：用来简单的描述网站的内容，不要超过100字，有利于SEO
meta的另一种写法
```<meta name="属性名" content="属性值"/>```
title 标签，他是一个双标签，他的SEO权重很大，因此需要谨慎书写里面的内容
body 标签里面的内容会渲染在页面的可视区域
块标签
标签分为行属性标签和块属性标签
块属性标签
1. div 标签
没有任何意义的标签，通常用来进行页面的布局
<div style="border:1px #f00 solid;">千里冰封</div>
<div style="border:1px #f00 solid;">千里冰封</div>
2.h系列标签
h1-h6 标题
在一个页面当中， h1 最多只能出现1次， h2 最多出席那20次， h3-h6 次数不限
h1的用法：
1.logo处
2.资讯详情页的大标题
由于h1的权限较大，只能出现在以上两个地方
<h1>万一长城永不倒</h1>
<h2>万一长城永不倒</h2>
<h3>万一长城永不倒</h3>
<h4>万一长城永不倒</h4>
<h5>万一长城永不倒</h5>
<h6>万一长城永不倒</h6>
3. p 标签，段落标签，它里面一般包含一段文字
<p >青春要是过去何处找少年</p>
4.分割线 <hr />
换行符<br />
5.无序列表
ul > li
可以设置他的 list-style-type 属性
square :实心方块
circle :空心圆
dotted :实心圆
none : 取消列表样式
disc : 高版本系统下的默认样式
6.有序列表
ol>li
可以设置他的 list-style-type 属性
lower-aplpha : 小写字母
upper-aplpha : 大写字母
lower-roman :小写罗马文
upper-roman :大写罗马文
ol,ul,li 都是块属性标签
li 是列表项
并且ol,ul的子元素，必须是 li 标签
7.定义列表
dl>dt
dl>dd
dl ：快标签，定义列表的父元素
dt : 快标签，定义列表的标题项
dd ：快标签，定义里列表的列表项
8.address 地址标签，一般的，它的内容是一个地址
9.blockquote ：引用标签，一般引用的是一段文字，他的 cite 属性表示该文字引用的文献名目
不要使用 html 官方没有的标签，虽然也会被浏览器渲染，但是不符合w3c 规范
行标签
span 标记标签，没有实际意义，通常用来渲染文字
<span style="border:1px #f00 solid">孙悟空</span>
iframe 框架
src=“需要显示的网页地址”
height=“设置高度”
<iframe src=".//case.html" height="200" width="600"></iframe>
a 标签 href 属性：用来设置超链接的地址
traget 属性：设置标签页的打开方式
_blank 在新标签页打开
_self 默认值，在当前页打开
作用：
1.设置一个超链接
2.设置锚点
最常用的效果是回到顶部
如果在开发中需要设置a标签点击没有效果，则可以设置href属性为 ## 既是 href=“##”
如果需要设置回到顶部则 href=“#”
不要设置 herf 为空，这样会导致页面刷新
3.下载文件
a. 如果设置的下载文件是音频、视频、图片、文档等，都需要经过压缩之后，再在href上设置
文件的路径
b. 如果是文本类型的文件，可以直接把文件路径设置在href属性上，直接由浏览器打开
```<a href="./case.html" target="_blank">案例</a>```
```<a href="#re">红色块</a>```
```<a href="#gr">绿色块</a>```
```<a href="#">回到顶部</a>```
strong 强调标签
em 强调并斜体
b 文本加粗(不常用，h5中即将废弃)
i 文本斜体
var 文本斜体（不常用，h5中即将废弃）
```<strong>林深听鹿鸣 strong</strong>```
```<em>林深听鹿鸣 em</em>```
```<b>林深听鹿鸣 b</b>```
```<i>林深听鹿鸣 i</i>```
```<var>林深听鹿鸣 var</var>```
q 标签，引用标签，他引用的内容都比较简短
pre 标签，格式化输出
code 标签，一般是嵌套代码使用
<在html中渲染为<
> 在html中渲染为>
在html中渲染为空格
```<q>拒收并蓄</q>```
```<pre>
及你太美
及你实在太
及你太美万人迷
</pre>```
```<code>
<p> 哈哈 </p>
</code>```
图片标签
img 标签，是一个单标签
src属性：用来设置图片资源路径
文件资源路径分为三种
a.网络路径
//图片的网络地址
b.绝对路径
//从服务器的根目录开始直到找到需要的文件整个路径,通常不使用
c.相对路径
//相对于当前文件的所在的资源路径
./ 代表的是当前目录
…/ 代表的是上一级的目录
相对路径在开发中最常用
alt 属性，用来解释图片的内容
作用：
1.当图片没有被加载出来的时候，会显示alt的内容
2.通过alt属性，告诉浏览器当前图片的内容
width/height 设置图片的宽和高，在实际的开发当中，一般指设置单个的宽或高，
另一侧会根据比例显示大小
```<!-- 绝对路径 -->
<img src="D:/上课代码/01HTML/day02/image/2.jpg" width="400" height="600" alt="网络未连接" />
<!-- 相对路径 -->
<img src="./image/2.jpg" width="400" height="600" alt="网络未连接" />
<img src="./image/3.jpg" width="400" alt="网络未连接" />```
总结
1.块属性标签
a.独自占据一行空间，支持宽和高的设置，设置完宽和高以后，仍然独占一行
b.支持上下 padding 和 上下 margin
2.行属性标签
a.不会独自占据一行空间，从左至右横向排列
b.无法设置宽高，他的宽高由内容撑开
c.不支持上下 padding和上下 margin
```<div style="background:#f00;height:200px;width:200px"></div>
<div style="background:#f0f;height:200px;width:200px"></div>
<span style="border:1px #f00 solid;height:200px;width:200px">白了少年头</span>
<span style="border:1px#f00 solid;height:200px;width:200px">空悲切</span>```
emmet语法
E 代表标签名
E*n 创建n个E标签
E{大河之剑天上来}*n 创建n个内容为‘大河之剑天上来’的 E标签
E{大河之剑天上来$}*n 创建n个内容为‘大河之剑天上来’+序号的 E标签，
$表示序号，从1开始
> 表示的是下一个层级元素(子元素)
E>a 在E标签中添加子元素 a 标签
+ 表示同级
E+p 同时创建兄弟元素E和p
^ 表示上一级
E>p^div 创建 div标签和 E 标签同级，也就是创建 p 标签的上一级
使用[]设置属性
```<ul>
<li><a href="">搜狗1</a></li>
<li><a href="">搜狗2</a></li>
<li><a href="">搜狗3</a></li>
<li><a href="">搜狗4</a></li>
<li><a href="">搜狗5</a></li>
</ul>```
<!-- ul>li{桀桀桀}*5 -->
<ul>
<li>桀桀桀</li>
<li>桀桀桀</li>
<li>桀桀桀</li>
<li>桀桀桀</li>
<li>桀桀桀</li>
</ul>
<!-- p*10{大河之剑天上来} -->
<p>大河之剑天上来</p>
<p>大河之剑天上来</p>
<p>大河之剑天上来</p>
<p>大河之剑天上来</p>
<p>大河之剑天上来</p>
<p>大河之剑天上来</p>
<p>大河之剑天上来</p>
<p>大河之剑天上来</p>
<p>大河之剑天上来</p>
<p>大河之剑天上来</p>
<!-- p^div -->
<p></p>
<div></div>
<!-- a[href="#"]*5 -->
<a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a>
<!-- ul>li*3^div -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
标签嵌套
标签嵌套规则
1.块标签可以作为一个布局标签，嵌套所有的标签
2.行标签不能嵌套块标签
以下标签不能相互嵌套
1. p 标签，h1-h6都不能相互嵌套，并且他们也不能嵌套块标签
2. a 标签不能相互嵌套
```<div style="border:1px #f00 solid;">
<div>漂亮</div>
<span>你好漂漂啊</span>
<ul style="list-style-type: none;">
<li>
<img src="./image/4.jpg" width="200" alt="">
</li>```
<li>
<!-- p 不能嵌套 p 标签 -->
<p>千山鸟<p>飞绝，万</p>径人踪灭</p>
</li>
<li>
<!-- a不能嵌套 a 标签 -->
<a href="http://sina.com">
新<a href="http://jd.com">京东</a>浪
</a>
</li>
<li>
<div>
<h2>日月之行</h2>
<span>若<span style="color: #f00;">出</span>其中
</div>
</li>
</ul>
</div>
css样式表
设置类名
.类名{
样式内容
}
text-align:文本排布，一般放在块标签上，用来控制块标签中 行标签 和文本的对其位置
值：
left:左对齐（默认）
center:居中对齐
right:右对齐
.wp {
width: 200px;
height: 200px;
background: #f00;
color: #ff0;
text-align: center;
}
css 层叠式样式表，它是用来给HTML结构添加样式的
引入方式：
1.行间样式
在标签上，设置style属性，在style中设置样式
2.内部样式表
在head中设置style 标签，在标签中设置样式
```<div class="wp">
<img src="./image/4.jpg"width="100" alt="">
</div>
<p class="wp">这也太厉害<span>了吧</span></p>```
css的引入方式
层叠式样式表
css 引入方式
1、行间引入
2、内部样式表
3、外部样式表
开发的时候常用
link 和 @import 引入 css 的区别
1.@import 是css2.1之后才推出的，因此可能存在兼容问题，link 不存在兼容问题
2.link 不仅可以引入css，也可以引入其它类型的文件，功能更加强大。
推荐使用 link
```<div class="wp">岑参</div>
<div class="show">白居易</div>
<ul class="link">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>```
css文本操作
border 属性
border-width 是指border的宽度
border-color 设置border的颜色
border-style 设置border的样式
他们三个也可以合写：
border：width style color;
可以单独给某一个边设置border
border-top 设置 上边
border-left 设置 左边
border-bottom 设置 下边
border-right 设置 右边
常用的 border-style 值
1.solid 实线
2.dotted 圆点虚线
3.dashed 短线虚线
4.none 隐藏border
//以下不常用//
5.double 双实线
6.3D边框
groove 3D凹槽
ridge 3D凸槽
inset 内嵌
outset 外嵌
color属性，设置文本颜色
值：
1.英文单词
2.16进制颜色 0-f ，# 后面跟六位表示颜色的数字，前两位表示红色，中间两位表示绿色，后面两位表示蓝色 #aabbcc 如果两两相等，则可以简写为 #abc
3.rgb()，rgba() 设置颜色
括号当中设置对应位置的数字是0-255，0表示黑色，255表示白色
rgb(255,0,0) 红色
rgba中的a 表示透明度，取值范围是0-1，0表示完全透明，1表示完全不透明
文本修饰 text-decoration
值：
1.underline 下划线
2.overline 上划线
3.line-through 中划线（删除线）
4.none 去掉线(没有文本修饰线)
文本转化 text-transform
值：
1.lowercase 全部小写
2.uppercase 全部大写
3.capitalize 单词的首字母大写
行高 line-height
对于单行文本，line-height 设置的高度如果和标签的高度相同，则可以做垂直居中效果
如果是多行文本，可以理解为行间距
.wp{
width: 100px;
height: 200px;
/* 设置border的宽度 */
border-width: 5px;
/* 设置border的颜色 */
border-color: #f00;
/* 设置border的样式 */
border-style: dashed;
border: 10px #04be01 outset;
/* 单独设置一个边 */
border-bottom: 10px #f00 solid;
border-left: 8px #06c solid;
}
.show{
width: 200px;
height: 200px;
color: #ff0;
background: rgba(255,0,0,0.7);
/* 给文本设置下划线 */
text-decoration:underline;
/* 给文本设置中划线 */
text-decoration: line-through;
}
a{
text-decoration: none;
}
.txt{
border: 1px #f00 solid;
/* 全部大写 */
text-transform: uppercase;
/* 全部小写 */
text-transform: lowercase;
/* 单词首字母大写 */
text-transform: capitalize;
}
.hit{
border: 2px #f00 solid;
line-height: 30px;
}
.layout{
height: 400px;
border: 1px #f00 solid;
text-align: center;
line-height: 400px;
}
<div class="wp"></div>
<div class="show">人生得意须尽欢</div>
<a href="##">奥运运动</a>
<p class="txt">fgs;gds;fgd;sg;sfs</p>
<p class="hit">月有阴晴圆缺，花有重开日</p>
<div class="layout">
<!-- <span>
面条怎么样
</span> -->
<img style="border:1px #f00 solid;"src="./favicon.ico" width="60" alt="">
</div>
direction 设置文字方向
lrt 默认，从左向右
rtl 从右向左
text-indent 首行缩进，他的值是具体的数值
word-spacing: 设置两个单词之间的距离
letter-spacing：设置两个字符之间的距离
.txt{
border: 1px #f00 solid;
direction: ltr;
text-indent: 40px;
word-spacing: 30px;
letter-spacing: 15px;
}
.txt1{
border: #fff solid;
border-bottom: #f00 solid;
width: 0;
}
<p class="txt">随风奔跑自由是方向，敢爱敢恨勇敢闯一闯,abcf</p>
<div class="txt1"></div>
overflow属性
overflow 属性
处理子级内容超出当前容器的部分，只要是对父级元素添加该属性
值：
hidden 超出部分隐藏
scroll 滚动查看超出的部分
auto 自动渲染超出的部分
overflow-x 控制x轴方向那个超出的部分
overflow-y 控制y周方向那个超出的部分
white-space:设置文本的格式
nowrap 强制不换行
normal 强制换行
text-overflow:对超出的文本的内容进行剪裁
ellipsis 超出的内容变为省略号
clip 直接裁掉超出的文本内容
单行文本超出添加省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-style 设置字体的样式
值：
italic 设置字体斜体
normal 设置字体正常
font-weight 设置字体是否加粗
值：
normal 默认
bold 加粗
bolder 相对bold加粗
他的值也可以是具体的整百数字，范围是 100-900
400 -> normal
700 -> bold
900 -> bolder
font-size 是设置所修饰的字体的大小
1.目前浏览器默认字体大小是 16px
2.pc端六零年起的最小字体大小可以设置为12px
font-family 设置文字字体
可以同时设置多个字体，形如：
font-family：‘A’,‘B’,‘C’…;
含义是在客户端的设备上匹配A字体，如果没有A字体，则继续匹配B字体，依次进行匹配，直到匹配成功即可显示匹配到的字体
通用字体
1.serif 有衬线(类似锐化)
2.sans-serif 无衬线
font 也是一个复合型 css 属性
可以直接按照下面的顺序书写
font:style weight size family;
注意：style 和 weight 不是必须写入的内容，如果简写必须要有 font-size和
font-family
font:size family;
background 设置标签元素的背景
background-color 设置背景色
它的值是：
1.英文单词
2.16进制表示颜色
3.rgb()表示颜色
background-image 设置背景图
background-image:url(背景图地址)
background-repeat 背景图的平铺方式
值：
repeat 默认，x轴y轴都平铺
repeat-x 沿x轴平铺
repeat-y 沿y轴平铺
no-repeat 不平铺
background-position 设置背景图定位
background-position：x轴方向的值，y轴方向的值；
值可以是：
1.具体的数值
2.方位名词组合
left top right bottom center
background-attachment 设置背景图固定定位
值：
scroll 默认值，背景图片跟着页面滚动
fixed 根据浏览器可视区域，固定在具体位置，它的定位参考点是浏览器可视区域
background 是一个复合型属性，可以写在一起，他的顺序是
background：color image repeat position attachment
可以单独写
background:color;
background:image;
.wp{
width: 400px;
height: 400px;
border: 1px #f00 solid ;
/* background: #ccc; */
/* 设置背景色 */
background-color: #04be02;
/* 设置背景图 */
background-image: url('./images/微信图片_20230707142409.png');
/* 设置背景图的平铺方式 */
background-repeat: no-repeat;
/* 设置背景图定位 */
background-position: -160px center ;
/* 背景图的固定定位 */
/* background-attachment: fixed; */
}
display属性
隐藏一个标签元素
display:none;
display 属性可以用来控制标签元素的显示属性
值：
block 把元素转化为块标签属性
inline 把元素转化为行属性标签
none 隐藏标签元素
设置内联块元素（行内块元素）
display:inline-block;
它的本质是对内显示块标签属性，对外显示行标签属性
两个内联块元素之间的缝隙的处理方法
原因：两个内联块元素之间键入了回车，回车也是一个字符，他的大小跟父标签的font-size有关
解决办法：
1.去掉回车键
2.设置他们的父元素的大小为0
注意：字体大小可以被传递到子元素上的
css选择器
基础选择器
1.通配选择器
*表示通配符，可以匹配任何标签
*{
css内容
}
2.标签名选择器
E{css内容}给所有标签名为E的元素设置css样式
3.类名选择器
.类名{css内容}
使用的时候需要在标签上绑定css="类名"如果有多个类名，使用空格隔开，类名最好不要超过五个
4.id选择器
#id名{css内容}
在一个页面上，id是唯一的，只能绑定在一个标签上，也就是一个页面中没有同名的id
5.群组选择器
如果多种选择器所表达的css内容是相同的则可以把他们写成群组选择器
.wp,#abc,div {css内容}
层次选择器
1.后代选择器
E M { css 内容 } 通过E选择器设置E中的M选择器的css内容，M可以是E的子级，也可以是E的后代中的某一个选择器
2.父子选择器
E>M { css内容 }通过E选择器找到E选择器的子级M选择器，设置css内容
3.兄弟选择器
E~M {css内容}通过E选择器找到该元素之后的所有选择器名为M的兄弟元素，并设置css样式
4.相邻兄弟选择器
E+M {CSS内容}通过选择器E找到该元素之后第一个兄弟元素M，并且对M设置css样式
伪类选择器
a的伪类
伪类，是css系统创建好的内部的类，用来对标签的某一个时机设置的样式
link:初始时候的状态
visited：点击之后的状态
hover：鼠标悬浮时候的状态
active：鼠标按下不松手时候的状态
顺序是 l -> v -> h -> a(先爱后恨)
ie8以后，任何标签都可以添加:hover 伪类
可以根据hover触发元素本身，以及通过元素能找到的元素的变化
选择器优先级
什么时候要考虑选择器的优先级？
不同的选择器，同时作用于同一个标签元素，并且他们具有相同的css属性设置，对该css属性设置了不同的值
选择器优先级的强弱顺序：
1.!important 100000
2.行间样式在标签上添加style属性 10000
3.id选择器 1000
4.类名选择器，伪类选择器，属性选择器 100
5.元素（标签名）选择器，伪元素选择器 10
6.通配符选择器 1
7.系统默认提供的css属性 0
假设后面的数字是权重的值，那么在比较的时候，只需要把选择器的值相加，然后比较大小既是权重的大小
如果他们的值相同，后来者居上
盒模型
盒模型：在HTML中每一个标签都具有一个盒模型
盒模型的组成部分：Content(内容)，padding(内边距)，
border(边框)，margin(外边距)
Cotent:标签元素内容，一般自己定义宽和高，或者由子元素的内容撑开
padding：设置元素内容到元素边框之间的距离
border：指的是元素的边框
margin：设置当前元素到相邻元素之间的距离
padding用法
设置内边距
padding-top:num;设置上边距
padding-right:num;设置右边距
padding-bottom:num;设置下边距
padding-left:num;设置左边距
合写：
padding：上 右 下 左;
左=右 上!=下
padding：上 右 下;
左=右 上=下
padding:上 右;
左=右=上=下
padding：上;
margin用法
margin 设置外边距
margin-top 设置元素上边的外边距
margin-right 设置元素右边距
margin-bottom 设置元素下边距
margin-left 设置元素左边距
合写
margin:上 右 下 左;
上=下 右！=左
margin: 上 右 下 左；
上！=下 右=左
margin:上 右 下;
上=下 右=左
margin: 上 右;
上=下=左=右
margin:上;
margin的经典bug
1.上下两个兄第元素的margin重叠问题
上下两个兄弟标签，设置margin的时候，他们之间的距离不是相加，而是谁设置的margin值大，就显示谁的距离，即为值大的覆盖小的
可以理解为，上面元素的 margin-bottom和下面元素的margin-top
他们的值谁大取谁
解决办法：给下面的元素添加dispaly:inline-block；
2.父子级子元素的margin-top传递问题
在子元素中设置margin-top表现的结果是该margin-top传递到父级元素上，使得父元素距离它上面的元素为该margin-top值
解决方案：
a.给父元素添加 overflow:hidden;
b.给父元素添加 border
扫一扫
2415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
