静态网站模板古典,dw如何做网页,廊坊网站建设佛山厂商,网页设计素材源文件目标
能够说出 3~5 个 HTML5 新增布局和表单标签能够说出 CSS3 的新增特性有哪些
1. HTML5 的新特性
注#xff1a;该部分所有内容可参考菜鸟教程菜鸟教程 - 学的不仅是技术#xff0c;更是梦想#xff01; (runoob.com) HTML5 的新增特性主要是针对于以前的不足#xf…目标
能够说出 3~5 个 HTML5 新增布局和表单标签能够说出 CSS3 的新增特性有哪些
1. HTML5 的新特性
注该部分所有内容可参考菜鸟教程菜鸟教程 - 学的不仅是技术更是梦想 (runoob.com) HTML5 的新增特性主要是针对于以前的不足增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题基本是 IE9 以上版本的浏览器才支持如果不考虑兼容性问题可以大量使用这些新特性。 声明
新特性增加了很多但是我们专注于开发常用的新特性。基础班我们讲解部分新特性到了就业班还会继续讲解其他新特性。
1.1 HTML5 新增的语义化标签 以前布局我们基本用 div 来做。div 对于搜索引擎来说是没有语义的。
div class“header” /div
div class“nav” /div
div class“content” /div
div class“footer” /div
header头部标签nav导航标签article内容标签section定义文档某个区域aside侧边栏标签footer尾部标签 注意
这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在 IE9 中需要把这些元素转换为块级元素其实我们移动端更喜欢使用这些标签HTML5 还增加了很多其他标签我们后面再慢慢学
对于第三点在 code 中的形式为对所有提及的标签添加 “display block” 参数
1.2 HTML5 新增的多媒体标签 新增的多媒体标签主要包含两个
音频audio视频video 使用它们可以很方便的在页面中嵌入音频和视频而不再去使用 flash 和其他浏览器插件。 HTML5 在不使用插件的情况下也可以原生的支持视频格式文件的播放当然支持的格式是有限的。
1. 视频 video 当前 video 元素支持三种视频格式 尽量使用 mp4格式 语法
video src文件地址 controlscontrols/video 为了保证兼容性可以采用以下写法以防万一
video controlscontrols width300source srcmove.ogg typevideo/ogg source srcmove.mp4 typevideo/mp4 您的浏览器暂不支持 video 标签播放视频
/ video
常见属性 对于第一点在标签中添加 mutedmuted 即可controls 就是常见的一些按键如播放停止静音等poster 的值为图片地址其中只有 width 和 height 值是放在 CSS文件 / style 标签中src 是必须有的属性
2. 音频 audio HTML5 在不使用插件的情况下也可以原生的支持音频格式文件的播放当然支持的格式是有限的。 当前 audio 元素支持三种音频格式建议使用 mp3 语法
audio src文件地址 controlscontrols/audio
考虑兼容性有 audio controlscontrols source srchappy.mp3 typeaudio/mpeg source srchappy.ogg typeaudio/ogg 您的浏览器暂不支持 audio 标签。
/ audio 常见属性 谷歌浏览器把音频和视频自动播放禁止了
3. 多媒体标签总结
音频标签和视频标签使用方式基本一致浏览器支持情况不同谷歌浏览器把音频和视频自动播放禁止了我们可以给视频标签添加 muted 属性来静音播放视频音频不可以可以通过JavaScript解决视频标签是重点我们经常设置自动播放不使用 controls 控件循环和设置大小属性
1.3 HTML5 新增的 input 类型 重点记住 number tel search 这三个验证的时候必须添加 form 表单域不符合规定会报错参考以下代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/headbody!-- 我们验证的时候必须添加form表单域 --form actionulli邮箱: input typeemail //lili网址: input typeurl //lili日期: input typedate //lili时间: input typetime //lili数量: input typenumber //lili手机号码: input typetel //lili搜索: input typesearch //lili颜色: input typecolor //li!-- 当我们点击提交按钮就可以验证表单了 --li input typesubmit value提交/li/ul/form
/body/html
1.4 HTML5 新增的表单属性 可以通过以下设置方式修改placeholder里面的字体颜色
input::placeholder {color: pink;
}
2. CSS3 的新特性
2.1 CSS3 的现状
新增的CSS3特性有兼容性问题ie9才支持移动端支持优于 PC 端不断改进中应用相对广泛现阶段主要学习新增选择器和盒子模型以及其他特性 CSS3 给我们新增了选择器可以更加便捷更加自由的选择目标元素。
属性选择器结构伪类选择器伪元素选择器
2.2 属性选择器 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 注意类选择器、属性选择器、伪类选择器权重为 10。
为了方便理解这里给出一个示例 code
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleCSS3新增属性选择器/titlestyle/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] *//* input[value] {color:pink;} *//* 只选择 type text 文本框的input 选取出来 */input[typetext] {color: pink;}/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */div[class^icon] {color: red;}section[class$data] {color: blue;}div.icon1 {color: skyblue;}/* 类选择器和属性选择器 伪类选择器 权重都是 10 *//style
/head
body!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 --!-- input typetext value请输入用户名input typetext --!-- 2. 属性选择器还可以选择属性值的某些元素 重点务必掌握的 --input typetext name idinput typepassword name id!-- 3. 属性选择器可以选择属性值开头的某些元素 --div classicon1小图标1/divdiv classicon2小图标2/divdiv classicon3小图标3/divdiv classicon4小图标4/divdiv我是打酱油的/div!-- 4. 属性选择器可以选择属性值结尾的某些元素 --section classicon1-data我是安其拉/sectionsection classicon2-data我是哥斯拉/sectionsection classicon3-ico哪我是谁/section/body
/html
2.3 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素 常用于根据父级选择器里面的子元素 以前只能通过附 value 的方式来解决 注意类选择器、属性选择器、伪类选择器权重为 10。
nth-childn 选择某个父元素的一个或多个特定的子元素重点
n 可以是数字关键字和公式n 如果是数字就是选择第 n 个子元素 里面数字从1开始…n 可以是关键字even 偶数odd 奇数n 可以是公式常见的公式如下 ( 如果n是公式则从0开始计算但是第 0 个元素或者超出了元素的个数会被忽略 ) 比如做表格的隔行变色
headstyle/* 1.把所有的偶数 even的孩子选出来 */ul li:nth-child(even) {background-color: #ccc;}/* 2.把所有的奇数 odd的孩子选出来 */ul li:nth-child(odd) {background-color: gray;}/style
/head回顾当时做学成在线中间多个盒子并排的 part 时为了使盒子中间有间隔除了最右侧我们都赋予了其 margin-right 的值。现在我们就可以对每个盒子赋值然后通过公式取消每排最右侧的 margin-right 值。 nth-child 和 nth-of-type 区别
nth-child 对父元素里面所有孩子排序选择序号是固定的 先找到第n个孩子然后看看是否和E匹配nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E 然后再根据E 找第n个孩子
例子请分析以下例子谁会变红谁会变蓝
答案谁都不变红熊大变蓝。 对于红色是因为先找到的光头强其标签为 p与声明的 div 不符合即没有符合条件的所以不会变红。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlenth-type-of 与 nth-child/titlestyle/* nth-child 会把所有的盒子都排列序号 *//* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div */section div:nth-child(1) {background-color: red;}/* nth-of-type 会把指定元素的盒子排列序号 *//* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */section div:nth-of-type(1) {background-color: blue;}/style
/headbody!-- 区别 --sectionp光头强/pdiv熊大/divdiv熊二/div/section
/body/html
小结
结构伪类选择器一般用于选择父级里面的第几个孩子nth-child 对父元素里面所有孩子排序选择序号是固定的 先找到第n个孩子然后看看是否和E匹配nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E 然后再根据E 找第n个孩子关于 nth-childn 我们要知道 n 是从 0 开始计算的要记住常用的公式如果是无序列表我们肯定用 nth-child 更多类选择器、属性选择器、伪类选择器权重为 10。
2.4 伪元素选择器 我们之前做的很多都是在父盒子中镶嵌子盒子比如右侧小箭头比如视频中间的播放按钮。当子盒子越来越多的时候结构会变得很复杂。 伪元素选择器可以帮助我们利用CSS创建新标签元素而不需要HTML标签从而简化HTML结构。 注意
before 和 after 创建一个元素但是属于行内元素新创建的这个元素在文档树中是找不到的所以我们称为伪元素所以 before 和 after 的声明是在 CSS 文件 / style 标签中语法 element::before {}before 和 after 必须有 content 属性before 在父元素内容的前面创建元素after 在父元素内容的后面插入元素伪元素选择器和标签选择器一样权重为 1 伪元素选择器使用场景1伪元素字体图标 注意字体图标导入以及 font 文件路径等细节问题需要回顾即可。 定位和之前提及的一样。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle伪元素选择器使用场景-字体图标/titlestylefont-face {font-family: icomoon;src: url(fonts/icomoon.eot?1lv3na);src: url(fonts/icomoon.eot?1lv3na#iefix) format(embedded-opentype),url(fonts/icomoon.ttf?1lv3na) format(truetype),url(fonts/icomoon.woff?1lv3na) format(woff),url(fonts/icomoon.svg?1lv3na#icomoon) format(svg);font-weight: normal;font-style: normal;font-display: block;}div {position: relative;width: 200px;height: 35px;border: 1px solid red;}div::after {position: absolute;top: 10px;right: 10px;font-family: icomoon;/* content: ; */content: \e91e;color: red;font-size: 18px;}/style
/headbodydiv/div
/body/html
伪元素选择器使用场景2仿土豆效果 之前的做法如下 这样的缺点是当盒子数量越来越多时网页结构会越来越复杂
/* 当我们鼠标经过了 土豆这个盒子就让里面before遮罩层显示出来 */
.tudou:hover::before {/* 而是显示元素 */display: block;
} !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例/titlestyle.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.tudou::before {content: ;/* 隐藏遮罩层 */display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;}/* 当我们鼠标经过了 土豆这个盒子就让里面before遮罩层显示出来 */.tudou:hover::before {/* 而是显示元素 */display: block;}/style
/headbodydiv classtudouimg srcimages/tudou.jpg alt/divdiv classtudouimg srcimages/tudou.jpg alt/divdiv classtudouimg srcimages/tudou.jpg alt/divdiv classtudouimg srcimages/tudou.jpg alt/div
/body/html
伪元素选择器使用场景3伪元素清除浮动
额外标签法也称为隔墙法是 W3C 推荐的做法。父级添加 overflow 属性父级添加after伪元素父级添加双伪元素
1.额外标签法也称为隔墙法是 W3C 推荐的做法。 注意 要求这个新的空标签必须是块级元素。 后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。 原理就是通过插入不存在两个含义第一是伪元素本身在代码中不存在第二是 content 为空看不见的块元素
content伪元素必须写的属性display插入的元素必须是块级height不要看见这个元素clear核心代码清除浮动visibility不要看见这个元素
.clearfix:after {content: ;display: block;height: 0;clear: both;visibility: hidden;
}
这里如果用 display:block会导致 before 和 after 上下排列display:table 可以理解为一行内的两个单元格display转换为块级元素并且一行显示
.clearfix:before,.clearfix:after {content:;display:table;
}
.clearfix:after {clear:both;
} 示意图 2.5 CSS3 盒子模型 在以前的盒子模型中我们加入 border 或者是 padding 都有可能撑大盒子需要靠计算数值来维持原有大小这一点很麻烦。 CSS3 中可以通过 box-sizing 来指定盒模型有2个值即可指定为 content-box、border-box这样我们计算盒子大小的方式就发生了改变。 可以分成两种情况
box-sizing: content-box 盒子大小为 width padding border 以前默认的box-sizing: border-box 盒子大小为 width 盒子模型我们改为了box-sizing: border-box 那padding和border就不会撑大盒子了前提padding和border不会超过width宽度 可以在最开始声明如下语句使得所有盒子都满足这种设计
* {margin: 0;padding: 0;box-sizing: border-box;
}
2.6 CSS3 其他特性了解
图片变模糊计算盒子宽度 width: calc 函数 关于 CSS3 的函数我们可以通过以下网站来查询 MDN Web Docs (mozilla.org)
CSS3滤镜filter: filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如 filter: blur(5px); blur模糊处理 数值越大越模糊 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle图片模糊处理filter/titlestyleimg {/* blur是一个函数 小括号里面数值越大图片越模糊 注意数值要加px单位 */filter: blur(15px);}img:hover {filter: blur(0);}/style
/head
bodyimg srcimages/pink.jpg alt
/body
/html
CSS3 calc 函数: calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% - 80px); 括号里面可以使用 - * / 来进行计算。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleCSS3属性calc函数/titlestyle.father {width: 300px;height: 200px;background-color: pink;}.son {/* width: 150px; *//* width: calc(150px 30px); */width: calc(100% - 30px);height: 30px;background-color: skyblue;}/style
/head
body!-- 需求我们的子盒子宽度永远比父盒子小30像素 --div classfatherdiv classson/div/div
/body
/html CSS3 还增加了一些 动画 2D 3D 等新特性我们就业班会继续学习。
2.7 CSS3 过渡重点 过渡transition)是CSS3中具有颠覆性的特征之一我们可以在不使用 Flash 动画或 JavaScript 的情况下当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画 是从一个状态 渐渐的过渡到另外一个状态 可以让我们页面更好看更动感十足虽然 低版本浏览器不支持ie9以下版本 但是不会影响页面布局。 我们现在经常和 :hover 一起 搭配使用。
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
属性 想要变化的 css 属性 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡 写一个all 就可以。花费时间 单位是 秒必须写单位 比如 0.5s运动曲线 默认是 ease 可以省略何时开始 单位是 秒必须写单位可以设置延迟触发时间 默认是 0s 可以省略 记住过渡的使用口诀谁做过渡给谁加 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleCSS3 过渡效果/titlestylediv {width: 200px;height: 100px;background-color: pink;/* transition: 变化的属性 花费时间 运动曲线 何时开始; *//* transition: width .5s ease 0s, height .5s ease 1s; *//* 如果想要写多个属性利用逗号进行分割 *//* transition: width .5s, height .5s; *//* 如果想要多个属性都变化属性写all就可以了 *//* transition: height .5s ease 1s; *//* 谁做过渡给谁加 */transition: all 0.5s;}div:hover {width: 400px;height: 200px;background-color: skyblue;}/style
/head
bodydiv/div
/body
/html
多个属性利用逗号进行分割单独再声明一个 transition 会引起冲突注意单位谁做过渡给谁加style 标签中声明样式
进度条案例 进度条如何布局过渡的使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleCSS3过渡练习-进度条/titlestyle.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in {width: 50%;height: 100%;background-color: red;/* 谁做过渡给谁加 */transition: all .7s;}.bar:hover .bar_in {width: 100%;}/style
/head
bodydiv classbardiv classbar_in/div/div
/body
/html
3. HTML5 CSS3
3.1 狭义的 HTML5 CSS3
HTML5 结构标签本身 CSS3 相关样式 3.2 广义的 HTML5
广义的 HTML5 是 HTML5 本身 CSS3 JavaScript 。这个集合有时称为 HTML5 和朋友通常缩写为 HTML5 。虽然 HTML5 的一些特性仍然不被某些浏览器支持但是它是一种发展趋势。HTML5 MDN 介绍 https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
