社区
掘金
学习内容
- H5 新添加的语义化标签
- CSS3 背景属性扩充
- 学习总结
一、H5 新添加的语义化标签
- H5 语义化标签
- <header> 头部
- <nav>导航
- <aside>侧边栏
- <article>文章
- <section>区段
- <footer>底部
- H5 新增的音频标签<audio>基本属性有：
- autoplayer （浏览器已禁止）
- controls （是否显示默认播放控件）
- loop （循环播放）
- src （播放资源）
示例：
/*<audio controls src="https://jiangck.com/music/观音降临曲.mp3">
浏览器版本太低，不支持！
</audio>*/
<audio controls>
<source src="https://jiangck.com/music/观音降临曲.mp3">
浏览器版本太低，不支持！
</audio>
- 视频标签 <video>
- controls 播放控件
- loop 循环播放
- width 宽
- height 高
示例代码：
<video controls>
<source src="video/movie.mp4">
<source src="video/movie.ogg">
<source src="video/movie.webM">
浏览器版本太低，请升级
</video>
- H5 新增表单控件，语义化
- 邮箱：type="email"
- 手机号码：type="tel"
- 网址控件（必须含有http://）：type="url"
- 数字控件：type="number"
- 搜索控件：type="search"
- 时间空间：type="time"
- 日期控件：type="date"
示例如下：
邮箱：<input type="email">
手机号码：<input type="tel">
网址：<input type="url">
数字：<input type="number">
搜索：<input type="search">
时间：<input type="time">
日期：<input type="date">
邮箱：
手机号码：
网址：
数字：
搜索：
时间：
日期：
- H5 新增表单属性：
- placeholder 占位符
- autofocus 自动获取光标焦点
- autocomplete 自动完成（默认 on 为记住用户输入的内容，off 不会记录）
- required 必填项，内容不能为空
示例如下：
<form action="#">
<input type="text" placeholder="哈哈哈" autofocus autocomplete="on" required>
<input type="submit">
</form>
二、背景属性扩充
- 背景尺寸，代码及事例说明如下：
<style>
.t1 {
width: 200px;
height: 200px;
background: #333 url(https://jiangck.com/favicon.ico) repeat;
/*背景尺寸
cover 背景图片等比例缩放，铺满盒子，有可能显示不完整
contain 背景图片等比例缩放，显示完整，有可能铺不满盒子
写两个值，第一个值代表宽度，第二个代表高度
写一个值代表宽，高等比例缩放，后边的默认值 auto
百分比为单位的时候，参考的是盒子的大小。*/
background-size: 50% 50%;
}
</style>
<body>
<div class="t1">
</div>
</body>
- 背景渐变
示例代码及效果如下：
<style>
.t2 {
width: 200px;
height: 50px;
border: 1px solid #000;
/*background-image: linear-gradient(to bottom, red, green);
background-image: linear-gradient(to top, red, green);
background-image: linear-gradient(to right, red, green)
background-image: linear-gradient(to left, red, green);*/
background-image: linear-gradient(to left, red, green, blue, yellow, skyblue, yellow, yellowgreen, #2312ac);
}
.t3 {
width: 80px;
height: 30px;
border-radius: 15px;
background-image: linear-gradient(to right, rgb(255, 80, 107), rgb(255,197,197));
}
</style>
<body>
<div class="t2"></div>
<div class="t3"></div>
</body>
- 多背景图片
示例代码如下：
/* 多组背景逗号隔开，最后一组分号，背景设置在最后一组上 */
.box {
background: url(images/bg1.png) no-repeat left top,
url(images/bg2.png) no-repeat right top,
url(images/bg3.png) no-repeat right bottom,
url(images/bg4.png) no-repeat left bottom,
red url(images/bg5.png) no-repeat center;
}
- box-sizing 怪异盒模型
盒子设置了 box-sizing: border-box; 后内边距和边框将不会撑大盒子。
三、学习总结
十二天的前端 HTML5+CSS3 培训课程今天就结束，这十几天的学习也确实学到了不少内容，大致总结如下：
- HTML
- 浏览器的内核
- 基本标签
- 表格控件
- 表单控件
- 语义化标签
- 搜索引擎优化原理
- meta 相关的作用
- 元素的三种显示方式
- 块元素
- 行内块元素
- 行内元素
- H5 新特性
- CSS
- CSS 的引入方式
- 行内 style
- 内嵌式 header->style
- 外链式 link
- CSS 选择器
- 基础选择器
- 标签选择器
- 类选择器
- 通配符选择器
- 多类名选择器
- id 选择器
- 复合选择器
- 后代选择器
- 子元素选择器
- 交集选择器
- 并集选择器
- 相邻选择器
- 伪类选择器
- 结构伪类选择器
- 属性选择器
- 基础选择器
- CSS 三大特性
- 层叠性
- 继承性
- 优先级
- !important > 行内 sytle > id 选择 > 类选择 > 标签/伪类选择 > 通配符选择
- 文字字体样式设置
- 显示模式的转换
- 背景的设置
- 盒子模型 （内外边距）
- 盒子的边框属性（圆角，画三角形）
- CSS 三大布局
- 标准流
- 浮动
- 定位
- 浮动及其特点
- 浮动的潜在影响和清除浮动的特点
- 定位模式
- 静态定位 static
- 相对定位 relative
- 绝对定位 absolute （脱标）
- 固定定位 fix （脱标）
- 定位模式的'子绝父相'
- 精灵图使用
- CSS3 的特殊属性
- 过渡效果
- 颜色渐变
- CSS 的引入方式
以上知识点都已经基本掌握，接下来就是高级课程的学习。高级课程的学习时间比较长，基本学完一章会对一个章节进行一次总结，特别的知识内容也会单独写一篇文章进行记录，方便复习。
内事不懂问百度，外事不懂问谷歌~