复习
1、超出的文字显示为省略号
设置文本不换行： white-space: nowrap超出部分隐藏： overflow：hidden超出的内容显示为省略号： text-overflow: ellipsis执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span { display: block; border: 1px solid red; width: 400px; height: 20px; line-height: 20px; margin-bottom: 30px; /* 当文本超出的时候,显示省略号 */ /* 设置一个换行：nowrap表示不换行 */ white-space: nowrap; /* 超出的显示为省略号 */ text-overflow: ellipsis; /* 超出隐藏 */ overflow: hidden; /* text-overflow: clip; */ } </style> </head> <body> <span>报道提到，舰上水兵拍摄的一段视频显示，这次漏水的船舱积水已淹没部分电柜箱和管线，积水深度至少有3英尺（约1米）。据现有信息显示，漏水事故的起因疑似为管道泄漏，而不是船体本身出现破损。事故暂未出现人员受伤情况</span> <span>这次漏水的“威尔士亲王”号航母于2019年12月服役，是“伊丽莎白女王”级航空母舰的2号舰，也是英军历史上第8艘以“威尔士亲王”封爵命名的军舰。</span> <span>2020年10月19日</span> </body> </html>结果：
2、鼠标移动多元素变化
结构的设置：
图标和文字在一个元素范围内设置父元素的hover，改变子元素的效果今日内容
概述：HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念
它是一个新的 HTML 语言版本包含了新的元素，属性和行为同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术一、HTML5简介
语义：能够让你更恰当地描述你的内容是什么。连通性：能够让你和服务器之间通过创新的新技术方法进行通信。离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。设备访问 Device Access：能够处理各种输入和输出设备。样式设计: 让作者们来创作更加复杂的主题HTML5的改变，涵盖了CSS3和JS的一些新特性，这些东西统称HTML5技术。1.1 兼容性
官方HTML5浏览器性能评分：http://html5test.com/ ; 满分555分，1个特性就是1分，一共555个新特性caniuse.com 可以检索任何一个HTML5新特性，在各个浏览器里面的兼容情况。比如我们检索border-radius的支持情况。哆啦A梦测试，这是测试CSS3的：http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/1.2 HTML5的新骨架和语义化标签
HTML5的doctype非常简单。表明你的HTML内容使用HTML5，只需要简单的使用： 现在：< !DOCTYPE html> 以前：< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
DTD（文档类型声明头）。需要注意的是，现在的HTML5没有XHTML系列了。 这样做会让目前还不支持的HTML5的浏览器采用标准模式解析，这意味着他们会解析那些HTML5中兼容的旧的HTML的标签的部分，而忽略他们不支持HTML5的新特性。
在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML，它是一个非常复杂的元素，现在它变得非常简单： 现在：<meta charset=“UTF-8”> 以前：<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> - HTML5的骨架
<html> <head> <meta charset="UTF-8"> </head> <body> </body> </html> 新的语言特性 所有自封闭标签，现在不写反斜杠合法所有的type都不用写了（此处指的的引入到html中其它文件的type类型）标签名大小写都合法html中属性名和属性值相同的可以省略属性值html中的属性值可以省略引号1.3 HTML5的语义化标签
HTML就是负责页面语义的，HTML4.01中，div负责的任务太多，具体的语义没有拆分。 HTML5中，就是把div拆分为了更多的标签：
header： 用于网站的头部，或者某一个区域的头部nav：用于导航banner：用于轮播图main: 网页的主体内容部分，该主体部分只能有一个section：网页的主体内容部分，是一个小整体，和main类似，但是section在一个页面中可以有多个，而main只能有一个article:用于标记文章或者评论hgroup:用于标记标题组，如果只有一个标题无需标记，多个标题则可以使用figure:用于标记独立的流内容figcaption：用于标记独立流内容的标题aside：用于标记侧边栏，存在与否不影响主体内容的呈现footer：网站的底部address：用来描述地址time：用来标记时间，具体时间不需要datetime属性，没有明确的日期需要使用datetime属性指明时间mark：用于标记文档的细节summary：用于标记details元素的标题，details用来描述细节，summary在details里面。执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <header> 网站的头部 <nav> <!-- 网站的导航 --> <a href="">导航栏一</a> <a href="">导航栏二</a> <a href="">导航栏三</a> <a href="">导航栏四</a> <a href="">导航栏五</a> <a href="">导航栏六</a> </nav> <div class="banner"> <!-- 网站的轮播图 --> </div> </header> <main> <!-- 网站的主体内容，一个网页只能有一个main，main有的时候不适用 --> <section> <!-- section和main使用基本相同，也表示网站的主体内容，但是section可以有多个 --> 商品列表 <figure> <img src="./imgs/1.jpg" alt=""> <figcaption>斗地主</figcaption> </figure> <figure> <img src="./imgs/1.jpg" alt=""> <figcaption>打麻将</figcaption> </figure> </section> <section> <!-- section和main使用基本相同，也表示网站的主体内容，但是section可以有多个 --> <article> <!-- article专门用来书写文章 --> <hgroup> <!-- hgroup表示标题组，超过一个标题的时候使用 --> <h1>我的祖国</h1> <h2>疫情下的强大</h2> </hgroup> <p>文章的内容：<time>国庆节</time>大家都会放七天假期， <time datatime="2020-10-18 14:23:23">佳豪生日</time>大家玩的很开心. 我爱你<mark>塞北的雪</mark> </p> <details> <summary>喜爱的水果</summary> <li>苹果</li> <li>鸭梨</li> <li>香蕉</li> <li>榴莲</li> </details> </article> </section> </main> <aside> <!-- 独立的侧边栏，不影响主体内容 --> 页面导航，锚点 </aside> <!-- 网站的底部 --> <footer> <div class="copyright">版权</div> <div class="tel">联系我们：4000-8008-888</div> <address>联系地址：沈阳沈北新区东北总部基地</address> </footer> </body> </html>结果：
1.4 HTML5表单
form标签不一定包裹所有控件 控件可以放在form的外面，用form属性指定我自己是哪个form的控件label现在不用label for了 label包裹单选按钮、复选框，就表示是自己的label。新的input输入元素 搜索框：search输入手机号码：tel输入URL输入电子邮箱：email输入数字：number,min,max拖拽条：range日期控件：date也可以选择第几个星期：week颜色选择：color新属性：
placeholder属性 提示文本，占位符号。place就是位置的意思，holder持有人autofocus属性 自动获取焦点required属性 表示必填，不能为空。required表示需要的，必须的。当submit的时候，会进行必填验证。datalist标签 datalist智能感应 任何的文本框都可以用list属性和一个datalist标签产生绑定，表示智能感应autocomplete标签 表示是否记录用户输入的内容 on:默认值 表示记录 off: 不记录二、CSS3
2.1 表单中的伪类选择器
:disabled : 不可用:read-only：只读:checked : 被选择2.2 阴影
box-shadow: 水平偏移量、垂直偏移量、模糊程度、模糊半径、阴影的颜色、位置 box-shadow:支持多组阴影效果外部阴影的outset不需要书写 text-shadow：x轴偏移量、y轴偏移量、模糊程度、颜色2.3 背景
2.3.1 背景起源
background-origin：背景起源 背景从什么位置开始渲染
属性值：
padding-box: 从内边距开始渲染（默认值） border-box： 从边框开始渲染 content-box: 内容区域开始渲染2.3.2 背景裁剪
background-clip: 控制背景在哪里开始显示
属性值：
padding-box: 从内边距开始显示 border-box： 从边框开始显示（默认值） content-box: 内容区域开始显示 text： 文字部分显示2.3.3 浏览器新特性的使用
格式： 前缀-属性名
谷歌浏览器和苹果浏览器： -webkit-属性名火狐浏览器： -moz-属性名欧朋浏览器： -o-属性名IE浏览器： -ms-属性名2.3.4 多背景
背景图片支持多张图片
注意事项：将小图放在前面，最大的背景图放在最后，如果多张背景图出现了重叠现象，显示的是前面的图片
**2.3.5 渐变色**线性渐变：linear-gradient
径向渐变：radial-gradient
使用必须是background-image，渐变色属于图片属性值
线性渐变：linear-gradient（方向，颜色）
方向： 可以使用关键字、可以角度
颜色： 多种颜色之间使用逗号分隔，最少为两种颜色。可以设置颜色从哪个位置开始，可以在颜色的后面添加百分比。
径向渐变:radial-gradient（设置图形及圆心所在的位置，颜色）
设置图形和圆心的位置： 位置由方向确定，图形 circle:圆形 ellipse：椭圆
斑码教育——口碑最好最专业的前端培训
