html5+css3学习笔记(一)
1. 语义化标签
html5给我们增加了许多语义化的标签,比如header、footer、nav、main、article、aside等,这些标签和div有同样的作用,只不过是更加语义化了。
2. 兼容性问题
主流的浏览器对HTML5和CSS3有很好的支持,但是对于IE8及以下就需要做兼容性处理。比如:HTML5里面的语义化标签在IE8及以下是不能够识别的,因此我们可以通过js的代码来创建这些标签 document.createElement('header')
,除此之外我们也可以引入第三个插件来解决IE8及以下的兼容性问题,如:html5shiv链接地址
3. HTML5里新增属性,主要是和表单相关的
- email 能够验证当前输入的邮箱地址是否合法。
- tel 并不能验证是否是合法的手机号,因此HTML5的标准是全球标准,并不是所有的国家手机号都和中国的一样。其本质为在移动端中,只能打开数字键盘,而不是字母键盘,限制只能输入数字
- url验证URL
- number 只能输入数字,其他输入不了,而且自带上下增大减小箭头,max属性可以设置为最大值,min可以设置为最小值,value为默认值。
- search输入框后面会给提供一个小叉,可以删除输入的内容,更加人性化。
- range可以提供给一个范围,其中可以设置max和min以及value,其中value属性可以设置为默认值
- color提供了一个颜色拾取器
- time 时分秒
- data 日期选择年月日
- datatime 时间和日期(目前只有Safari支持)
- datatime-local
- week
4. form表单里的新增属性
- placeholder 提示信息
- autofocus 自动获取焦点
- autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提:
- 必须表单提交过。
- 必须有name属性。
- required要求输入框不能为空,必须有值才能够提交。
- pattern=" " 里面写入想要的正则模式,例如手机号patte="^(+86)?\d{10}$"
- multiple可以选择多个文件或者多个邮箱
- form=" form表单的ID"
使用场景:
<form id='myForm'><input type='text'><input type='submit'>
</form>
<input type='text' name='address' form='myForm'> 这样当点击submit的时候,这个输入框的内容也会被提交。
- 对于select标签,HTML5提供了既能够输入又能够选择的datalist标签,但是这个标签目前浏览器对他的兼容性并不是很好,所以目前很少使用。
专业:<input type='text' list='subjects'><!--id是来建立input和datalist的联系,label是提示值 --><datalist id='subjects'><option value='one' label='这是1'><option value='two' label='这是2'><option value='three' label='这是3'></datalist>
5. form表单里的新增事件
- oninput 每当input里的输入框内容发生变化都会触发此事件。
- oninvalid 当验证不通过时触发此事件。
使用场景:当验证不通过时提示我们自定义的提示信息
document.getElementById('userphone').oninvalid(function(){this.setCustomValidity("请输入合法的11位数字")
})
6.进度条
<progress value='10' max='100'></progress>
7. 度量器:衡量当前进度值
<meter min="0" low="40" high="90" max="100" value="95"></meter>
8. HTML5里新增的多媒体标签
1.audio音频
<audio src='' controls autoplay loop='true'></audio>
属性:
- controls 控制面板
- autoplay 自动播放
- loop=‘true’ 循环播放
2. video视频
<video src='' poster='imgs/aa.jpg' controls></video>
属性:
- poster:指定视频还没有完全下载完毕,或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面,当然通过poster也可以自己指定。
- controls 控制面板
- width
- height
注意:
在设置视频宽高的时候,视频的宽高比例是固定不变的,也就是只能设置宽度或者设置高度,而不能同时设置宽度和高度,否则画面不会按照你指定的宽高显示,依然是等比例显示,只是占据了空间大小。 - source标签:因为浏览器对视频格式支持程度不一样,为了能够兼容不同的浏览器,可以通过source来指定视频源。
<video><source src='aa.flv' type='video/flv'></source><source src='aa.mp4' type='video/mp4'></source>
</video>
9. HTML5里新增的查询DOM的操作
可以是标签,可以是类(需要加点),可以是ID(需要加#)
1. document.querySelector()
2. document.querySelectorAll()
10. HTML5里新增的操作CSS样式的方法
11. HTML5里面的自定义属性和获取值
html5+css3学习笔记(一)相关推荐
- 前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
- 千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记 文章目录 千峰HTML5+CSS3学习笔记 写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
- HTML5+CSS3学习笔记(第1章)HTML基础
HTML5+CSS3学习笔记(第1章)HTML基础 今天是居家隔离第一天,自学HTML5. 1.1HTML概述 什么是HTML HTML是一种标记语言.(Hyper Text Markup langu ...
- HTML5+CSS3学习笔记(三)文档流和盒子模型【附练习:图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记 文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
- web前端html5+css3学习笔记(1)
开启我的第一篇博客~~~ 记录学习html+css的笔记 目录 一.认识两位先驱 二.计算机的组成 1.硬件 2.软件 三.浏览器与内核 四.网页标准 五.HTML历史* 一.认识两位先驱 图灵:人工 ...
- 二、HTML5 + CSS3 学习笔记
一.HTML + CSS 文章目录 前言 一.HTML5 新增特性 1. HTML5 概述 2. HTML5 新特性 2.1 HTML5 布局元素标签 2.2 HTML5 媒体元素标签 二.CSS3 ...
- html5+css3学习笔记
HTML5 1.html5建立规则 独立于设备 开发进程透明 基于html css js 优秀的错误处理 更多标记 减少外部插件使用 2.html5新特性 绘画canvas元素 媒介回放的v ...
- 2021-10-28 html5+css3学习笔记(一)
目录 1.文档声明 2.html元素的lang(language的缩写)属性 3.head元素嵌套的元素 link元素 4.img元素 4.1.相对路径 4.2.web中常用的图片格式 4.3.像素 ...
- web前端html5+css3学习笔记(3)——标签
目录 一.排版标签 1.标题标签 2.段落标签 二.语义标签 三.块级元素和行内元素 1.块级元素 2.行内元素 四.文本标签 1.常用文本标签 2.不常用文本标签 五.图片标签 六.相对路径与绝对路 ...
最新文章
- TypeError: BlobBuilder is not a constructor
- 交叉编译 FLTK1.3.0
- linux时间子系统之,linux时间子系统(四)
- 日期多选插件Kalendae.js
- 【sampleDateFormat】对日期进行解析
- VS建立Web网站 20141201
- 摘来的 esri 的 js 的 一些东西 来自ESRI中国社区 by xiaoyaohu
- 2018中级职称计算机题库,2018年中级通信工程师传输与接入考试试题
- 空芯线圈电感计算公式
- maya mentray_新手快速掌握Maya Mental ray
- R语言非度量多维标尺排序NMDS及一般加性模型GAM映射教程
- 【已解决】华为手机USB调试和监控ADB安装应用的选项变成了灰色如何解决 | 华为荣耀9手机USB调试和监控ADB安装应用选项变成了灰色怎么办
- ROS入门之——浅谈launch
- 50部经典烧脑大片,看懂是个问题,敢不敢看是另一个问题!
- iview在table中添加图片
- 抖音上线“冬季山货节”,不声不响把拼多多老家“偷了”?
- 零基础玩转C语言系列第一章——初始C语言(上)
- UltraEdit中文破解版
- 无代码如何加速数字化转型?
- 浅谈“李氏代换”——从纪念金庸和斯坦李说起