菜鸟学习HTML5+CSS3（一）

主要内容：

1.新的文档类型声明（DTD）

2.新增的HTML5标签

3.删除的HTML标签

4.重新定义的HTML标签

一、新的文档类型声明（DTD）

HTML 5的DTD声明为：<!doctype html>、<!DOCTYPE html>、<!DOCTYPE HTML>等也是正确的，因为HTML语法是不区分大小写的。

在编写HTML5文档时，要求指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染。

二、新增的HTML5标签

HTML5 新增的标签主要分为：结构标签、多媒体标签、Web应用标签等其它标签

2.1 结构标签：（块状元素）有意义的div

<article> 标记定义一篇文章

<header> 标记定义一个页面或一个区域的头部

<nav> 标记定义导航链接

<section> 标记定义一个区域

<aside> 标记定义页面内容部分的侧边栏

<hgroup> 标记定义文件中一个区块的信息

<figure> 标记定义一组媒体内容以及它们的标题

<figcaption> 标签定义figure元素的标题

<footer> 标记定义一个页面或一个区域的底部

<dialog> 标记定义一个对话框（会话框）类似微信

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

2.2 多媒体交互标签

<video> 标记定义一个视频

<audio> 标记定义音频内容

<source> 标记定义媒体资源

<canvas> 标记定义图片

　　HTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验

2.3 Web应用标签

<menu> 命令列表

<menuitem> menu命令列表标签FF（嵌入系统）

<command> menu标记定义一个命令按钮

<meter> 状态标签(实时状态显示：气压、气温)C\O

<progress> 状态标签（任务过程：安装、加装）C、F、O

　　 <datalist> 为input标记定义一个下拉列表,配合option F、O

　　 <details> 标记定义一个元素的详细内容，配合dt、dd C

2.4 注释标签

　　<ruby> 标记定义注释或音标

　　<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示

　　 <rt> 标记定义对ruby的注释内容文本

2.5 其他标签

　　<keygen> 标记定义表单里一个生成的键值(加密信息传送)O、F

　　<mark> 标记定义有标记的文本 (黄色选中状态)

　　<output> 标记定义一些输出类型,计算表单结果配合oninput事件

　　<time> 标记定义一个日期/时间目前所有主流浏览器都不支持

三、删除的HTML标签

　　纯表现的元素：

　　　　basefont，big，center，font, s，strike，tt，u；

　　对可用性产生负面影响的元素：

　　　　frame，frameset，noframes；

　　产生混淆的元素：

　　　　acronym ，applet，isindex，dir。

四、重新定义的HTML标签

HTML元素	HTML5中的意义
<b>	代表内联文本，通常是粗体，没有传递表示重要的意思
<i>	代表内联文本，通常是斜体，没有传递表示重要的意思
<dd>	可以同details与figure一同使用，定义包含文本，dialog也可用
<dt>	可以同details与figure一同使用，汇总细节，dialog也可用
<hr>	表示主题结束，而不是水平线，虽然显示相同
<menu>	重新定义用户界面的菜单，配合commond或者menuitem使用
<small>	表示小字体，例如打印注释或者法律条款
<strong>	表示重要性而不是强调符号

整理未完～～

转载于:https://www.cnblogs.com/xiaowuzi/p/3633382.html

菜鸟学习HTML5+CSS3（一）相关推荐

学习HTML5+CSS3的第二天
今天第二天学习Html5+css3 今天根据书上一共写了两个小实例第1个实例关于音频播放文件 1 <!DOCTYPE HTML> 2 <html> 3 <body> ...
学习HTML5+CSS3的第一天
昨天在京东上买了本书HTML5+CSS3从入门到精通今天开始我的第一天学习开始我的第一个HTML5页面 1 <!DOCTYPE html> 2 <html> 3 <h ...
html5css3菜鸟教程,HTML5+CSS3实现拖放(Drag and Drop)示例
本文简单介绍一下HTML5的拖放实现.MXGHTML5中文学习网 - HTML5先行者学习网拖放(Drag 和 drop)是 HTML5 标准的组成部分.MXGHTML5中文学习网 - HTML5先 ...
学习HTML5+CSS3
目录一,HTML5学习概述 1,认识HTML5 概述发展历程 HTML5和HTML4的区别 2,HTML5 的语法与结构 HTML5 标签 HTML5 标签属性 HTML5 文档注释 HTML5 ...
第一章前端开发——HTML5/CSS3
第一章前端开发学习--HTML5/CSS3 一.初识HTML 二.HTML5/CSS3基础三.页面组件四.页面布局五.CSS3新增功能一.初识HTML 什么是HTML(what): HTML ...
HTML5+CSS3网页模板
HTML5已经得到众多网页设计者的推崇,国际W3C标准组织及全球许多著名互联网公司也首推新的HTML5脚本,再加CSS3的推出,越来越多的人开始学习使用HTML5+CSS3来设计网页. 最好模板特此推 ...
小米商城（HTML5+CSS3版）
正在学习HTML5+CSS3的小伙伴们如果想练手的话,可以先照着小米商城的网站敲.因为还没有学到JS,下面代码只实现了部分功能: index:html <!DOCTYPE html> &l ...
HTML5+CSS3盒布局
最近正在学习HTML5+CSS3,记录下备忘 1.第一种盒模型 <!DOCTYPE> <html> <head> <meta http-equiv=" ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...

菜鸟学习HTML5+CSS3（一）

菜鸟学习HTML5+CSS3（一）相关推荐

最新文章

热门文章