HTML基础~(3)

1 浮动框架

iframe 用于在一个html页面中，引入其它的html页面 <iframe src="https://www.codeboy.com/xuezi/admin/login.html"></iframe> 属性： src="" 被引入资源的路径 width="500px" 被引入资源在本页面显示的宽度 height="450px"  被引入资源在本页面显示的高度 frameborder="0" 去掉被引入资源的边框线 scrolling="no" 是否需要拖拽条，no表示不要滚动条 优势与劣势： 我们可以直接引入已经写好的页面，比较方便 被引入的页面使用了多次，复用性较高 样式不好控制 有额外的链接，请求的次数会增加，速度会变慢

2 结构化标签

h5新增了带有结构语义的标签，来取代div 虽然在用户看来之前使用div没有区别，但是带语义的标签可以增加代码的可读性 很方便的实现页面各个部分的划分，让网络爬虫更快找到 但注意: 低版本的浏览器会不兼容

<header> </header> 定义网页的头部或者某个区域的顶部 <nav></nav> 定义网站的导航栏 <section></section> 定义网页的主体内容 <article></article> 定义与文字相关的内容，比如文章 论坛 回帖 <aside></aside> 定义网页的侧边栏比如分类 广告 <footer></footer> 定义网页的底部或者某个区域的底部 15:06

3 CSS

1. CSS概述

CSS:Cascading Style Sheet 级联样式表 1995诞生，2010年左右开始陆续推出最新版本V3.0 样式：我们可以控制元素的颜色 背景  大小  位置  边框  阴影... HTML—内容  CSS—样式层 我们要是有CSS来修饰HTML元素

1. CSS编写的不同位置

行内样式 inline style

<标签 style="color:red;"></标签> 注意： 属性名与属性值之间用冒号连接，结束后记得写分号！！！ 行内样式只属于当前元素，不能给其他元素分享 由于只渲染当前元素，优先级非常高，但不利于修改，复用性很差

内部样式 inner style

在html文件中head标签里写style标签，style标签中的就是内部样式 <style> 选择器 {    CSS样式代码 } </style> 内部样式可以供页面中多个元素共享，不能共享给其他页面的元素

外部样式 outer style

需要把样式写在一个独立的.css文件中 需要此样式的html页面在自己的head标签中使用link标签引入该外部样式即可 <link rel="stylesheet" href="01.css"> rel="stylesheet" 表示当前引入的文件是一个样式表【必写】 href="01.css" 被引入的CSS文件的url 外部样式的范围比较大，谁引入，谁生效，可以被多个页面共享

三种样式的比较

生效的范围： 外部样式>内部样式>行内样式 样式的优先级： 行内样式>（内部样式=外部样式）>浏览器自带样式

4 选择器

CSS选择器用在内部或外部样式中，告诉浏览器，将选中哪些元素应用样式

选择器 {   CSS样式 }

1. 通用选择器

* 表示所有  *{ }表示当前页面上所有的标签都应用该样式 * { color: red; } 因为选中的是所有元素，所以优先级非常低，性能低

2. 标签选择器

选中某类特定的HTML元素，选择器的名字就是标签的名字，注意标签名不加尖括号 div { background-color: yellow; } 优点：快速为当前页面中同种类型的标签统一样式 缺点：会把当前页面所有的这类标签选中，选择太广泛，不能设计差异化样式

3. ID选择器（为元素设定样式时推荐少用）

选中唯一一个指定的元素，注意：ID值与#号之间不允许有空格！ #d2 { color: blue; } 注意：要先在标签中加入id属性，再在CSS中选中 优点：能够非常直观的找到该元素 但是ID选择器推荐少用，因为ID值经常用于为元素绑定JS脚本，较少用于样式

4. 类选择器

选中某一类指定的元素，这个类名是可以自定义的 一个class属性的值，可以写多个，值与值之间使用空格隔开 注意：使用选择器时点(.)与class值之间不能有空格！ .text-danger {background-color: red; color: white;} .text-success {background-color: green; color: white;} <span class="text-danger">用户名不能为空</span> <span class="text-danger">密码不能为空</span> <span class="text-danger">两次密码输入不一致</span> <span class="text-success">用户名可以使用</span> <span class="text-success">密码可以使用</span> <span class="text-success">两次密码输入一致</span> 注意：要先在标签中加入class属性，再在CSS中选中 优点：复用性很高，在项目中经常使用

1. 群组选择器

使用本选择器可以一次选中多个不同的元素，使用逗号分隔，可以有空格 h4, #p, .r { color: red; }

注意: 群组选择器不限制选择器必须是同一种类型，可以使用不同的类型 只要满足其中任意一个选择器就可以应用该样式

1. 伪类选择器

“假的类”—伪类的名字不可以自定义，是固定的，表示选中某个时刻/状态

:hover{ } 选中”鼠标悬停在元素上方时”的状态

:active{ } 选中”元素被激活时”的状态(鼠标按住元素不松开)

:link{ } 选中”超链接未被访问过”的状态

:visited{ }  选中”超链接已经被访问过”的状态 注意：超链接的4个伪类有顺序： :link -> :visited -> :hover -> :active 如果没有按照这个顺序，有的伪类会不生效

:focus{ } 选中”输入框获得焦点时”的状态