HTML5语义化标签总结
1.语义化标签总结
基础布局标签
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<article></article>
<footer></footer>
注意:IE8以后不兼容H5标签,如果需要兼容IE8一下的浏览器,则需要如下操作:
如果在sublime,或者WebStrom使用 可是使用快捷点: cc:ie6+tab
生成内容:
<!--[if lt IE 9]>
<script type="text/javascript" src='js/html5shiv.min.js'></script>
<![endif]-->
或者
<!--[if lte IE 6]>
<script type="text/javascript">
alert("我执行了");
window.onload = function(){
var createHeader = document.createElement("header");
document.body.appendChild(createHeader);
}
</script>
<![endif]-->
H5解决方案:可以引入上面的html5shiv.min.js,百度搜索进行下载即可。
2.H5表单
input标签新增属性
<form action="#">
<fieldset>
<legend>新输入类型</legend>
<label>type=color
<input type="color">
</label>
<label>type=date
<input type="date">
</label>
<label>type=datetime
<input type="datetime">
</label>
<label>type=datetime-local
<input type="datetime-local">
</label>
<label>type=date
<input type="date">
</label>
<label>type=email
<input type="email">
</label>
<label>type=month
<input type="month">
</label>
<label>type=week
<input type="week">
</label>
<label>type=day
<input type="week">
</label>
<label>type=number
<input type="number">
</label>
<label>type=range
<input type="range">
</label>
<label>type=search
<input type="search">
</label>
<label>type=url
<input type="url">
</label>
</fieldset>
</form>
注意:有些效果显示在浏览器显示不明显(没有变化),在移动端会有变化。(移动端的支持 比桌面端要好)
新表单元素
<datalist></datalist>//定义下拉列表
<keygen></keygen> //(生成秘钥)
<output></output> //定义输出的一些类型。
使用方法:
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
剩余的两个理解就好。
3.新表单属性
操作对象:
<input type="text" name="">
在表单可添加属性,如下:
- placeholder:占位符提示
- autofocus:获取焦点
- autocomplete: 规定是否使用输入字段的自动完成功能。
- multiple:支持多文件选择
- form:此属性不推荐使用
演示代码:
<form action="#" id='form'>
<fieldset>
<legend>新表单属性</legend>
<!-- input标签 默认的 提醒信息 -->
<input type="text" name="" placeholder="请输入用户名">
<input type="email" name="" placeholder="请输入电子邮箱" autofocus>
<input type="file" multiple>
<!-- 必须 为 该标签 添加name属性 还需要改表单 曾经提交过-->
<input type="tel" name="telPhone" autocomplete placeholder="请输入电话号码">
<input type="submit" >
</fieldset>
</form>
<input type="text" name="userHabbit" placeholder="请输入你的爱好" form='form'>
表单验证:
添加属性:
- required:必须填写,不能为空
- pattern:可是使用正则来验证
<form action="#">
<fieldset>
<legend>表单验证</legend>
<!-- email这个标签 自带了 表单的格式验证 不能验证 空的值 -->
<input type="email" name="userEmail" required>
<!-- 对 字符串 格式的验证 使用的是 正则
pattern 中可以写正则 进行验证
-->
<input type="tel" placeholder="请输入电话号码" name='userTel' required pattern="\d{3}"
oninvalid=" this.setCustomValidity('亲爱的用户你输入的格式不正确,请重新输入')">
<input type="submit">
</fieldset>
</form>
4.音频(audio )
音频属性: controls autoplay loop
- controls:控制器
- autoplay:是否自动播放
- loop:是否循环播放
- muted:是否静音
演示源码:
<audio controls autoplay loop>
<source src="music/music.ogg" >
<source src="music/郝云 - 活着.mp3" >
亲爱的用户,你的浏览器版本太低,无法享受这个页面的所有功能,建议进行更新 ^_^ <a href="#">戳我下载</a>
</audio>
5.视频(video):
视屏播放器:
- autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
- controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
- height pixels 设置视频播放器的高度。
- loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
- muted muted 规定视频的音频输出应该被静音。
- poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
- preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。
- 如果使用 "autoplay",则忽略该属性。
- src url 要播放的视频的 URL。
- width pixels 设置视频播放器的宽度。
演示代码:
<!--<video src="movie/[报告老板][第二季]第11集_bd.mp4" controls loop height="100px" width="300px"
poster="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"></video>-->
<!--浏览器会从上往下 找到可以播放的 进行播放-->
<video controls>
<source src="movie/movie04.ogg">
<source src="movie/[报告老板][第二季]第11集_bd.mp4">
亲爱的用户,你的浏览器版本太久了,建议升级 <a href="#"> 点我下载 最新的浏览器(⊙o⊙)</a>
</video>
6.获取元素新方法
document.querySelector('li')
document.querySelectorAll('')
注意:这个选着器的使用方式和jQuery选着器使用方式是一样的。
7.类名操作(classList)
这是一个对象,对象有如下方法:
add() (添加一个类名)
remove() (删除一个类)
contains() (是否包含类)
toggle() (切换类)
示例代码:
// 获取 要操纵的div 方便后续的操作
var div = document.querySelector('.showBox');
// querySelector
// 新增class
document.querySelector('input[value=add]').onclick = function(){
// alert('ADD');
div.classList.add('orange');
}
// 移除class
document.querySelector('input[value=remove]').onclick = function () {
div.classList.remove('orange');
}
// 判断是否存在class
document.querySelector('input[value=contains]').onclick = function () {
alert(div.classList.contains('orange'));
}
// 切换class
document.querySelector('input[value=toggle]').onclick = function () {
div.classList.toggle('skyBlue');
}
8.自定义属性(dataset)
代码演示:
<body>
<!-- html5为了规范自定义属性的写法,新增了一个 data-的属性 -->
<div data-age='18' data-skill='eatFood' data-habbit = 'tableTannis'
data-food-vegetable='西兰花' data-foodMeat='牛肉'></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
// 所有 通过 data-的方式 添加的属性 都会保存在dom元素的 dataset属性中 他是一个对象
// 设置属性时 能够使用大写字母 但是会自动帮我们转化为 小写的字母
// 作用是 为了规范 自定义属性的写法
console.log(document.querySelector('div').dataset);
console.log(document.querySelector('div').dataset.age);
console.log(document.querySelector('div').dataset.foodVegetable);
console.log(document.querySelector('div').dataset.foodmeat);
}
</script>
HTML5语义化标签总结的更多相关文章
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- Html5语义化标签详解及其兼容性处理
<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...
- html5语义化标签——回顾
html5 头部结构 <!doctype html> <meta charset=“utf-8”/> <header></header> 页眉 ...
- 第二季第十一天 html5语义化标签 css透明度
span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...
- HTML5语义化标签
在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...
- 让HTML5语义化标签兼容IE浏览器
解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...
- html5语义化标签总结二
HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...
- 转html5语义化标签总结一
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- HTML5语义化标签重构页面
在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...
随机推荐
- AUC,KS,ROC
要弄明白ks值和auc值的关系首先要弄懂roc曲线和ks曲线是怎么画出来的.其实从某个角度上来讲ROC曲线和KS曲线是一回事,只是横纵坐标的取法不同而已.拿逻辑回归举例,模型训练完成之后每个样本都会得 ...
- SpringMVC学习总结(一)--Hello World入门
一.什么是Spring MVC Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 ...
- 数据结构notes
1. 一份很好的数据结构教程,图文并茂,简明扼要,列出每种结构的定义和优缺点,非常适合初学者 via @ranyif https://www.interviewcake.com/data-struct ...
- marioTcp
https://github.com/nicholaszj/marioTcp MarioTCP MarioTCP 是使用libevent模型来建立的一个性能强大的TCP服务器. 1:Getting S ...
- DB2存储过程通过游标实现批量数据处理
CREATE procedure proc_change()LANGUAGE SQLBEGIN DECLARE l_id INTEGER; DECLARE l_detail_id INTEGER; D ...
- jfinal框架教程
jfinal框架教程 下面通过一个小例子了解jfinal的结构和特点 1.建数据库(我用的是oracle数据库,其他的相对也差不多) -- Create table create table CLAS ...
- 如何把App放在服务器上供用户下载
如何把App放在服务器上供用户下载 有时候做了个简单的App想把App给朋友帮忙测试一下,却发现上传到各种平台很麻烦,肿么办?难道一个个拷贝,那也太low啦,不是咱程序员该干的事儿,好的话不多说,开搞 ...
- mongo学习- 副本集 大多数原则
副本集中有一个重要的概念“大多数”,意思是说,选择主节点需要大多数决定(本人亲自做了实验) 步骤: 1.开启副本集(如果没有配置好 副本集的 亲参考我的上篇文章 https://www.cnblog ...
- 使用phpStorm编辑器进行PHP代码的xdebug调试
首先需要安装Xdebug,如果没有安装可以查看PHP断点调试工具Xdebug的安装这篇文章.phpStorm是开发者经常用的一款编辑器,当然也支持Xdebug调试,下面说一下配置步骤. phpStor ...
- 如何在Windows环境下安装Linux系统虚拟机
如何在Windows环境下安装Linux系统虚拟机 本篇经验写给想要入门学习C语言的小白们.Windows系统因为使用窗口图形化,操作简单,功能多样,所以我们在Windows环境下可以做到很多,但想要 ...