您的位置:时时app平台注册网站 > web前端 > HTML5笔记

HTML5笔记

2019-11-02 01:15

<script async src=".....js" onload="alert('b')"></script>

黄金时代、屏弃的标签和本性

  1、表现性成分

    a) basefont

    b) big

    c) center

    d) font

    e) strike

    f) tt  

  2、框架类元素

    a) frame

    b) frameset

    c) noframe

  3、别的因素

    a) acronym  -- 可以用 abbr 取代

    b) applet  --  可以用 object 代替

    c) isindex  --  可以用表单控件代替

    d) dir  --  可以用 ul 代替

  4、属性  

ID

对应元素

属性名称

01

link, a

rev, charset

02

a

shape, coords

03

img, iframe

longdesc

04

link

target

05

area

nohref

06

head

profile

07

html

version

08

img

name

09

meta

scheme

10

object

archive, classid, codebase, codetype, declare, standby

11

param

valuetype, type

12

td, th

axis, abbr

13

td

scope

14

table

summary

15

caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr

align

16

body

alink, link, text, vlink

17

body

background

18

table, tr, td, th, body

bgcolor

19

object

border

20

table

cellpadding, cellspacing

21

col, colgroup, tbody, td, tfoot, th, thead, tr

char, charoff

22

br

clear

23

dl, menu, ol, ul

compact

24

table

frame

25

iframe

frameborder

26

td, th

height

27

img, object

hspace, vspace

28

iframe

marginheight, marginwidth

29

hr

noshade

30

td, th

nowrap

31

table

rules

32

iframe

scrolling

33

hr

size

34

li, ol, ul

type

35

col, colgroup, tbody, td, tfoot, th, thead, tr

valign

36

hr, table, td, th, col, colgroup, pre

width

三、新添属性

manifest属性:定义页面供给动用的离线应用文本,平时位于<html>标签里
charset属性:meta属性之生龙活虎,定义页面包车型大巴字符集
sizes属性:<link>新添属性,当link的rel="icon"时,用以设置图标大小
base属性:<base href="" target="_blank">表示当在新窗口张开叁个页面时,会将href中的内容作为前缀增加到地方前
defer属性:script标签属性,表示脚本加载完结后,唯有当页面也加载达成才实行(推迟推行)
async属性:script标签属性,脚本加载达成后即刻推行(运营进程中浏览器会剖判下边包车型大巴内容),固然页面还尚无加载完成(异步实行)
media属性:<a>要素属性:表示对何种设备举行优化
hreflang属性:<a>的质量,表示超链接指向的网站使用的言语
ref属性:<a>的天性,定义超链接是还是不是是外界链接
reversed属性:<ol>的品质,定义序号是还是不是倒叙
start属性:<ol>的习性,定义序号的起头值
scoped属性:内嵌CSS样式的质量,定义该样式只局限于具有该内嵌样式的要素,适用于单页开荒
seamless:<iframe>的质量,定义该框架未有边框未有边距
srcdoc:<iframe>的个性,定义该框架的情节,会覆盖src属性的从头到尾的经过
sandbox:<iframe>的习性,定义该框架在安全等第上蒙受严峻约束,比方不容许展开框架中的超链接、禁止提交表单,禁绝运转JavaScript等,也就是将框架中的内容设置为异源(不可能跨域访谈)

<!--sandbox用来规定一个内嵌框架的安全等第-->

二、新扩展的价签和属性

日增标签:

1、结构标签

(1)section:独立内容区块,能够用h1~h6结合大纲,表示文书档案结构,也足以有章节、页眉、页脚或页眉的任何部分;

(2)article:特殊独立区块,表示那篇页眉中的大旨内容;

(3)aside:标签内容之外与标签内容有关的帮带信息;

(4)header:有些区块的头顶新闻/标题;

(5)hgroup:尾部信息/题指标填补内容;

(6)footer:尾部音讯;

(7)nav:导航条部分音讯

(8)figure:独立的单元,譬喻有些有图表与内容的音讯块。

2、表单标签

(1)email:必得输入邮件;

(2)url:必需输入url地址;

(3)number:必须输入数值;

(4)range:必得输入一定约束内的数值;

(5)Date Pickers:日期采纳器;

a.date:选取日、月、年

b.month:选取月、年

c.week:接收周和年

d.time:选拔时间(时辰和分钟)

e.datetime:选用时间、日、月、年(UTC时间)

f.datetime-local:选择时间、日、月、年(本地时间)

(6)search:搜索常规的文本域;

(7)color:颜色

3、媒体标签

(1)video:视频

(2)audio:音频

(3)embed:嵌入内容(包蕴各样媒体),Midi、Wav、AU、MP5、Flash、AIFF等。

4、其余职能标签

(1)mark:评释(像荧光笔做笔记)

(2)progress:进程条;<progress max="最大进程条的值" value="当前行度条的值">

(3)time:数据标签,给寻找引擎使用;公布日期<time datetime="二零一四-12-25T09:00">9:00</time>更新日期<time datetime="二零一六- 01-23T04:00" pubdate>4:00</time>

(4)ruby和rt:对某三个字展开注明;<ruby><rt>注释内容</rt><rp>浏览器不扶助时怎么着突显</rp></ruby>

(5)wbr:软换行,页面宽度到须求换行时换行;

(6)canvas:使用JS代码做内容张开图像绘制;

(7)command:按钮;

(8)deteils :展开菜单;

(9)dateilst:文本域下拉提示;

(10)keygen:加密;

 

增加生产总量的属性:

对此js实行增多的习性。

<script defer src=".....js" onload="alert('a')"></script>

<script async src=".....js" onload="alert('b')"></script>

只要未有以上两日性子的话,实践种种为先加载(下载)第八个src,然后在施行其onload,然后在向下风流倜傥一齐步推行defer属性在h5从前就早就有了,输入延迟加载(推迟实施),它会先加载(下载)src中文件内容,然后等页面全体加载成功后,再加载onload中js.async属性属于异步加载,它会在加载src后,立刻施行onload,同反常候还有恐怕会持续加载页面以上实践顺序,alert呈现会先出示b然后再呈现a

网页中标签中参加小Logo的样式代码

<link rel="icon" href="url..." type="图片名称" sizes="16*16">

有体系表ol:新扩展start(列表起先值),reversed(是不是倒置)menu菜单type属性(3个菜单类别)内嵌css样式:在标签内部来定义几个体制区块(scoped),只对体制标签内部才使得内嵌框架:iframe成分,新增加了seamless无边距无边框,srcdoc定义了内嵌框架的从头到尾的经过

<iframe>新添属性:

<!--seamless定义框架无边框 无边距-->

<!--srcdoc的体现等第比sandbox高-->

<!--sandbox用来规定叁个内嵌框架的安全品级-->

<!--sandbox="allow-forms:允许提交表单"-->

<!--sandbox="allow-origin:允许是意气风发律的源"-->

<!--sandbox="allow-scripts:允许实践脚本"-->

<!--sandbox="allow-top-navigation:允许使外围的页面实行跳转"-->

manifest属性:

概念页面须求选择的离线应用文本,经常位于<html>标签里

charset属性:

meta属性之豆蔻年华,定义页面包车型大巴字符集

sizes属性:

<link>新扩张属性,当link的rel="icon"时,用以设置Logo大小

base属性:

<base href="" target="_blank">表示当在新窗口展开一个页面时,会将href中的内容作为前缀加多到地点前

defer属性:

script标签属性,表示脚本加载达成后,唯有当页面也加载完结才推行(推迟实施)

async属性:

script标签属性,脚本加载实现后立马推行(运转进程中浏览器会解析上面包车型客车内容),纵然页面还并没有加载达成(异步实施)

media属性:

<a>成分属性:表示对何种设备开展优化

hreflang属性:

<a>的习性,表示超链接指向的网站使用的言语

ref属性:

<a>的质量,定义超链接是不是是外界链接

reversed属性:

<ol>的个性,定义序号是不是倒叙

start属性:

<ol>的性质,定义序号的起初值

scoped属性:

内嵌CSS样式的属性,定义该样式只局限于具有该内嵌样式的要素,适用于单页开辟

 

HTML5大局属性:对自由标签都足以动用的,以下6个

data-yourvalue 、hidden、Spenllecheck、tabindex、contenteditable、desginMode;

全局属性:

1.可直接在标签里安插的:data-自定义属性名字;

hidden(直接放上去便是藏身);

spellcheck="true"(语法纠错);

tabindex="1"(Tab跳转顺序);

contenteditable="true"(可编写制定状态,单击内容,可纠正);

2.在JavaScript里布署的window.document.designMode = 'on'(JavaScript的全局属性,整个页面包车型大巴公文都足以编制了);

五、综合案例

图片 1

Paste_Image.png

1、HTML5 <section> 元素
<section> 标签订义文书档案中的节(section、区段)。比方章节、页眉、页脚或文书档案中的别的部分。
依靠W3C HTML5文书档案: section 包罗了后生可畏组内容及其标题。

2、HTML5 <article> 元素
<article> 标签订义独立的剧情。

3、HTML5 <nav> 元素
<nav> 标签署义导航链接的片段。
<nav> 成分用于定义页面包车型客车领航链接部分区域,然则,不是独具的链接都亟需包蕴在 <nav> 成分中!

4、HTML5 <aside> 元素
<aside> 标签署义页面主区域内容之外的剧情(比方侧面栏)。
aside 标签的剧情应与主区域的剧情相关.

5、HTML5 <header> 元素
<header>成分描述了文书档案的尾部区域
<header>成分注意用于定义内容的介绍体现区域.
在页面中您能够应用多少个<header> 成分.

6、HTML5 <footer> 元素
<footer> 成分描述了文书档案的底层区域.
<footer> 成分应该蕴涵它的带有成分
七个页脚平时包括文书档案的撰稿者,文章权音讯,链接的接收条约,联系消息等
文档中你可以接受两个 <footer>成分.

7、HTML5 <figure> 和 <figcaption> 元素
<figure>标签规定独立的流内容(图像、图表、照片、代码等等)。
<figure> 成分的开始和结果应当与主内容有关,但若是被删除,则不应对文书档案流产生影响。
<figcaption> 标签订义 <figure> 成分的标题.
<figcaption>成分应该被置于 "figure" 成分的率先个或最后三个子元素的职位。

<meta charset="utf-8">

四、 HTML5大局属性:

data-yourvalue、hidden、Spenllecheck、tabindex、contenteditable、desginMode;

大局属性:
1.可直接在标签里安排的:
data-自定义属性名字;
hidden(直接放上去正是藏身);
spellcheck="true"(语法纠错);
tabindex="1"(Tab跳转顺序);
contenteditable="true"(可编写制定状态,单击内容,可修正);
2.在JavaScript里安排的
window.document.designMode = 'on'(JavaScript的大局属性,整个页面包车型客车文本都得以编写了);

设若未有上述七个属性的话,推行顺序为先加载(下载)首个src,然后在执行其onload,然后在向下各类同步实施defer属性在h5在此以前就早就有了,输入延迟加载(推迟实行),它会先加载(下载)src中文件内容,然后等页面全体加载成功后,再加载onload中js.async属性属于异步加载,它会在加载src后,立刻实施onload,同不时候还恐怕会继续加载页面以上实行各种,alert展现会先出示b然后再展现a。

二、扩展标签:

1、结构标签
(1)section:独立内容区块,能够用h1~h6构成大纲,表示文书档案结构,也能够有章节、页眉、页脚或页眉的别样部分;
(2)article:特殊独立区块,表示那篇页眉中的宗旨内容;
(3)aside:标签内容之外与标签内容有关的助手新闻;
(4)header:有些区块的头顶新闻/标题;
(5)hgroup:尾部音讯/题指标互补内容;
(6)footer:尾部新闻;
(7)nav
(8)figure:独立的单元,举例有个别有图表与内容的音讯块。
2、表单标签
(1)email:必需输入邮件;
(2)url:必得输入url地址;
(3)number:必得输入数值;
(4)range:必得输入一定节制内的数值;
(5)Date Pickers:日期选用器;
a.date:选取日、月、年
b.month:选取月、年
c.week:接受周和年
d.time:选择时间(小时和分钟)
e.datetime:接收时间、日、月、年(UTC时间)
f.datetime-local:选用时间、日、月、年(当地时间)
(6)search:找寻常规的文本域;
(7)color
3、媒体标签
(1)video:视频
(2)audio:音频
(3)embed:嵌入内容(满含种种媒体),Midi、Wav、AU、VCD、Flash、AIFF等。
4、其余功用标签
(1)mark:标明(像荧光笔做速记)
(2)progress:进程条;<progress max="最大进程条的值" value="当前行度条的值">
(3)time:数据标签,给搜索引擎使用;
揭橥日期<time datetime="2014-12-25T09:00">9:00</time>
改革日期<time datetime="2015-01-23T04:00" pubdate>4:00</time>
(4)ruby和rt:对某二个字张开解说;<ruby><rt>注释内容</rt><rp>浏览器不扶助时怎么着显示</rp></ruby>
(5)wbr:软换行,页面宽度到必要换行时换行;
(6)canvas:使用JS代码做内容进行图像绘制;
(7)command:按钮;
(8)deteils :打开菜单;
(9)dateilst:文本域下拉提示;
(10)keygen:加密;

(4)ruby和rt:对某贰个字展开批注;<ruby><rt>注释内容</rt><rp>浏览器不帮忙时怎么样体现</rp></ruby>;

一、HTML5语法

套用了HTML的语法(已往过去的语法,是S链霉素L语法的贰个子集),更简短,更人性化。

1.DOCTYPE及字符编码
① DOCTYPE:<!doctype html>
② 字符编码:<meta charset="utf-8">
③ 给文书档案钦点语言:<html lang="zh-CN">

2.轻重写都能够
① 目标是为着合作更加多的文书档案,在HTML5里不区分轻重缓急写
建议:写代码最棒正式,最佳小写

3.布尔值
① <input type="checkbox" checked/>
在此checked写上就表示true,假如不写就表示false。而不用像HTML4中要写成checked="checked"了。

4.省略引号
① <input type="text" />
② <input type='text'>
③ <input type=text>
下边三种写法都足以,当然假若属性值中现身空格,就不得不写引号或双引号
建议:属性中,引号最佳是双引号

1、不容许写甘休符的竹签:area , basebr , col, command , embed , hr , img , input , keygen , link , meta , param , source , track , wbr<xx/>
2、可以省略结束符的竹签:li , dt , dd , p , rt , optgroup , colgroup , thread , tbody , tr , td , th省略</XXX>
3、能够完全县略的价签:html , head , body , colgroup , tbody

不区分朗朗上口写,

 

meta属性之生机勃勃,定义页面包车型地铁字符集

<!--seamless定义框架无边框 无边距-->

(4)range:必得输入一定范围内的数值;

收集计算的HTML5的新特征,基本除了IE9以下都能够应用。

(3)aside:标签内容之外与标签内容有关的辅助音讯;

<a>的属性,表示超链接指向的网址使用的言语

<ol>的习性,定义序号是还是不是倒叙

script标签属性,表示脚本加载完毕后,独有当页面也加载完结才实践(推迟实践)

manifest属性:

<!--srcdoc的来得等第比sandbox高-->

内嵌CSS样式的习性,定义该样式只局限于具备该内嵌样式的要素,适用于单页开拓

<!--sandbox="allow-top-navigation:允许使外围的页面举行跳转"-->

(1)video:视频;

<a>的品质,定义超链接是还是不是是外界链接

 

base属性:

(3)time:数据标签,给搜索引擎使用;宣布日期<time datetime="二〇一四-12-25T09:00">9:00</time>更新日期<time datetime="二〇一五- 01-23T04:00" pubdate>4:00</time>;

引号能够省略,不过编码标准的话,不提出,

HTML5大局属性:对自由标签都足以动用的,以下6个

spellcheck="true"(语法纠错);

差别之处:早前的 <!DOCTYPE html>

 

2、表单标签

1.可直接在标签里布置的:data-自定义属性名字。

(3)embed:嵌入内容(包涵各类媒体),Midi、Wav、AU、VCD、Flash、AIFF等。

 

data-yourvalue 、hidden、Spenllecheck、tabindex、contenteditable、desginMode;

hidden(直接放上去便是蒙蔽);

(5)wbr:软换行,页面宽度到须求换行时换行;

sizes属性:

(6)footer:底部音信;

HTML5语法

    f.datetime-local:接收时间、日、月、年(本地时间)

<html lang="zh-CN">

有能够简简单单停止符的竹签,和完全县略的竹签应用。

<script defer src=".....js" onload="alert('a')"></script>

 

 

 

(7)color:颜色。

(6)canvas:使用JS代码做内容展开图像绘制;

(4)header:某些区块的尾部音信/标题;

(8)deteils :展开菜单;

全局属性:

(8)figure:独立的单元,举例有些有图表与内容的新闻块。

(1)mark:表明,高亮呈现(像荧光笔做速记);

(3)number:必须输入数值;

    e.datetime:选拔时间、日、月、年(UTC时间)

start属性:

1、结构标签

2.在JavaScript里布署的window.document.designMode = 'on'(JavaScript的全局属性,整个页面包车型地铁文件都得以编写制定了)。

hreflang属性:

增加生产数量的本性:

概念页面须要动用的离线应用文本,日常位于<html>标签里

 

对此js举办增添的品质。

<!--sandbox="allow-forms:允许提交表单"-->

网页中标签中出席小图标的样式代码

 

contenteditable="true"(可编写制定状态,单击内容,可校勘);

<link rel="icon" href="url..." type="图片名称" sizes="16*16">

<!--sandbox="allow-scripts:允许实践脚本"-->

script标签属性,脚本加载实现后登时实践(运营过程中浏览器会深入分析下边包车型地铁剧情),即便页面还尚无加载完结(异步试行)

defer属性:

    d.time:选用时间(小时和分钟)

 

(9)dateilst:文本域下拉提醒;

charset属性:

tabindex="1"(Tab跳转顺序);

<link>新添属性,当link的rel="icon"时,用以设置Logo大小

async属性:

(7)command:按钮;

(10)keygen:加密。

(1)section:独立内容区块,能够用h1~h6构成大纲,表示文档结构,也有章节、页眉、页脚或页眉的别的一些;

大好些个承接了html的语法

增添了布尔值,近似checked,selected

追加标签:

(2)progress:进程条;<progress max="最大进程条的值" value="当前行度条的值">;

 

3、媒体标签

(7)nav:导航条部分消息;

<iframe>新添属性:

    c.week:选用周和年

media属性:

    b.month:选取月、年

(2)audio:音频;

ref属性:

reversed属性:

(1)email:必得输入邮件;

 

字符编码变得轻松,

(6)search:找寻常规的文本域;

(2)url:必得输入url地址;

有体系表ol:新添start(列表起初值),reversed(是或不是倒置)menu菜单type属性(3个菜单种类)内嵌css样式:在标签内部来定义多个体制区块(scoped),只对体制标签内部才有效内嵌框架:iframe成分,新添了seamless无边距无边框,srcdoc定义了内嵌框架的剧情。

<ol>的属性,定义序号的起先值

(5)Date Pickers:日期选择器;

<a>成分属性:表示对何种设备进行优化

(5)hgroup:底部音信/标题的互补内容;

    a.date:选取日、月、年

<!--sandbox="allow-origin:允许是同风流倜傥的源"-->

scoped属性:

4、别的作用标签

<base href="" target="_blank">表示当在新窗口张开一个页面时,会将href中的内容作为前缀增添到地方前

(2)article:特殊独立区块,表示那篇页眉中的宗旨内容;

本文由时时app平台注册网站发布于web前端,转载请注明出处:HTML5笔记

关键词: