html5基础知识

标签: HTML5 表单 CSS3
638人阅读 评论(0) 收藏 举报
H5其实就是H4的一个增强版本,我们在利用H5进行网页的构造会更简便,标签语义更简洁明了。首先,我们要理解HTML4,它是HTML的标记+css2+JavaScript的一些基本应用,简言之,就是API+语法;而H5无非就是在原先的基础上面提供了一些新的功能。


1、H5的语义标签
  1):html 的定义 ,它的一个文档声明 <!DOCTYPE html>
   语法跟html4 差不多,w3c 提供了一个网站可以用来检测html 的语法.
   https://validator.w3.org/
  2)html 的语义标签,多了很多新的语义标签. 这些标签用起来跟div 和span 差不多。
复制代码
 1 <nav> 表示导航
 2 <header> 表示页眉
 3 <footer> 表示页脚
 4 <section> 表示区块
 5 <article> 表示文章 如文章、评论、帖子、博客
 6 <aside> 表示侧边栏 如文章的侧栏
 7 <figure> 表示媒介内容分组 与 ul > li 做个比较
 8 <!--以上是常用到的-->
 9 <mark> 表示标记 (带用“UI”,不怎么用)
10 <progress> 表示进度 (带用“UI”,不怎么用)
11 <time> 表示日期
12 <hgroup> 标题列表 (据说已废弃)
13 <details>
14 <bdi>
15 <command>
16 <summary>
17 <rp>
18 <rt>
19 <ruby>
20 <!--尽量避免全局使用header、footer、aside等语义标签。-->
复制代码
  3)兼容处理


    ①在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,将其转换成块元素(block)即可;
    ②在IE9版本以下,并不能正常解析这些新标签,但是可以识别通过document.creatElement('tagName')创建的自定义标签
    ③实际开发中,我们采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。
<!-- [if lte IE 8]>
    <script src="./js/html5shiv.min.js"></script>
<![endif]-->
【注意】<footer></footer> 这个是html5 里面的标记,相当于div,只不过有语义;然后放在ie6 里面,它会把这个footer 这个不认识的标记当做行内元素来处理;所以我们就需要屏蔽兼容性,这个时候我们就需要导入一个js 库。


 html5shiv.min.js


  2、表单


——form 是用来声明表单. input 是用来表示表单项,type 是用来控制表单项的类型.(html5 在表单上面进行一些增强)


1)输入类型(表单类型、表单元素、表单属性、表单事件)


复制代码
 1 <input type="text" />
 2 email    输入email格式
 3 tel    手机号码
 4 url    只能输入url格式
 5 number    只能输入数字
 6 search    搜索框
 7 range    范围
 8 color    拾色器
 9 time    时间
10 date    日期 不是绝对的
11 datetime    时间日期
12 month    月份
13 week    星期
复制代码
部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用


2)新增了一些标签


       ① 数据列表:  <datalist></datalist>


        ②用来做安全的表单提交数据传输的安全:<keygen></keygen>


        ③用来做度量: <meter></meter>


        ④想表单里面输出,没什么作用:<outputer><outputer>


3)新增了一些属性:


复制代码
1 placeholder 占位符
2 autofocus 获取焦点
3 multiple 文件上传多选或多个邮箱地址
4 autocomplete 自动完成,用于表单元素,也可用于表单自身
5 form 指定表单项属于哪个form,处理复杂表单时会需要
6 novalidate 关闭验证,可用于<form>标签
7 required 验证条件,必填项
8 pattern 正则表达式 验证表单
9 手机号:<input type="tel" name="tel" required="required"       pattern="^(\+86)?1[3,5,8](\d{9})$">
复制代码
【PS】我们用新增的这些属性,可以来完成我们之前要使用js 才能实现的效果.


4)表单里面的事件


    ①监听文本框的数据的输入: oninput 事件


    ②当验证不通过的时候触发: oninvalid


   ③进度这个标记,我们使用 progress


 


3、多媒体


  1)早之前我们做网页播放器


        ①我们是通过js 去调用windows 里面自带的一个播放器  media player  操作系统捆绑的


        ②adobe 的这样的一个flash ,基本上面每个用户电脑上面都会安装.


        ③后期我们出现了一个东西,每个电脑上面都可以装一个快播,js 调用快播.


【javascript 里面的内容】  javascript 分为三部分:


            ①ECMAScript


                (定义了js 的语法,变量,语句)


            ②BOM 浏览器对象模型


                (我们可以通过浏览器的自带的一些对象,可以调出浏览器的功能.)


            ③Dom  文档对象模型


            我首先有一个html 文件,我通过浏览器去打开这个html 文件;浏览器会去解析这个html 文件,把这个文件解析之后放在一个document 对象里面; 我以后要操作html 里面的内容,我就直接操作document 就可以


1       //(操作dom 就是熟练dom   的api)
2         //    (操作dom 的前期,要操作dom 必须先得到dom)
3              document.getElementById("");
4              document.getElementsByTagName("");
2) html5 可以提供一些标签来完成播放.


        我们做这种音频文件,以及视频文件,最麻烦地方就是解码【音频文件,以及视频文件,都有格式,各种各样的格式】


        1:假设你网站的视频资源是自己产生的


        2:假设网站的资源是用户上传上去的,我们需要在用户上传的时候对这个资源进行转码.


【H5中】这个h5 在这个的基础上面进行了扩展,提供了一些更加强大的方法.
复制代码
//根据class 的值去获取
             document.getElementByClassName("")
// 这个里面支持css 里面的选择器
//这里返回的是第一个元素..
             document.querySelector(".username")
//获取的所有的,返回的是一个集合.
             document.querySelectorAll(".username>li");
复制代码
【表单的总结】我现在有一个表单,定义属性,什么时候id ,什么是时候使用name,什么时候使用class


   ① 我为一个元素加id 的目的,为了js 方便去获取这个元素


   ②name :如果我要跟服务器进行交互,服务器到时候要获取客户端表单提交的数据.它是根据name 的值去获取   


<input type="text" name="username" value="zhangsan">
// username=zhangsan
 ③class 一般,如果我要通过样式去批量控制元素,我就为元素添加class 属性.


    我们以后做案例:第一步,我要把页面的基本布局画好(html,css)


                                  第二步:分析功能,根据功能找到对应的事件


                                  第三步:事件出来了,方法就出来了


【ps】我看要完成什么功能,一般情况下我们都是操作dom; 获取dom,操作dom (api 操作.);即使调试,一个案例,都是调出来的


【小结】  html5 概念:就是在html4 上面的一个增强版本。在 标签,css,js 上面的一个增强。


 标签:出现了一些新的比较具有颠覆性的标记.


       1:html5 的声明


       2:语义标签(大家当做div ,或者span 来理解就可以.)


       3:兼容性处理,需要导入一个js 库.


       4:表单,我们传统的表单,难以完成比较复杂的页面应用


            4.1:新增了一些类型 type=""


            4.2: 新增了一些标签  datalist


            4.3: 新增了属性  (文档)


            4.4:事件  oninput


          小案例:学生档案,案例.


多媒体处理:


        audio  针对mp3 音频


        video   针对视频的


 解码;做客户端不用处理.


dom 的处理


        新增了一些api ,来让我们去获取页面上面的内容.


        document.getElementByTagName


        document.querySelector();


        document.querySelectorAll();


        新增了属性操作:


         document.getElementById("").classList.add();


         document.getElementById("").classList.remove();


         document.getElementById("").classList.toggle();


         document.getElementById("").classList.contains();


        自定义属性:


          我可以为元素自定义属性 我们是在元素上面加  data-itcast-name="";


          遵守驼峰命名法则


          tabs 选项卡切换.(就是属性api )


4、CSS3 与 JS 的区别


1)css:出现了css3,支持3d 效果.


   js:定位(直接在网站里面可以嵌入地图.),重力感应


2)css3 肯定可以使页面的显示更加的丰富效果


  javascript 新增了一些api,定位(百度地图),重力感应  js 的一些对象


 H5前端培训网站:http://www.zhihaijiangku.com 


 

查看评论

《Html5,基础知识、核心技术与前沿案例》阅读笔记- 待续

本着对前端知识重温梳理,可能有一些是错误的观点,请指出,不甚感激! 第一章:初探Html5 1. 如果需要页面充满全屏。定义 ,body{ height:100%; } 原书描述 ...
  • toberare
  • toberare
  • 2017-03-22 22:04:37
  • 922

html5 css3基础知识详解

如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了 CSS2的众多不足之处,使得Web开发变得更为高效和便捷。 Html4-html5...
  • ITzhongzi
  • ITzhongzi
  • 2017-03-09 18:29:42
  • 618

HTML5学习笔记 —— JavaScript基础知识

来源于我的HTML5学习笔记,通过它可以快速入门HTML5,同时可以作为工作中快速查找知识点的利器。 本文由浅入深地详解了JavaScript的各项基础知识点,通过本文你将会对JavaScript语...
  • chencl1986
  • chencl1986
  • 2017-05-11 21:51:14
  • 3111

【基础html5 基础知识点】(全)

新增的结构标签 section元素  表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中……;HTML4中 ……...
  • kongjiea
  • kongjiea
  • 2014-08-16 15:33:21
  • 13384

10分钟HTML5入门基础知识(一)

毫无疑问,对于开发人员而言,HTML5已是一个热点话题。如果你需要快速了解HTML5的功能的基本原理,阅读本文是你最好的选择。 本文来自The Code Project的付费搜索位置,由Soluti...
  • chaishen10000
  • chaishen10000
  • 2016-05-27 22:09:15
  • 8038

HTML5游戏开发 Chapter01 基础知识与Processing.js

h5游戏开发,processing与processing.js。
  • sinat_32079337
  • sinat_32079337
  • 2017-06-07 13:43:45
  • 277

HTML5基础知识学习笔记

1.Html5基础讲解1.1HTML5基础标签: head:头标签,一般会将一些网页的基本配置和文件引用在head中设置; body:内容标签,里面是整个网页要展示内容部分; 1.2HTML5标...
  • u011771755
  • u011771755
  • 2015-06-17 14:20:06
  • 1126

Html5+CSS3基础知识汇总-CSS3篇

今天总结的是CSS3的学习内容,CSS3的简介、CSS3中新增的样式以及新增样式具体属性的实现。...
  • qq_27348951
  • qq_27348951
  • 2016-11-28 15:26:11
  • 445

HTML5 和CSS3 基础知识

一、HTML5 1.HTML:Hyper Text Markup Language--超文本标记语言 2. : html版本 -- 浏览器的怪异模式 / 标准模式 3.: 根标签,声明html ...
  • s550976994
  • s550976994
  • 2017-11-06 19:19:14
  • 162

HTML5基础知识、核心技术与前沿案例 (刘欢 等著)完整版PDF

《HTML5基础知识、核心技术与前沿案例 》是一本引导初、中级学习者深入了解并有效掌握HTML5核心技巧的技术实战书籍,全书采用“基础知识+案例驱动”的双轨模式,精心安排了大量经典的HTML5设计实战...
  • randyjin
  • randyjin
  • 2018-03-17 00:32:27
  • 77
    个人资料
    等级:
    访问量: 1万+
    积分: 321
    排名: 24万+
    最新评论