html5标签

什么是html5? 仅仅是狭义的概念。h5草案前身叫做web application 由WHATWG组织编写,在2007年提交到了w3c,w3c起名叫做HTML5。

广义上:新一代开发web富客户端应用程序整体解决方案 富客户端:很强交互和用户体验。 文档结构--文档样式--文档交互 html5=html+css+JavaScript 。

html5应用场景 1.极具表现力的网页 2.网页应用程序 pc端:icloud office365 app端:淘宝、京东、美团 wechat端:淘宝、京东、美团 3.开发本地应用 pc端:网易云音乐、有道词典 这个应用只是一个壳子,里面嵌套的是html5代码 4.简单的游戏(canvas)

html5多了啥? 1.新增的语义化标签 2.新增的样式 3.新增的接口(功能)

这里来介绍新增的html 语义化标签、属性、智能表单、网页多媒体、canvas 2d和3d绘图、svg(矢量图)

简单介绍新增的css 选择器 字体 文本 透明度 圆角 线性、径向渐变 背景 边框图片 盒子模型 过渡 动画

简单介绍新增的JavaScript api 基础的api:新的选择器 Element.classList 访问历史api 全屏api 网页存储: Application Cache localStorage sessionStorage WebSQL indexedDB 设备信息访问:网络状态 硬件访问 设备方向 地理围栏 拖放操作:网页内拖放 桌面拖入 桌面拖出 文件:文件系统api FileReader 网络访问:XMLHttpReques fetch webSocaket 多线程 桌面通知

我这里讲一下语义化标签 页面结构的划分

h5标签并不是要取代div,它只是有些部分增加了语义

<header></header> 页眉 
主要用于页面的头部的信息介绍,也可用于板块头部

<hgroup></hgroup> 页面上的一个标题组合
一个标题和一个子标题,或者标语的组合
<hgroup>
    <h1>妙味课堂</h1>
     <h2>带您进入富有人情味的IT培训</h2>
</hgroup>

<nav></nav> 导航 (包含链接的的一个列表)
<nav><a href=“#”>链接</a><a href=“#”>链接</a></nav>
<nav>
    <h2>妙味精品课程</h2>
    <ul>
        <li><a href=“#”>javascript</a></li>
        <li><a href=“#”>html+css</a></li>
        </ul>
</nav>
<nav>
    <p><a href=“#”>妙味课堂</a></p>
     <p><a href=“#”>妙味课堂</a></p>
</nav>

<footer></footer>页脚  页面的底部 或者 版块底部

<section> <section> 页面上的版块
用于划分页面上的不同区域,或者划分文章里不同的节

<article></ article > 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂件等。
<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分
aside 的内容应该与 article 的内容相关。
被包含在<article>中作为主要内容的附属信息部分,其中的内容 以是与当前文章有关的引用、词汇列表等

<figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明
  <figure>
         <img src=“miaov.png”/>(注意没有alt)
         <figcaption> 妙味课堂 photo &copy 妙味趣学</figcaption>
   </figure>

<time></time>用来表现时间或日期
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数
<p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。 </p>

<datalist></datalist>选项列表。与 input 元素配合使用,来定义 input 可能的值。
<input type="text" list="valList" />
    <datalist id="valList">
        <option value="javascript">javascript</option>
       <option value="html">html</option>
      <option value="css">css</option>
    </datalist>


<details></details>用于描述文档或文档某个部分的细节
该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容
Open 属性默认展开
<summary></summary> details 元素的标题
    <details>
        <summary>妙味课堂</summary>
        <p>国内将知名的IT培训机构</p>
    </details>


<dialog></dialog>定义一段对话
<dialog>
  <dt>老师</dt>
  <dd>2+2 等于?</dd>
  <dt>学生</dt>
  <dd>4</dd>
  <dt>老师</dt>
  <dd>答对了!</dd>
</dialog>

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

<mark></mark> 需要标记的词或句子

<keygen>给表单添加一个公钥
<form action="http://www.baidu.com" method="get">
用户: <input type="text" name="usr_name" />
公钥: <keygen name="security" />
<input type="submit" />
</form>

<progress><progress>定义进度条
<progress max="100" value="76">
         <span>76</span>%
    </progress>

Forms新增
number  :  只能包含数字的输入框
color  :  颜色选择器
datetime  :  显示完整日期
datetime-local  :  显示完整日期,不含时区
time  :  显示时间,不含时区
date  :    显示日期
week  :  显示周
month  :  显示月

新的表单特性和函数
placeholder  :  输入框提示信息
例子 :  微博的密码框提示
autocomplete  :  是否保存用户输入值
默认为on,关闭提示选择off
autofocus  :  指定表单获取输入焦点
required  :  此项必填,不能为空
Pattern : 正则验证  pattern="\d{1,5}“
Formaction 在submit里定义提交地址

引入js文件解决h5兼容问题

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

滚动上报实现

本文作者:IMWeb 何璇 原文出处:IMWeb社区 未经同意,禁止转载 最近产品说要在一个课程卡片列表页面中收集用户滚动行为的数据,大致是要获取用户...

2287
来自专栏我和我大前端的故事

2018 我所了解的 Vue 知识大全(一)

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

983
来自专栏极客编程

最全的资源教程 转

6972
来自专栏Coco的专栏

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

2675
来自专栏前端杂货铺

关于首屏时间采集自动化的解决方案

关于首屏 首屏时间是指从转向该页面到屏幕中该页面所有内容都可见时的时间。已经有太多的关于首屏时间的计算,在本文中并不重复阐述这些已经被提出或者实现的方案,而旨...

5487
来自专栏贺嘉的专栏

教你写一个云上Hello world小程序

小程序上线一月有余,有不少创业团队如朝夕日历、小睡眠、小密圈等工具性的应用享受了这一波产品红利,收获了数十万新用户。笔者近期接触了不少从事后端开发的Java、C...

2.7K0
来自专栏程序员的知识天地

2018前端工程师成长路线图

成为前端工程师,第一步应该是学习HTML/CSS/JavaScript,这是基础。

3232
来自专栏编程微刊

layer弹框在实际项目中的一些应用

2185
来自专栏Material Design组件

Human Interface Guidelines —— Alerts

3738
来自专栏jojo的技术小屋

原 荐 svga 动画

作者:汪娇娇 时间:2017年12月26日 对于一些小的简单的动画,借助css、js差不多就能实现,而且还不能保证还原度百分百(还能接受); 对于那些复杂的动画...

7514

扫码关注云+社区

领取腾讯云代金券