HTML5&CSS3(1)

原创 2017年11月14日 18:56:57

1.HTML5=HTML5.0+CSS3+Javascript+API.

2.HTML5的DTD声明为:.

3.新增的HTML5标签——结构标签

(块状元素) 有意义的div

<article>—表示文档、页面、或站点中自包含成分所构成的一个页面的一部分。

<header>—标记定义一个页面或一个区域的头部
<nav>—导航链接
<section>—用来定义文档中的节。
区别:section作用是对页面上内容进行分块,article是独立完整的内容。

<aside>—侧边栏或附属信息
<hgroup>—将标题及其子标签进行分组的标签
<figure>—标记定义一组媒体内容以及它们的标题
<figcaption>—标记定义figure元素的标题
<footer>—标记定义一个页面或一个区域的底部

新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好。

新增标签
<dialog>—标记定义一个对话框(会话框),类似微信
<address>—一般包含版权数据,备案信息是,联系方式等
<mark>—用于定义带有记号的文本
<progress>—定义运行中的进度(进程)
<meter>—表示范围已知是,且可度量的等级标量或分数值。
<menu>用来定义一个列表式菜单

改良标签
(1)、ol标签
新加属性:start和reversed
Start用于自定义列表项开始的编号
Reversed用于设置列表是否进行反向排序

(2)、dl标签
用于创建一个术语列表,允许在一个dl列表中包含多个带名字的术语标签dt,每个后面可跟一个或多个定义标签dd

(3)、ul标签
不支持type和compact属性
不支持li的type属性,改用CSS样式来定义列表类型。

4.多媒体标签:

<video>---标记定义一个视频
<audio>---标记定义音频内容
<source>---标记定义媒体资源
<canvas>---标记定义图片
<embed>---标记定义外部的可交互的内容或插件,如flash.

[多媒体应用]——视频video

(1)常见的视频格式
视频组成部分:画面、音频、编码格式。
视频编码:H.264,Theora,VP8(google开源)
音频编码:ACC,MP3,Vorbis。

(2)HTML5支持的格式:
Ogg=Theora+Vorbis (F C O)
MPEG4=H.264+ACC (S C)
WEBM=VP8+Vorbis (I F C O)

(3)<viedo>的使用

  <video src="文件地址" controls="controls">
                                   </vedio>  
 <video src="文件地址" controls="controls">
   您的浏览器暂不支持vedio标签。播放视频
    </vedio>
<video controls="controls" width="宽度">
<source src="….ogg" type="vedio/ogg">
<source src="….mp4" type="vedio/mp4">
您的浏览器暂不支持vedio标签。播放视频
</vedio>

(4)常见属性
autoplay—-自动播放
controls—控键
width,height—宽,高
loop—循环播放
poster—加载动画时首页的画面图片
muted—是否支持静音

[多媒体应用]——音频audio

(1)HTML5支持的音频格式:
Ogg————免费(C F O)
MP3————收费(I C S)
Mav————收费(F O S)

其余用法同video

5.表单及表单验证<form action=" " id="myform"></from>

(1)

邮箱:<input type="email" form="myform"/>
网址:<input type="url" form="myform"/>
日期:<input type="date" form="myform"/>
时间:<input type="time" form="myform"/>
月:<input type="month" form="myform"/>
周:<input type="week" form="myform"/>
数字:<input type="number" form="myform"/>
滑动条:<input type="range" form="myform"/>
按键:<input type="search" form="myform"/>
颜色:<input type="color" form="myform"/>

(2)常用属性
required—–必填项
placeholder—–默认提示信息
autofocus—–自动获取焦点(增加用户体验)
autocomplete=”on”——-增加自动记忆功能
autocomplete=”off”——-关闭自动记忆功能
使用时需要给标签加上一个name值
如:<input type="text" form="myform" autocomplete="on" name="username">

(3)detalists列表

<input id="mycar" list="cars">
<detalists id="cars">
     <option value="BMW"></option>
     <option value="Ford"></option>
     <option value="Volvo"></option>
                      </detalists>

相关文章推荐

疯狂HTML5 CSS3 JavaScript讲义-1

  • 2017年08月19日 21:55
  • 50MB
  • 下载

【1】网页的构造块(《HTML5与CSS3基础教程 (第8版)》)

(吐槽一下,CSDN博客的文本编译器真是。。。唉。。。)一个网页主要包含三个部分: 文本内容 text content 对其他文件的引用 references to other files 标记 ma...

疯狂 HTML5 CSS3 JavaScript讲义.part1

  • 2016年01月08日 12:07
  • 50MB
  • 下载

【前端面试】HTML5+CSS3初级面试1

最近刚好在看前端的面试,把看到的内容总结一下,方便大家一起学习。 1、简单说一下对HTML5+CSS3的了解。      HTML5和CSS3不仅是两项新的Web技术标准,而且代表了下一代HTML和C...

HTML5 & CSS3初学者指南(1) – 编写第一行代码

本文为HTML5&CSS3初学者指南系列的第一篇文章,介绍HTML5和CSS3的基本知识。

HTML5学习_day13(1)--css3基础属性

css3选择器 css2选择器 1.标签选择器 2.id选择器 3.class选择器 4.群组选择器 5.后代选择器 6.伪类选择器(first-child等) 7.通配选择器 ...

《HTML5与CSS3权威指南》学习笔记1

第1章 Web时代的变迁 不管怎么样,就是变迁了…… 第2章 2.1.2 变化的标记方法 DOCTYPE声明:HTML5中刻意不使用版本声明 指定字符编码,可以且只可以使用原来...
  • yinmo01
  • yinmo01
  • 2012年09月29日 16:43
  • 1256

css3、html5、js笔记(传智播客)

  • 2017年11月20日 14:52
  • 36.29MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5&CSS3(1)
举报原因:
原因补充:

(最多只允许输入30个字)