昔洛 的个人博客

Bug不空,誓不成佛

  menu
70 文章
14633 浏览
5 当前访客
ღゝ◡╹)ノ❤️

记录前端学习----第十二天

学习内容

  • 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 的特殊属性
      • 过渡效果
      • 颜色渐变

以上知识点都已经基本掌握,接下来就是高级课程的学习。高级课程的学习时间比较长,基本学完一章会对一个章节进行一次总结,特别的知识内容也会单独写一篇文章进行记录,方便复习。

内事不懂问百度,外事不懂问谷歌~