html5学习笔记(4)

HTML5新增元素详解
最新推荐文章于 2025-04-22 10:07:38 发布
原创 最新推荐文章于 2025-04-22 10:07:38 发布 · 502 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

极客学院：http://www.jikexueyuan.com/course/147.html

课程笔记


XHTML可扩展的超文本标记语言

文档声明：

    DTD：


html5与html4的区别


html5新增的元素：

  • 结构元素：section ，article， aside， header，hgroup，footer, nav, figure

  • 其他元素： video，audio, canvas, 

  • input，元素类型：Email， 


全局属性：

  • contentEditable

  • disignMode

  • hidden

  • spellcheck

  • tabindex


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
     < h2 >contentEditable</ h2 >
     < ul  contenteditable = "true" >
         < li >表1</ li >
         < li >表2</ li >
         < li >表3</ li >
     </ ul >
     < ul  hidden = "true" >
         < li >表1</ li >
         < li >表2</ li >
         < li >表3</ li >
     </ ul >
     < input  type = "text"  spellcheck = "" >
     < a  href = "#"  tabindex = "1" >hello1</ a >
     < a  href = "#"  tabindex = "2" >hello2</ a >
     < a  href = "#"  tabindex = "3" >hello3</ a >
</ body >
</ html >


新增的主体结构元素：

1 ， article 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title >article</ title >
</ head >
< body >
     < article >
         < header >
             < h1 >thystar</ h1 >
             < p >welcome to jike</ p >
         </ header >
         < article >
             < header >
                 作者
             </ header >
             < p >评论</ p >
             < footer >
                 time
             </ footer >
         </ article >
         < footer >
             < p >底部</ p >
         </ footer >
     </ article >
     < article >
         < h1 >嵌套页面</ h1 >
         < object >
             < embed  src = "#"  width = "600"  height = "400" ></ embed >
         </ object >
     </ article >
</ body >
</ html >


2. section

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title >article</ title >
</ head >
< body >
     < section >
         < h1 >apple</ h1 >
         < p >this is an apple</ p >
     </ section >
     < article >
         < h1 >apple</ h1 >
         < p >this is an apple</ p >
         < section >
             < h2 >red</ h2 >
             < p >this is a red apple</ p >
         </ section >
         < section >
             < h2 >green</ h2 >
             < p >this is a green apple</ p >
         </ section >
     </ article >
     < section >
         < h1 >fruit</ h1 >
         < article >
             < h1 >apple</ h1 >
             < p >this is an apple</ p >
         </ article >
         < article >
             < h1 >apple</ h1 >
             < p >this is an apple</ p >
         </ article >
         < article >
             < h1 >apple</ h1 >
             < p >this is an apple</ p >
         </ article >
 
     </ section >
</ body >
</ html >


3. nav 导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title >article</ title >
</ head >
< body >
     < nav >
         < ul >
             < li >< a  href = "#" >主页</ a ></ li >
             < li >< a  href = "#" >文档</ li >
         </ ul >
     </ nav >
     < article >
         < header >
             < h1 >ssssssssssssss</ h1 >
             < nav >
                 < ul >
                     < li >< a  href = "#" >主页</ a ></ li >
                     < li >< a  href = "#" >文档</ li >
                 </ ul >
             </ nav >
         </ header >
 
         < section >
             < h1 >ssssssssssssss</ h1 >
             < nav >
                 < ul >
                     < li >< a  href = "#" >主页</ a ></ li >
                     < li >< a  href = "#" >文档</ li >
                 </ ul >
             </ nav >
         </ section >
         < footer >
             < nav >
                 < ul >
                     < li >< a  href = "#" >删除</ a ></ li >
                     < li >< a  href = "#" >修改</ li >
                 </ ul >
             </ nav >
         </ footer >
     </ article >
     < footer >
         < p >< small >版权声明</ small ></ p >
     </ footer >
</ body >
</ html >


aside元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
     < header >
         < h1 >jike</ h1 >
     </ header >
< article >
     < h1 >yufa</ h1 >
     < p >zhengwen</ p >
     < aside >
         < h1 >jishi</ h1 >
         < p >yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</ p >
     </ aside >
</ article >
< aside >
     < nav >
         < h2 >pinglu</ h2 >
         < ul >
             < li >< a  href = "#" >20150101</ a ></ li >
             < li >< a  href = "#" >20150102</ a ></ li >
             
         </ ul >
     </ nav >
</ aside >
</ body >
</ html >


time元素与微格式

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
     < time  datetime = "20101010" >2010-10-10</ time >
     < time  datetime = "20101010T20:00" >2010-10-10</ time >
     < time  datetime = "20101010T20:00+09:00" >2010-10-10</ time >
</ body >
</ html >


pubdate

1
2
3
4
5
6
7
8
9
< body >
     < article >
         < h1 >
             pingguo
         </ h1 >
         < p >< time  datetime = "2015-10-15"  pubdate>2015-10-15</ time ></ p >
         < p >< time  datetime = "2015-10-15"  >2015-10-18</ time ></ p >
     </ article >
</ body >


html5新增的非主体结构元素

header元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
     < header >
         < h1 >页面标题</ h1 >
         < a  href = "#" >jike</ a >
         < nav >
             < ul >
                 < li >< a  href = "#" >学习</ a ></ li >
                 < li >< a  href = "#" >技术</ a ></ li >
                 < li >< a  href = "#" >问答</ a ></ li >
             </ ul >
         </ nav >
     </ header >
     < article >
         < header >< h1 >hello</ h1 ></ header >
     </ article >
 
</ body >
</ html >


footer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
     < footer >
         < ul >
             < li >< a  href = "#" >20150101</ a ></ li >
             < li >< a  href = "#" >20150102</ a ></ li >
         </ ul >
     </ footer >
     < article >
         < h1 >yufa</ h1 >
         < p >zhengwen</ p >
         < footer >
             < h1 >jishi</ h1 >
             < p >yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</ p >
         </ footer >
     </ article >
     < section >
         < h1 >ssssssssssssss</ h1 >
         < footer >
             < ul >
                 < li >< a  href = "#" >主页</ a ></ li >
                 < li >< a  href = "#" >文档</ li >
             </ ul >
         </ footer >
     </ section >
</ body >
</ html >


hgroup

1
2
3
4
< hgroup >
     < h1 >ssssssssssssss</ h1 >
     < h2 >ssssssssssssss</ h2 >
</ hgroup >


address

1
2
3
4
5
6
7
8
9
10
11
12
13
< body >
     < address >
         < a  href = "#" >iven</ a >
         < a  href = "#" >Iven</ a >
     </ address >
     < footer >
         < div >
             < address >
                 < a  href = "#" >iven</ a >
             </ address >
         </ div >
     </ footer >
</ body >
HTML5个人学习笔记
05-27
主要包含各个标签（段落、换行、图像），链接，注释，表格，列表，视频，音频等 适用于初学者，有什么不懂的可以私聊
html 5 学习教程笔记.zip
01-01
html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 ...
HTML5学习笔记
m0_61721166的博客
03-08 9263
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
黑马程序员 HTML5 学习笔记
susu的博客
07-14 2573
1.html语法规范2.html基本结构标签3.开发工具4.html常用标签5.html中注释和特殊字符
HTML 基础标签学习笔记
Rey_family的博客
04-13 2252
示例网站重要保存邮箱：我的网页这是我的第一个网页姓名</th><th>年龄
html5——前端笔记
qq_48721706的博客
09-02 3328
html笔记
h5学习笔记
weixin_51109349的博客
01-10 4794
h5什么是h5h5的好处h5新特性H5新增语义化标签什么是h5 万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言（HTML） 的第五次重大修改，作为新HTML语言，具有新的元素，属性和行为 它有更多样化和强大的网站和应用程序 h5的好处 提高可用性和改进用户的友好体验; 有几个新的标签，这将有助开发人员定义重要的内容； 可以给站点带来更多的多媒体元素(视频和音频)； 可以很好的替代FLASH； 当涉及到网站的抓取和索引的时候，对于SEO很友好； 将被大量应用于移动应用程序和游戏。 h5新特性
HTML学习笔记——05：表格
qq_31532983的博客
01-15 9682
HTML-表格
html5+css3学习笔记（持续更新
flyffffly的博客
03-17 1354
其实我早在之前就学过，只不过当时并没有记录下来，也没有理解其底层原理，所以现在再次学习一遍，本文将记录我二次学习的过程。
HTML学习笔记
最新发布
2301_80155689的博客
04-22 2万+
dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl >< dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl ></< dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl >< dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl ></
HTML5 学习笔记总结（借鉴黑马程序员pink老师前端入门）
haobowen的博客
11-07 5838
1.网页 1.1 什么是网页 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合 网页是网站中的一“页”，通常是HTML 格式的文件，它要通过浏览器来阅读 网页是构成网站的基本元素，它通常由图片，链接，声音，文字，视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为 HTML 文件 1.2 什么是 HTML HTML 指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言.
【HTML】HTML学习笔记（全）
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
html5学习笔记（13）
thystar的专栏
08-13 1129
本地数据库： html5中，内置类两种数据库，一种为SQLLite, 一种为indexedDB 数据库操作模板： <!-- 1，创建访问数据库的对象： 2. 使用事务处理 --> // 创建数据库, openDatabase(数据库名， 版本号，数据库描述, 数据库大小) var db = openDatabase("mydb
thml5 学习笔记（10）
thystar的专栏
08-12 633
canvas绘制渐变图形： function draw(id){ var canvas = document.getElementById(id); if(canvas == null){ return false; }
html5学习笔记(2)
thystar的专栏
12-03 531
html5 列表： http://www.w3school.com.cn/tags/html_ref_byfunc.asp 列表： 无序列表： 使用标签 属性：disc, circle, square 有序列表： 使用标签 属性：A,a,I,i,start 嵌套列表： 使用标签：,, 自
html学习笔记（12）
thystar的专栏
08-13 527
web storage：在web上储存数据： 这里的储存是针对客户端本地而言的，分为两种： 1.sessionStorage ： 将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站花费的时间，session对象可以用来保存在这段时间内所要求保存的任何数据。 2. localStorage： 将数据保存在客户
html5学习笔记(5)
thystar的专栏
12-03 522
html5表单的新增元素和属性 formaction: 1 2 3 4 5 6 7 8 9 10 11 12 body>     form id="testform">         input type="text">     form>     textarea form="testform">textarea>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值