HTML5+CSS3的学习(上)

2018版李立超html+css基础 103集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1sW411T78k?spm_id_from=333.999.0.0

2019版李立超前端html5+css3 148集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from=333.999.0.0

前言

不管是前端工程师还是后台工程师我们要做的工作无非就是软件的开发。软件主要分两种架构C/S和B/S。我们主要从事的是B/S的软件的开发。

B/S中的B指的是browsers，是浏览器的意思，S值Server指服务器的意思。B/S架构的软件一般都是通过访问一个网页的形式来使用的，而将一些运算等操作放到远端的服务器上。这样就降低了对客户端的要求，我们的计算机上只需要安装一个浏览器即可使用。

软件开发流程

image-20200220140428425

​ 根据万维网联盟（W3C）标准，一个网页主要由三部分组成：结构、表现还有行为。

​ 万维网联盟World Wid Web Consortium，W3C专门为了定义网页相关的标准而成立，W3C定义了网页中的HTML、CSS、DOM、HTTP、XML等标准。

  • 结构：HTML用于描述页面的结构

  • 表现：CSS用于控制页面中元素的样式

  • 行为：JavaScript用于响应用户操作

image-20200220140601766

一、HTML

  • HTML（Hypertext Markup Language）超文本标记语言，所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面，而标记就是标签。它负责网页的三个要素之中的结构。

  • HTML使用标签的的形式来标识网页中的不同组成部分。

1.HTML的发展

• 1993年6月：HTML第一个版本发布。

• 1995年11月：HTML2.0

• 1997年1月：HTML3.2（W3C推荐）

• 1999年12月：HTML4.01（W3C推荐）

• 2000年底：XHTML1.0（W3C推荐）

• 2014年10月：HTML5（W3C推荐）

2.HTML的语法规范

<!doctype html>
<html><head><meta charset="utf-8" /><title>Html的语法规范</title></head><body><!--1.HTML中不区分大小写,但是我们一般都使用小写2.HTML中的注释不能嵌套3.HTML标签必须结构完整，要么成对出现，要么自结束标签-->	<!-- 正确 --><p>我是一个p标签</p><!-- 错误 --><p>我是一个p标签	<!-- 4.浏览器尽最大的努力正确的解析页面，你所有的不符合语法规范的内容，浏览器都会为你自动修正，但是有些情况会修正错误-->abc    <!-- 自结束标签 --><br />bcd<br>efg	<!-- 5.HTML标签可以嵌套，但是不能交叉嵌套--><!-- 正确 -->    <p>今天天气<font color="red">真不错</font><p><!-- 错误 --><p>今天天气<font color="red">真不错<p></font><hr /><!-- 6.HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)-->		<p>今天天气<font color>真不错</font><p><p>今天天气<font color='red'>真不错</font><p>		</body>
</html>

3.HTML族谱

image-20200220152013072

4.标签

• HTML中的标记指的就是标签， HTML使用标记标签来描述网页。
• 结构：
<标签名>标签内容</标签名>

​ <标签名 />

常用标签

html

image-20200220144214076

  • 在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式

head

image-20200220144322634

  • head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的
  • head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页

title

image-20200220144359129

<head><!-- title网页的标题标签，默认会显示在浏览器的标题栏中搜索引擎在检索页面时，会首先检索title标签中的内容它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名--><title>网页的标题</title></head>

body

image-20200220144428545

  • body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里

h1~h6

image-20200220144516636

<!-- 标题标签，都是块元素（在页面中独占一行的元素称为块元素（block element），在页面中不会独占一行的元素称为行内元素（inline element）在HTML中，一共有六级标题标签h1 ~ h6在显示效果上h1最大，h6最小，但是文字的大小我们并不关心使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签6级标题中，h1的最重要，表示一个网页中的主要内容，h2 ~ h6重要性依次降低对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1中的内容h1标签非常重要，它会影响到页面在搜索引擎中的排名，一个页面只能写一个h1一般页面中标题标签只使用h1 h2 h3,h3以后的基本不使用		--><h1>一级标题</h1><h2>一级标题</h2><h3>一级标题</h3>

hgroup

<!-- hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup--><hgroup><h1>回乡偶书二首</h1><h2>其一</h2></hgroup>

image-20200315141616116

p

image-20200220144549070

	<!-- 段落标签，段落标签用于表示内容中的一个自然段使用p标签来表示一个段落， p也是一个块元素p标签中的文字，默认会独占一行，并且段与段之间会有一个间距--><p>我是一个p标签，我用来表示一个段落</p><p>我是一个p标签，我用来表示一个段落</p>

br

image-20200220144619381

<!-- 在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签	--><p>锄禾日当午，<br />汗滴禾下土，<br />谁知盘中餐，<br />粒粒皆辛苦。<br /></p>

hr

image-20200220144647480

<!--hr标签也是一个自结束标签，可以在页面中生成一条水平线--><hr />

img

image-20200220144718480

  • 属性
<!-- 使用img标签来向网页中引入一个外部图片，img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）img标签也是一个自结束标签属性：src：设置一个外部图片的路径alt：可以用来设置在图片不能显示时，对图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示，搜索引擎可以通过alt属性来识别不同的图片如果不写alt属性，则搜索引擎不会对img中的图片进行收录   width：可以用来修改图片的宽度,一般使用px作为单位height	：可以用来修改图片的高度，一般使用px作为单位宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小如果两个值同时指定则按照你指定的值来设置一般开发中除了自适应的页面，不建议设置width和height	注意：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大但是在移动端，经常需要对图片进行缩放（大图缩小）-->	
<!--src属性配置的是图片的路径，当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径相对路径：相对路径指相对于当前资源所在目录的位置，相对路径都会使用.或..开头./.././可以省略不写，如果不写./也不写../则就相当于写了././ 表示当前文件所在的目录在这里当前页面就是 09.相对路径.html./就等于 09.相对路径.html 所在的目录 path../ 表示当前文件所在目录的上一级目录<img src="abc/bcd/2.gif" alt="这是一个大松鼠"/>	可以使用../来返回一级目录,返回几级目录就写几个../	<img src="../../img/2.gif" alt="这是一个大松鼠"/>-->
<!--图片的格式JPEG(JPG)- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明，不支持动图- 一般使用JPEG来保存照片等颜色丰富的图片GIF- GIF支持的颜色少，只支持简单的透明，支持动态图- 图片颜色单一或者是动态图时可以使用gifPNG- PNG支持的颜色多，并且支持复杂的透明，不支持动图- 可以用来显示颜色复杂的透明的图片（专为网页而生）webp- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式- 它具备其他图片格式的所有优点，而且文件还特别的小- 缺点：兼容性不好base64 - 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片    - 一般都是一些需要和网页一起加载的图片才会使用base64图片的使用原则：效果不一致，使用效果好的效果一致，使用小的-->

HTML之绝对路径与相对路径

相对路径

相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：

./：代表文件所在的目录（可以省略不写）

../ ：代表文件所在的父级目录

../../ ：代表文件所在的父级目录的父级目录

/：代表文件所在的根目录

值得注意的是，（/ ：代表文件所在的根目录）其实可以理解成项目内部的绝对路径。

"/aaa" //表示根目录下的aaa    也相当于./aaa"../aaa" //表示当前目录的上级目录下的aaa"bbb/aaa" //表示当前目录的bbb目录下的aaa

如果要在test.html中引入000.css，可以有以下写法：

<linkhref="./css/css1/000.css"/> (./可以省略)
<link href="/html/css/css1/000.css"/>
<link href="../html/css/css1/000.css"/>
绝对路径

绝对路径是指完整的网址，假设项目的网站域名为www.quanbaike.com，那么000.css的绝对路径应该是

https://www.quanbaike.com/html/css/css1/000.css

a

image-20200220144745637

			/** 涉及到a的链接伪类选择器一共有四个：* 	:link*  :visited* 	:hover* 	:active* 而这四个选择器的优先级是一样的。*//* 未访问的链接 */a:link{color: yellowgreen;}/* 已访问的链接 */a:visited{color: red;}/* 鼠标移动到链接上*/a:hover{color: orange;}/** 选定的链接*/a:active{color: cornflowerblue;}
<!-- 使用超链接可以让我们从一个页面跳转到另一个页面使用a标签来创建一个超链接	属性：href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址href 指定跳转的目标路径- 值可以是一个外部网站的地址- 也可以写一个内部页面的地址超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素-->	<a href="http://www.baidu.com">我是一个超链接</a> <br /><br />		<!-- a标签中的target属性可以用来指定打开链接的位置可选值：_self，表示在当前窗口中打开（默认值）_blank，在新的窗口中打开链接可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开--><!-- 当点击了“我是一个超链接”之后，下面的内联框架iframe中demo02.html会变为demo03.html的内容 --><a href="demo03.html" target="tom">我是一个超链接</a><br /> <br /><iframe src="demo02.html" name="tom"></iframe><!-- 在开发中可以将#作为超链接的路径的展位符使用 --><a href="#">这是一个新的超链接</a><br><br><!-- 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生 --><a href="javascript:;">这是一个新的超链接</a><br><br><!-- 可以直接将超链接的href属性设置为#，这样点击超链接以后，页面不会发生跳转，而是转到当前页面的顶部的位置也可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值id属性（唯一不重复的）- 每一个标签都可以添加一个id属性- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性    --><a id="bottom" href="#">回到顶部</a>
返回顶部和底部
<!doctype html>
<html><head><meta charset="utf-8" /><title>练习</title></head><body><center><!-- 跳转到id为bottom的元素所在的位置直接在href中写 #id属性值--><a href="#bottom">去底部</a><a href="#hello">去指定位置</a><h1>这是我的个人博客</h1><hr /><h2>东风破</h2><!-- 创建超链接时，如果地址不确定可以直接写一个#作为占位符 --><a href="#">周杰伦</a><p id="hello">一盏离愁 孤单伫立在窗口 <br />我在门后 假装你人还没走 <br /><img src="1.jpg" alt="图片" width="300px" /> <br />篱笆外的古道我牵着你走过<br />荒烟漫草的年头 就连分手都很沉默<br /><img src="2.jpg" alt="图片2" width="300px" /> <br />谁在用琵琶弹奏 一曲东风破<br />岁月在墙上剥落 看见小时候<br />犹记得那年我们都还很年幼<br /></p>			<hr />			友情链接:<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a> <br /><br />			<!-- 如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识这个属性就是id，id属性在同一个页面中只能有一个不能重复--><a id="bottom" href="#">回到顶部</a> | 				<!-- 发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端href="mailto:邮件地址"				当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址-->			<a href="mailto:abc@atguigu.com">联系我们</a></center>		</body>
</html>

center

<!-- center标签中的内容，会默认在页面中居中显示 我们可以将要居中的元素，全都放到center中-->		<center><p>我是一个p标签</p></center>

5.元素

我们还将一个完整的标签称为元素。

<!--这就是一个元素-->
<h1>一级标题</h1><!--p也是一个元素，em是p的子元素，p是em的父元素。-->
<p>我是一个<em>段落</em></p><!--body是p和em的祖先元素,p和em是body的后代元素。-->
<body><p><em>内容</em></p>
</body>

标签和元素的区别

    比如<p>这就是一个标签； <p>这里是内容</p> 这就是一个元素，也就是说元素由一个开始的标签和结束的标签组成，用来包含某些内容； 这里有一个值得注意的例外，即<br/>本身既是开始标签也是结束标签，但不包含任何内容，所以这只是个标签。 1. 元素： HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说，HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。 2. 标签： 标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象，绝大部分的标签都是成对出现的，如<table></talbe>、<form></form>。当然还有少部分不是成对出现的，如<br>、<hr>等。 标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。3. 属性： 为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性值"这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。

元素之间的关系

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">			/** 为id为d1的div中span设置一个颜色为绿色* 后代元素选择器* 	- 作用：* 		- 选中指定元素的指定后代元素* 	- 语法：* 		祖先元素 后代元素{}	*/#d1 span{color: greenyellow;}			/** 选中id为d1的div中的p元素中的span元素*/#d1 p span{font-size: 50px;}			/** 为div的子元素span设置一个背景颜色为黄色* 子元素选择器* 	- 作用：* 		- 选中指定父元素的指定子元素* 	- 语法：* 		父元素 > 子元素* 表示div里的第一级元素，在第二级，第三级都不算例如：*//* 表示div里的第一级span元素，在第二级，第三级都不算 IE6及以下的浏览器不支持子元素选择器*/div > span{background-color: yellow;}		</style></head><body><!--元素之间的关系<div id="d1"><p><span>我是p标签中的span</span></p><span>我是div标签中的span</span></div>		父元素：直接包含子元素的元素（p中的span的父元素为p，p和span（非p中的span）的父元素为div）子元素：直接被父元素包含的元素（p的子元素为p中的span，div的子元素为p和span（非p中的span））祖先元素：直接或间接包含后代元素的元素；父元素也是祖先元素（一个元素的父元素也是它的祖先元素）；（就例如p中的span的祖先元素有p、div、body、html）后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素（div中的后代元素为其里面的所有元素）兄弟元素：拥有相同父元素的元素叫做兄弟元素（p和span（不是p标签中的span）是兄弟元素，拥有相同的父元素div）	//我是爷爷 哈哈<ul>//我是爸爸，<li>//我是ul的后代元素,li的子元素<a href="">hi,mofe</a></li><ul>//body是p和em的祖先元素,p和em是body的后代元素。<body><p><em>内容</em></p></body>//em是p的子元素，p是em的父元素。<p>我是一个<em>段落</em></p>--><div id="d1"><p><span>我是p标签中的span</span></p><span>我是div标签中的span</span></div>		<div><span>我是body中的span元素</span></div>	</body>
</html>

image-20200311142239904

6.属性

• 可以为HTML标签设置属性，通过属性为HTML元素提供附加信息。

• 属性总是以名称/值对的形式出现。 比如：name=“value”

• 有些属性可以是任意值，有些则必须是指定值。

<!-- 属性，在标签中（开始标签或自结束标签）还可以设置属性属性需要写在开始标签中，实际上就是一个名值对的结构（x=y）可以通过属性来设置标签如果处理标签中的内容属性名 = "属性值"，一个标签中可以同时设置多个属性，属性之间需要使用空格隔开属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来		--><h1>这是我的<font color="green" size="7">第二个</font>网页</h1><h2 title="我是一个标题">标题</h2><img src="" alt="" />

常见属性

id

– id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。

class

– class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class。

title

– title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。

7.html注释

• HTML注释中的内容不会在网页中显示。

	<!-- HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的开发中一定要养成良好的编写注释的习惯，注释要求简单明了注释还可以将一些不希望显示的内容隐藏注释不能嵌套标签一般成对出现，但是也存在一些自结束标签	<img><img /><input><input />--><!--这是单行注释--><!--这是多行注释这是多行注释这是多行注释
-->注释不能嵌套！以下为错误的错误：<!--<!-- 我是注释中的注释 注释不能嵌套-->-->

8.css的注释

CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中，注释中的内容会自动被浏览器所忽略

/*这是单行注释*//*这是多行注释这是多行注释这是多行注释
*/

9.JS、jQuery注释

//这是单行注释/*这是多行注释这是多行注释这是多行注释
*/

10.less注释

//这是单行注释，且当编译为css文件时注释内容不会转移过去/*这是多行注释，当编译为css文件时注释内容会转移过去
*/

11.DOCTYPE(文档声明)

<!-- h5的文档声明，声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边如果不写文档声明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写文档声明
-->
<!--声明为HTML5-->
<!doctype html><html><head><title>这是一个非常好的网页</title></head><body><h1>这是我的第一个网页</h1></body>
</html>

怪异模式

如果不写文档声明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写文档声明。

为了兼容一些旧的页面，浏览器中设置了两种解析模式：

​ – 标准模式（Standards Mode）

​ – 怪异模式（Quirks Mode）

• 怪异模式解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出现。

• 避免的最好方式就是在页面中编写正确的doctype。

12.编码、解码

字符编码李立超 -> 110000110110 （编码）110000110110 -> 李立超 （解码）- 所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。所以一段文字在存储到内存中时，都需要转换为二进制编码当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读- 编码- 将字符转换为二进制码的过程称为编码- 解码- 将二进制码转换为字符的过程称为解码

13.字符集(charset)

  • 字符集规定了如何将文本转换为二进制编码。

  • 常见的字符集：ASKII、ISO8859-1、GBK、GB2312、UTF-8。

14.乱码

如果编码和解码所采用的字符集不同就会出现乱码问题，在html5中只需要使用meta标签就可解决，如果网页声明为HTML5则可以省略/

<meta charset="utf-8" />

15.进制

<!-- 		进制：十进制（日常使用）- 特点：满10进1- 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20- 单位数字：10个 （0-9）二进制（计算机底层的进制）- 特点：满2进1- 计数：0 1 10 11 100 101 110 111- 单位数字：2个 （0-1）- 扩展：- 所有数据在计算机底层都会以二进制的形式保存- 可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0这一个小格子在内存中被称为1位（bit）1位(b)=1比特(bit)；1字=2字节(byte)；1字节=8位(b)；1字=16位(b)。1、位位是计算机存储的最小单位，简记为b，也称为比特（bit）计算机中用二进制中的0和1来表示数据，一个0或1就代表一位。位数通常指计算机中一次能处理的数据大小；2、比特比特（bit）是由英文BIT音译而来，比特同时也是二进制数字中的位，是信息量的度量单位，为信息量的最小单位；3、字节字节，英文Byte，是计算机用于计量存储容量的一种计量单位，通常情况下一字节等于八位，字节同时也在一些计算机编程语言中表示数据类型和语言字符，在现代计算机中，一个字节等于八位；4、字字是表示计算机自然数据单位的术语，在某个特定计算机中，字是其用来一次性处理事务的一个固定长度的位（bit）组，在现代计算机中，一个字等于两个字节。8bit = 1byte(字节)1024byte = 1kb(千字节)1024kb = 1mb(兆字节)1024mb = 1gb(吉字节)1024gb = 1tb(特字节)1024tp = 1pb八进制(很少用)- 特点：满8进1- 计数： 0 1 2 3 4 5 6 7 10 11 12 ... 17 20- 单位数字：8个 （0-7）十六进制(一般显示一个二进制数字时，都会转换为十六进制)- 特点：满16进1- 计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b 1c 1d 1e 1f 20 ..- 单位数字：16个（0-f）-->

16.meta

– meta 标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。

– meta 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

<!doctype html>
<html><head><!-- 需要来告诉浏览器，网页所采用的编码字符集meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介，元数据不是给用户看的charset 指定网页的字符集name 指定的数据的名称content 指定的数据的内容meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个 "/"--><!--1.设置页面的字符集--><meta charset="utf-8" />   <!-- 2.使用meta标签还可以用来设置网页的关键字，可以同时指定多个关键字，关键字间使用","隔开--><meta name="keywords" content="HTML5,JavaScript,前端,Java" /><!-- 3.还可以用来指定网页的描述，网站的描述会显示在搜索引擎的搜索的结果中搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名--><meta name="description" content="发布h5、js等前端相关的信息" /><!-- 4.使用meta可以用来做请求的重定向，将页面重定向到另一个网站<meta http-equiv="refresh" content="秒数;url=目标路径" />--><meta http-equiv="refresh" content="5;url=http://www.baidu.com" /><title>网页的标题</title></head><body><h1>这是一个非常漂亮的网页</h1></body>
</html>

17.实体（转义字符串）

• 在HTML中预留了一些字符，这些预留字符是不能在网页中直接使用的。浏览器解析到实体时，会自动将实体转换为其对应的字符。

• 比如<和>，我们不能直接在页面中使用<和>号，因为浏览器会将它解析为html标签。

• 为了可以使用这些预留字符，我们必须在html中使用字符实体。

• 语法:

&实体名;

常用的字符实体

除号：&divide

image-20200220145003341

<!doctype html>
<html><head><meta charset="utf-8" /><title>实体</title></head><body><!-- 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格在HTML中，一些如< >这种特殊字符是不能直接使用，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）浏览器解析到实体时，会自动将实体转换为其对应的字符实体的语法：&实体的名字;-->a&lt;b&gt;c<p>&copy;&divide;今天天气&nbsp;&nbsp;&nbsp;好晴朗，处处好风光</p></body>
</html>

image-20200312152810044

二、CSS(Cascading Style Sheets):层叠样式表

• css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。

• 所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的，而最终我们能看到只是网页的最上边一层。

• 而css就可以分别为网页的各个层次设置样式，总之一句话，CSS用来设置网页中元素的样式。

1.基本语法

• CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。

• 语法：
– 选择器 {样式名:样式值；样式名:样式值 ; }

​ – p {color:red ; font-size:12px;}

/*        CSS的基本语法:选择器 声明块选择器，通过选择器可以选中页面中的指定元素，并且将声明块中的样式应用到选择器对应的元素上	比如 p 的作用就是选中页面中所有的p元素声明块紧跟在选择器的后边，使用一对{}括起来，通过声明块来指定要为元素设置的样式声明块由一个一个的声明组成，多个声明之间使用;隔开声明是一个名值对结构，这一组一组的名值对我们称为声明，一个样式名对应一个样式值，名和值之间以:连接，以;结尾        */

2.CSS的常用方式

1.行内样式(内联样式)

• 可以直接将样式写到标签内部的style属性中，这种样式不用填写选择器，直接编写声明即可。

• 这种方式编写简单，定位准确。但是由于直接将css代码写到了html标签的内部，导致结构与表现耦合，同时导致样式不能够复用，所以这种方式我们不推荐使用。

  <!-- 使用CSS来修改元素的样式第一种方式(内联样式，行内样式)：- 在标签内部通过style属性来设置元素的样式- 问题：使用内联样式，样式只能对当前元素中的内容生效，不方便复用内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用的如果希望影响到多个元素必须在每一个元素中都复制一遍并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便- 注意：开发时绝对不要使用内联样式-->
<p style="color: red;font-size: 30px"></p>

2.内部样式表

• 可以直接将样式写到

• 这样使css独立于html代码，而且可以同时为多个元素设置样式，这是我们使用的比较多的一种方式。

• 但是这种方式，样式只能在一个页面中使用，不能在多个页面中重复使用。

<!-- 第二种方式（内部样式表）- 将样式编写到head中的style标签里然后通过CSS的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用- 内部样式表更加方便对样式进行复用- 问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用--><style type="text/css">p{color:red;font-size:40px;}</style>
<style>p{color:red; font-size: 30px;}
</style>

3.外部样式表

• 可以将所有的样式保存到一个外部的css文件中，然后通过标签将样式表引入到文件中。

• 这种方式将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载文件时可以使用缓存，这是我们开发中使用的最多的方式。

 <!-- 第三种方式 （外部样式表） 最佳实践- 可以将CSS样式编写到一个外部的CSS文件中,然后通过link标签来引入外部的CSS文件- 外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式可以在不同页面之间进行复用- 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。--><link rel="stylesheet" type="text/css" href="style.css" /><!--<style type="text/css">h1{color: purple;}</style>--><link rel="stylesheet" type="text/css" href="css/style.css"/>

3.样式的继承

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{font-size: 30px;}</style></head><body><!-- 像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承,利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的<ul>//我是爷爷 哈哈<li>//我是爸爸，<a href="">hi,mofe</a>//我是ul的后代元素,li的子元素a</li><ul>--><div style="background-color: yellow;"><p>我是p标签中的文字<span>我是span中的文字</span></p></div>		<span>我是p元素外的span</span>		</body>
</html>

image-20200312174209265

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* body{font-size: 12px;} *//* 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上继承是发生在祖先元素和后代元素之间的继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式注意：并不是所有的样式都会被继承：比如 背景相关的、布局相关、边框相关的样式、定位相关的等这些样式都不会被继承。*/p{color: red;background-color: orange;}div{color: yellowgreen}</style>
</head>
<body><p>我是一个p元素<span>我是p元素中的span</span></p><span>我是p元素外的span</span><div>我是div<span>我是div中的span<em>我是span中的em</em></span></div>
</body>
</html>

image-20200315155114564

三、CSS选择器

选择器（selector），会告诉浏览器：网页上的哪些元素需要设置什么样的样式。

比如：p这个选择器就表示选择页面中的所有的p元素，在选择器之后所设置的样式会应用到所有的p元素上。

1.元素选择器(标签选择器)

• 元素选择器（标签选择器），可以根据标签的名字来从页面中选取指定的元素。

• 语法：标签名 { }

			/** 元素选择器* 	作用：通过元素选择器可以选择页面中的所有指定元素，根据标签名来选中指定的元素*  语法：标签名 {}例子：p{}  h1{}  div{}*//*为页面中的所有的p元素，设置一个字体颜色为红色*//*p{color: red;}h1{color: red;}*/

2.类选择器

• 类选择器，可以根据元素的class属性值选取元素。

• 语法：.className { }

	/** 类选择器* 	- 通过元素的class属性值选中一组元素*  - 语法：* 		.class属性值{}*//*.p2{color: red;}.hello{font-size: 50px;}*/<!-- class 是一个标签的属性，它和id类似，不同的是class可以重复使用可以通过class属性来为元素分组可以同时为一个元素指定多个class属性可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开拥有相同class属性值的元素，我们说他们是一组元素		--><p class="p2 hello">锄禾日当午</p>

3.ID选择器

• ID选择器，可以根据元素的id属性值选取元素。

• 语法：#id { }

• 比如#box会选中页面中id属性值为box的元素，和class属性不同，id属性是不能重复的。

/** id选择器* 	- 通过元素的id属性值选中唯一的一个元素*  - 语法：* 		#id属性值 {}*//*#p1{font-size: 20px;}*/

4.复合选择器（交集选择器）

• 复合选择器，可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。

• 语法：选择器1选择器2{}

• 第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，交集选择器是并且的意思。 即...又...的意思，用的相对来说比较少，不太建议使用。

• 例如div.box1会选中页面中具有box1这个class的div元素。

/** 为拥有class为p3的span元素设置一个背景颜色为黄色* * 复合选择器（交集选择器）* 	- 作用：* 		- 可以选中同时满足多个选择器的元素*  - 语法：* 		- 选择器1选择器2选择器N{}比如：   p.one   选择的是： 类名为 .one  的 段落标签。  注意：交集选择器中如果有元素选择器，必须使用元素选择器开头*/span.p3{background-color: yellow;}/** 对于id选择器来说，不建议使用复合选择器,注意：中间是没有空格的* p#p1{background-color: red;}*/

5.群组选择器(css选择器分组或并集选择器)

• 群组选择器，可以同时使用多个选择器，多个选择器将被同时应用指定的样式。

• 语法：选择器1,选择器2,选择器3 { }

• 比如p,.hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素。

	/** 选择器分组(并集选择器)* 	- 通过选择器分组可以同时选中多个选择器对应的元素* 	- 语法：选择器1,选择器2,选择器N{}*//*#p1 , .p2 , h1{background-color: yellow;}*/

6.通用选择器(通配选择器)

• 通用选择器，可以同时选中页面中的所有元素。

• 语法：*{ }

/** 通配选择器* 	- 他可以用来选中页面中的所有的元素* 	语法：*{}*//*  *{color: red;}*/

7.后代(元素)选择器(包含选择器)

• 后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。

• 语法：祖先元素 后代元素 后代元素 { }

• 比如p strong 会选中页面中所有的p元素内的strong元素。

/** 为div中的span设置一个颜色为绿色* 后代元素选择器* 	- 作用：* 		- 选中指定元素的指定后代元素* 	- 语法：* 		祖先元素 后代元素{}	*/#d1 span{color: greenyellow;}
/** 选中id为d1的div中的p元素中的span元素*/#d1 p span{font-size: 50px;}/* div > p > span{color: red;} */

8.伪类和伪元素

有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。伪类用2个点表示即冒号（:）

伪类专门用来表示元素的一种的特殊的状态，比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框，当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类

使用伪元素（用两个冒号表示 ::）来表示元素中的一些特殊的位置，

给链接定义样式

有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。

• 正常链接

​ – a:link

• 访问过的链接

​ – a:visited（只能定义字体颜色）

• 鼠标滑过的链接

​ – a:hover

• 正在点击的链接

​ – a:active

其他

• 获取焦点

​ – :focus

• 指定元素前

​ – :before

• 指定元素后

​ – :after

• 选中的元素

​ – ::selection

伪类选择器

a元素的伪类、焦点

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>02.伪类选择器</title><style type="text/css">/** 伪类专门用来表示元素的一种的特殊的状态，* 	比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框* 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类*//** 为没访问过的链接设置一个颜色为绿色* 	:link* 		- 表示普通的链接（没访问过的链接）*/a:link{color: yellowgreen;}/** 为访问过的链接设置一个颜色为红色* 	:visited* 		- 表示访问过的链接* * 浏览器是通过历史记录来判断一个链接是否访问过,* 	由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色* */a:visited{color: red;}/** :hover伪类表示鼠标移入的状态*/a:hover{color: skyblue;}/** :active表示的是超链接被点击的状态*/a:active{color: black;}/** :hover和:active也可以为其他元素设置* IE6中，不支持对超链接以外的元素设置:hover和:active*//*p:hover{background-color: yellow;}p:active{background-color: orange;}*//** 文本框获取焦点以后，修改背景颜色为黄色*/input:focus{background-color: yellow;}/*** 为p标签中选中的内容使用样式* 	可以使用::selection为类* 	注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection*//*** 兼容火狐的用鼠标选择段落之后选中的背景颜色会改变*/p::-moz-selection{background-color: orange;}/*** 兼容大部分浏览器的用鼠标选择段落之后选中的背景颜色会改变*/p::selection{background-color: orange;}</style></head><body><a href="http://www.baidu.com">访问过的链接</a><br /><br /><a href="http://www.baidu123456.com">没访问过的链接</a><p>我是一个段落</p><!-- 使用input可以创建一个文本输入框，当点击之后背景颜色变为黄色 --><input type="text" /></body>
</html>

image-20200312172617539

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪类</title><style>/* 伪类（不存在的类，特殊的类）- 伪类用来描述一个元素的特殊状态比如：第一个子元素、被点击的元素、鼠标移入的元素...- 伪类一般情况下都是使用:开头:first-child 第一个子元素:last-child 最后一个子元素:nth-child() 选中第n个子元素特殊值：n 第n个 n的范围0到正无穷2n 或 even 表示选中偶数位的元素2n+1 或 odd 表示选中奇数位的元素- *注意：以上这些伪类都是根据所有的子元素进行排序:first-of-type:last-of-type:nth-of-type()- 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中（重点，例如相同的li）进行排序- :not() 否定伪类- 将符合条件的元素从选择器中去除*//* 将ul里的第一个li设置为红色ul > li:first-child{color: red;} *//* ul > li:last-child{color: red;} *//* ul > li:nth-child(2n+1){color: red;} *//* ul > li:nth-child(even){color: red;} *//* ul > li:first-of-type{color: red;} *//*ul > li:not(li:nth-of-type(3))括号中的li可省略*/ul > li:not(:nth-of-type(3)){color: yellowgreen;}</style>
</head>
<body><ul><span>我是一个span</span><li>第〇个</li><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li></ul>
</body>
</html>

image-20200315153744576

伪元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 使用伪元素来表示元素中的一些特殊的位置，*//** 为p中第一个字符来设置一个特殊的样式*//*p:first-letter {color: red;font-size: 20px;}*//** 为p中的第一行设置一个背景颜色为黄色*//*p:first-line {background-color: yellow;}*//** :before表示元素最前边的部分* 	一般before都需要结合content这个样式一起使用，* 	通过content可以向before或after的位置添加一些内容* * :after表示元素的最后边的部分*/p:before{content: "我会出现在整个段落的最前边";color: red;}p:after{content: "我会出现在整个段落的最后边";color: orange;}</style></head>

image-20200312173147296

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>p{font-size: 20px;}/* 伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）伪元素使用 :: 开头::first-letter 表示第一个字母::first-line 表示第一行::selection 表示鼠标选中的内容::before 元素的开始 ::after 元素的最后- before 和 after 必须结合content属性来使用*/p::first-letter{font-size: 50px;}p::first-line{background-color: yellow; }p::selection{background-color: greenyellow;}/* div::before{content: 'abc';color: red;}div::after{content: 'haha';color: blue;} */div::before{content: '『';}div::after{content: '』';}</style>
</head>
<body><!-- <q>hello</q> --><div>Hello Hello How are you</div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.</p></body>
</html>

image-20200315154239393

:after/::after和:before/::before的异同

相同点都可以用来表示伪类对象，用来设置对象前的内容:before和::before写法是等效的; :after和::after写法是等效的不同点:before/:after是Css2的写法，::before/::after是Css3的写法:before/:after 的兼容性要比::before/::after好 ， 不过在H5开发中建议使用::before/::after比较好注意这些伪元素 要配合content属性一起使用这些伪元素 不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入这些伪元素 的特效通常要使用:hover伪类样式来激活<style>span{background: yellow;}/* 当鼠标移在span上时，span前插入”111111” */     span:hover::before{content:"111111";}</style><span>222</span>

其他选择器

否定伪类

• 否定伪类可以帮助我们选择不是其他东西的某件东西。

• 语法:

:not(选择器){}

• 比如p:not(.hello)表示选择所有的p元素但是class为hello的除外。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 为所有的p元素设置一个背景颜色为黄色，除了class值为hello的* * 否定伪类：* 	作用：可以从已选中的元素中剔除出某些元素* 	语法：* 		:not(选择器)*/p:not(.hello){background-color: yellow;}</style></head><body><p>我是一个p标签</p><p>我是一个p标签</p><p>我是一个p标签</p><p class="hello">我是一个p标签</p><p>我是一个p标签</p><p>我是一个p标签</p></body>
</html>

image-20200312173918858

属性选择器

• 属性选择器可以挑选带有特殊属性的标签。

• 语法:

  • [属性名]
  • [属性名=“属性值”]
  • [属性名~=“属性值”]
  • [属性名|=“属性值”]
  • [属性名^=“属性值”]
  • [属性名$=“属性值”]
  • [属性名*=“属性值”]
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">		/** * 属性选择器* 	- 作用：可以根据元素中的属性或属性值来选取指定元素* 	- 语法：* 		[属性名] 选取含有指定属性的元素* 		[属性名="属性值"] 选取含有指定属性值的元素* 		[属性名^="属性值"] 选取属性值以指定内容开头的元素* 		[属性名$="属性值"] 选取属性值以指定内容结尾的元素* 		[属性名*="属性值"] 选取属性值以包含指定内容的元素*//*为所有具有title属性的p元素，设置一个背景颜色为黄色*//*p[title]{background-color: yellow;}*//** 为title属性值是hello的元素设置一个背景颜色为黄色*//*p[title="hello"]{background-color: yellow;}*//** 为title属性值以ab开头的元素设置一个背景颜色为黄色*//*p[title^="ab"]{background-color: yellow;}*//** 为title属性值以c结尾的元素设置一个背景颜色*//*p[title$="c"]{background-color: yellow;}*//** 为title属性值包含c的元素设置一个背景颜色*/p[title*="c"]{background-color: yellow;}			</style></head><body>		<!--title属性，这个属性可以给任何标签指定当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示--><p title="hello">我是一个段落</p><p>我是一个段落</p><p title="hello">我是一个段落</p><p title="abbc">我是一个段落</p><p title="abccd">我是一个段落</p><p title="abc">我是一个段落</p>		</body>
</html>

image-20200312173349669

子元素选择器

• 子元素选择器可以给另一个元素的子元素设置样式。

• 语法：父元素 > 子元素{}

• 比如body > h1将选择body子标签中的所有h1标签。 div.box > span{color: orange;}

其他子元素选择器

• :first-child– 选择第一个子标签

• :last-child– 选择最后一个子标签

•:nth-child(n)– 选择指定位置的子元素

选择指定类型的子元素:

• :first-of-type

• :last-of-type

• :nth-of-type

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 为第一个p标签设置一个背景颜色为黄色* 	:first-child 可以选中第一个子元素*  :last-child 可以选中最后一个子元素*//*body > p:first-child{background-color: yellow;}*//*p:last-child{background-color: yellow;}*//** :nth-child 可以选中任意位置的子元素* 		该选择器后边可以指定一个参数，指定要选中第几个子元素* 		even 表示偶数位置的子元素* 		odd 表示奇数位置的子元素* 		*//*p:nth-child(odd){background-color: yellow;}*//** :first-of-type* :last-of-type* :nth-of-type* 		和:first-child这些非常的类似，* 		只不过child，是在所有的子元素中排列* 		而type，是在当前类型的子元素中排列*//*p:first-of-type{background-color: yellow;}*/p:last-of-type{background-color: yellow;}</style></head><body><span>我是span</span><p>我是一个p标签</p><p>我是一个p标签</p><p>我是一个p标签</p><p>我是一个p标签</p><p>我是一个p标签</p><p>我是一个p标签</p><span>hello</span><!--<div><p>我是DIV中的p标签</p></div>--></body>
</html>

image-20200312173650104

兄弟选择器

• 除了根据祖先父子关系，还可以根据兄弟关系查找元素。

• 语法:

– 查找后边一个兄弟元素

​ 兄弟元素 + 兄弟元素{}

– 查找后边所有的兄弟元素

​ 兄弟元素 ~ 兄弟元素{}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">			/** 为span后的一个p元素设置一个背景颜色为黄色* 后一个兄弟元素选择器* 	作用：可以选中一个元素后紧挨着的指定的兄弟元素* 	语法：前一个 + 后一个* *//*span + p{background-color: yellow;}*//** 选中后边的所有兄弟元素* 	语法：前一个 ~ 后边所有	*/span ~ p{background-color: yellow;}			</style></head><body><p>我是一个p标签</p><p>我是一个p标签</p><p>我是一个p标签</p><span>我是一个span</span><p>我是一个p标签</p><p>我是一个p标签</p><p>我是一个p标签</p></body>
</html>

image-20200312173819999

选择器的权重

• 在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。

• 比如：body h1 h1

• 上边的两个选择器都会选择h1元素，如果两个选择器设置的样式不一致那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用那个样式呢？CSS中会默认使用权重较大的样式，权重又是如何计算的呢？

权重的计算

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.p1{background-color: yellow;}p{background-color: red;}	/*样式的冲突- 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定* 当使用不同的选择器，选中同一个元素时并且设置相同的样式时，* 	这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定*  优先级高的优先显示。* * 不同的选择器有不同的权重值，优先级的规则：* 		内联样式，优先级  1000* 		id选择器，优先级   100* 		类、属性和伪类选择器， 优先级   10* 		元素选择器，优先级 1 * 		通配选择器、通配符 ，优先级 0* 		继承的样式，没有优先级* * 当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，* 	但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式。比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的，例如div,p,#p1,.hello{}）,重点：选择器的累加不会超过其最大的数量级，类选择器在高（多）也不会超过id选择器，不能跨数量级如果优先级计算后相同，此时则优先使用靠下的样式* *  并集选择器的优先级是单独计算* 	div,p,#p1,.hello{}	* *  可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，* 	将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important*                   .p1{color: yellow;background-color: greenyellow !important;}		*/*{font-size: 50px;}p{font-size: 30px;}#p2{background-color: yellowgreen;}/*p元素是1，id选择器是100，相加为101*/p#p2{background-color: red;}.p3{color: green;}.p1{color: yellow;background-color: greenyellow !important;}		</style></head><body>		<p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落<span>我是p标签中的span</span></p>		</body>
</html>

image-20200313194749942

四、文本标签及样式

1.文本标签

  • 标识网页中的不同内容

em和strong

• em标签用于表示一段内容中的着重点。

• strong标签用于表示一个内容的重要性。

• 这两个标签可以单独使用，也可以一起使用。

• 通常em显示为斜体，而strong显示为粗体。

<!-- em和strong- 这两个标签都表示一个强调的内容，em主要表示语气上的强调,em在浏览器中默认使用斜体显示strong表示强调的内容，比em更强烈，默认使用粗体显示-->
<p><strong>警告：任何情况下不要接近僵尸。</strong>他们只是 <em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！
</p>

image-20200302150324994

i和b

<!-- i标签中的内容会以斜体显示b标签中的内容会以加粗显示
这两个标签和em和strong类似，但是这两个标签没有语义。h5规范中规定，当我们只想设置文本特殊显示，对于不需要着重的内容而是单纯的加粗或者是斜体，就可以使用b和i标签-->
<p><b>警告：任何情况下不要接近僵尸。</b>他们只是 <i>看起来</i> 很友好，实际上他们是为了吃你的胳膊！
</p>

small

• small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。

• 浏览器在显示small标签时会显示一个比父元素小的字号。

<!--small标签中的内容会比他的父元素中的文字要小一些在h5中使用small标签来表示一些细则一类的内容比如：合同中小字，网站的版权声明都可以放到small-->
<p><small>&copy;2016 尚硅谷. 保留所有权利.</small></p>

image-20200302150527371

cite

• 使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。

<!-- 网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，比如：书名 歌名 话剧名 电影名 。。。-->
<p><cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>

image-20200302150559424

blockquote和q

• blockquote和q表示标记引用的文本。

• blockquote用于长引用，q用于短引用。

• 在两个标签中还可以使用cite属性来表示引用的地址。

<!--q标签表示一个短的引用（行内引用）q标签引用的内容，浏览器会默认加上引号blockquote标签表示一个长引用（块级引用）-->
孟子曾经说过：
<blockquote>天将降大任于是人也...</blockquote>
他说的真对啊！
<p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>

image-20200302145615672

sup和sub

• sup和sub用于定义上标和下标。

<p>10<sup>3</sup>H<sub>2</sub>O</p>

image-20200302150231178

ins和del

• ins表示插入的内容，显示时通常会加上下划线。

•del表示删除的内容，显示时通常会加上删除线。

<p>10<ins>3</ins><del>2</del></p>

image-20200302150021721

code和pre

• 如果你的内容包含代码示例或文件名，就可以使用code元素。

• pre元素表示的是预格式化文本，可以使用pre包住code来表示一段代码。

	<!--需要页面中直接编写一些代码pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格code专门用来表示代码我们一般结合使用pre和code来表示一段代码-->
<pre><code>function fun(){alert("hello");}</code>
</pre>

image-20200302150710672

2.布局标签

  <!-- 布局标签（结构化语义标签）--><!-- header 表示网页的头部main 表示网页的主体部分(一个页面中只会有一个main)footer 表示网页的底部nav 表示网页中的导航aside 和主体相关的其他内容（侧边栏）article 表示一个独立的文章section 表示一个独立的区块，上边的标签都不能表示时使用sectiondiv 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素span 行内元素，没有任何的语义，一般用于在网页中选中文字--><header></header><main></main><footer></footer><nav></nav><aside></aside><article></article><section></section><div></div><span></span>

3.有序列表

• 使用ol和li来创建一个有序列表。

image-20200220154802216

4.无序列表

• 使用ul和li来创建一个无序列表。

image-20200220154839545

5.定义列表

• 使用dl、dd、dt来创建一个定义列表。

image-20200220154916018

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><!--定义列表用来对一些词汇或内容进行定义使用dl来创建一个定义列表dl中有两个子标签dt ： 被定义的内容dd ： 对定义内容的描述同样dl和ul和ol之间都可以互相嵌套		--><dl><dt>武松</dt><dd>景阳冈打虎英雄，战斗力99</dd><dd>后打死西门庆，投奔梁山</dd><dt>武大</dt><dd>著名餐饮企业家，战斗力0</dd></dl></body>
</html>

image-20200313200200199

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">		/*去掉项目符号* *//*ul{list-style: none;}*/			</style></head><body>	<!-- 列表（list）就相当于去超市购物时的那个购物清单，在HTML也可以创建列表，在网页中一共有三种列表：1.无序列表2.有序列表3.定义列表--><!--无序列表- 使用ul标签来创建一个无序列表- 使用li在ul中创建一个一个的列表项，一个li就是一个列表项通过type属性可以修改无序列表的项目符号可选值：disc，默认值，实心的圆点square，实心的方块circle，空心的圆注意：默认的项目符号我们一般都不使用！！如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置ul和li都是块元素	--><ul><li>西门大官人</li><li>柴大官人</li><li>许大官人</li><li>唐僧大官人</li></ul>		<!-- 有序列表和无序列表类似，只不过它使用ol来代替ul有序列表使用有序的序号作为项目符号type属性，可以指定序号的类型可选值：1，默认值，使用阿拉伯数字a/A 采用小写或大写字母作为序号i/I 采用小写或大写的罗马数字作为序号start属性，起始索引，表示从几开始，必须得写数字,即下方的为 50.结构开始ol也是块元素		列表之间可以互相嵌套--><ol type="1" start="50"><li>结构</li><li>表现</li><li>行为</li></ol>	<!-- 列表之间都是可以互相嵌套，可以在无序列表中放个有序列表也可以在有序列表中放一个无序列表-->		<p>菜谱</p><ul><li>鱼香肉丝<ol><li>鱼</li><li>香</li><li>肉丝</li></ol></li><li>宫保鸡丁<ul><li>宫保</li><li>鸡丁</li></ul></li><li>青椒肉丝</li></ul>	</body>
</html>

image-20200313195808849

6.文本格式化

为内容设置不同的样式

长度单位

px、百分比%、em、rem

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">		/** 长度单位* 		像素 px* 			- 像素是我们在网页中使用的最多的一个单位，* 				一个像素就相当于我们屏幕中的一个小点，* 				我们的屏幕实际上就是由这些像素点构成的* 				但是这些像素点，是不能直接看见。* 			- 不同显示器一个像素的大小也不相同，* 				显示效果越好越清晰，像素就越小，反之像素越大。- 如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这                        一个小色块就是一个像素，也就是1px，对于不同的显示器来说一个像素的大小是不同的。* * 		百分比 %* 			- 也可以将单位设置为一个百分比的形式，* 				这样浏览器将会根据其父元素的样式来计算该值* 			- 使用百分比的好处是，当父元素的属性值发生变化时，* 				子元素也会按照比例发生改变* 			- 在我们创建一个自适应的页面时，经常使用百分比作为单位- 也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使                           用的大小是16px，则100%就是16px，200%就是32px。* * 		em* 			- em和百分比类似，它是相对于当前元素的字体大小来计算的* 			- 1em = 1font-size，通常默认1font-size为16px* 			- 使用em时，当字体大小发生改变时，em也会随之改变* 			- 当设置字体相关的样式时，经常会使用em- em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，                                 1.5em相当于150%。rem- rem是相对于根元素的字体大小来计算（html所设定的字体大小，）html{font-size：10px}* 			*/.box{width: 300px;height: 300px;background-color: red;}.box1{font-size: 20px;width: 2em;height: 50%;background-color: yellow;}</style></head><body><div class="box"><div class="box1"></div></div></body>
</html>

image-20200313200416413

颜色

• 在CSS中可以直接使用颜色的关键字来代表一种颜色。

• 17种颜色:

​ – aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow

• 还有147种svg颜色，这里就不一一列举了，但是明显即使这些颜色变成double，也不足以描绘我们世界中所有的颜色。

十六进制颜色

• 用的最多的颜色是十六进制符号。一个颜色值，比如：#6600FF实际上包含了三组十六进制的数字。

• 上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。

• 如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将#6600FF缩短为#60F。

RGB值

• 也可以使用计算机中常用的RGB值来表示颜色。可以使用0255的数值，也可以使用0%100%的百分比数。

​ – RGB(100%,0%,0%)

​ – RGB(0,255,0)

• 第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度。

RGBA

• RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明。

​ – RGBA(255,100,5,0.5)

HSL值和HSLA值

HSLA(H,S,L,A) 的参数说明：

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

S：Saturation(饱和度)。取值为：0.0% - 100.0%

L：Lightness(亮度)。取值为：0.0% - 100.0%

A：Alpha透明度。取值0~1之间。

注：此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度

​ background-color: hsla(98, 48%, 40%, 0.658);

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">			.box1{width: 100px;height: 100px;				/** 颜色单位：* 	 在CSS可以直接使用颜色的单词来表示不同的颜色* 		红色：red* 		蓝色：blue* 		绿色：green	*   也可以使用RGB值来表示不同的颜色* 		- 所谓的RGB值指的是通过Red Green Blue三元色，* 			通过这三种颜色的不同的浓度，来表示出不同的颜色* 		- 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);* 			- 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有* 			- 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字* 				使用百分数最终也会转换为0-255之间的数* 				0%表示0* 				100%表示255*   也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，* 		只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色* 		每组表示一个颜色,第一组表示红色的浓度，范围00-ff* 					第二组表示绿色的浓度，范围是00-ff* 					第三组表示蓝色的浓度，范围00-ff* 		语法：#红色绿色蓝色* 		十六进制：* 		0 1 2 3 4 5 6 7 8 9 a b c d e f* 		00 - ff* 		00表示没有，相当于rgb中的0* 		ff表示最大，相当于rgb中255* 		红色：* 			#ff0000* 		像这种两位两位重复的颜色，可以简写* 			比如：#ff0000 可以写成 #f00* 			#abc  #aabbcc		* 			*//*background-color: rgb(161,187,215);*//*background-color: rgb(100%,50%,50%);*//*background-color: #00f;*//*background-color: #abc;*/ /*#aabbcc*/background-color: #084098;}			</style></head><body><div class="box1"></div></body>
</html>

image-20200313200543186

   .box1{width: 100px;height: 100px;/* 颜色单位：在CSS中可以直接使用颜色名来设置各种颜色比如：red、orange、yellow、blue、green ... ...但是在css中直接使用颜色名是非常的不方便RGB值：- RGB通过三种颜色的不同浓度来调配出不同的颜色- R red，G green ，B blue- 每一种颜色的范围在 0 - 255 (0% - 100%) 之间- 语法：RGB(红色,绿色,蓝色)- 可调的颜色256*256*256种RGBA:- 就是在rgb的基础上增加了一个a表示不透明度- 需要四个值，前三个和rgb一样，第四个表示不透明度1表示完全不透明   0表示完全透明  .5半透明十六进制的RGB值：- 语法：#红色绿色蓝色- 颜色浓度通过 00-ff- 如果颜色两位两位重复可以进行简写  #aabbcc --> #abcHSL值 HSLA值H 色相(0 - 360，实际上是一个圆)S 饱和度，颜色的浓度 0% - 100%L 亮度，颜色的亮度 0% - 100%*/background-color: red;background-color: rgb(255, 0, 0);background-color: rgb(0, 255, 0);background-color: rgb(0, 0, 255);background-color: rgb(255,255,255);background-color: rgb(106,153,85);background-color: rgba(106,153,85,.5);background-color: #ff0000;background-color: #ffff00;background-color: #ff0;background-color: #bbffaa;background-color: #9CDCFE;background-color: rgb(254, 156, 156);background-color: hsla(98, 48%, 40%, 0.658);}

字体

• 通过font-family可以指定标签中文字使用的字体。

• 例如：

p{font-family:Arial}

上边这行代码指定了p标签中使用名为arial作为字体

• 一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。

• 通过font-family可以同时指定多个字体。

• 例如：

p{font-family:Arial , Helvetica , sans-serif}

• 如上我实际上指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。

• 这里面sans-serif并不是指的具体某一个字体。而是一类字体。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* font-face可以将服务器中的字体直接提供给用户去使用（当用户电脑没有安装指定的字体时） 问题：1.加载速度2.版权3.字体格式  */@font-face {/* 指定字体的名字 */font-family:'myfont' ;/* 服务器中字体的路径  format("truetype")：指定字体的格式，一般可不写*/src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");}p{/* 字体相关的样式 color 用来设置字体颜色font-size 字体的大小和font-size相关的单位em 相当于当前元素的一个font-sizerem 相对于根元素的一个font-sizefont-family 字体族（字体的格式）可选值：serif  衬线字体sans-serif 非衬线字体monospace 等宽字体- 指定字体的类别，浏览器会自动使用该类别下的字体- font-family 可以同时指定多个字体，多个字体间使用,隔开字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif*/color: blue;font-size: 40px;         /* font-family: 'Courier New'（有引号是因为中间有空格）, Courier, monospace; */font-family: myfont;}</style>
</head>
<body><p>今天天气真不错，Hello Hello How are you！</p>
</body>
</html>

image-20200324142601272

字体的样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">			.p1{/*设置字体颜色,使用color来设置文字的颜色*/color: red;/** 设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度，并不是字体的大小一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不同	* */font-size: 30px;/** 通过font-family可以指定文字的字体* 	当采用某种字体时，如果浏览器支持则使用该字体，* 		如果字体不支持，则使用默认字体* 该样式可以同时指定多个字体，多个字体之间使用,分开* 	当采用多个字体时，浏览器会优先使用前边的字体，* 		如果前边没有在尝试下一个*//*font-family: arial , 微软雅黑;*//** 浏览器使用的字体默认就是计算机中的字体，* 	如果计算机中有，则使用，如果没有就不用* * 在开发中，如果字体太奇怪，用的太少了，尽量不要使用，有可能用户的电脑没有，就不能达到想要的效果。*//*font-family: 华文彩云 , arial , 微软雅黑;也可以设置face表示字体，例如face="仿宋"*/				font-family: "curlz mt";				}			</style></head><body>		<p class="p1">我是一个p标签，ABCDEFGabcdefg</p>		</body>
</html>

image-20200313200830187

字体的其他样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">			.p1{color: red;font-size: 30px;font-family: "微软雅黑";/** font-style可以用来设置文字的斜体* 	- 可选值：* 		normal，默认值，文字正常显示* 		italic 文字会以斜体显示* 		oblique 文字会以倾斜的效果显示* 	- 大部分浏览器都不会对倾斜和斜体做区分，* 		也就是说我们设置italic和oblique它们的效果往往是一样的*  - 一般我们只会使用italic*/font-style: italic;/** font-weight可以用来设置文本的加粗效果：* 		可选值：* 			normal，默认值，文字正常显示* 			bold，文字加粗显示* * 	该样式也可以指定100-900之间的9个值，* 		但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果* 		也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的*/font-weight: bold;/** font-variant可以用来设置小型大写字母* 		可选值：* 			normal，默认值，文字正常显示* 			small-caps 文本以小型大写字母显示* * 小型大写字母：* 		将所有的字母都以大写形式显示，但是小写字母的大写，* 			要比大写字母的大小小一些。*/font-variant: small-caps ;}.p2{/*设置一个文字大小*/font-size: 50px;/*设置一个字体*/font-family: 华文彩云;/*设置文字斜体*/font-style: italic;/*设置文字的加粗*/font-weight: bold;/*设置一个小型大写字母*/font-variant: small-caps;}.p3{/** 在CSS中还为我们提供了一个样式叫font，* 	使用该样式可以同时设置字体相关的所有样式,* 	可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开* * 使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，* 	如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式* 	大小必须是倒数第二个样式* * 实际上使用简写属性也会有一个比较好的性能*/font: small-caps bold italic 60px "微软雅黑";}						</style></head><body><p class="p3">我是一段文字，ABCDEFGabcdefg</p><p class="p1">我是一段文字，ABCDEFGabcdefg</p><p class="p2">我是一段文字，ABCDEFGabcdefg</p></body>
</html>

image-20200313201057779

字体分类

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>字体的分类</title><style type="text/css">p{font-family: arial , 微软雅黑 , 华文彩云 , serif;}</style></head><body><!-- 在网页中将字体分成5大类：serif（衬线字体）sans-serif（非衬线字体）monospace （等宽字体）cursive （草书字体）fantasy （虚幻字体）以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。一般会将字体的大分类，指定为font-family中的最后一个字体	--><p style="font-size: 50px; font-family: serif;">衬线字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 50px; font-family: sans-serif;">非衬线字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 50px; font-family: monospace;">等宽字体：我是一段文字，IHABCDEFGabcdefg</p><p style="font-size: 50px; font-family: cursive;">草书字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 50px; font-family: fantasy;">虚幻字体：我是一段文字，ABCDEFGabcdefg</p></body>
</html>

image-20200313200923008

斜体和粗体

font-style用来指定文本的斜体。

  • – 指定斜体：font-style:italic
  • – 指定非斜体：font-style:normal

font-weight用来指定文本的粗体。

  • – 指定粗体：font-weight:bold

  • – 指定非粗体：font-weight:normal

文字大小

  • font-size用来指定文字的大小。

小型大写字母

• font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。

​ – font-variant:small-caps

<p style=" font-variant: small-caps">abcABC</p>

image-20200302152458490

字体的简写属性

• font可以一次性同时设置多个字体的样式。

• 语法：

​ – font:加粗 斜体 小型大写 大小/行高 字体

• 这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{border: 1px red solid;/* font 可以设置字体相关的所有属性语法：font: 字体大小/行高 字体族行高 可以省略不写 如果不写使用默认值           *//* font-size: 50px;font-family: 'Times New Roman', Times, serif; */font-weight: bold;/* font: 50px/2  微软雅黑, 'Times New Roman', Times, serif; *//* font: normal normal 50px/2  微软雅黑, 'Times New Roman', Times, serif; */font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;/* font:50px 'Times New Roman', Times, serif;line-height: 2; *//* font-size: 50px; *//* font-weight 字重 字体的加粗 可选值：normal 默认值 不加粗bold 加粗100-900 九个级别（没什么用，因为计算机字体基本上没有这么多字体，基本上资源normal和bold，设置100~500粗细是一样的）font-style 字体的风格normal 正常的italic 斜体*//* font-weight: bold; *//* font-weight: 500;font-style: italic; */}</style>
</head>
<body><div>今天天气真不错 Hello hello</div></body>
</html>

image-20200324143205800

图标字体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./fa/css/all.css">
</head>
<body><!-- 图标字体（iconfont）- 在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活- 所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入- 这样我们就可以通过使用字体的形式来使用图标fontawesome 使用步骤1.下载 https://fontawesome.com/2.解压3.将css和webfonts移动到项目中4.将all.css引入到网页中5.使用图标字体第一种方法：- 直接通过类名来使用图标字体class="fas fa-bell"class="fab fa-accessible-icon"--><i class="fas fa-bell" style="font-size:80px; color:red;"></i><i class="fas fa-bell-slash"></i><i class="fab fa-accessible-icon"></i><i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
</body>
</html>

image-20200324142728400

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./fa/css/all.css"><style>li{list-style: none;}li::before{/*  第二种方法：通过伪元素来设置图标字体1.找到要设置图标的元素通过before或after选中2.在content中设置字体的编码3.设置字体的样式(在引入的all.css文件中找)fabfont-family: 'Font Awesome 5 Brands';fasfont-family: 'Font Awesome 5 Free';font-weight: 900; *//*注意要加\*/content: '\f1b0';/* font-family: 'Font Awesome 5 Brands'; */font-family: 'Font Awesome 5 Free';font-weight: 900; color: blue;margin-right: 10px;}</style>
</head>
<body><!-- <i class="fas fa-cat"></i> --><ul><li>锄禾日当午</li><li>汗滴禾下土</li><li>谁知盘中餐</li><li>粒粒皆辛苦</li></ul><!-- 第三种方法：通过实体来使用图标字体：&#x图标的编码;--><span class="fas">&#xf0f3;</span></body>
</html>

image-20200324142815349

阿里的字体库

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>//引入iconfont下载后解压的文件<link rel="stylesheet" href="./iconfont/iconfont.css"><style>i.iconfont{font-size: 100px;}/*  第三种方法：通过伪元素，实体在下载后的html文件中去找（复制&#x之后的元素），注意加\   */p::before{content: '\e625';font-family: 'iconfont';font-size: 100px;}</style>
</head>
<body><!--第一种方法：通过实体，代码在下载后的html文件中去找--><i class="iconfont">&#xe61c;</i><i class="iconfont">&#xe622;</i><i class="iconfont">&#xe623;</i><!--第二种方法：通过类名，类名在下载后的html文件中去找--><i class="iconfont icon-qitalaji"></i><p>Hello</p>
</body>
</html>

image-20200324142921088

行间距、行高（line-height）

• line-height用于设置行高，行高越大则行间距越大。

• 行间距 = line-height – font-size

<style type="text/css">/** 在CSS并没有为我们提供一个直接设置行间距的方式，* 	我们只能通过设置行高来间接的设置行间距，行高越大行间距越大* 使用line-height来设置行高 * 	行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，* 	网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示* * 行间距 = 行高 - 字体大小*/.p1{font-size: 20px;/** 通过设置line-height可以间接的设置行高，* 	可以接收的值：* 		1.直接就收一个大小* 		2.可以指定一个百分数，则会相对于字体去计算行高* 		3.可以直接传一个数值，则行高会设置字体大小相应的倍数*//*line-height: 200%;*/line-height: 2;}.box{width: 200px;height: 200px;background-color: #bfa;/** 对于单行文本来说，可以将行高设置为和父元素的高度一致，* 	这样可以是单行文本在父元素中垂直居中*/line-height: 200px;}.p2{								/** 在font中也可以指定行高* 	在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值*/font: 30px "微软雅黑";line-height: 50px;}</style>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{font-size: 50px;/* 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中 */line-height: 200px;/* 行高（line height）- 行高指的是文字占有的实际高度- 可以通过line-height来设置行高行高可以直接指定一个大小（px em）也可以直接为行高设置一个整数如果是一个整数的话，行高将会是字体的指定的倍数（line-height: 1;）- 行高经常还用来设置文字的行间距行间距 = 行高 - 字体大小字体框- 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度，而字就是写在这样的每一个框中行高会在字体框的上下平均分配（即居中）*/border: 1px red solid;/* line-height: 1.33; *//* line-height: 1; *//* line-height: 10 */}</style>
</head>
<body><div>今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello</div></body>
</html>

image-20200324143021392

大写化(text-transform)

text-transform样式用于将元素中的字母全都变成大小。

  • 大写：text-transform:uppercase
  • 小写：text-tansform:lowercase
  • 首字母大写：text-transform:capitalize
  • 正常：text-transform:none

文本的修饰(text-decoration)

• text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。

• 可选值：

  • underline

  • overline

  • line-through

  • none

文本的水平和垂直对齐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width: 800px;border: 1px red solid;/* text-align 文本的水平对齐可选值：left 左侧对齐right 右对齐center 居中对齐justify 两端对齐（即两端都没有间隙，不留空白，）*//* text-align: justify; */font-size: 50px;}span{font-size: 20px;border: 1px blue solid;/*vertical-align 设置元素垂直对齐的方式可选值：baseline 默认值 基线对齐（基线都是文字的底部一条线，看不到但是存在的）top 顶部对齐（让子元素的顶部与父元素的顶部对齐）bottom 底部对齐middle 居中对齐（不是实际的居中对齐，而是与父元素的x居中对齐，参考css开发手册）通常通过调整值对齐vertical-align:10px;*/vertical-align:baseline; }p{border: 1px red solid;}/*图片通过 vertical-align: bottom（top、middle皆可）;如果不设置会使图片与基线对齐，即下方还会存在间隙*/img{vertical-align: bottom;}</style>
</head>
<body><div>今天天气 Helloyx<span>真不错 Hello</span>！
</div><!-- <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo nihil iure at ab atque nostrum molestiae totam porro, dolorem maiores repudiandae molestias veritatis, eligendi laudantium incidunt dolores corporis? Quibusdam, consequatur.</div> --><p><img src="./img/an.jpg" alt=""> </p></body>
</html>

image-20200324143318961

其他的文本样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>其他的文本样式</title><style>.box1{font-size: 50px;font-family: 微软雅黑;/* text-decoration 设置文本修饰可选值：none 什么都没有underline 下划线line-through 删除线overline 上划线*//* text-decoration: overline; *//*给下划线添加样式 text-decoration: underline red dotted; */}.box2{width: 200px;/* white-space 设置网页如何处理空白可选值：normal 正常，默认值nowrap 不换行（内容就只占一行，太长就会有滑轮）pre 保留空白（你找html里面怎么写在浏览器中也会怎样显示）例如：<div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, minus fugit in perspiciatis reprehenderiaa</div>*//*常用来处理显示不完的新闻标题， text-overflow: ellipsis;对裁剪后超出的内容用省略号表示*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt numquam. Dolores, cupiditate enim.</div><div class="box1">今天天气真不错</div>
</body>
</html>

image-20200324143406163

字母间距(letter-spacing)和单词间距(word-spacing)

  • letter-spacing 用来设置字符之间的间距。

  • word-spacing 用来设置单词之间的间距。

• 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

对齐文本(text-align)

• text-align用于设置文本的对齐方式。

• 可选值：

  • left：左对齐

  • right：右对齐

  • justify：两边对齐

  • center：居中对齐

首行缩进(text-indent)

• text-indent用来设置首行缩进。

• 该样式需要指定一个长度，并且只对第一行生效。

文本样式

		.p1 {/** text-transform可以用来设置文本的大小写* 	可选值：* 		none 默认值，该怎么显示就怎么显示，不做任何处理* 		capitalize 单词的首字母大写，通过空格来识别单词* 		uppercase 所有的字母都大写* 		lowercase 所有的字母都小写*/text-transform: lowercase;}.p2 {/** text-decoration可以用来设置文本的修饰* 		可选值：* 			none：默认值，不添加任何修饰，正常显示* 			underline 为文本添加下划线* 			overline 为文本添加上划线* 			line-through 为文本添加删除线*/text-decoration: line-through;}a {/*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline如果需要去除超链接的下划线则需要将该样式设置为none* */text-decoration: none;}.p3 {/*** letter-spacing可以指定字符间距*//*letter-spacing: 10px;*//** word-spacing可以设置单词之间的距离* 	实际上就是设置词与词之间空格的大小*/word-spacing: 120px;}.p4{/** text-align用于设置文本的对齐方式* 	可选值：* 		left 默认值，文本靠左对齐* 		right ， 文本靠右对齐* 		center ， 文本居中对齐* 		justify ， 两端对齐* 				- 通过调整文本之间的空格的大小，来达到一个两端对齐的目的*/text-align: justify ;}.p5{font-size: 20px;				/** text-indent用来设置首行缩进* 	当给它指定一个正值时，会自动向右侧缩进指定的像素* 	如果为它指定一个负值，则会向左移动指定的像素,* 		通过这种方式可以将一些不想显示的文字隐藏起来*  这个值一般都会使用em作为单位*/text-indent: -99999px;}

源码获取

至此，我们的HTML5+CSS3的学习(上)就讲解完成了。中篇我们将介绍CSS盒子模型、表格等内容，源码素材可以通过关注我的微信公众号 我爱学习呀嘻嘻 ，回复关键字HTML5+CSS3源码素材进行获取哦。

image-20211108230322493

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

相关文章

  1. 简单线性回归和多项式回归

    所用数据集women提供了15个年龄在30~39岁间女性的身高和体重信息&#xff0c;想通过身高预测体重。 简单线性回归 结果数据分析&#xff1a; 回归系数&#xff08;3.45&#xff09;显著不为0&#xff08;p<0.001&#xff09;&#xff0c;表明身高每增高1英寸&#xff0c;…...

    2024/4/13 23:39:05
  2. 寒假学习记录D19

    1.Choregraphe的安装 2.算法基础练习 1.Choregraphe的安装 官网里自己安装的&#xff0c;试用期只有三个月 (108条消息) Ubuntu16.04 NAO 2.1.4 python SDK choregraphe软件安装_DUI.S.T-CSDN博客_choregraphe安装 2.算法基础练习&#xff08;背包&#xff09; 题目描述 小…...

    2024/4/13 23:39:20
  3. 基于深度学习识别湖泊，以洞庭湖区域为例

    深度学习大概分成两部分&#xff0c;模型训练和图像识别&#xff0c;模型训练涉及样本训练和样本验证&#xff0c;这个部分为深度学习的主要部分&#xff0c;通过调节样本集和训练参数控制结果精度。鉴于样本获取及计算机性能&#xff0c;这里使用现成的训练结果集&#xff0c;…...

    2024/4/13 23:39:00
  4. pandas使用教程

    一、读取文件 import pandas as pd df pd.read_excel(flie_path, header2) # header默认为0&#xff0c;为2则将第三行作为标题,flie_path文件路径 df pd.read_csv(flie_path&#xff0c;index_colFalse)) # 读取csv文件&#xff0c;index_colFalse为去掉索引列二、创建内容…...

    2024/4/20 2:50:40
  5. IOC容器逻辑上如何解耦

    初学SpringIOC容器&#xff0c;我们对于解耦可能还是处于一个相对抽象的概念理解&#xff0c;后面作者也是查找了一些资料&#xff0c;本片文章就用一个例子来说明IOC容器解耦的妙处 假设现在公司需要完成一个与新闻公司的合作项目&#xff0c;项目需要与新闻社进行合作&#x…...

    2024/4/13 23:39:56
  6. 蓝桥杯C/C++每日一练之十六进制转八进制

    第十三届蓝桥杯大赛个人赛省赛比赛将于2022年4月9日&#xff08;星期六&#xff09;举办&#xff0c;趁现在寒假的时间抓紧时间备战一下。因为博主本人报名是C/C组&#xff0c;所以更新所有内容都是C/C相关知识。题目全部都是蓝桥杯官网题库真题。今天是备战刷题的第一天。 题…...

    2024/4/13 23:40:01
  7. Android APP完整基础教程（11）应用资源-动画

    动画模式在android系统中被分为三类&#xff0c;分别为&#xff1a; tween(view) animation&#xff1a;补间动画frame(drawable) animation&#xff1a;逐帧动画property animation&#xff1a;属性动画 本章节分别对齐进行解读。 1 Tween Animation 1.1 Tween Animation基…...

    2024/4/18 13:36:11
  8. Java_____类和对象

    1.类&#xff1a;抽象概念&#xff0c;表示一类事物的总称 人类&#xff1a;属性——名字 年龄 性别 行为——吃 穿 睡 类统称&#xff1a;表示一类事物所具有的共同特征与行为 对象&#xff1a;类的一个实例 面向对象&#xff1a;c Java 一切皆对象 方便开发&#xff0c;松…...

    2024/4/20 1:30:08
  9. LeetCode. top100. 6.将一个给定字符串 s 根据给定的行数 numRows ，以从上往下、从左到右进行 Z 字形排列。

    力扣top热题100道中第六道,求解将一个输入的字符串s&#xff0c;由上到下排列的输入读取方式&#xff0c;然后自左向右进行遍历输出。 输入的字符串排列类似一个倒N型。 public String convert(String s, int numRows) {if(snull||numRows<1) return s;StringBuilder[] arr…...

    2024/4/16 20:31:19
  10. wasm转c调用实战

    wasm转c调用实战案例一&#xff1a;猿人学2022新春题案例二&#xff1a;某讯视频ckey参数获取本篇文章共介绍两个案例。在本篇文章中&#xff0c;之前文章讲过的内容会进行跳过&#xff0c;主要讲新的内容和知识&#xff0c;所以建议先看前置阅读 1.某德地图矢量瓦片逆向(快速…...

    2024/4/7 18:34:27
  11. 2022/1/28

    cf And Matching 应该在推n8,k7的时候就该想到这一点了啊&#xff0c;而且k<n-1,看到这个条件了我愣是没往这个地方想&#xff1a;n-1和其他数与就是其他数&#xff0c;就该抽一下自己发困的脑子&#xff0c;&#xff0c;先看一下8进制的真值表会发现0&n-1,2&n-2..…...

    2024/4/13 23:40:06
  12. 【c语言】初识c语言总结

    1.数据类型 char // 字符型 short // 短整型 int // 整型 long // 长整型 long long // 更长的整形 float // 单精度浮点型 double // 双精度浮点型 &#xff08;如何计算各种类型的大小呢&#xff1f;) #include <stdio.h> int main() {printf("%d"…...

    2024/4/15 9:20:38
  13. Java 9~Java 17主要更新了什么？

    James Gosling&#xff1a;对继续坚守 Java8 的朋友&#xff0c;我想说“是时候作出改变了”。新系统全方位性更强、速度更快、错误也更少、扩展效率更高。无论从哪个角度看&#xff0c;大家都有理由接纳 JDK17。确实&#xff0c;大家在从 JDK8 升级到 JDK9 时会遇到一个小问题…...

    2024/4/16 20:44:38
  14. 消息认证码

    消息认证码 一 消息认证要求 在网络环境中&#xff0c;可能有下述攻击&#xff1a; 1.消息透露给没有合法密钥的任何人或程序。 2.传输分析&#xff0c; 分析通信双方的通信方式。在面向连接的应用中&#xff0c;确定连接的频率和持续时间&#xff1b;在面向连接的应用中&…...

    2024/4/15 9:21:18
  15. 带你读书之“红宝书”：第三章 语法基础（中）之 数据类型中部分String类型

    「这是我参与2022首次更文挑战的第11天&#xff0c;活动详情查看&#xff1a;2022首次更文挑战」 写在前头 大多数小伙伴看技术书籍都会用“啃”来描述读书的直观感受&#xff0c;当然我也是一个前端小白&#xff0c;白的透明那种&#xff0c;但是我在读技术书籍感觉到“啃”…...

    2024/4/14 16:52:30
  16. 如何超过大多数人

    转载于&#xff1a;https://coolshell.cn/articles/19464.html 当你看到这篇文章的标题&#xff0c;你一定对这篇文章产生了巨大的兴趣&#xff0c;因为你的潜意识在告诉你&#xff0c;这是一本人生的“武林秘籍”&#xff0c;而且还是左耳朵写的&#xff0c;一定有干货满满&a…...

    2024/4/26 11:04:33
  17. 【算法】【贪心】贪心算法解决两道基础股票买卖问题-【力扣】贪心算法基础入门题目超详细讲解

    【算法】【贪心】贪心算法解决两道基础股票买卖问题-【力扣】贪心算法基础入门题目超详细讲解 先赞后看好习惯 打字不容易&#xff0c;这都是很用心做的&#xff0c;希望得到支持你 大家的点赞和支持对于我来说是一种非常重要的动力 看完之后别忘记关注我哦&#xff01;️️️…...

    2024/4/19 16:34:11
  18. 2022年1月国产数据库排行榜：TOP10中4款产品得分再创新高

    大家好&#xff0c;我是 Tank&#xff0c;过去的 2021 年我整理了 7 篇关于国产数据库流行度排行榜的文章&#xff0c;真切的感受到国产数据库在躬行实践之年所做的努力。 截至 2022 年 1 月&#xff0c;加入墨天轮国产数据库排行榜的产品数量已达 194 款&#xff0c;越来越多的…...

    2024/4/21 0:09:39
  19. 图论刷题计划与题解1（普及与普及+）

    文章目录全新的图论刷题计划~&#xff08;普及与普及&#xff09;题目1&#xff1a;P5318题目2&#xff1a;P3916 图的遍历 &#xff08;反向建图&#xff09;题目3&#xff1a;P2661 信息传递&#xff08;dfs求最小环&#xff09;题目4&#xff1a;P1330 封锁阳光大学&#xf…...

    2024/4/13 23:39:51
  20. GMAES101第二讲Review of Linear Algebra笔记

    线性代数的基本知识一、向量&#xff08;vectors&#xff09;二、向量点乘&#xff08;Dot Product&#xff09;三、向量叉乘&#xff08;Cross Product&#xff09;四、矩阵&#xff08;matrix&#xff09;参考文献一、向量&#xff08;vectors&#xff09; 计算机图形学中默…...

    2024/4/13 23:39:51

最新文章

  1. 如何批量删除多个不同路径的文件但又保留文件夹呢

    首先&#xff0c;需要用到的这个工具&#xff1a; 度娘网盘 提取码&#xff1a;qwu2 蓝奏云 提取码&#xff1a;2r1z 1、我准备了三个文件夹&#xff08;实际操作的时候可能是上百个文件夹&#xff0c;无所谓&#xff09;&#xff0c;里面都放了两个图片 2、然后打开工具&am…...

    2024/5/1 23:15:39
  2. 梯度消失和梯度爆炸的一些处理方法

    在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言&#xff0c;在此感激不尽。 权重和梯度的更新公式如下&#xff1a; w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...

    2024/3/20 10:50:27
  3. PHP+python高校教务处工作管理系统q535p

    开发语言&#xff1a;php 后端框架&#xff1a;Thinkphp/Laravel 前端框架&#xff1a;vue.js 服务器&#xff1a;apache 数据库&#xff1a;mysql 运行环境:phpstudy/wamp/xammp等 系统根据现有的管理模块进行开发和扩展&#xff0c;采用面向对象的开发的思想和结构化的开发方…...

    2024/5/1 13:22:30
  4. 小林coding图解计算机网络|基础篇01|TCP/IP网络模型有哪几层？

    小林coding网站通道&#xff1a;入口 本篇文章摘抄应付面试的重点内容&#xff0c;详细内容还请移步&#xff1a; 文章目录 应用层(Application Layer)传输层(Transport Layer)TCP段(TCP Segment) 网络层(Internet Layer)IP协议的寻址能力IP协议的路由能力 数据链路层(Link Lay…...

    2024/5/1 13:43:16
  5. 【外汇早评】美通胀数据走低，美元调整

    原标题：【外汇早评】美通胀数据走低，美元调整昨日美国方面公布了新一期的核心PCE物价指数数据，同比增长1.6%，低于前值和预期值的1.7%，距离美联储的通胀目标2%继续走低，通胀压力较低，且此前美国一季度GDP初值中的消费部分下滑明显，因此市场对美联储后续更可能降息的政策…...

    2024/5/1 17:30:59
  6. 【原油贵金属周评】原油多头拥挤，价格调整

    原标题：【原油贵金属周评】原油多头拥挤，价格调整本周国际劳动节，我们喜迎四天假期，但是整个金融市场确实流动性充沛，大事频发，各个商品波动剧烈。美国方面，在本周四凌晨公布5月份的利率决议和新闻发布会，维持联邦基金利率在2.25%-2.50%不变，符合市场预期。同时美联储…...

    2024/4/30 18:14:14
  7. 【外汇周评】靓丽非农不及疲软通胀影响

    原标题：【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五，美国方面公布了新一期的非农就业数据，大幅好于前值和预期，新增就业重新回到20万以上。具体数据： 美国4月非农就业人口变动 26.3万人，预期 19万人，前值 19.6万人。 美国4月失业率 3.6%，预期 3.8%，前值 3…...

    2024/4/29 2:29:43
  8. 【原油贵金属早评】库存继续增加，油价收跌

    原标题：【原油贵金属早评】库存继续增加，油价收跌周三清晨公布美国当周API原油库存数据，上周原油库存增加281万桶至4.692亿桶，增幅超过预期的74.4万桶。且有消息人士称，沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油，印度炼油商预计将每日获得至多20万桶的额外原油供…...

    2024/4/30 18:21:48
  9. 【外汇早评】日本央行会议纪要不改日元强势

    原标题：【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升，避险资金回流日元有关，也与前一段时间的美日贸易谈判给日本缓冲期，日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策，但这符…...

    2024/4/27 17:58:04
  10. 【原油贵金属早评】欧佩克稳定市场，填补伊朗问题的影响

    原标题：【原油贵金属早评】欧佩克稳定市场，填补伊朗问题的影响近日伊朗局势升温，导致市场担忧影响原油供给，油价试图反弹。此时OPEC表态稳定市场。据消息人士透露，沙特6月石油出口料将低于700万桶/日，沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”，沙特将满…...

    2024/4/27 14:22:49
  11. 【外汇早评】美欲与伊朗重谈协议

    原标题：【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议，昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告，伊朗外长昨日回应称，欧洲国家履行它们的义务，伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...

    2024/4/28 1:28:33
  12. 【原油贵金属早评】波动率飙升，市场情绪动荡

    原标题：【原油贵金属早评】波动率飙升，市场情绪动荡因中美贸易谈判不安情绪影响，金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际，美国按照既定计划向中国2000亿商品征收25%的关税，市场情绪有所平复，已经开始接受这一事实。虽然波动率-恐慌指数VI…...

    2024/4/30 9:43:09
  13. 【原油贵金属周评】伊朗局势升温，黄金多头跃跃欲试

    原标题：【原油贵金属周评】伊朗局势升温，黄金多头跃跃欲试美国和伊朗的局势继续升温，市场风险情绪上升，避险黄金有向上突破阻力的迹象。原油方面稍显平稳，近期美国和OPEC加大供给及市场需求回落的影响，伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级，美国对中…...

    2024/4/27 17:59:30
  14. 【原油贵金属早评】市场情绪继续恶化，黄金上破

    原标题：【原油贵金属早评】市场情绪继续恶化，黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动，人民币汇率出现大幅的贬值动能，金融市场受到非常明显的冲击。尤其是波动率起来之后，对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势，这…...

    2024/4/25 18:39:16
  15. 【外汇早评】美伊僵持，风险情绪继续升温

    原标题：【外汇早评】美伊僵持，风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件，导致波斯湾局势进一步恶化，市场担忧美伊可能会出现摩擦生火，避险品种获得支撑，黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日，四艘商船在阿联酋领海附近的阿曼湾、…...

    2024/4/28 1:34:08
  16. 【原油贵金属早评】贸易冲突导致需求低迷，油价弱势

    原标题：【原油贵金属早评】贸易冲突导致需求低迷，油价弱势近日虽然伊朗局势升温，中东地区几起油船被袭击事件影响，但油价并未走高，而是出于调整结构中。由于市场预期局势失控的可能性较低，而中美贸易问题导致的全球经济衰退风险更大，需求会持续低迷，因此油价调整压力较…...

    2024/4/26 19:03:37
  17. 氧生福地 玩美北湖（上）——为时光守候两千年

    原标题：氧生福地 玩美北湖（上）——为时光守候两千年一次说走就走的旅行，只有一张高铁票的距离～ 所以，湖南郴州，我来了～ 从广州南站出发，一个半小时就到达郴州西站了。在动车上，同时改票的南风兄和我居然被分到了一个车厢，所以一路非常愉快地聊了过来。 挺好，最起…...

    2024/4/29 20:46:55
  18. 氧生福地 玩美北湖（中）——永春梯田里的美与鲜

    原标题：氧生福地 玩美北湖（中）——永春梯田里的美与鲜一觉醒来，因为大家太爱“美”照，在柳毅山庄去寻找龙女而错过了早餐时间。近十点，向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”，到郴州必吃的美食之一。 哇塞！那个味美香甜…...

    2024/4/30 22:21:04
  19. 氧生福地 玩美北湖（下）——奔跑吧骚年！

    原标题：氧生福地 玩美北湖（下）——奔跑吧骚年！让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...

    2024/5/1 4:32:01
  20. 扒开伪装医用面膜，翻六倍价格宰客，小姐姐注意了！

    原标题：扒开伪装医用面膜，翻六倍价格宰客，小姐姐注意了！扒开伪装医用面膜，翻六倍价格宰客！当行业里的某一品项火爆了，就会有很多商家蹭热度，装逼忽悠，最近火爆朋友圈的医用面膜，被沾上了污点，到底怎么回事呢？ “比普通面膜安全、效果好！痘痘、痘印、敏感肌都能用…...

    2024/4/27 23:24:42
  21. 「发现」铁皮石斛仙草之神奇功效用于医用面膜

    原标题：「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势： 1、铁皮石斛：自唐宋以来，一直被列为皇室贡品，铁皮石斛生于海拔1600米的悬崖峭壁之上，繁殖力差，产量极低，所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...

    2024/4/28 5:48:52
  22. 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者

    原标题：丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司，专注美业21年，其旗下品牌： 「圣茵美」私密荷尔蒙抗衰，产后修复 「圣仪轩」私密荷尔蒙抗衰，产后修复 「花茵莳」私密荷尔蒙抗衰，产后修复 「丽彦妆」专注医学护…...

    2024/4/30 9:42:22
  23. 广州械字号面膜生产厂家OEM/ODM4项须知！

    原标题：广州械字号面膜生产厂家OEM/ODM4项须知！广州械字号面膜生产厂家OEM/ODM流程及注意事项解读： 械字号医用面膜，其实在我国并没有严格的定义，通常我们说的医美面膜指的应该是一种「医用敷料」，也就是说，医用面膜其实算作「医疗器械」的一种，又称「医用冷敷贴」。 …...

    2024/4/30 9:43:22
  24. 械字号医用眼膜缓解用眼过度到底有无作用？

    原标题：械字号医用眼膜缓解用眼过度到底有无作用？医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料，含70%以上的水分。体表皮肤温度传导到本产品的凝胶层，热量被凝胶内水分子吸收，通过水分的蒸发带走大量的热量，可迅速地降低体表皮肤局部温度，减轻局部皮肤的灼…...

    2024/4/30 9:42:49
  25. 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示，配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...

    解析如下&#xff1a;1、长按电脑电源键直至关机&#xff0c;然后再按一次电源健重启电脑&#xff0c;按F8健进入安全模式2、安全模式下进入Windows系统桌面后&#xff0c;按住“winR”打开运行窗口&#xff0c;输入“services.msc”打开服务设置3、在服务界面&#xff0c;选中…...

    2022/11/19 21:17:18
  26. 错误使用 reshape要执行 RESHAPE，请勿更改元素数目。

    %读入6幅图像&#xff08;每一幅图像的大小是564*564&#xff09; f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...

    2022/11/19 21:17:16
  27. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...

    win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面&#xff0c;在等待界面中我们需要等待操作结束才能关机&#xff0c;虽然这比较麻烦&#xff0c;但是对系统进行配置和升级…...

    2022/11/19 21:17:15
  28. 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...

    有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows&#xff0c;请勿关闭计算机”的提示&#xff0c;要过很久才能进入系统&#xff0c;有的用户甚至几个小时也无法进入&#xff0c;下面就教大家这个问题的解决方法。第一种方法&#xff1a;我们首先在左下角的“开始…...

    2022/11/19 21:17:14
  29. win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...

    置信有很多用户都跟小编一样遇到过这样的问题&#xff0c;电脑时发现开机屏幕显现“正在配置Windows Update&#xff0c;请勿关机”(如下图所示)&#xff0c;而且还需求等大约5分钟才干进入系统。这是怎样回事呢&#xff1f;一切都是正常操作的&#xff0c;为什么开时机呈现“正…...

    2022/11/19 21:17:13
  30. 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...

    Win7系统开机启动时总是出现“配置Windows请勿关机”的提示&#xff0c;没过几秒后电脑自动重启&#xff0c;每次开机都这样无法进入系统&#xff0c;此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一&#xff1a;开机按下F8&#xff0c;在出现的Windows高级启动选…...

    2022/11/19 21:17:12
  31. 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...

    有不少windows10系统用户反映说碰到这样一个情况&#xff0c;就是电脑提示正在准备windows请勿关闭计算机&#xff0c;碰到这样的问题该怎么解决呢&#xff0c;现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法&#xff1a;1、2、依次…...

    2022/11/19 21:17:11
  32. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...

    今天和大家分享一下win7系统重装了Win7旗舰版系统后&#xff0c;每次关机的时候桌面上都会显示一个“配置Windows Update的界面&#xff0c;提示请勿关闭计算机”&#xff0c;每次停留好几分钟才能正常关机&#xff0c;导致什么情况引起的呢&#xff1f;出现配置Windows Update…...

    2022/11/19 21:17:10
  33. 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...

    只能是等着&#xff0c;别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚&#xff0c;只能是考虑备份数据后重装系统了。解决来方案一&#xff1a;管理员运行cmd&#xff1a;net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...

    2022/11/19 21:17:09
  34. 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办？

    原标题&#xff1a;电脑提示“配置Windows Update请勿关闭计算机”怎么办&#xff1f;win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢&#xff1f;一般的方…...

    2022/11/19 21:17:08
  35. 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机...

    关机提示 windows7 正在配置windows 请勿关闭计算机 &#xff0c;然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;关机提示 windows7 正在配…...

    2022/11/19 21:17:05
  36. 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...

    钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间：2020-04-20 22:24:19　浏览次数：729次 区域： 南阳 > 卧龙 列举网提醒您：为保障您的权益，请不要提前支付任何费用！ 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于：钉钉，外勤365，红圈通，企业微信和…...

    2022/11/19 21:17:05
  37. 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”，长时间没反应，无法进入系统的解决方案...

    前几天班里有位学生电脑(windows 7系统)出问题了&#xff0c;具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面&#xff0c;长时间没反应&#xff0c;无法进入系统。这个问题原来帮其他同学也解决过&#xff0c;网上搜了不少资料&#x…...

    2022/11/19 21:17:04
  38. 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办？...

    本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法&#xff0c;并在最后教给你1种保护系统安全的好方法&#xff0c;一起来看看&#xff01;电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中&#xff0c;添加了1个新功能在“磁…...

    2022/11/19 21:17:03
  39. 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败，正在还原更改，请勿关闭计算机怎么办...

    许多用户在长期不使用电脑的时候&#xff0c;开启电脑发现电脑显示&#xff1a;配置windows更新失败&#xff0c;正在还原更改&#xff0c;请勿关闭计算机。。.这要怎么办呢&#xff1f;下面小编就带着大家一起看看吧&#xff01;如果能够正常进入系统&#xff0c;建议您暂时移…...

    2022/11/19 21:17:02
  40. 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以...

    配置windows update失败 还原更改 请勿关闭计算机&#xff0c;电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;配置windows update失败 还原更改 请勿关闭计算机&#x…...

    2022/11/19 21:17:01
  41. 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...

    不知道大家有没有遇到过这样的一个问题&#xff0c;就是我们的win7系统在关机的时候&#xff0c;总是喜欢显示“准备配置windows&#xff0c;请勿关机”这样的一个页面&#xff0c;没有什么大碍&#xff0c;但是如果一直等着的话就要两个小时甚至更久都关不了机&#xff0c;非常…...

    2022/11/19 21:17:00
  42. 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...

    当电脑出现正在准备配置windows请勿关闭计算机时&#xff0c;一般是您正对windows进行升级&#xff0c;但是这个要是长时间没有反应&#xff0c;我们不能再傻等下去了。可能是电脑出了别的问题了&#xff0c;来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...

    2022/11/19 21:16:59
  43. 配置失败还原请勿关闭计算机,配置Windows Update失败，还原更改请勿关闭计算机...

    我们使用电脑的过程中有时会遇到这种情况&#xff0c;当我们打开电脑之后&#xff0c;发现一直停留在一个界面&#xff1a;“配置Windows Update失败&#xff0c;还原更改请勿关闭计算机”&#xff0c;等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢&#xff0…...

    2022/11/19 21:16:58
  44. 如何在iPhone上关闭“请勿打扰”

    Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...

    2022/11/19 21:16:57