html5语义化标签基本结果,html5语义化标签——回顾

html5 头部结构  　　   　　

页眉

主要用于页面的头部的信息介绍，也可用于板块头部

页面上的一个标题组合

一个标题和一个子标题，或者标语的组合

 导航 (包含链接的的一个列表)(包含链接的的一个列表)

妙味课堂

妙味课堂

页脚  页面的底部 或者 版块底部

页面上的版块

用于划分页面上的不同区域,或者划分文章里不同的节

article > 用来在页面中表示一套结构完整且独立的内容部分

aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

< figure > 用于对元素进行组合。一般用于图片或视频

figure的子元素 用于对figure的内容 进行说明

(注意没有alt)

html5语义化标签

用来表现时间或日期

我们在每天早上 9:00 开始营业。

参数

我在 情人节 有个约会。

选项列表。与 input 元素配合使用，来定义 input 可能的值。

javascript

html

css

用于描述文档或文档某个部分的细节

该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容

Open 属性默认展开

< summary> details 元素的标题

元素标题

内容

定义一段对话

老师2+2 等于？学生4老师答对了！

定义文章 或页面作者的详细联系信息

需要标记的词或句子

给表单添加一个公钥

用户:

公钥:

定义进度条

76%

forms

新的输入型控件

email  :  电子邮箱文本框，跟普通的没什么区别当输入不是邮箱的时候，验证通不过移动端的键盘会有变化

tel   :   电话号码

url   :   网页的URL

search  :  搜索引擎

chrome下输入文字后，会多出一个关闭的X

range  :  特定范围内的数值选择器

min、max、step( 步数 )

新的输入型控件

number  :  只能包含数字的输入框

color  :  颜色选择器

datetime  :  显示完整日期

datetime-local  :  显示完整日期，不含时区

time  :  显示时间，不含时区

date  :    显示日期

week  :  显示周

month  :  显示月

新的表单特性和函数

placeholder  :  输入框提示信息

例子 :  微博的密码框提示

autocomplete  :  是否保存用户输入值

默认为on，关闭提示选择off

autofocus  :  指定表单获取输入焦点

list和datalist  :  为输入框构造一个选择列表list值为datalist标签的id

required  :  此项必填，不能为空

Pattern : 正则验证  pattern="\d{1,5}“

Formaction 在submit里定义提交地址

表单验证

validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false

oText.addEventListener("invalid",fn1,false);

ev.preventDefault()

valueMissing  :  输入值为空时

typeMismatch :  控件值与预期类型不匹配

patternMismatch  :  输入值不满足pattern正则

tooLong  :  超过maxLength最大限制

rangeUnderflow : 验证的range最小值

rangeOverflow：验证的range最大值

stepMismatch: 验证range 的当前值 是否符合min、max及step的规则

customError 不符合自定义验证

setCustomValidity(); 自定义验证

表单验证

Invalid事件  :  验证反馈 input.addEventListener('invalid',fn,false)

阻止默认验证：ev.preventDefault()

formnovalidate属性  :  关闭验证

demo 下载 https://github.com/ningmengxs/html5.git

html5语义化标签使用规范

Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

Html5语义化标签详解及其兼容性处理

页眉 主要用于页面的头部的信息介绍,也可用于板块头部 页面上的一个标题组合 一个 ...

第二季第十一天 html5语义化标签 css透明度

span不能设置宽高背景 HTML5语义化标签 标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能.

HTML5语义化标签

在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...

让HTML5语义化标签兼容IE浏览器

解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位)

html5语义化标签总结二

HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

转html5语义化标签总结一

HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

HTML5语义化标签重构页面

在HTML5未出现之前我们都用div+css来构建页面,比如

,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...

HTML5语义化标签总结

1.语义化标签总结 基础布局标签 &lt ...

随机推荐

WCF中常用的binding方式

WCF中常用的binding方式: BasicHttpBinding: 用于把 WCF 服务当作 ASMX Web 服务.用于兼容旧的Web ASMX 服务.WSHttpBinding: 比 Basi ...

Linux 查看系统用户的登录日志

查看用户登录系统的日志   有两类日志记录用户登录的行为,一是记录登录者的数据,一个是记录用户的登录时间   一,记录用户登录数据         /var/log/wtmp日志文件记录用户登录的数据 ...

查看Oracle表空间使用情况与增大表空间

1,查看表空间使用情况 SELECT D.TABLESPACE_NAME, SPACE || 'M' "SUM_SPACE(M)", BLOCKS "SUM_BLOCKS ...

CentOS下的svn强制用户提交时写日志

问题:在项目提交时候不写日志,在后期查看修改历史时需要对比版本才知道提交原因.解决方案:在svn服务端通过hooks在提交时强制要求写日志.#!/bin/shREPOS="$1"T ...

jsp基础之 jstl

JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. 除了这些,它还提供 ...

js中的总结汇总&lpar;以后的都收集到这篇&rpar;

点1:js中的比较字符串是否相等,js中是用"=="这个来判断是否相等,这点跟java中不一样,java中是.equals()这种方法. 在之前写的ajax的demo中,因为用了. ...

在vue中使用svg sprite

概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...

C&plus;&plus;诡异异常处理

虽然现在C++头文件允许只编译一次,但仍然可能因为头文件引用引起问题,当出现:“构造函数初始值设定项列表只能在构造函数定义中使用”,可能的原因是头文件互相引用导致的. 出现“error LNK1120 ...

003&period;Ansible基础使用

一 Ansible命令用法 Ansible命令行执行方式有:Ad-Hoc.Ansible-playbook两种,Web方式其官方提供付费产品Tower.Ad-Hoc主要用于临时命令的执行,Ansibl ...

Rafy源码解读 笔记(一) DbMigration

主要功能,提供数据库的升级回滚和变迁操作. 整个模块的都是通过DbMigrationContext这个类来体现的,回滚或升级由若干个子操作完成,每个子操作被封装成一个类MigrationOperati ...