当前位置:Gxlcms > html代码 > 初识HTML5(一)_html/css_WEB-ITnose

初识HTML5(一)_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:34人阅读

  H5其实就是H4的一个增强版本,我们在利用H5进行网页的构造会更简便,标签语义更简洁明了。首先,我们要理解HTML4,它是HTML的标记+css2+JavaScript的一些基本应用,简言之,就是API+语法;而H5无非就是在原先的基础上面提供了一些新的功能。

1、H5的语义标签

  1):html 的定义 ,它的一个文档声明

   语法跟html4 差不多,w3c 提供了一个网站可以用来检测html 的语法.

   https://validator.w3.org/

  2)html 的语义标签,多了很多新的语义标签. 这些标签用起来跟div 和span 差不多。

 1 

  3)兼容处理

    ①在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,将其转换成块元素(block)即可;

    ②在IE9版本以下,并不能正常解析这些新标签,但是可以识别通过document.creatElement('tagName')创建的自定义标签

    ③实际开发中,我们采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。

【注意】

这个是html5 里面的标记,相当于div,只不过有语义;然后放在ie6 里面,它会把这个footer 这个不认识的标记当做行内元素来处理;所以我们就需要屏蔽兼容性,这个时候我们就需要导入一个js 库。

html5shiv.min.js

  2、表单

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

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

 1  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)新增了一些标签

① 数据列表:

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

③用来做度量:

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

3)新增了一些属性:

1 placeholder 占位符2 autofocus 获取焦点3 multiple 文件上传多选或多个邮箱地址4 autocomplete 自动完成,用于表单元素,也可用于表单自身5 form 指定表单项属于哪个form,处理复杂表单时会需要6 novalidate 关闭验证,可用于
标签7 required 验证条件,必填项8 pattern 正则表达式 验证表单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 的值去获取

// 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 的一些对象

人气教程排行