1.知识点

  1. lang = “en”   所用语言是英文
  2. 文档结构更简洁
  3. IE8一下不支持h5c3
  4. 书写更宽松
  5. div没有语义
  6. 标签语义化:在合适的地方使用合适的标签
    1. 对seo优化友谊
  7. 网页经典布局
    1. 页头、导航、主题(左右)、页尾
  8. max-wifth、min-width:最大最小宽度
<!-- 头部 -->

<div class="header">

<ul class="nav"></ul>

</div>

<!-- 主体部分 -->

<div class="main">

<!-- 文章 -->

<div class="article"></div>

 <!-- 侧边栏 -->

<div class="aside"></div>

</div>

<!-- 底部 -->

<div class="footer"></div>

H5经典网页布局

<!-- 头部 -->

<header>

<ul class="nav"></ul>
</header>
 <!-- 主体部分 -->

<div class="main">

<!-- 文章 -->

<article></article>
<!-- 侧边栏 -->

<aside></aside>
</div>

<!-- 底部 -->

<footer></footer>

语义化标签

header页头、nav导航、sectioc:区/块 aside侧边栏、article文章、footer页脚、figure媒介内容与分组(与ul>li做个比较)、

mark表示标记(带用UI)、progress进度、time日期

本质上新语义标签与<div>、<span>没有区别,只是其具有表意性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav"> 相当于 <nav>。

通过检测IE浏览器的版本来加载三方的一个JS库来解决H5兼容问题

<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->

表单

  收集用户信息、H5自动验证表单、form表单、fieldset表单分组、legend表单名、

  新增(兼容较差):email:邮箱、color:取色器、url:网址、

      search:搜索栏(带有删除符号、手机端会显示键盘)、number:只能输入数值(step:步长)

      tel:电话(没有自动验证)、time:时间、week:周、month:月、date:日期、

      datetime:时间、range滑动条

    部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。

表单元素(标签)

  <datelist>数据列表 与input配合使用

<input type="text" list="data">
<datelist id="data">
<option>boy</option>
<option>girl</option>
<option>gay</option>
</datelist>

<keygen>  生成加密字符串

<output>   不可当做数据提交?

<meter>   表示度量器,不建议用作进度条

<meter  value="81"    min="0" max="100"  low="60"  high="80" />

表单属性:

placeholder:提示文字(占位符,输入文字后,提示文字消失)

autofocus:自动获取焦点

autocomplete:on/off 自动匹配已经输入国的内容;

required:必填项

mulitiple:多选

novalidate:关闭表单自动验证功能(只能加给form)

pattern = “正则表达式” ; 自定义正则验证

 <form action="" >
<fieldset>
<legend>表单属性</legend>
<label for="">
用户名:<input type="text" placeholder="例如:李狗蛋" autofocus
               name="userName" autocomplete="on" required/>
</label> <label for="">
电话:<input type="tel" pattern="1\d{10}" />
</label> <!-- 上次文件-->
<input type="file" name="file" multiple/> <input type="submit" formaction=“XXX.PHP/>
</fieldset>
</form>

表单事件:

oninput:一般用于字数统计   事件源.oninput

oninvalid:验证不通过的时候触发,用来设置验证不通过的时候提示文字  事件源.setCustomValifity("提示文字")

<body>
<form action="">
<fieldset>
<legend>表单事件</legend>
<label for="">
邮箱:<input type="email" name="" id="txt1"/>
</label>
<label for="">
密码:<input type="text" name="" id="txt2"/>
</label> <input type="submit" />
</fieldset>
</form>
<script>
//表单事件: oninput 当用户输入的时候
// oninvalid 当验证不通过是触发
var txt1=document.getElementById('txt1');
var txt2=document.getElementById('txt2');
var num=0; txt1.oninput=function(){
num++;
// 将字数显示在txt2中
txt2.value=num;
}
// oninvalid 当验证不通过是触发
// 一般用于设置验证不通过时的 提示文字
txt1.oninvalid=function(){
// 用于设置验证不通过时的 提示文字
this.setCustomValidity('亲,请输入正确的邮箱格式!');
} </script>
</body>

表单事件

多媒体:

之前在网页上播放多媒体必须依靠第三方插件

  mediaplay/快播/false插件

H5新增音频视频标签

  audio音频标签、video视频标签

    controls:播放控制条

    autoplay:自动播放

    loop:循环播放

  音频支持:mp3/wav/ogg

  视频支持:mp4/ogg/webm/

<audio controls autoplay>
    <source src = "music.mp3">
    <source src = "music.ogg">
    <source src = "music.wav">
    抱歉,你的浏览器不支持音频标签
</audio>

DOM

类操作

  var new = document.querySelector("选择器“);只会选择符合条件的第一个元素;

  var newArr=document.querySelectorAll("选择器“);

  box.classList.add("类名“) ;添加类名

  box.classList.remove("类名“);删除类名

  box.classList.toggle("class");切换class,有则删除无则添加

  box.classList.contains("类名“);是否包含某个类名

自定义属性

  

在HTML5中我们可以自定义属性,其格式如下data-*="",例如

data-info="我是自定义属性",通过Node.dataset['info'] 我们便可以获取到自定义的属性值。

Node.dataset是以类对象形式存在的

当我们如下格式设置时,则需要以驼峰格式才能正确获取

data-my-name="itcast",获取Node.dataset['myName']

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab 标签</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
} .tabs {
width: 400px;
margin: 30px auto;
background-color: #FFF;
border: 1px solid #C0DCC0;
box-sizing: border-box;
} .tabs nav {
height: 40px;
text-align: center;
line-height: 40px;
overflow: hidden;
background-color: #C0DCC0;
display: flex;
} nav a {
display: block;
width: 100px;
border-right: 1px solid #FFF;
color: #000;
text-decoration: none;
} nav a:last-child {
border-right: 0 none;
} nav a.active {
background-color: #9BAF9B;
} .cont {
overflow: hidden;
display: none;
} .cont ol {
line-height: 30px;
} </style>
</head>
<body>
<div class="tabs">
<nav>
<a href="javascript:;" data-cont="local">国内新闻</a>
<a href="javascript:;" data-cont="global">国际新闻</a>
<a href="javascript:;" data-cont="sports">体育新闻</a>
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
</nav>
<section class="cont" id="local" >
<ol>
<li>河感在生矿难,死伤在全10</li>
<li>禽流感在感在广1处继续蔓延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广在全国暴发</li>
<li>禽流感在全国多处继续蔓延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="global">
<ol>
<li>河南再次发生矿难,死伤人数超过100</li>
<li>禽流感次发生蔓延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广减产绝收发</li>
<li>禽流感在全国多作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="sports">
<ol>
<li>333河南再次发生矿难,死伤人数超过100</li>
<li>禽流感在全国多处农作物农延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
<li>禽流感在全农作物继续蔓延,温家宝指示</li>
<li>南方大农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="funny">
<ol>
<li>福建发生血腥命案:两女遭割喉 1男孩被砍数刀</li>
<li>四川原副省长李成云被查 5年前曾违纪又复出</li>
<li>胡歌反对粉丝探班:以前请吃饭现在会黑脸</li>
<li>曝郑爽爸爸歌厅撩妹 与女子勾肩搭背显亲密</li>
<li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
<li>国子监大街门匾现错字 已悬挂近10年(图)</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
</div>
<script>
// 目标: 默认显示一个 当前的样式
// 点击导航,实现切换
// key 表示的当前显示的是第几个 (function(key){
// 获取所有的导航
var navs=document.querySelectorAll('nav a');
// 遍历 给导航 绑定事件,并且添加当前样式
for(var i=0;i<navs.length;i++){
// 如果是用户指定的当前样式
if(key==i){
navs[i].classList.add('active');
// 拿到要显示内容section的id
var secId=navs[i].dataset['cont'];
// 获取对应的section标签
document.querySelector('#'+secId).style.display='block';
} // 给每一个导航绑定点击事件
navs[i].onclick=function(){
// 排他
// 之前有active样式的清除, 之前显示的section 隐藏
var currentNav=document.querySelector('.active');
// 获取对应的内容区域 ,让其隐藏
var currentId=currentNav.dataset['cont'];
// 去掉导航的active 样式
currentNav.classList.remove('active');
// 对应的内容区域
document.querySelector('#'+currentId).style.display='none'; // 突出显示自己 导航添加样式 对应的section 显示
// 给自己添加active样式
this.classList.add('active');
// 对应的section模块显示出来
var myId=this.dataset['cont'];
document.querySelector('#'+myId).style.display='block';
}
} })(0); </script>
</body>
</html>

HTML5 01. 布局、语义化标签、智能化表单、表单元素/标签/属性/事件、多媒体、类操作、自定义属性的更多相关文章

  1. HTML5学习之语义化标签(一)

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  2. HTML5学习之语义化标签

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  3. 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. HTML5的新语义化的标签

    在HTML5之前采用HTML+CSS文档结构写法 [ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域)] ...

  5. Html5新增的语义化标签(部分)

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...

  6. html5新增的语义化标签极其作用

    在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...

  7. H5C3--语义标签以及语义标签IE8兼容,表单元素新属性,度量器,自定义属性,dataList,网络监听,文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  8. HTML5的全新语义化元素

    1.<section> <section>元素用来定义文档或应用程序中的区域(或节).例如,可以用它组织你的个人信息,一个<section>用于联系信息,另一个用于 ...

  9. [html5] 学习笔记-表单新增的元素与属性(续)

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

随机推荐

  1. Linux基础进程管理

    一.进程 了解如进程的: • PID,PPID • 当前的进程状态 • 内存的分配情况 • CPU和已花费的实际时间 • 用户UID,他决定进程的特权 (一).静态查看进程 # ps axu | le ...

  2. 使用 PowerShell 远程管理

    要求 PowerShell 版本要求至少是2.0版本以上,目前PowerShell 2.0 支持最低的操作系统版本为Windows XP.本次操作使用的是 PowerShell 5.1 请使用管理员身 ...

  3. Why do I write a blog

    I believe the most beautiful and elegant answer to this question is from Churchill. "On a peace ...

  4. JVM总结(一)

    JVM总结(1) 1.JVM组成: JVM由类加载器子系统.运行时数据区.执行引擎以及本地方法接口组成. 2.JVM运行原理: Java源文件经编译器,编译成字节码程序,通过JVM将每一条指令翻译成不 ...

  5. MySQL一键生成实体文件的神器-ginbro

    Java转过来的同学对Mybatis的使用肯定不陌生,特别是对一堆表去生成相应的dao和entity的时候使用Mybatis generator所带来的感触,无比深刻.前面我们也讲过原生的数据库使用, ...

  6. 关于JVM内存溢出的原因分析及解决方案探讨

    前言:JVM中除了程序计数器,其他的区域都有可能会发生内存溢出. 0.什么是内存溢出 当程序需要申请内存的时候,由于没有足够的内存,此时就会抛出OutOfMemoryError,这就是内存溢出. 1. ...

  7. Netty基础系列(4) --堆外内存与零拷贝详解

    前言 到目前为止,我们知道Nio当中有三个最最核心的组件,分别是:Selelctor,Channel,Buffer.在Netty基础系列(3) --彻底理解NIO 这一篇文章中只是进行了大致的介绍. ...

  8. Linux--shell编程原理--03

    一.编程原理: 1.编程介绍: 计算机只能识别二进制指令 程序=指令+数据 根据服务的重心不同,我们分为面向过程编程,面向对象编程: a) 面向过程:侧重于指令的编程语言 b) 面向对象:侧重于数据的 ...

  9. 走进JavaWeb技术世界5:初探Tomcat的HTTP请求过程

    初探Tomcat的HTTP请求过程 前言:1.作为Java开发人员,大多都对Tomcat不陌生,由Apache基金会提供技术支持与维护,因为其免费开源且易用,作为Web服务器深受市场欢迎,所以有必要对 ...

  10. Elasticsearch 7.x 最详细安装及配置

    Elasticsearch 7.x 最详细安装及配置 一.Elasticsearch 7.x 小马哥说过,学习技术栈得看版本,那么 Elasticsearch 7.x 有什么好的特性呢? ES 7.0 ...