HTML+CSS

HTML

HTML页面结构

<!DOCTYPE html>:放在HTML文档最前面的位置 加上之后就会按照W3CHTML5标准解析渲染页面
<html lang="en">:根元素 包含整个网页的内容
<head>:对用户不可见 其中包含例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等
<meta charset="UTF-8">:定义文档字符编码
<meta name="keywords" content="HTML">:关键字
<meta name="description" content="HTML">:页面描述
<link>:引入的外部资源的链接
<title>:标题
<style>:页面样式
<script>:可执行脚本 有两个属性:
(1)defer:立即下载,延迟执行,表示脚本可以等到dom被完全解析和显示之后再执行,只对外部脚本有效。有defer属性的脚本会阻止DOMContentLoaded事件,直到脚本被加载并且解析完成。
(2async:立即下载脚本,且不妨碍其他操作,比如在下载其他资源或者加载其他脚本的时候,只对外部脚本有效。
<body>:包含能够被用户访问到的内容 包括文本 图像 视频 游戏 音频等

HTML5新特性

  1. 语义化标签
    在这里插入图片描述
  2. 新增input标签的输入类型type的取值 提供了更好的输入控制和验证。
    在这里插入图片描述
  3. 新增表单元素
    在这里插入图片描述
  4. 新增表单属性
    在这里插入图片描述
  5. 新增<auidio> <video>标签播放音频 视频
  6. 新增<canvas>标签用以绘图 标签只是图形容器 必须使用脚本来绘制图形
  7. 新增<svg>标签用以绘图 SVG是指可伸缩的矢量图形 是一种使用 XML 描述 2D 图形的语言
  8. 新增Geolocation(地理定位)接口用于定位用户的位置
  9. 任何元素都可以拖放
  10. 新增Web Worker标准,允许JavaScript脚本可以创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。
  11. 新增localStorage和sessionStorage 使得本地可以存储用户的浏览数据
  12. 新增WebSocket协议 websocket是一种在单个TCP连接上进行全双工通讯的协议 浏览器和服务器只需要一次握手,就可以进行持续的,双向的数据传输,因此能节约资源和带宽 常用于实时性要求高的场景。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

H标签-P标签-HR标签

H系列标签(header1~header6)

  1. 作用:给文本添加标题语意
  2. 格式:<h1>xxxx</h1>
  3. 属性:left right center justify可改变标题居中靠右靠左
  4. 注意:
    ①用来给文本添加标题语意的 而不是用来修改文本的样式
    ②H标签一共有6个 从H1到H6 超过H6则无效
    ③被H系列标签包裹的内容会独占一行
    ④在H系列标签中 H1字体最大 H6字体最小
    ⑤在企业开发中 一定要慎用H系列标签 特别是H1标签 一般情况下一个界面只能有一个H1标签(和SEO有关)

P标签

  1. 作用:告诉浏览器哪些文字是一个段落
  2. 格式:<p>xxxxx</p>
  3. 注意:在浏览器中会单独占一行

Hr标签

  1. 作用:在浏览器上显示一条分割线
  2. 格式:<hr/>或<hr>前者按照XHTML规范来编写的 后者按着HTML规范来编写 由于HTML5兼容HTML和XHTML 所以两者都可以用
  3. 注意:在浏览器中单独占据一

IMG标签

  1. 作用:告诉浏览器我们需要显示一张图片
  2. 格式:<img src="">
    其中src=""是img标签的属性 用来告诉img标签需要显示的图片地址是什么
  3. 注意:
    ①img标签不会独占一行
    ②如果我们指定了图片的宽度和高度 可能会导致图片变形 如果又想指定高度宽度 又不想让图片变形 我们可以只指定高度或宽度 只要指定了宽度 系统会自动计算出高度 只要指定了高度 系统会自动计算出宽度 并且都是等比拉伸 不变形
  4. img标签中别的属性:
    ①width:宽度
    ②height:高度
    以上两个属性的作用:告诉img标签将来需要显示的图片有多宽多高 如果没有用这两个属性 则系统使用图片默认的高和宽 如果用了这两个属性 系统就按照指定的宽高来显示
    ③title:告诉浏览器 当鼠标悬停在图片上时 需要显示什么内容
    ④alt:用于告诉浏览器 当需要显示的图片找不到时显示什么内容

Br标签

  1. 作用:换行
  2. 格式:<br>
  3. 注意:
    ①多个br标签可以连续使用 使用了多少个br标签就会换多少行
    ②由于HTML的作用就是用来给文本添加语意 而br标签的语意是不另起一个段落换行 而在企业开发中一般情况下需要换行都是因为需要另起一个段落 所以在企业开发中 很少使用br标签 高级搜索用的br 换行 但不另起一个段落
    ③可以用p标签换行 p标签是另起一行的换行

路径问题

想给scr属性赋值有两种方式:

  1. 通过相对路径赋值
    相对路径:每次都从.html文件所在的文件夹开始查找
    a.同级:图片和.html文件存储在同一个文件夹中 格式:<img src="QRCode.jpg">含义:在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片
    b.下级: 存储图片的文件夹和.html文件在同一个文件夹中 例如. html文件和images文件夹在同一个文件夹 是同级关系 而QRCode.jpg在images文件夹里 格式:<img src="images/QRCode.jpg"> 含义:在.html文件所在的文件夹中找到名称为images的文件夹 然后再在images文件夹中找到名称叫做QRCode.jpg的图片
    c.上级:存储图片的位置和存储代码的文件夹在同一个文件夹中 例如.html文件存储在名为代码的文件夹里 代码文件夹和QRCode.JPG位于同一个文件夹 格式:<img src="../QRCode.jpg">含义:在.html文件所在的文件夹中找到这个文件夹的上一级文件夹 再在上一级文件夹中找到名为QRCode.jpg 其中…/表示从当前的位置找到上一级文件夹
  2. 通过绝对路径赋值
    绝对路径:每次都从指定的盘符开始查找 格式:
    注意:
    ①路径中不要出现中文 否则可能出现位置问题
    ②如果通过相对路径来指定照片 就不能跨盘符
    ③以后企业开发中如果需要编写路径 统一使用反斜杠/,不要用正斜杠\ 因为将来我们开发的程序可能会部署到其他操作系统的服务器上 而在其他操作系统中路径都是/ 所以如果你写的是\ 可能会引发问题
    ④在企业开发中 一般不使用绝对路径 因为可移植性不好 也就是说将你写好的代码拷贝给别人 别人可能就不能运行了

a标签

  1. 作用:实现页面与页面之间的跳转
  2. 格式:<a hrcf="指定需要跳转的目标界面(目的地链接)">需要展现给用户查看的内容(点击这个内容才可以跳转)</a>
  3. 注意:①a标签不仅可以让文字点击 还可以让图片也能够被点击 例如:<a hrcf="指定需要跳转的目标界面(目的地链接)"><img src-"QRCode.jpg"></a>
    ②一个a标签必须有一个href属性 否则a标签不知道要跳转到什么地方
    ③如果通过a标签的href属性指定一个URL地址 那么必须在前面加上http://或https://
    ④a标签的href属性除了可以指定网络地址以外 还可以指定本地地址 例如:<a hrcf="test/demo/10路径练习.html">10路径练习.html</a>
    就会跳转到test文件下的demo文件夹下的10路径练习.html链接下的内容(相对路径的方法 test文件和这个使用a标签的.html文件在同一个文件夹 同级的关系)
    a标签中有一个叫做target属性 专门用于控制如何跳转 该属性又有两个属性:
    _self:当前选项卡跳转 不新建界面跳转 默认为_self
    例如:<a hrcf="指定需要跳转的目标界面(目的地链接)" target="_self">需要展现给用户查看的内容(点击这个内容才可以跳转)</a>
    _blank:在新的选项卡中跳转 也就是新建界面跳转
    ⑥标签还有一个title属性 该属性和img标签中的title一样 都是用来控制鼠标悬停时显示的提示文本的 例如: <a hrcf="指定需要跳转的目标界面(目的地链接)" target="_self" title="提示:会跳转哦">需要展现给用户查看的内容(点击这个内容才可以跳转)</a>

base标签

  1. 作用:统一的指定当前网页中所有的超链接(a标签)需要如何打开
  2. 注意点:
    ①base标签必须写在head标签的开始标签和结束标签之间 <base target="_blank">
    ②如果既在base中指定了target又在a标签中指定了target 那么浏览器会按照a标签中指定的来执行

假链接

  1. 假链接:点击之后不会跳转的链接 在企业开发前期 其他界面都没写出来 我们就不知道应该跳转到什么地方 所以就只能使用假链接来代替 当项目后期其他界面都已经完成时再将假链接替换为真链接
  2. 假链接格式:①# ②javascript:
  3. 区别:前者的假链接会自动回到网页顶部 后者的假链接不会自动回到网页顶部
    有这些网页有"回到顶部"的功能 就是用的#假链接

锚点

  1. 要想通过a标签跳转到指定的位置 那么必须告诉a标签一个独一无二的身份证号码 这样a标签才能在当前界面中找到需要跳转到的目标位置
  2. 如何给HTML中的标签绑定一个 独一无二的身份证号码呢 在HTML中 每一个标签都有一个名称叫做id的属性 这个属性就是用来给标签指定一个独一无二的身份证号码的
  3. 所以要想实现通过a标签跳转到指定的位置分两步:1给目标位置的标签添加一个id属性 然后指定一个独一无二的值2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
  4. 格式:<a href="#center">跳转到中部</a>
    在href的假链接中添加需要跳转到的目标标签对应的id属性
    <h2 id="center">我是中部</h2>
    先给目标位置的标签添加id属性 给标签添加属性 都是在开始标签中添加属性 center为id属性的名称 自己随便取
  5. 注意:
    ①通过a标签跳转到指定的位置 是没有过度动画的 是直接一下子就跳转到了指定位置
    ② a标签不仅可以跳转到当前界面的指定位置 还可以跳转到其他界面的时候直接跳转到其他界面的指定位置 例如:假设锚点测试.html文件和锚点.html文件位于同一个文件夹 是同级关系 在锚点.html文件中写程序 要求点击“跳转到锚点界面”能跳转到锚点测试.html文件中“我是锚点测试界面333”内容处:先在锚点.html文件中设置跳转链接:<a href="锚点测试界面.html">跳转到锚点测试界面</a> 再在目标位置(锚点测试.html文件的“我是锚点测试界面333”内容)的标签添加id属性:<h2 id="bottom">我是锚点测试界面333</h2>再指定位置:<a href="锚点测试界面.html#bottom">跳转到锚点测试界面</a> 即在目标链接后面写#和id名称

列表

无序列表

  1. 列表标签的作用:给一堆数据添加列表语意 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体
  2. 分类:无序列表unordered list(最常用) 有序列表ordered list(最不常用) 定义列表definition list(第二常用)
  3. 无序列表作用: 给一堆数据添加列表语意 并且这一堆数据中所有的数据都没有先后之分
  4. 什么叫有先后之分:排行榜
    什么叫没有先后之分:中国有哪些城市
  5. 无序列表格式:
<ul>
	<li>需要显示的条目内容1</li>
	<li>需要显示的条目内容2</li>
	......
</ul>

li是list item列表条目的缩写

  1. 注意:
    ①ul标签是用来给一堆数据添加列表语意的 而不是用来给他们添加小圆点的
    ②ul标签和li标签是一个整体 是一个组合 所以一般情况下ul标签和li标签都是一起出现 不会单个出现 也就是说不会单独使用一个ul标签或者单独使用一个li标签 都是结合在一起使用
    ③由于ul标签和li标签是一个组合 所以ul标签中不推荐包含其他标签 即 在ul标签中只会看到li标签
  2. 无序列表应用场景:新闻列表 商品列表 导航条
  3. 前面我们说过ul中最好只放li标签 但是在企业开发中 li标签中的内容可能会很复杂 所以我们可以继续在li标签中添加其他的标签来丰富我们的界面 ul中只能有li li中可以有其他 甚至可以添加ul标签来丰富界面 也就是说 ul中有li li中又可以有ul

有序列表

  1. 有序列表的作用: 给一堆数据添加列表语意 并且这一堆数据中所有的数据都有先后之分
  2. 有序列表格式:
<ol>
	<li>需要显示的条目内容1</li>
	<li>需要显示的条目内容2</li>
	......
</ol>
  1. 其他用法同无序列表

定义列表

  1. 定义列表:给一堆数据添加列表语意 先通过dt标签定义列表中的所有标题 然后再通过dd标签给每个标题添加描述信息
  2. 定义列表的格式:
<dl>
	<dt>列表中的标题1</dt>
	<dd>描述1</dd>
	<dt>列表中的标题2</dt>
	<dd>描述2</dd>
	......
</dl>

dt是definition title定义标题的缩写 所以用来定义列表中的标题
dd是definition description定义描述的缩写 所以用来定义标题对应的描述的

  1. 定义列表的应用场景:做网站尾部的相关信息 做图文混排
  2. 注意:
    ①和ul/ol一样 dl和dt/dd是一个整体 所以他们一般情况下不会单独出现 都是一起出现
    ②和ul/ol一样 由于dl和dt/dd是一个组合标签 所以dl中建议只放dt和dd标签
    ③一个dt可以没有对应的dd 也可以有多个对应的dd 但是无论有或者没有dd都不推荐使用 推荐使用一个dt对应一个dd
    ④和li标签一样 当需要丰富界面时 我们可以在dt和dd标签中继续添加其他标签

表格标签

  1. 表格标签:用来给一堆数据添加表格语意 其实表格是一种数据的展现形式 当数据量非常大的时候 表格这种展现形式被认为是最为清晰的一种展现形式
  2. 表格标签格式:
<table>
	<tr>
		<td>需要显示的内容</td>
	</tr>
</table>

table代表整个表格 即一对table标签就是一个表格
tr标签代表整个表格中的一行数据 也就是说一对tr标签就是表格中的一行
td标签代表表格中一行中的一个单元格 即一对td标签就是一行中的一个单元格

  1. 注意:
    ①表格标签有一个边框属性 这个属性决定了边框的宽度 默认情况下这个属性的值是0 所以看不到边框 <table border="1">设置边框属性为1 显示边框
    ②表格标签和列表标签一样 他是一个组合标签 所以table/tr/td要么一起出现要么都不出现
  2. 表格标签的属性:
    宽度和高度的属性:可以给table标签和td标签使用 不能给tr标签使用
    表格的宽度和高度默认是按照内容的尺寸来调整的 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
    如果给td标签设置width/height属性的方式来手动指定表格的高度和宽度 会修改当前单元格的宽度和高度 不会影响整个表格的宽度和高度
    ②水平对齐和垂直对齐的属性:水平对齐可以给table标签、tr标签、td标签使用 垂直对齐只能给tr标签和td标签使用 不能给table标签使用
    给table标签设置align属性 可以控制表格在水平方向的对齐方式
    给tr标签设置align属性 可以控制当前行中所有单元格内容的水平方向的对齐方式
    给td标签设置align属性 可以控制当前单元格中内容在水平方向的对齐方式
    如果td中设置了align属性 tr中也设置了align属性 那么单元格中的内容会按照td中设置的来对齐
    给tr标签设置valign属性 可以控制当前行中所有单元格中的内容在垂直方向的对齐方式
    给td标签设置valign属性 可以控制当前单元格中的内容在垂直方向的对齐方式
    如果td中设置了valign属性 tr中也设置了valign属性 那么单元格中的内容会按照td中设置的来对齐
    ③外边距和内边距的属性:只能给table标签使用
    外边距:单元格与单元格之间的距离 默认情况下单元格与单元格之间的外边距的距离是2px 可以通过cellspacing属性来设置
    内边距:单元格的边框和单元格内的文字的间隙 默认情况下内边距为1 可以通过cellpadding属性来设置
细线边框
  1. 在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的 其实他是将两条线合并为了一条线 所以看上去很不舒服
  2. 细线表格的制作方式:①给table便签设置bgcolor="black"②给(所有)tr标签设置bgcolor="white"③给table便签设置cellspacing=“1px”
  3. table标签和tr标签和td标签都支持bgcolor属性
表格中的其他标签
  1. 表格标签中的caption标签用来专门设置表格的标题 使表格的标题位于表格中间 只要将标题写在caption标签中 那么标题就会自动相对于表格的宽度居中
<table>
<caption>
	<h2>标题</h2>
</caption>

注意:①caption标签一定要写在table标签中 否则无效
②caption 一定要紧跟在table标签后面

  1. 标题单元格标签:在表格标签中提供了一个标签专门用来存储每一列的标题 这个标签叫做th标签 只要当前列的标题存储在这个标签中就会自动居中加粗文字 把td换成th 其实表格中有两种单元格 一种是td 一种是th td是专门用来存储数据的 th是专门用来存储当前列的标题的
表格的结构
  1. 由于表格中存储的数据比较复杂 为了方便管理和阅读 自己提升语意 我们可以对表格中存储的数据进行分类 表格中存储的数据可以分为4类:
    ①表格的标题
    ②表格的表头信息(每一列的标题)
    ③表格的主题信息
    ④表格的页尾信息
  2. 表格的格式:
<table>
	<caption>表格的标题</caption>
	<thead>
		<tr>
			<th>每一列的标题</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>数据</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>数据</td>
		</tr>
	</tfoot>
</table>

caption的作用:指定表格的标题
thead的作用:指定表格的表头信息
tbody的作用:指定表格的主体信息
tfoot的作用:指定表格的附加信息

  1. 注意:
    ①如果我们没有编写tbody 系统会自动给我们添加tbody
    ②如果指定了thead和tfoot 那么在修改整个表格的高度时thead和tfoot有自己默认的高度 不会随着表格的高度变化而变化
表格合并
  1. 水平方向上的单元格合并:可以给td标签添加一个colspan属性 来指定把某一个单元格当做多个单元格来看待 例如:<td colspan="2"></td> 含义:把当前单元格当做两个单元格来看待
    注意点:1由于把某一个单元格当做了多个单元格来看待 所以就会多出一些单元格 所以需要删掉一些单元格才能正常显示
    ②单元格合并永远都是向后或者向下合并 而不能向前或者向上合并
  2. 垂直方向上的单元格合并:可以给td标签设置一个rowspan属性 来指定把某一个单元格当做多个单元格来看待(垂直方向)例如:<td rowspan="2"></td> 含义:把当前单元格当做两个单元格来看待

表单标签

  1. 什么是表单:专门用来收集用户信息的
  2. 什么是元素: 在HTML中 标签/标记/元素都是指HTML中的标签 例如:<a>就是a标签/a标记/a元素
  3. 什么是表单元素:表单元素也是HTML中的一些标签 只不过这些标签比较特殊 在浏览器中所有的表单标签都有特殊的外观和默认的功能
  4. 表单的格式:
<form>
	<表单元素>
</form>
  1. 常见的表单元素:input标签 input标签有个type属性 这个属性有很多类型的取值 取值不同就决定了input标签的功能和外观 通过value为输入框设置默认值
<form>
	<!--明文输入框-->
	账号:<input type="text"><br>
	<!--暗文输入框-->
	密码:<input type="password"><br>
</form>
<!--给输入框设置默认值-->
账号:<input type="text" value="lnj"><br>
密码:<input type="password" value="123"><br>
  1. 单选框:
    注意:
    ①默认情况下单选框不会互斥 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性 然后name属性还必须设置相同的值
    ②要想让单选框默认选中某一个框子 那么可以给input标签添加一个check属性

    ③在HTML中 如果属性的取值和属性的名称一样 可以只写一个 例如:checked="checked"可以写成checked 但是在XHTML中必须写上取值 所以在企业开发中建议大家不要省略取值 另外 如果单选框写了多个checked 默认选中最后一个checked
    例1:性别:
<input type="radio" name="xx" ><input type="radio" name="xx" ><input type="radio" name="xx" checked>保密

例2:性别:

<input type="radio" name="xx" ><input type="radio" name="xx" checked><input type="radio" name="xx" checked>保密

默认选中保密

  1. 在单选框和多选框中 所有的项目的name必须一致
  2. 在表单标签中 除了按钮标签以外的标签 都可以通过value来指定需要提交到服务器的数据
    例如:
<input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female"><input type="radio" name="gender" checked value="yao">保密
<form>
	<fieldset>
		<legend>边框标题</legend>
		height:<input type="text"/>
		height:<input type="text"/>
	</fieldset>
</form>

在form标签后写fieldset标签可加边框
legend标签是给边框加标题:
10. type的其他取值

<!--1可以自动校验输入的内容是否符合邮箱的格式-->
邮箱:<input type="email">
<!--2 可以自动校验输入的内容是否是URL地址-->
域名:<input type="URL">
<!--3输入框只能输入数字-->
电话号码:<input type="number">
<!--4可以通过日历来选择时间-->
时间:<input type="date">
<!--5可以通过取色板来选择颜色-->
颜色:<input type="color">

表单标签-按钮

<!--1定义一个普通按钮-->
<!--作用:配合js完成一些操作-->
<input type="button" value="我是按钮" onclick="alert('lnj')" >
<!--给form标签的input的type类型设置为button value则输入按钮上你想显示的字 onclick是js语言-->

<!--2定义一个图片按钮-->
<!--作用:配合js完成一些操作-->
<input type="image" src="C:\Users\dc16102111\.WebStorm2019.1\config\scratches\images\登陆.png">

<!--3定义重置按钮-->
<!--作用:清空表单中的数据-->
<!--注意点:重置按钮有默认的按钮标题 默认叫做重置 也可以通过value属性来修改默认标题-->
<input type="reset" value="清空">

<!--4定义提交按钮-->
<!--作用:将表单中的数据提升到远程服务器-->
<!--注意点:要想把表单中的数据提交到远程服务器 必须满足两个条件:
①告诉表单需要提交到哪个服务器 可以通过form标签的action属性来告诉表单 需要提交到哪个服务器
②告诉表单 表单中哪些数据需要提交 只要设置name属性就会提交
-->
<input type="submit" name="aa"> <br>

<!--5隐藏域的作用:悄悄咪咪的收集用户的一些数据 隐藏域是不会出现在界面中的-->
<input type="hidden" name="cc" value="it666">

<!--6默认情况下文字和输入框是没有关联关系的 也就是说 点击文字输入框不会聚焦
如果想点击文字时让对应的输入框聚焦 那么就需要让文字和输入框进行绑定
绑定的格式:
方法一:
①将文字利用label标签包裹起来
②给输入框添加一个id属性
③在label标签中通过for属性和输入框 中的id进行绑定即可
<label for="account">账号:</label><input type="text" id="account">
-->
<form action="http://baidu.com>
<label for="account">账号:</label><input type="text" id="account"><br>
<label for="pwd">密码: </label><input type="password" id="pwd">
</form>
<!--方法二:-->
<label>账号:<input type="text"></label>

datalist标签

  1. datalist的作用:给输入框绑定待选项
  2. 格式:
<datalist>
	<option>待选项内容</option>
</datalist>
  1. 如何给输入框绑定待选项列表
    ①搞一个输入框
    ②搞一个datalist列表
    ③给datalist列表标签添加一个id
    ④给输入框details添加一个list属性 将datalist的id对应的值赋值给list属性即可
    请输入你的车型:
<input type=" text" list="cars">
<datalist id="cars">
	<option>奔驰</option>
	<option>宝马</option>
	<option>奥迪</option>
	<option>路虎</option>
	<option>宾利</option>
</datalist>

表单标签-非input标签

  1. select标签的作用:定义下拉列表
  2. 格式:
<select>
	<optgroup label="分组名字">
		<option>列表数据</option>
	</optgroup>
</select>

3注意:
①下拉列表不能输入内容 但是可以直接在列表中选择内容
②可以通过给option标签添加一个selected属性来指定列表的默认值
③可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类 label标签用来定义类名

video标签

  1. 什么是video标签:播放视频
  2. 格式:
<video src="">
</video>
  1. video标签的属性:
    src:告诉video标签需要播放的视频地址
    autoplay:告诉video标签是否需要自动播放视频
    controls=告诉video标签是否需要显示控制条
    poster:告诉video标签视频没有播放之前显示的占位图片
    loop:一般用于做广告视频 用来告诉video标签视频播放完毕之后是否需要循环播放
    preload:预加载视频 但是需要注意preload和autoplay相冲突 如果设置了autoplay属性 那么preload属性就会失效
    muted:静音
    width/height:和img标准中的一模一样
    例如:<video src=images/sb.webm" autoplay="autoplay" loop="loop" muted="muted" width="800px"></video>
  2. video标签的第二种格式:
<video>
	<source src="" type=""></source>
	<source src="" type=""></source>
</video>

由于视频数据非常重要 所以五大浏览器厂商都不愿意支持别人的视频格式 所以导致了没有一种视频格式是所有浏览器都支持的
w3c为了解决这个问题 推出了第二种视频格式 video标签的第二种格式存在的意义就是为了解决浏览器适配的问题
video元素支持三种视频格式 我们可以把这三种视频格式通过source标签指定给video标签 那么以后当浏览器播放视频时
他就会从这三种中选择一种自己支持的格式来播放

<video>
	<source src="images/sb.webm" type="video/webm"></source>
	<source src="images/sb.mp4" type="video/mp4"></source>
	<source src="images/sb.ogg" type="video/ogg"></source>
</video>
  1. 注意:当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式 但是显然所有浏览器都通过video标签播放视频还有一个前提条件:浏览器必须支持HTML5标签 否则同样无法播放 在过去的一些浏览器是不支持HTML5标签的 所以为了让过去的一些浏览器也能通过video标签播放视频 以后我们可以通过js中名叫html5media的框架来实现

audio标签

  1. audio标签:播放音频
  2. 格式:
<audio src="">
</audio> 
或者
<audio>
	<source src="" type="">
</audio>

例1:
<audio src="images/yinyue.MP3" autoplay="autoplay" controls="controls">
</audio>
例2:
<audio autoplay="autoplay" controls="controls">
	<source src="images/yinyue.MP3" type="audio/MP3">
</audio>
  1. 注意:audio标签和video标签的使用基本一样 video中能够使用的属性在audio标签中大部分都能使用 而且功能都一样
    只不过有三个属性不能用:height/width/poster

详情和概要标签

  1. 什么是详情和概要标签:利用summary标签来描述概要信息 利用details标签来描述详情信息
    默认情况下折叠显示 想看见详情必须点击
  2. 格式:
<details>
	<summary>概要信息</summary>
	详情信息
</details>

marquee标签

  1. 什么是marquee标签:跑马灯 可以理解为lled灯上面的字滚动的样式
  2. 格式:<marquee>内容</marquee>
    注意点:marquee标签不是w3c推荐的标签 在w3c官方文档中也无法查询到 但是各大浏览器对这个标签的支持非常好
  3. 属性:
    ①direction:设置滚动方向 left(默认 从右向左滚动)/right(从左向右滚动)/up(从下向上滚动)/down(从上向下滚动)

被废弃的标签

  1. 为什么HTML中有些标签被废弃了:因为当前HTML中的标签只有一个作用 就是用来添加语意 而早期的HTML标签中有一部分标签是没有语意的 有一部分标签是用来修改样式的 所以这部分标签被淘汰了 比如:<br>/<hr>/<font>修改文字样式/<b>/<u>/<i>/<s>这四个标签都是没有语意的 都是用来修改样式的
    b(bold):加粗文本 没有任何语意
    u(underlined):给文本添加下划线 没有任何语意
    i(italic):将文本倾斜 没有任何语意
    s(strikethrough):给文本添加删除线 没有任何语意
  2. 注意点:以后再企业开发中 不到万不得已一定不要使用这些被废弃掉的标签 如果一定要使用 一般情况下都是用来作为CSS的钩子来使用
  3. 在把buis四个标签废弃掉后HTML又推出了四个标签来替代他们:strong替代b ins替代u em替代i del替代s 后推出的这四个标签保留了原来四个的功能 也拥有了语意
    strong语意:定义重要性强调的文字(语意比em强调的重)
    ins 语意(inseted):定义插入的文字
    em语意(emphasized):定义强调的文字
    del语意(deleted):定义被删除的文字

字符实体

  1. 在HTML中对空格/回车/tab不敏感 会把多个空格/回车/tab当做一个空格来处理
  2. 什么是字符实体:在HTML中有的字符是被HTML保留的 有的HTML字符在HTML中是有特殊含义的 是不能在浏览器中直接显示出来的 那么这些东西想显示出来就必须通过字符实体
  3. 字符实体:(最后一定要写分号;)
&nbsp;:空格 一个&nbsp;就是一个空格 有多少个&nbsp;就有多少个空格
&lt;:小于符号< less than
&gt;:大于符号> greater than
&copy;:版权符号©

CSS

CSS3新特性

1.新增选择器
在这里插入图片描述

  1. 新增边框属性
    (1)border-radius:创建圆角边框
    (2)box-shadow:为元素添加阴影
    (3)border-image:使用图片来绘制边框
  2. 新增背景相关属性
    (1)background-clip:设定背景颜色或图片的覆盖范围
background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性,等同于border-box

(2)background-origin:当我们设置背景图片时,图片是会以左上角对齐,但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的

background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position
默认情况是padding-box,即以padding的左上角为原点

(3)background-size:调整背景图片的大小,主要用于设定图片本身。

background-size: contain; 缩小图片以适合元素(维持像素长宽比)
background-size: cover; 扩展元素以填补元素(维持像素长宽比)
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小,百分比是相对包 含元素的尺寸

(4)background-break:元素可以被分成几个独立的盒子(如使内联元素span跨越多行),background-break 属性用来控制背景怎样在这些不同的盒子中显示

background-break: continuous; 默认值。忽略盒之间的距离(也就是像元素没有分成多个盒子,依然是一个整体一样)
background-break: bounding-box; 把盒之间的距离计算在内;
background-break: each-box; 为每个盒子单独重绘背景
  1. 新增文字相关属性
    (1)word-wrap
word-wrap: normal:使用浏览器默认的换行
word-wrap: break-all:允许在单词内换行

(2)text-overflow设置或检索当当前行超过指定容器的边界时如何显示,属性有两个值选择:

text-overflow: clip:修剪文本
text-overflow: ellipsis:显示省略符号来代表被修剪的文本

(3)text-shadow:向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色
(4)text-decoration:对文字的更深层次的渲染

text-decoration: text-fill-color: 设置文字内部填充颜色
text-decoration: text-stroke-color: 设置文字边界填充颜色
text-decoration: text-stroke-width: 设置文字边界宽度
  1. 新增颜色表示方式:rgba与hsla
    rgba分为两部分,rgb为颜色值,a为透明度
    hala分为四部分,h为色相,s为饱和度,l为亮度,a为透明度
  2. 新增transition、transform、animation属性
  3. 新增渐变
    (1)linear-gradient:线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

(2)radial-gradient:径向渐变

linear-gradient(0deg, red, green);
  1. 新增flex布局、grid栅格布局等

CSS固定格式

  1. CSS格式:
<style type="text/css">
	标签名称{
		属性名称:属性对应的值;
		......
	}
</style>
<style type="text/css"> style标签有一个type属性 表示style标签中放的是纯文本文件的CSS代码
  1. 注意:
    ①css代码必须写在<style></style>标签中 而<style></style>标签必须写在<head></head>标签中 与title标签是平级关系
    ②style标签中的type属性其实可以不用写 默认就是type=“text/css”
    ③设置样式时必须按照固定的格式来设置 key:value;

文字相关属性

  1. 规定文字样式的属性
    格式:font-style:italic;(倾斜的)或者font-style:normal;(正常的 默认就是正常的)
  2. 规定文字粗细的属性
    格式:font-weight:bold;
    单词取值:bold加粗、bolder比bold加粗更粗、lighter细线 默认就是细线
    数字取值:100-900整百数字
  3. 规定文字大小的属性
    格式:font-size:30px;
    单位:px(像素pixel)
    注意点:通过font-size设置大小一定要带单位 也就是一定要这px
  4. 规定文字字体的属性
    格式:font-family:"楷体"; 默认是宋体
    注意点:
    ①如果取值是中文 需要用双引号或者单引号括起来
    ②设置的字体必须是用户电脑里面已经安装的字体
    ③如果设置的字体不存在 那么系统就会使用默认的字体来显示宋体
    ④如果设置的字体不存在 而我们又不想用默认的字体来显示怎么办:可以给字体设置备选方案 格式:font-family:"字体1","备选方案1"...
    ⑤如果想给中文和英文分别单独设置字体 怎么办:但凡是中文字体 里面都包含了英文 但凡是英文字体 里面都没有包含中文 也就是说 中文字体可以处理英文 英文字体不能处理中文 注意:如果想给界面中的英文单独设置字体 那么英文的字体必须写在中文的后面
    补充:在企业开发中 最常见的字体:中文:宋体simsun/黑体simhei/微软雅黑Microsoft yahei 英文:times new roman/arial
    并不是名称是英文就一定是英文字体 因为中文字体其实都有自己的英文名称 所以是不是中文字体主要看能不能处理中文
  5. 以上内容 缩写格式:font:style weight size family例如:font:italic bold 10px "楷体";
    注意:
    ①在这种缩写格式中 有的属性值可以省略 style和weight可以省略
    ②在这种缩写格式中style和weight的位置可以交换
    ③在这种缩写格式中 有的属性值不可以省略 size和family不可以省略
    ④size和family的位置不能随便乱放 size一定要写在family前面 而且size和family必须写在所有属性后面

文本属性

  1. 文本装饰的属性
    格式:text-decoration:underline;
    取值:
    underline下划线
    line-through删除线
    overline上划线
    none什么也没有 最常见的用法就是用来去掉超链接的下划线
  2. 文本水平对齐的属性
    格式:text-align:right;
    取值:right右/left左/center中
  3. 文本缩进的属性
    格式:text-indent:2em;
    取值:2em其中em是单位 一个em代表缩进一个文字的宽度

颜色控制属性

  1. 在css中如何通过color属性来修改文字颜色:
    格式:color:值;
  2. 取值:
    (1)英文单词:一般情况下 常见的颜色都有对应的英文单词 但是英文单词能够表达的颜色是有限制的 也就是说不是所有的颜色都能通过英文单词来表达
    (2)rgb:
    格式:rgb(x1,x2,x3)
    x1用来设置三原色的光源原件红色显示的亮度
    x2用来设置三原色的光源原件绿色显示的亮度
    x3用来设置三原色的光源原件蓝色显示的亮度
    这其中的每一个数字他的取值是0-255之间 0代表不发光 255代表发光 值越大就越亮
    红色:rgb(255,0,0);
    绿色:rgb(0,255,0);
    蓝色:rgb(0,0,255);
    黑色:rgb(0,0,0);
    白色:rgb(255,255,255);
    在前端开发中 其实不常用黑色 灰色最常用
    只要让红色/绿色/蓝色的值都一样就是灰色 而且如果这三个值越小那么就越偏黑色 值越大就越偏白色 例如:color:rgb(200,200,200);
    (3)rgba:rgba中的rgb和前面讲解的一样 只不过多了一个a 这个a表示透明度 取值是0-1 取值越小越透明 例如:color:rgba(255,0,0,0.2)
    (4)十六进制:本质是rgb 十六进制中 每两位表示一个颜色 例如:#FFEE00中FF表示红色r EE表示绿色g 00表示蓝色b
    (5)十六进制缩写:在css中 只要十六进制的颜色每两位的值都是一样的 那么就可以简写为1位 例如:#FFEE00可以简写为#FE0
  3. 注意:
    ①如果当前颜色对应的两位数字不一样 那么就不能简写 例如:#123456不能简写
    ②如果两位相同的数字不是属于同一个颜色的 也不能简写 例如:122334不能简写
    ③每次当你写好颜色的代码时 旁边都会出现一个颜色方框 点击它可以自己调色 也可以取色

选择器

标签选择器

  1. 什么是标签选择器:根据指定的标签名称 在当前界面中找到所有该名称的标签 然后设置属性
  2. 格式:标签名称{属性:值;}
  3. 注意点:
    ①标签选择器选中的是当前界面中所有的标签 而不能单独选中某一个标签
    ②标签选择器无论标签藏的多深都能选中
    ③只要是HTML的标签就可以作为标签选择器

id选择器

  1. id选择器的作用:根据指定的id名称找到对应的标签 然后设置属性
  2. 格式:
#id名称{
	属性:值;
}
  1. 注意点:
    ①每个HTML标签 都有一个属性叫做id 也就是说每个标签都可以设置id
    ②在同一个界面中id的名称是不可以重复的
    ③在编写id选择器时 一定要在id名称前面加
    ④id名称只能由字母/数字,下划线组成(只能是a-z 0-9)但是不能用数字开头 且不能是HTML便签的名称
    ⑤在企业开发中 如果仅仅是为了设置样式 一般不使用id 因为在前端开发中id是留给js用的

类选择器

  1. 类选择器的作用:根据指定的类名称找到对应的标签 然后设置属性
  2. 格式:
.类名{
	属性:值;
}
  1. 注意:
    ①每个HTML标签都有一个属性叫做class 也就是说每个标签都可以设置类名
    ②在同一个界面中class的名称是可以重复的
    ③在编写class选择器时一定要在class名称前面加上.
    ④类名的命名规范和id名称的命名规范一样
    ⑤类名就是用来给某个特定的标签设置样式的
    ⑥在HTML中每个标签可以同时绑定多个类名 格式:<标签名称 class="类名1 类名2...">
  2. id和class的区别:id相当于人的身份证不可以重复 class相当于人的名称可以重复 并且一个HTML标签只能绑定一个id名称
    一个HTML标签可以绑定多个class名称
  3. id选择器和class选择器的区别:前者以开头 后者以.开头
  4. 在企业开发中 到底用id选择器还是用class选择器:一般情况下id是给js使用的 所以除非特殊情况 否则不要使用id去设置样式
  5. 在企业开发中 一个开发人员对类的使用可以看出这个开发人员的技术水平 一般情况下 在企业开发中 要注重冗余代码的抽取
    可以将一些公共的代码抽取到一个类选择器中 然后让标签和这个类选择器绑定即可

后代选择器

  1. 后代选择器的作用:找到指定标签的所有后代标签
    例1:<div><p></p></div> p标签在div标签里面 p标签就是div标签的后代标签 只要是包含在里面就算后代 儿子孙子重孙子都是后代
    例2:<div><ul><li><p></p></li></ul></div>p标签在div标签里面 p标签是div标签的后代 设置属性
  2. 格式:
标签名称1 标签名称2{
	属性:值;
}

先找到名称叫做标签名称1的标签 然后再在这个标签下面去查找所有名称叫做标签名称2的标签 然后再设置属性

  1. 注意点:
    ①后代选择器必须用空格隔开
    ②后代不仅仅是儿子 也包括孙子 重孙子 只要最终是放到指定标签中的都是后代
    ③后代选择器不仅仅可以使用标签名称 还可以使用其他选择器 比如id class等

子元素选择器

  1. 子元素选择器的作用: 找到指定标签中所有特定的直接子元素 然后设置属性
  2. 格式:
标签名称1>标签名称2{
	属性:值;
}

先找到名称叫做标签名称1的标签 然后在这个标签中查找所有直接子元素(只找指定标签的儿子 而不找他的孙子 重孙子)名称叫做标签名称2的元素

  1. 注意点:
    ①子元素选择器只会查找儿子 不会查找其他被嵌套的标签
    ②子元素选择器之间需要用>符号连接 并且不能有空格
    ③子元素选择器不仅可以使用标签名称 还可以使用其他选择器
    ④子元素选择器可以通过>符号一直延续下去
  2. 后代选择器和子元素选择器的区别:后代选择器使用空格作为连接符号 子元素选择器使用>作为连接符 后代选择器会选中指定标签中所有的特定后代标签 也就是会选中儿子/孙子…只要是被放到指定标签中的特定标签都会被选中 子元素选择器只会选中指定标签中所有的特定的直接标签 也就是只会选中特定的儿子标签
  3. 后代选择器和子元素选择器的共同点:都可以使用标签名称/名称/class名称来作为选择器 都可以通过各自的连接符号一直延续下去 例如:选择器1 选择器2 选择器3 选择器4{}或者:选择器1>选择器2>选择器3>选择器4{}
  4. 在企业开发中如何选择:如果想选中指定标签中的所有特定的标签 那么就使用后代选择器 如果只是想选中指定标签中的所有特定儿子标签 那么就使用子元素选择器

交集选择器

  1. 交集选择器的作用:给所有选择器选中的标签中 相交的那部分标签设置属性
  2. 格式:
选择器1选择器2{
	属性:值;
}
  1. 注意:
    ①选择器和选择器之间没有任何的连接符号
    ②选择器可以使用标签名称/id名称/class名称
    ③企业中不常用
    感觉和后代选择器差不多

并集选择器

  1. 并集选择器的作用:给所有选择器选中的标签设置属性 同级选择器
  2. 格式:选择器1,选择器2{属性:值;}
  3. 注意点:
    ①并集选择器必须使用,来连接
    ② 选择器可以使用标签名称/id名称/class名称

兄弟选择器

  1. 兄弟选择器:只能选中同级关系的下一个的标签 如果是嵌套关系 它的儿子/孙子…是不能选中的
  2. 相邻的兄弟选择器CSS2的作用:给指定选择器后面紧跟的那个选择器选中的标签设置属性
  3. 格式:
选择器1+选择器2{
	属性:值;
}

将选择器1后面紧跟的选择器2设置为某属性
把紧跟在h1后面的标签的内容设置为红色

  1. 注意:
    ①相邻兄弟选择器必须通过+连接
    ②相邻兄弟选择器只能选中紧跟其后的那个标签 不能选中被隔开的标签 例如:
<body>
	<h1>我是标题</h1>
	<a href="#">我是超链接</a>
	<p>我是段落</p>
	<p>我是段落</p>
</body>
<style>
	h1+p{
		color:red;
	}
</style>

紧跟h1标签后的是a标签 所以此语句无法选中p标签

通用兄弟选择器

  1. 通用兄弟选择器的作用:给指定选择器后面的所有选择器选中的所有标签设置属性
  2. 格式:
选择器1~选择器2{
	属性:值;
}

先找到选择器1 然后看选择器1后面有没有选择器2(不管是紧跟的 还是被隔开的 都能被选中)有的话就设置所有选择器2的属性

  1. 注意:
    ①通用兄弟选择器必须用~连接
    ②通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签 无论有没有被隔开都可以被选中

序选择器

  1. 同级别的第几个:
    (1)first-child选中同级别中的第一个标签
    (2)last-child选中同级别中的最后一个标签
    (3)nth-child(m)选中同级别中的第m个标签
    (4)nth-last-child(m){属性:值;} 选中同级别中的倒数第m个标签
    注意:此标签不区分类型 直接去取同级别的第一个 取出来的可能不是p标签
    (5)only-child:选中父元素中唯一的子元素 选中body标签中只有一个子元素的标签的那个唯一子元素
    (6)选中同级别中所有奇数/偶数:nth-child(odd/even){属性:值;}
    (7)nth-child(xn1+y){属性:值;}其中 x y由程序员设定n1和n不是一个n 写代码的时候要把n1写成n 这里为了区分写成了n1 n1是总的指定标签个数 从0到n1依次递增
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>52-序选择器</title>
    <style>
        /*p:first-child{*/
        /*    color: red;!*选中同级别的第一个标签 然后看他是不是p标签 如果是 就改属性 如果不是就不操作*!*/
        /*}*/
        /*将同级别的第一个标签设为红色*/

        /*p:last-child{*/
        /*    color: purple;*/
        /*}*/
    /*
    选中同级别的最后一个标签 然后看他是不是p标签 如果是 就改属性 如果不是就不操作
    此处第一个同级别中最后一个标签是div标签 不是p标签 所以不操作 第二个同级别中最后一个标签是p标签 就操作
    */

        /*p:nth-child(2){*/
        /*    color: red;*/
        /*}*/
    /*    把同级别中第2个p标签设置成红色*/

        /*p:nth-last-child(2){*/
        /*    color: blue;*/
        /*}*/
    /*    把同级别中倒数第2个p标签设置成蓝色*/


        /*p:only-child{*/
        /*    color:red;*/
        /*}*/
    /*    给段落2改颜色*/

    /*    p:nth-child(odd){*/
    /*        color:blue;*/
    /*    }*/
    /*!*把奇数标签的内容改成蓝色*!*/

    /*    p:nth-child(even){*/
    /*        color:red;*/
    /*    }*/
    /*    把偶数标签的内容改成红色*/

       p:nth-child(2n+3){
           color: purple;
       }
        /*有7个p标签 所以n=7 当n=0时 括号里面的值等于3 所以第3个p标签的内容改为紫色 当n=1时 括号里面的值等于5
        所以第5个p标签的内容改为紫色 当n=3时 括号里面的值等于9 所以第9个p标签的内容改为紫色
        */
    </style>
</head>
<body>
<!--<p>我是段落1</p>-->
<!--<p>我是段落2</p>-->
<!--<div>-->
<!--    <p>我是段落3</p>-->
<!--    <p>我是段落4</p>-->
<!--    <p>我是段落5</p>-->
<!--</div>-->

<!--<p>我是段落1</p>     要不要这句都无所谓-->
<!--<div>-->
<!--    <p>我是段落2</p>-->
<!--</div>-->

<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
  1. 同类型的第几个:
    (1)first-of-type选中同级别中同类型的第一个标签
    (2)last-of-type选中同级别中同类型的最后一个标签
    (3)nth-of-type(m){
    属性:值;} 选中同级别中同类型的第m个标签
    (4)nth-last-of-type(m){
    属性:值;}选中同级别中同类型的倒数第m个标签
    (5)only-of-type{
    属性:值;}选中父元素中唯一的元素
    (6)nth-of-type(odd/even){
    属性:值;}选中同类型的某个标签的奇数/偶数标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序选择器2</title>
    <style>
        /*p:first-of-type{    !*取出同级别中的同类型p的第一个*!*/
            /*color:red;
        }*/

        /*p:last-of-type{*/
        /*    color: blue;*/
        /*}*/

        /*p:nth-of-type(2){*/
        /*    color: skyblue;*/
        /*}*/

        /*p:nth-last-of-type(2){*/
        /*    color: purple;*/
        /*}*/

        /*p:only-of-type{*/
        /*    color:red;*/
        /*}*/
    /*    给段落一和段落二改颜色 段落一是body标签(段落一的父元素)中的唯一p元素
          段落二是div标签(段落二的父元素)中的唯一p元素 所以他们两个都要选中
    */

        p:nth-of-type(odd){
            color:red;
        }
    /*    把所有同类型的标签p的奇数/偶数改成红色*/
    </style>
</head>
<body>
<!--<a href="#">我是超链接</a>-->
<!--<p>我是段落1</p>-->
<!--<p>我是段落2</p>-->
<!--<div>-->
<!--    <p>我是段落3</p>-->
<!--    <p>我是段落4</p>-->
<!--    <p>我是段落5</p>-->
<!--</div>-->

<!--<p>我是段落1</p>-->
<!--<div>-->
<!--    <p>我是段落2</p>-->
<!--    <h1>我是标题</h1>-->
<!--</div>-->

<p>我是标题</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是标题</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是标题</p>
<p>我是段落</p>
<p>我是标题</p>
</body>
</html>

属性选择器

  1. 属性选择器:根据指定的属性名称找到对应的标签 然后设置属性
  2. 格式:
    ①[attribute] 的作用:根据指定的属性名称找到对应的标签 然后设置属性
    ② [attribute=value]的作用:找到有指定属性 并且属性的取值等于value的标签 然后设置属性 常用于区分input属性
  3. 属性的取值是以什么开头的:
    [attribute|=value] CSS2
    [attribute^=value] CSS3
    区别:前者只能找到value开头 并且value是被-和其他内容隔开的(只能找到“value-”开头的)后者只要是以value开头的都可以找到 无论有没有被-隔开
  4. 属性的取值是以什么结尾的:
    [attribute$=value] CSS3
    只掌握CSS3 了解CSS2
    属性的取值是否包含某个特定的值:
    [attribute~=value] CSS2
    [attribute*=value] CSS3
    区别:前者只能找到独立的单词 即包含value 而且value是被空格隔开的(只能找到“value ”)后者只要是以value开头的都可以找到 无论有没有被隔开

通配符选择器

  1. 什么是通配符选择器:给当前界面中所有标签设置属性
  2. 格式:
*{属性:值;}
  1. 注意点:由于通配符选择器是设置界面上所有的标签的属性 所以在设置之前会遍历所有的标签 如果当前界面上的标签比较多
    那么性能就会比较差 所以在企业开发中一般不使用通配符选择器

a标签伪类选择器

  1. 我们发现a标签有一定的状态:
    ①默认状态 从未被访问过
    ②被访问过的状态
    ③鼠标长按状态
    ④鼠标悬停在a标签上的状态
  2. a标签的伪类选择器:专门用来修改a标签不同状态的样式的
  3. 格式:
    a:link{};:修改从未被访问过状态下的样式
    a:visited{};:修改被访问过的状态下的样式
    a:active{};:修改鼠标长按状态下的样式
    a:hover{};:修改鼠标悬停在a标签的上的状态的样式
  4. 注意:
    ①a标签的伪类选择器可以单独出现 也可以一起出现
    ②如果一起出现 就有严格的顺序要求:先编写link 再编写visited 再编写hover 再编写active 否则 可能无效 记住爱恨原则 love hate 即 lvha
    ③如果默认状态的样式和被访问过状态的样式一样 那么可以缩写:
    a{};
    后面再写a:hover{};或者其他
    ④在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
    ⑤在企业开发中 和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
    ⑥在企业开发中 和a标签文字/背景相关的都写在伪类选择器中
    ⑦hover这个伪类选择器除了可以用在a标签上 还可以用在其他的任何标签上

伪类选择器

  1. 伪类选择器:专门用来修改特定状态下的特定元素的样式的
  2. 伪类就是开头为冒号的关键字
  3. 伪类选择器:
:last-child
:only-child
:hover
:focus

伪元素选择器

  1. 伪元素选择器的作用:给指定标签的内容的前面/后面添加一个子元素 用于创建一些不在DOM树中的元素,并为其添加样式。
  2. 格式:
    (1)给指定标签的内容的前面添加一个子元素
标签名称::before{
	属性名称:值;
}

(2)给指定标签的内容的后面添加一个子元素

标签名称::after{
	属性名称:值;
}
  1. 伪元素开头为双冒号::
  2. 以后看到水平导航条 要想到用ul和li再加浮动做出来
  3. 想要多个盒子顶部对齐 最简单的方法就是 设置多个盒子同时浮动
::first-line
::first-letter

CSS三大特性

继承性

  1. 继承性:给父元素设置一些属性 子元素也可以使用
  2. 注意:
    ①并不是所有的属性都可以继承 只有以color/font/text/line开头的属性才可以继承
    ②在CSS的继承中不仅仅是儿子可以继承 只要是后代都可以继承
    ③CSS继承性中的特殊性:
    a.a标签的文字颜色和下划线是不能通过继承来更改的
    b.h标签的文字大小是不能通过继承的来更改的 只能直接单独设置h标签的文字大小
  3. 应用场景:一般用于设置网页上的一些共性信息 例如:网页的文字颜色 字体 文字大小等内容

层叠性

  1. 层叠性:CSS处理冲突的能力
  2. 注意点:层叠性只有在多个选择器选中"同一个标签"然后又设置了"相同的属性"才会发生层叠性
  3. CSS全称:cascading styleSheet

优先级

  1. 优先级的作用:当多个选择器选中同一个标签 并且给同一个标签设置相同的属性时 如何层叠就由优先级来确定
  2. 优先级判断的三种方式:
    ①是否是直接选中(间接选中就是继承):如果是间接选中 那么谁离目标标签比较近就听谁的
    直接选中:通过id class p标签 通配符选中的都是
    例如:
<ul>
	<li>
		<p id="identity" class="para">我是段落</p>
	</li>
</ul>

若ul li都设置了某个属性 但是他们的取值不一样 由于li离p最近 所以p的属性收li的影响
②是否是相同选择器选中的:如果都是直接选中 并且是同一个选择器 那么就是谁写在后面就听谁的 例如:在样式中:

p{
	color:blue;
}
p{
	color:red;
}

那么p变成红色
③不同选择器选中:如果不是相同类型的选择器 那么就会按照选择器的优先级来层叠:important>内联>id>类/属性选择器/伪类>标签>通配符>继承>浏览器默认

important标签

  1. 什么是important:用于提升某个直接选中标签的选择器中的某个属性的优先级 可以将被指定的属性的优先级提升为最高
  2. 注意点:
    ①important只能用于直接选中 不能用于间接选中
    ②important只能提升被指定22的属性的优先级 其他的属性的优先级不会被提升
    ③important只能写到属性值分号; 前面
    ④important前面的!不能省略color:red!important;

权重问题

  1. 权重的作用:当多个选择器混合在一起使用时 我们可以通过计算权重来判断谁的优先级最高
  2. 权重的计算规则:
    ①先计算选择器中有多少个id id多的选择器优先级最高
    ②如果id的个数一样 那么再看类名的个数 类名个数多的优先级最高
    ③如果类名的个数一样 那么再看标签名称的个数 标签名称个数多的优先级最高
    ④如果id个数一样 类名个数也一样 标签名称个数也一样 那么就不会继续往下计算了 此时谁写在后面听谁的 即 如果优先级一样 那么谁写在后面就听谁的
  3. 注意:只有选择器是直接选中标签的才需要计算权重 否则一定会听直接选中的选择器的
    在这里插入图片描述

div和span标签

  1. div的作用:一般用于配合CSS完成网页的基本布局
  2. span的作用:用于配合CSS修改网页中一些局部信息
  3. div和span的区别:
    ①前者会单独占领一行 后者不会单独占领一行
    ②div是一个容器级的标签 而span是一个文本级的标签
  4. 容器级标签和文本级标签的区别:容器级标签可以嵌套其他所有的标签 文本级的标签只能嵌套文字/超链接/图片
    容器级标签:div h ul ol dl li dt dd
    文本级标签 :span p buis stong em ins del
  5. 注意:哪些标签是文本级的 哪些标签是容器级的不用刻意去记 在企业开发中一般要嵌套都是嵌套在div中 或者按照组标签进行嵌套

css元素显示模式(display)

  1. HTML将所有的标签分为两类 分别是容器级和文本级 CSS将所有标签分为两类 分别是块级元素和行内元素
  2. 块级元素:会独占一行 所有的容器级标签都是块级元素 p也是块级元素 如果没有设置宽度 那么就会和父元素一样宽 如果设置了宽度 那么就按照设置的来显示 width和height都起作用 内外边距、边框会将其他元素从当前盒子周围推开
  3. 行内元素:不会独占一行 除了p之外的所有文本级标签 如果没有设置宽度 那么默认和内容一样宽 行内元素不能程序员自己设置宽度和高度 width和height都不起作用 垂直方向上 内外边距、边框会起作用 但不会把其他处于行内状态的盒子推开,水平方向上 内外边距、边框会起作用 但会把其他处于行内状态的盒子推开
  4. 行内块级元素: 为了能够让元素既能够不独占一行 又可以设置宽度和高度 那么就出现了行内块级元素 例如:img标签
    块级元素:div h ul ol dl li dt dd p h1-h6
    行内元素:span buis stong em ins del
  5. 如何转换CSS元素显示模式:设置元素的display属性
  6. display取值:
    block:转换为块级元素
    inline:转换为行内元素
    inline-block:转换为行内块级元素

BFC盒模型

  1. BFC:可以理解为一个封闭的大箱子 箱子内部的元素无论如何翻江倒海都不会影响到外部
  2. 如何让一个盒子成为BFC?如何触发BFC模式?
    (1)你是根元素或者你是包含根元素的元素
    (2)元素的float属性不为none 是left或right
    (3)position为absolute或fixed
    (4)display为inline-block table-cell table-caption flex inline-flex
    (5)overflow除visible以外的值 如hidden auto scroll
  3. BFC规则:
    (1)内部的box会在垂直方向上一个接一个的放置
    (2)box垂直方向上的距离由margin决定 属于同一个BFC的两个相邻的BOX的margin会发生重叠(margin重叠原因:上下两个盒子之间会取margin最大的值作为最终margin的值 给其中一个盒子设为BFC即可解决)
    (3)BFC的区域不会与float box重叠:BFC的内容不会与外面浮动元素重叠
    (4)父盒子中有个子元素 父盒子没有设置高度 子元素有高度 如果子元素设置了浮动 那么会导致盒子溢出 如何解决:给父盒子设置BFC
    (5)计算BFC的高度时 浮动元素也参与计算
  4. BFC应用:
    (1)清除内部浮动 当子元素均浮动时 无法撑开父元素 可以让父元素生成BFC
    (2)防止margin重叠:在发生margin重叠的元素外包裹一个BFC父元素
  5. 消除浮动:给父元素设置overflow本质上时让父元素触发BFC模式

盒子模型

  1. 什么是CSS盒子模型: CSS盒子模型仅仅是一个形象的比喻 HTML中所有的标签都是盒子
    在这里插入图片描述
  2. 结论:
    ①在HTML中所有的标签都可以设置高度/宽度(指定可以存放内容的区域) 内边距 边框 外边距
    ②开发者工具下面有一个框 最里面那个蓝色的用来查看宽度高度 绿色用来查看内边距 浅黄色用来查看边框 黄色用来查看外边距将现实生活中的盒子和HTML的盒子模型比较发现CSS盒子模型仅仅是一个形象的比喻 HTML中所有的标签都是盒子
  3. 盒子模型中内容的宽度和高度:通过标签的width/height属性设置的宽度和高度
  4. 盒子模型中元素的宽度和高度:
    宽度=左边框+左内边框+width+右内边框+右边框
    高度=同宽度的计算方法
  5. 盒子模型中元素空间的宽度和高度
    宽度= 左外边距+左边框+左内边框+width+右内边框+右边框+右外边距
  6. 增加了padding之后 元素的宽高也会发生变化 如果增加了padding之后还想保持元素的宽高 那么就必须减去内容的宽高
  7. 增加了border之后 元素的宽高也会发生变化 如果增加了border之后还想保持元素的宽高 那么就必须减去内容的宽高
  8. 两种盒模型:
    (1)W3C的标准盒模型:width=content的宽度
    在这里插入图片描述
    (2)在IE盒子模型:width=content+padding+border三个部分的宽度
    在这里插入图片描述
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
  1. 需求:有一个大盒子 元素宽高是500 有一个小盒子 元素宽高是200 需求将小盒子放到大盒子中 并且让小盒子在大盒子中水平垂直居中:
    (1)如果两个盒子是嵌套关系 那么设置了里面一个盒子顶部的外边距 外面一个盒子也会被顶下来
    (2)如果外面的盒子不想被一起顶下来 那么可以给外面的盒子添加一个边框属性
    (3)在企业开发中 一般情况下 如果需要控制嵌套关系盒子之间的距离 首先考虑padding 其次再考虑margin 因为margin本质上是用于控制兄弟关系之间的间隙的
    (4)在嵌套关系的盒子中 我们可以利用margin:0 auto;的方式来让里面的盒子在外面的盒子中水平居中
    (5)margin:0 auto;只对水平方向有效 对垂直方向无效 可以更改0的值来更改里面的盒子到外面的盒子的垂直距离
  2. text-align:center;margin:0 auto;的区别:
    text-align:center;的作用:设置盒子中存储的文字/图片水平居中
    margin:0 auto;的作用:让盒子自己水平居中

内边距属性padding

  1. 内边距padding:边框和内容的距离
  2. 格式:
    ①非连写
    padding-top::
    padding-right::
    padding-bottom::
    padding-left::
    ②连写
    padding:上 右 下 左 ;
  3. 注意点:
    ①连写时 省略时的规律:
    上 右 下 左→上 右 下:左边的取值和右边一样
    上 右 下 左→上 右:左边的取值和右边一样 上边的取值和下边一样
    上 右 下 左→上:右下左取值和上边一样
    ②给标签设置内边距之后 标签占有的宽度和与高度会发生变化
    ③内边距也会有背景颜色
    ④增加了padding后元素的宽高也会发生变化
    ⑤如果增加了padding之后还想保持元素的宽高 那么就必须减去内容的宽高

外边距margin

  1. 外边距margin:标签与标签之间的距离
  2. 格式:
    ①非连写:
    margin-top:
    margin-right:
    margin-left:
    margin-bottom:
    ②连写:
    margin:上 右 下 左

例如:

<body>
	<span class="box1">我是span</span>
	<span class="box1">我是span</span>
	<span class="box1">我是span</span>
</body>
<style>
	span{
		display:inline-block;
		width:100px;
		height:100px;
		border:1px solid #000;
	}
</style>

用浏览器打开后观察 再把代码改为:

<body>
	<span class="box1">我是span</span><span class="box1">我是span</span><span class="box1">我是span</span>
</body>

用浏览器打开后观察 对比之后发现 HTML把回车当成空格显示了

  1. 注意点:外边距的那部分没有背景颜色
  2. margin重叠:在默认布局的垂直方向上 默认情况下外边距是不会叠加的 会出现合并现象 谁的外边距比较大就听谁的

清空默认边距

  1. 为什么要清空默认边距(内边距和外边距):在企业开发中 为了更好的控制盒子的宽高和计算盒子的宽高等等 所以在企业开发中 编写代码之前第一件事情就是清空默认的边距
  2. 如何清空默认边距:
<style>
*{
	margin:0;
	padding:0;
}
</style>
  1. 注意点:通配符选择器会找到(遍历)当前界面中所有的标签 所以性能不好 所以用以下方法:
<style>
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,field,fieldset,legend,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
</style>
  1. 行高:在CSS中所有的行都有自己的行高
  2. 注意:
    ①行高和盒子的高不是一个概念 行高是一行文字的高度 盒子的高是div标签的高
    文字在行高中默认是垂直居中的 文字在盒子中的高度不是垂直居中的 在企业开发中 我们经常将盒子的高度和行高设置为一样 那么这样就可以保证一行文字在盒子的高度是垂直居中的 简而言之 要想一行文字在盒子中垂直居中 那么只需要设置这行文字的行高等于盒子的高即可
    ③在企业开发中 如果一个盒子中有多行文字 那么就不能使用设置行高等于盒子的高度来实现让文字垂直居中 只能通过设置padding来让文字居中
  3. 设置行高格式:line-height:10px;//单位是px
  4. 在某一个软件里打开一张图片 然后点击窗口右边的T 输入图片中每行开头的文字 用回车隔开每行之间的文字 然后通过改变窗口下方的参数 当输入的文字和图片中的文字完全重合在一起时 该字体 大小 行高即所得
  5. 用软件里的切片工具 选择左边框到左边第一个文字的距离 则会在窗口下方出现距离 这就是内边距的距离 一般左右内边距以左边为准 右边会有误差 上下内边距一般以顶面的内边距为准 由于每一行文字都有行高 所以顶部内边距并不是边框到文字顶部的距离 而是边框到行高顶部的距离 可以让上边框到文字的距离减去行高的距离即顶部内边距的距离
  6. 右边内边距的误差从何而来:因为右边如果放不下一个文字 那么文字就会换行显示 所以文字和内边距之间的距离就有误差

边框属性

  1. 什么是边框:环绕在标签宽度和高度周围的线条
  2. 边框属性的格式:
    ①连写(同时设置四条边的边框):
    border:边框宽度 边框样式 边框颜色;
  3. 注意:
    a.颜色属性可以省略 省略之后默认是黑色
    b.样式属性不能省略 省略之后就看不到边框了
    c.宽度可以省略 省略之后还是可以看到边框
  4. 连写(分别设置四条边的边框):
    border-top:边框宽度 边框样式 边框颜色;
    border-right:边框宽度 边框样式 边框颜色;
    border-bottom:边框宽度 边框样式 边框颜色;
    border-left:边框宽度 边框样式 边框颜色;
  5. 边框样式:连写(分别设置四条边的边框):
    border-width:上 右 下 左;
    border-style:上 右 下 左;
    border-color:上 右 下 左;
    注意:
    a.这三个属性的取值是按照顺时针来赋值的 也就是按照上右下左来赋值的 而不是按照日常生活中的上下左右
    b.这三个属性的取值 省略时的规律:
    上 右 下 左→上 右 下:左边的取值和右边一样
    上 右 下 左→上 右:左边的取值和右边一样 上边的取值和下边一样
    上 右 下 左→上:右下左取值和上边一样
  6. 非连写(方向+要素):
    border-top-width:
    border-top-style:
    border-top-color:#000;
    border-right-width:
    border-right-style:
    border-right-color:#000;
    border-bottom-width:
    border-bottom-style:
    border-bottom-color:#000;
    border-left-width:
    border-left-style:
    border-left-color:#000
  7. 小技巧:
    ①可以先设置整体 再设置局部 根据层叠性 同一个选择器 后面的边框属性会覆盖前面的边框属性
    border-bottom:none;//不要底部边框 以后不想要哪条边框也可以这样设置 none就代表不需要边框

网页布局方式

  1. 网页布局方式:浏览器是如何对网页中的元素进行排版的
  2. 标准流(文档流/普通流)排版方式
    (1)浏览器默认排版方式
    (2)在CSS中将元素分为三类 分别是块级元素/行内元素/行内块级元素
    (3)在标准流中有两种排版方式:一种是垂直排版 一种是水平排版 块级元素采用垂直排版 行内元素/行内块级元素采用水平排版
  3. 浮动流排版方式
    (1)浮动流是一种“半脱离标准流”的排版方式
    (2)浮动流只有一种排版方式 就是水平排版 他只能设置某个元素左对齐或者右对齐
    (3)浮动流中没有居中对齐 也就没有center这个取值 因此在浮动流中不可以使用margin:0 auto;
    (4)取值:
    float:left;//与所在标签的父元素的最左端对齐
    float:right;//与所在标签的父元素的最右端对齐
    float:none;//不左对齐也不右对齐
    (5)在浮动流中是不区分块级元素/行内元素/行内块级元素的 无论是块级元素/行内元素/行内块级元素都可以水平排版 都可以设置宽高
    (6)综上:浮动流中的元素和标准流中的行内块级元素很像
  4. 浮动元素的脱标
    脱标:脱离标准流
    当某一个元素浮动之后(从标准流变为浮动流)那么这个元素看上去就像被标准流中删除了一样
  5. 浮动元素脱标之后会有什么影响:如果前面一个元素浮动了 而后面一个元素没有浮动 那么这个时候前面的一个元素就会盖住后面的一个元素
  6. 浮动元素排序规则:
    (1)相同方向上的浮动元素 先浮动的元素会显示在前面 后浮动的元素会显示在后面 左浮动的话 最左边是最前面 右浮动的话 最右边是最前面
    (2)不同方向上的浮动元素 左浮动会找左浮动 右浮动会找右浮动
    (3)浮动元素浮动之后的位置由浮动元素浮动之前在标准流中的位置来决定 浮动之前在第二行浮动之后也在第二行 哪怕浮动的第一行超级小 他也必须在第二行
  7. 浮动元素贴靠现象:当父元素的宽度足够放下所有浮动元素时 所有浮动元素就会并列显示 当父元素的宽度不够放下所有浮动元素时 放不下的浮动元素会从最后一个开始往前贴 不停往前贴 直到贴到父元素的最左边为止
  8. 浮动元素字围现象:两个同级别的标签 前面一个浮动 后面一个没有浮动 前面浮动的那个就会位于后面没浮动的那个的上面 如果后面没浮动的那个标签里面有文字 那么前面浮动的标签不会盖住字 而字会围绕前面浮动的标签
  9. 字围现象:浮动元素不会盖住没有浮动元素的文字
  10. 在企业开发中 垂直方向上使用标准流 水平方向上使用浮动流
  11. 拿到一个很复杂的界面如何入手:
    (1)从上至下布局
    (2)从外向内布局
    (3)水平方向可以先划分为一左一右 再对左边或者右边进行进一步布局
  12. 在标准流中 内容的高度可以撑起父元素的高度
  13. 在浮动流中 浮动的元素是不可以撑起父元素的高度的
  14. 定位流排版方式

清除浮动方式

  1. 清除浮动方式一:给前面一个父元素设置高度 在企业开发中 我们能不写高度就不写高度 所以这种方式用的很少
  2. 清楚浮动方式二:给父级盒子添加clear属性

clear:

  1. none:默认取值 按照浮动元素的排序规则来排序 左浮动找左浮动 右浮动找右浮动
  2. left:不要找前面的左浮动元素
  3. right:不要找前面的右浮动元素
  4. both: 不要找前面的左浮动元素和右浮动元素
  1. 注意点:当我们给某个元素添加clear属性后 该元素的margin属性会失效
  2. 为什么margin属性会失效:box1中的p全部左浮动后 由于div没有高度 所以div没法被顶起来 所以box2会位于顶部 如果给box2设置了margin-top属性 由于box2前面没有任何元素 所以box2的margin-top是相对于父元素(body)margin-top 在这种情况下 如果父元素没有border属性 会和box2一起被顶下来 假设给父元素设置了边框 如果margin-top的值小于box1中p的高度 在视觉上依旧没有margin-top的效果 因为margin-top的那段距离被浮动的box1中的p挡住了 所以必须要求margin-top的值大于box1中p的高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>91-清除浮动方式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        p{
            float: left;
        }

        .box1{
            background-color: red;
            /*清除浮动方式一:给前面一个父元素设置高度*/
            /*height: 20px;*/
        }

        .box2{
            background-color: green;
            /*3清楚浮动方式二:给后面的盒子添加clear属性*/
            clear: both;
            margin-top: 20px;/*无效*/
        }

        .box1 p{
            width: 100px;
            background-color: blue;
        }

        .box2 p{
            width: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
	<!--div.box1>p{我是文字}*3-->
	<div class="box1">
    	<p>我是文字1</p>
    	<p>我是文字1</p>
    	<p>我是文字1</p>
	</div>
	<div class="box2">
    	<p>我是文字2</p>
    	<p>我是文字2</p>
    	<p>我是文字2</p>
	</div>
</body>
</html>
  1. 清除浮动方式三-隔墙法:在企业开发中不常用隔墙法来清除浮动
    (1)外墙法
    先在两个盒子中间添加一个额外的块级元素 然后给这个额外添加的块级元素设置clear:both;属性
    注意:外墙法可以让第二个盒子使用margin-top属性 但是不可以让第一个盒子使用margin-bottom属性 可以直接设置额外添加的块级元素的高度
    (2)内墙法
    在第一个盒子中所有子元素的最后添加一个额外的块级元素 给这个额外添加的块级元素设置clear:both;属性
    注意:内墙法可以让第二个盒子使用margin-top属性 也可以让第一个盒子使用margin-bottom属性
    (3)外墙法和内墙法的区别:外墙法不能撑起第一个盒子的高度 而内墙法可以撑起第一个盒子的高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>92-清除浮动方式3</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        p{
            float: left;
        }

        .box1{
            background-color: red;
            /*不可以让第一个盒子使用margin-bottom属性*/
            /*margin-bottom: 10px;*/
        }

        .box2{
            background-color: green;
            /*margin-top: 10px;*/
        }

        .box1 p{
            width: 100px;
            background-color: blue;
        }

        .box2 p{
            width: 100px;
            background-color: yellow;
        }

        .wall{
            clear: both;
        }

        #h{
            /*一般不设置第一个盒子的margin-bottom属性 也不给第二个盒子使用margin-top属性 而是设置额外添加的块级元素的高度*/
            height: 20px;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
<!--    内墙法:-->
    <div class="wall"></div>
</div>
<!--外墙法:-->
<!--<div class="wall" id="h"></div>-->
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>
</html>
  1. 清除浮动方式四:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>94-清除浮动方式4</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        p{
            float: left;
        }

        .box1{
            background-color: red;
        }

        .box2{
            background-color: green;
        }

        .box1 p{
            width: 100px;
            background-color: blue;
        }

        .box2 p{
            width: 100px;
            background-color: yellow;
        }

        .box1::after{
            /*设置添加的子元素的内容为空*/
            content: '';
            /*设置添加的子元素为块级元素*/
            display: block;
            /*设置添加的子元素的高度为0*/
            height: 0;
            /*设置添加的子元素看不见*/
            visibility: hidden;
            /*给添加的子元素设置clear: both;属性*/
            clear: both;
        }

        /*这个方法在IE6浏览器上没有效果 因为这个方法的兼容性低 添加上以下代码可以兼容IE6*/
        .box1{
            *zoom:1;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>
</html>
  1. 清除浮动方式五
    (1)overflow:hidden;作用:①可以将超出标签范围的内容裁剪掉②清除浮动③可以给第一个盒子设置overflow:hidden;使第二个盒子设置了margin-top之后 第一个盒子不被顶下来
    (2)如何清除浮动:在style标签中 给父级元素设置overflow:hidden; 也就是第一个盒子box1写如下代码:
.box1{
	overflow:hidden;
	*zoom:1;
} //这个方法也要写上这行代码才能兼容IE6
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>95-清除浮动方式5</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        /*以下代码展示overflow的作用*/
        /*div{*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    background-color: red;*/
        /*    !*overflow:hidden;*! 可以把这行代码注释/不注释观察区别*/
        /*}*/

        p{
            float: left;
        }

        .box1{
            background-color: red;
            overflow:hidden;
        }

        .box2{
            background-color: green;
        }

        .box1 p{
            width: 100px;
            background-color: blue;
        }

        .box2 p{
            width: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--以下代码展示overflow的作用-->
<!--<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>-->

<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>
</html>

flex弹性布局

  1. 弹性盒子:一种用于按行或按列布局元素的一维布局方法 元素可以膨胀以填充额外的空间 收缩以适应更小的空间
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

定位流(position)

定位流的分类
  1. 相对定位:相对于自己以前在标准流中的位置来移动
    (1)格式:position:relative;
    (2)注意:
    ①相对定位不脱离标准流 会继续在标准流中占用一份空间
    ②要配合top:; right:; left:; right:;来使用 指定了上述四个的位置 他就会相对以前的位置进行上下左右的移动 但是由于上下在同一直线上 左右是同一直线上 所以上下只能定义一个 左右也只能定义一个
    ③因为相对是不脱离标准流的 所以在相对定位中区分块级元素 行内块级元素 行内元素
    ④因为相对是不脱离标准流的 并且相对定位的元素会占用标准流中的位置 所以当给相对定位的元素设置margin/padding等属性时 会影响到标准流的布局 也就是说你给相对定位的元素设置margin/padding是设置给他移动前最开始的那个位置 而不是移动后/相对定位后的位置设置的
    (3)相对定位的应用场景:
    ①用于对元素进行微调 如果想让多个盒子对齐 可以使用相对定位对盒子进行微调
    ②配合后面学习的绝对定位来使用
    (4)相对定位弊端:相对定位不会脱离标准流 会继续在标准流中占用一份空间 所以不利于布局界面
  2. 绝对定位:相对于非static定位的父容器进行定位 如果没有 则相对于body来定位
    (1)格式:position:absolute;
    要配合top:;right:;left:;right:;来使用
    (2)注意:
    ①绝对定位的元素是脱离标准流 flex布局
    ②绝对定位的元素不区分块级元素 行内元素 行内块级元素
    ③如果一个绝对定位的元素以body作为参考点 其实是以网页首屏(第一次看到网页的页面)的宽度和高度作为参考点 而不是以整个网页的宽度和高度作为参考点
    ④一个绝对定位的元素会忽略祖先元素的padding
    (3)绝对定位参考点问题:
    ①默认情况下 所有绝对定位元素无论有没有祖先元素(父级元素 爷爷级元素 爷爷的爸爸级元素…) 都会以body作为参考点
    ②如果一个绝对定位的元素有祖先元素 并且祖先元素也是定位流 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
    例如:盒子2嵌套在盒子1中 如果盒子1设置了除静态定位外的别的定位流(相对 绝对 固定) 盒子2设置了绝对定位(假设设置的是定位到左下方) 那么盒子2就会移动到盒子1的左下角 而不是body的左下角
    ③如果一个绝对定位的元素有祖先元素 并且祖先元素也是定位流 而且祖先元素中有多个元素都是定位流 那么这个绝对定位的元素会以离他最近的那个定位流的祖先元素为参考点
    (4)应用场景
    “子绝父相”可以避免绝对定位和相对定位的弊端
    以后你看到一张图片位于另外一张图片上面 要想到定位流 想到子绝父相
    (5)绝对定位弊端:
    默认情况下绝对定位的元素会以body作为参考点 所以会随着浏览器的宽度高度的变化而变化
    (6)如何让绝对定位元素的水平居中:
    只需要设置绝对定位元素的left:50%;//永远保持占浏览器窗口的50%
    然后再设置绝对定位元素的margin-left:-(元素宽度的一半)px;
  3. 固定定位:相对于浏览器窗口的位置进行偏移
    (1)格式:position:fixed;
    要配合top:;right:;left:;right:;来使用
    (2)注意:
    ①固定定位的元素是脱离标准流的 不会占用标准流中的空间
    ②固定定位和绝对定位一样 不区分块级元素 行内元素 行内块级元素
    ③固定定位的元素不会随着滚动条的滚动而滚动
    ④IE6不支持固定定位
  4. 静态定位 static:一个元素 默认的就是静态定位
    在这里插入图片描述
  5. sticky:在目标区域内随着页面的滚动而保持在固定位置,超出这个区域后就随着目标区域滚动。sticky生效的前提是,必须搭配top、bottom、left、right这四个属性一起使用,不能省略,否则等同于relative定位,不产生"动态固定"的效果。
    在这里插入图片描述
定位流的z-index属性
  1. 什么是z-index属性:默认情况下所有的元素都有一个默认的z-index属性 取值是0
  2. z-index属性的作用:专门用于控制定位流元素的覆盖关系
  3. 默认情况下定位流的元素会盖住标准流的元素
  4. 默认情况下定位流的元素后面编写的会盖住前面编写的
  5. 如果定位流的元素设置了z-index属性 那么谁的z-index属性比较大 谁就是显示在上面
  6. 注意:从父现象:如果两个元素的父元素都没有设置z-index属性 那么谁的z-index属性比较大 谁就显示在上面 如果两个元素的父元素设置了z-index属性 那么子元素的z-index属性就会失效 也就是说谁的父元素的z-index属性比较大谁就会显示在上面

过度模块 2D 3D

过度模块

  1. 过度三要素
    ①必须要有属性发生变化
    ②必须告诉系统哪个属性需要执行过度效果:transition-property:width;
    如果有多个属性都需要执行过度效果 用逗号隔开:transition-property:width,background-color;
    ③必须告诉系统过度效果持续时长 此处设置为5秒:transition-duration:5s;
    可以设置另外一个过度效果持续时长 用逗号隔开:transition-duration:5s,5s;
  2. 告诉系统过多久才开始执行过度:transition-delay:2s;
  3. 告诉系统过度动画的运动的速度:transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out;
  4. 过度连写格式:transition:过度属性 过度时长 运动速度 延迟时间;
    两个属性都要执行过度 连写格式:(用逗号隔开):transition:过度属性1 过度时长 运动速度 延迟时间,过度属性2 过度时长 运动速度 延迟时间;
  5. 连写的时候 可以省略后面两个参数 因为只要编写了前面两个参数就已经满足了过度三要素
  6. 如果多个属性运动速度/延迟的时间/持续时间都一样 那么可以简写为:transition:all xs;//x为具体秒
  7. 编写过度套路:
    ①不要管过度 先编写基本界面
    ②修改我们认为需要修改的属性
    ③再回过头去给被修改属性的那个元素添加过度即可
    谁更具体 谁的优先级最高

2D转换模块

2d转换模式
  1. 旋转多少度:transform:rotate(45deg);
    deg是单位 代表多少度
  2. 平移多少px:transform:translate(100px,0px);
    第一个参数代表水平方向平移的距离
    第二个参数代表垂直方向平移的距离
    负数代表左移/下移 正数代表右移/上移
  3. 缩放:transform:scale(1,1.5);
    第一个参数代表水平方向缩放的大小
    第二个参数代表垂直方向缩放的大小
    如果取值是1 代表不变
    如果取值大于1 代表需要放大
    如果取值小于1 代表需要缩小
    如果水平和垂直取值都一样 则可以缩写为一个值 即transform:scale(1.5)就是transform:scale(1.5,1.5)
  4. 如果需要多个转换 需要用空格隔开
  5. 2d转换模块会修改元素的坐标系 所以旋转之后再平移就不是水平平移的 旋转时坐标系也跟着旋转
2d转换模块-形变中心点
  1. 默认情况下所有的元素都是以自己的中心点作为参考来旋转的 我们可以通过形变中心点属性来修改他的参考点
  2. 更改中心点格式:transform-origin:0px 0px;//以自身图片左上角为中心点
    注意:
    ①第一个参数:水平方向 第二个参数:垂直方向
    ②取值有三种方式:具体像素 百分比
transform-origin:50% 50%;//以自身中心为中心点
transform-origin:0% 0%;//以自身图片左上角为中心点

③有一些特殊关键字:

transform-origin:center center;//以自身中心为中心点
transform-origin:left top;//以自身左上角为中心点
2d转换模块-旋转轴向
  1. 我们生活的世界 有xyz轴 默认情况下 所有元素都是围绕z轴旋转
  2. 如果想要元素围绕y轴旋转:transform:rotateY(45deg);
  3. 如果想要元素围绕x轴旋转
transform:rotateX(45deg);
2d转换模块-透视属性
  1. 透视:近大远小
  2. 格式:perspective:mpx;// m是个数字 表明观看透视效果的距离 数字越大距离越远 效果越不明显 数字越小 距离越近 效果越明显
  3. 注意:透视属性必须添加到需要呈现近大远小效果的元素的父元素(也可以添加到祖先元素上 但是建议添加到父元素上)上面

动画模块

  1. 过度和动画之间的异同:
    不同:过度必须人为的触发才会执行动画 动画不需要人为的触发就可以执行动画
    同:过度和动画都需要满足三要素才会有动画效果
  2. 动画三要素:
    ①告诉系统需要执行哪个动画:animation-name:lnj;
    ②告诉系统我们需要自己创建一个名称叫做lnj的动画:
@keyframes lnj{
	from{}
	to{}
}
// 如果动画有很多个样式 要指定多个from to 百分号前面的数字依次递增就可以了
@keyframes lnj{
	1%{}
	2%{}
	3%{}
}

③告诉系统动画持续的时长:animation-duration:xs;//x表示具体数字 持续时长
④告诉系统动画执行的速度:animation-timing-function:linear;
⑤告诉系统动画执行的次数:animation-iteration-count:infinite/具体数字(次数);
⑥告诉系统动画是否往返执行

animation-direction:normal;//不往返执行 第二次仍然从起点开始执行 默认取值
animation-direction:alternate;//往返执行 第二次从终点开始执行回来

如果设置的是往返执行 那么 从起点到终点算一次 从终点返回起点算一次 一个来回算两次
⑦告诉系统动画是运动还是静止

animation-play-state:paused/running;
running:执行动画
paused:暂停动画
  1. 动画模块连写
    格式:animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 是否需要往返动画
    可以只写前两个参数
    ⑧指定动画等待状态和结束状态的样式:animation-fill-mode:backwards/none/both/forwards;
    none:不做任何改变
    backwards:等待状态显示动画第一帧的样子
    forwards: 结束状态显示动画最后一帧的样子
    both:等待状态小时动画第一帧的样子 结束状态显示动画最后一帧的样子
  2. 注意:动画有一定的状态:等待状态 执行状态 结束状态

3D转换模块

  1. 什么是2d和3d:2d就是一个平面 只有宽度和高度 没有厚度 3d是一个立体 有宽度和高度 还有厚度 默认情况下所有的元素都是2d展现
  2. 如何让某个元素呈3d展现:和透视一样 想看到某个元素的3d效果 只需要给他的父元素添加一个transform-style属性 然后设置为preserve-3d即可
  3. transform-style有两个取值 一个是preserve-3d 一个是flat 这是2d模式 即默认取值
  4. 会做正方体以后 给正方体的每一个面设置scale属性 然后在把两个侧面移动一下 可以改成长方体
  5. 只要父元素被拉伸了 子元素也会被拉伸
  6. 设置background-size:cover;就可以让背景图片永远铺满浏览器窗口
  7. 动画中如果有和默认样式中同名的属性 会覆盖默认样式中同名的属性 在编写动画时 固定不变的值写在前面 需要变化的值写在后面

背景

  1. 如何设置标签的背景颜色:在CSS中有一个background-color属性 就是专门用来设置标签的背景颜色的

  2. 取值: 具体单词/rgb/rgba/十六进制

  3. 如何设置背景图片:在CSS中有一个叫做background-image:url();属性 就是专门用于设置背景图片的

  4. 注意:
    ①图片的地址必须放在url()的括号中 图片的地址可以是本地的地址 也可以是网络的地址
    网络地址:在网上找到一张图片 右击选择复制图片地址
    ②如果图片的大小没有标签的大小大 那么会自动在水平和垂直方向平铺和填充
    ③如果网页上出现了图片 那么浏览器就会再次发送请求获取图片

  5. 如何控制背景图片的平铺方式:在CSS中有一个background-repeat属性 专门用于控制背景图片的平铺方式的

  6. background-repeat取值:
    repeat:默认 在水平和垂直都需要平铺
    no-repeat:在水平和垂直方向都不平铺
    repeat-x:只在水平方向平铺
    repeat-y:只在垂直方向平铺

  7. 应用场景:可以通过背景图片的平铺来降低图片的大小 提升网页的访问速度

  8. 注意:同一个标签可以同时设置背景颜色和背景图片 如果颜色和图片同时存在 那么图片会覆盖颜色

  9. 如何控制背景图片的位置:在CSS中有一个叫做background-position属性(background-position:水平方向 垂直方向)专门用于控制背景图片的位置

  10. background-position取值:
    ①具体的方位名词:
    水平方向:left center right
    垂直方向:top center bottom
    background-position:left bottom;
    图片位于左下角
    ②具体的像素:例如:background-position:100px 200px;
    注意:
    ①一定要写单位px 否则无效
    ②具体像素可以写负数 负数表示向左移出范围

  11. 应用场景:在企业开发中 可以用它来使图片始终居中显示 无论是大分辨率还是小分辨率 大窗口还是小窗口 都能居中显示

  12. 背景属性缩写的格式:background:背景颜色 背景图片 平铺方式 关联方式 定位方式;

  13. 注意:任何一个属性都可以被省略

  14. 什么是关联方式:默认情况下背景图片会随着滚动条的滚动而滚动(消失)如果不想让背景图片随着滚动条的滚动而滚动 那么我们就可以修改背景图片和滚动条的关联方式

  15. 如何修改背景关联方式:在CSS中有一个叫做background-attachment的属性 这个属性就是专门用于修改关联方式的

  16. 格式:background-attachment:scroll

  17. background-attachment取值:
    scroll:默认值 会随着滚动条的滚动而滚动
    fixed:不会随着滚动条的滚动而滚动

  18. 背景图片和插入图片的区别:
    ①背景图片仅仅只是装饰 不会占用位置 插入图片会占用位置
    ②背景图片有定位属性 可以控制图片位置 插入图片没有定位属性 控制图片的位置不太方便
    ③插入图片的语意比背景图片的语意强 在企业开发中 如果你的图片想被搜索引擎收录 推荐使用插入图片

背景尺寸属性

  1. 什么是背景尺寸属性:专门用于设置背景图片大小
  2. 格式:background-size:;
  3. 取值:
    ①如果不设置background-size属性 那么默认为图片大小 即图片有多大就显示为多大
    ②具体像素 如: background-size:200px 100px;第一个参数是宽度 第二个参数是高度
    ③百分比 如:background-size:60% 50%;背景图片的宽度是元素的60% 高度是元素的50%
    ④等比拉伸 第一个参数是宽度 第二个参数是高度 想要宽度/高度等比拉伸就设置第一个/第二个的值为auto
    ⑤cover:图片需要等比拉伸 并且拉伸到宽度和高度都填满元素 如:background-size:cover;
    ⑥contain:图片需要等比拉伸 并且拉伸到宽度/高度填满元素

背景图片定位区域属性

  1. 背景图片定位区域属性:告诉系统背景图片从什么区域开始显示
  2. 格式:background-origin:;
  3. 取值:
    ①padding-box:默认取值 图片从padding(内边距)开始显示
    ②border-box:图片从border(边框)开始显示
    ③content-box:图片从content(内容)开始显示

背景颜色绘制区域属性

  1. 背景颜色绘制区域属性:专门用于指定从哪个区域开始绘制背景的
  2. 格式:background-clip:;
  3. 取值
    ①padding-box:背景颜色从padding(内边距)开始绘制
    ②border-box:默认情况 背景颜色从border(边框)开始显示
    ③content-box:背景颜色从content(内容)开始显示

多重背景

  1. 多重背景图片
  2. 多张背景图片之间用逗号隔开
  3. 先添加的背景图片会盖住后添加的背景图片
    写法一:
background:url("images/animal1.jpg") no-repeat left top,url("images/animal2.jpg") no-repeat right top,
url("images/animal3.jpg") no-repeat left bottom,url("images/animal4.jpg") no-repeat right bottom,
url("images/animal5.jpg") no-repeat lcenter center;

写法二:推荐

background-image:url("images/animal1.jpg"),url("images/animal2.jpg"),url("images/animal3.jpg"),url("images/animal4.jpg"),
url("images/animal5.jpg");
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:left top,right top,left bottom,right bottom,center center;

阴影(盒子阴影和文字阴影)

  1. 如何给盒子添加阴影:
    box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
    内外阴影如果写inset就是内阴影 不写就是默认外阴影
  2. 注意:
    ①盒子的阴影分为内阴影和外阴影 默认情况下是外阴影
    ②可以只写前三个参数 阴影颜色默认情况下和盒子内的内容的字体颜色一样
  3. 如何给文字添加阴影:
    text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色;
    用法同盒子阴影
  4. 设置元素及元素中的内容的透明度
opacity:0;//透明 完全看不到
opacity:1;//不透明 最明显
可以写0-1之间的任何数字

CSS精灵图

  1. CSS精灵图:是一种图像合成技术
  2. 作用:可以减少请求的次数 降低服务器处理压力
  3. 如何使用CSS精灵图:配合背景图片和背景定位来使用
    把所有要用的图片合成为一张大图片 以这张大图片为背景图 用某软件定位自己想要的小图片在大图片中的位置和大小
    然后设置div大小为小图片的大小 位置为负的小图片的坐标(x,y)

CSS书写格式

  1. 行内样式:可以直接将CSS代码写到开始标签当中 例如:<div style="color:red">我是div</div>
  2. 内嵌样式:可以在一对head标签标签当中写上一对style标签 然后在style标签中编写CSS代码
  3. 外链样式(企业开发中一般用这个):Ctrl+alt+insert选择stylesheet 随便取一个名字 假如这里取名叫:CSS书写格式
    这样就单独新建了一个.CSS文件 然后就可以在这个.CSS文件里写CSS代码 然后在对应的.html文件中的head标签里输入link按下tab 自动出现<link rel="stylesheet" href="">在href中的""输入对应的.css文件名 这里输入CSS书写格式
  4. 导入样式:Ctrl+alt+insert选择stylesheet 随便取一个名字 假如这里取名叫:CSS书写格式 这样就单独新建了一个.CSS文件
    然后就可以在这个.CSS文件里写CSS代码 然后在对应的.html文件中的head标签里的style标签中输入 @import"CSS书写格式";
  5. 外链样式和导入样式的区别:
    ①外链样式是通过link标签关联 导入样式是通过@import关联 而@import是CSS2.1推出的 所以有兼容问题
    ②外链样式在显示界面的时候 会先加载CSS样式 再加载结构 所以用户看到界面时 一定已经设置了样式 导入样式在显示界面的时候
    会先加载结构 再加载样式 所以用户看到界面时不一定已经设置了样式

文字界面

如何做一个文字界面:

  1. 清空所有边框
  2. 从外向内 从上至下的编写网页代码
  3. 清空默认样式
a{
	text-decoration:none;
}
ul,ol{
	list-style:none;
}
  1. 利用body设置整个界面的文字信息 比如:文字大小 文字字体 文字颜色
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值