html5笔记

最新推荐文章于 2021-10-18 09:34:22 发布

Caster_Saber

最新推荐文章于 2021-10-18 09:34:22 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：经验积累笔记总结文章标签： html5 css3 笔记

本文链接：https://blog.youkuaiyun.com/Caster_Saber/article/details/45789329

经验积累同时被 2 个专栏收录

94 篇文章

订阅专栏

笔记总结

3 篇文章

订阅专栏

DOM（文档对象模型）

Document.createElement（）可以创建新的对象，比如

也可以通过 Document.createElement()创建一个新的DOM

然后ie可以来识别这个元素（欺骗ie，让ie可以看到这个元素，以及他的相关属性）

Html中的Shiv标记

<!--[if 1t IE 9]><!--对于ie9以前的版本都支持，解决未知元素样式问题>

<scriptsrc="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

内联元素，和块状元素的区别

内联元素，其后的内容不会换行

块状元素后面的内容会换行（块状元素独占一行）

在声明script或者css的时候，不再需要备注属性type=”text/html” type=”javascript/html”之类的

https://html5.validator.nu/ html5验证器验证html代码

这样也就表示，是完全符合html5语言规范的

点击show source,能够展现编码的细节

Html5中新增了很多标签

<menu>

<nav>

<aside>

Article 和section都是块状元素，独占一行

用法详解：

一.Article内部避免嵌套另一个article，会尽量用section来表示其中的逻辑部分

格式

</article>

article与section的异同

section和article可以互相嵌套，也就是说他们没有上下级关系，section可以包含article，article也可以包含section。
感觉上使用都差不多，都可以有h1,h2,h3,都有一个主体，那应该怎么来区分它们的不同？其实很简单，只要从字面上理解它们就可以足够了：
1、article是文章，文章就是一段完整的独立的内容。
2、section就是块，某种意义上可以理解为div，但是有意义的分块是section,无意义的分块是div.

section中必须要有标题，标题也代表了section的意义所在

而且如果有比section更适合的部分，那么尽量不要使用section

另外禁止在section中设置样式，那是div的工作

(section之间可以相互嵌套)

二、<header><hgroup><footer><address>

<header>标签定义的是网站的页眉信息（显示信息），即显示在最上面的信息

<hgroup>只能包含<h1>~<h6>的信息

<address>用来表示每篇文章的作者姓名，以及其他链接信息

<footer>用来显示页脚，即在下面显示的消息

<header>和<footer>内部不能互相包含，且自己不能嵌套

三、<blockquote><details><fieldset><figure>

<blockquote>是用来分段的

<nav>一般用于导航条（主网站的导航或者是页面导航）（自带格式：会自动光标缩进）

<aside>链接，例如目录索引（有链接到别的页面的，也有链接到当前页面的不同地方的）

和主体内容。有密切联系的选择这个

<figure>为了使内容便于理解，但是不影响文档的含义，可用于图像或视频，也可用于其他内容（子标签<figcaption>）和主体内容无关

< > 分别用于显示 “ < ” “ > ”，因为不然的话编译器会默认将其看成标签

和直接写的来比，区别就是显示的时候每个 < 或 > 前后会稍有空余，这样显示会美观一点。

<figure>内部的<figcaption>的显示样式(会稍有空余，并非紧贴页面)

一般情况下 <aside>和文章内容是相关的，所以包含在<article>标签下，但是如果假设侧边栏是最新消息之类的，与文章内容无关，那么应当包含在<body>标签下。

Aria路标角色。。。。

<img>

1.Alt属性：

在图片无法显示时，显示的内容，

(在之前已经描述过的情况下，避免重复要设置成alt=””)

2.title是鼠标移动到图片上，显示的内容。（同样适用于文本内容）

3.longdesc属性

提供单独的一个页面，用来呈现图像的更多信息

字体样式化元素

标签	功能	标签	功能
<i>	斜体	<small>	较小字体（旁注）
<b>	粗体（关键词，文章导语）	<hr>	段落间的分隔
<em>	强调	<s><del>	删除线
<strong>	强烈强调	<u><ins>	下划线

First-letter（伪元素选择器）可以用来创建花式首字母（首字下沉）

注：

<del>标签不能够跨越段落，即，不能在一个段内开始，在另一段结束，跨越隐含的段落边界。

另外在使用的时候，如果想要应用于整段,(或者一整个区域)，不要包含段落标签，比如

~~<del><p></p></del>~~这样是错误的

正确应该是<p><del></del></p>

<ins><del>共有的俩个属性

<ins cite=”URL”>转到用来解释删除原因的界面

<del datetime=””>用来存放时间。

<a>链接可以封装大幅度的区域，只要内部没有表单等和服务器交互信息(按钮或者其他链接)的内容，

<ol>(有序列表)

属性：

1）<type>

1.type=”1” 1,2,3,4,(这是默认的排序规则)

2.type=”a” a,b,c,d排序

3.type=”A” A,B.C,D

4.type=”i” 小写罗马数字排序

5.type=”I” 大写罗马数字排序

2）<start>设置从哪开始计数

3）<value>能够单独设定一个值，只针对于设置该项的值

前俩个都是ol上的属性，value是单个li的属性

如果value还有start各自设置，那么起作用的是靠近最近的设置元素

4）<reversed>递减属性

用法<ol reversed>

<dl>自定义列表

<dt>显示在上面的内容

<dd>显示在下面的内容

<cite>内容：用来表示引用的内容，以斜体显示

<mark>对文字进行高亮显示，默认是黄色背景

<time>

<ruby>用于ruby文本（注释文本）（给出注音）发音指南

<rt>（ruby）

<rp>（ruby）<rp>(</rp> <rp>)</rp>用来封装ruby语言中的括号（如果ruby注释没有括号，那么在内联的情况下，会和后面的元素紧连，影响阅读，所以需要对括号进行内联）

微数据

1. 用于许可信息（rel-license）

2. 用于表示人际关系（比如已关注XXX的信息提示）

Rel=contact 表现自己关注的人的情况

Rel=”me ”能表现自己的登录情况

Rel=”author”指向作者的信息

3. 用于联系信息的hCard

微数据

5个全局特性

1. Itemscope 定义一组（名称-值）（实现元素的嵌套）

<spanitemprop=”memeber” itemscope><spanitemprop></span></span>使得member变成嵌套元素，可以嵌套后面一个itemprop

1）嵌套元素自己是没有值的，只有定义的时候itemsprop定义的名字但是它可以用来嵌套一个值

2）如果一个条目，有itemscope但是没有itemprop，那么他是顶级微数据

2. itemprop 对微数据条目增加一个属性（属性的值即是包含的元素的内容）（URL(链接性质的)，datatime(time),value(data),content(meta)）

<a itemscope=”URL”href=”nxmnsjcbjebcje”>URL即是后面href设置的值

3. itemref=”通过制定id属性，来包含一些非后代属性

4. itemtype定义条目的类型，在itemscope”的同一元素上使用

5. itemid标识符

定义属性可以定义多重属性

<itemprop=”firstsecond”>定义了俩个属性，分别是first和second，（以空格相隔）

另外同个属性名，可以定义多个值

页内引用

可以在需要引用的元素上添加一个id值，然后通过，一个标签中itemref来直接调用该属性

（除了itemscope不能调用）

<itemref=”ID”>

播放视频

<videosrc="1.wmv" width="720" height="405"controls></video>

Controls展现出控制条的具体情况

这是具体效果

<autoplay>（自动播放）视频一旦下载，就开始播放

<controls>（控件）内置控件----进度条

<crossorigin>（跨源域共享）

<height>如果高度调的不对，会看到黑条，但是不会变形

<width>

<loop>（循环播放）

<mediagroup>对多个视频，音频，进行同步

<muted>指定开始时是否静音

<poster>（贴画）表示一幅图像作为一幅定格帧

<preload>（预载）（none不要预加载，metadata开始只加载首帧，之后点击play之后再加载后面的）

<src>标示视频源地址

加粗显示的，都是boolean型

支持mp4格式的文件播放 flv avi swf都不支持播放

WebM能将文件转化为webm格式，应用于网页显示

<Video>应用于视频

<Audio>应用于音频

应用于视频的元素

1.Source

<video>

<source src=”” type=”video/mp4”>//用来加入多个视频资源（将原来的直接在video里添加source改成）

</video>

2.Tarck

1.Default(默认轨道)

2.kind

1.subtitles（字幕）

2.captions(简短说明)音频不可用时，会显示该内容，类似于alt标记

3.descriptios(描述)视频不可用时，显示的内容

4．Chapter(章节)定义章节标题，以便导航

5.metadata（默认包括的一些内容）不会显示给用户

3.<label>标签为文本轨道定义标题

在一个元素内的，同一个kind特性的每一个track元素的label必须只能有一个，既不能多个，也不能和别人的重复

4. src源地址，文本轨道数据的URL

5. srclang 文本轨道数据的语言

当前，video 元素支持三种视频格式：

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

如需在 HTML5 中显示视频，您所有需要的是：

<videosrc="movie.ogg" controls="controls"></video>

<video> 与 </video> 之间插入的内容是供不支持video 元素的浏览器显示的：

<videosrc="movie.ogg" width="320" height="240"controls="controls">

您的浏览器不支持这个视频的显示请更换到更高级的浏览器

</video>

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<videowidth="320" height="240" controls="controls">

您的浏览器不支持这个视频的显示请更换到更高级的浏览器.

</video>

注：在Internet Explorer 8 不支持 video 元素。在IE 9 中，将提供对使用MPEG4 的video 元素的支持。

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

Canvas可以用于像素级别的渲染（html5中新加的内容）

有加入id ,为了之后操作

不建议用css来制定canvas大小

一般直接width=””,height=””,同时能够控制画布大小，还有内部精确度的程度

varcanvas=document.getElementById('outerspace');

varctx=canvas.getCountext('2d');

</script>

在javascript中定义

显示效果

可以在javascript中指定canvas大小

Canvas(id名).width/canvas.height

另外在<canvas>你的浏览器了并不支持canvas的显示</canvas>标签之间写的内容是以防不能显示的时候显示的内容

如果canvas中的内容可以正常显示了，那么浏览器就会忽略这些内容

Canvas命令

标准格式

Var canvas=document.getElementById(‘canvas’);

Context.canvas.getContext(‘2d’);

(这些内容都要写在script中)

1. 画一条线

1.Context.moveTo(开始的坐标)

2.context.lineTo(目标坐标)

Context.stroke()//进行具体的绘制（用于绘制线条）

前两行代码只是表示要画图

Eg:context.moveTo(100,100)

contxt.lineTo(700,700)

context.lineWidth=设置线的宽度;

context

context.stroke();

context.Lineto（）可以在网页中绘制多边形，每次都是在前面一个点的基础上继续绘制

context.fillstyle=“”着色

这些语句加不加末尾的分号都没影响

另外，在绘制的时候不能超出开始时，开辟的canvas画布的大小，不然的话不予呈现，或者直接显示不了超出范围的内容

Context.fillStyle()

Context.fill()

无论是绘制线条，还是填充颜色，在绘制之后，都要对应调用

Context.fill()

Context.stroke()方法，来讲具体的操作实现。

这样的结果是都是黑色的，但是一改变strokestyle就会全局改变，因为是会重新绘制一遍，（在调用stroke（）方法时）

要想多个路径单独起作用，要加一个

Context.beginPath()

Context.closePath()

绘制弧线

Context.arc(

Centerx,centery,radius,(圆心的坐标)，半径的值

startingAngle,endingAngle(起始的角度，结束的角度)

anticlockwise=true（默认是顺时针，但是如果填了true，那么就是变成逆时针）

)

一般使用规则（context.arc(300,300,200,0,1.5*PI)）

加了closePath()之后会有封闭曲线

表单

1.Placeholder占位符，开始时占据空间，点击后并开始输入字符时，便会自然的消失

随便输入几个字符后的显示

2. autofucos(自动焦点)文章一旦加载，便自动设置焦点（而不用等待javascript，否则有的时候会出现，输入之后，等javascript加载完毕的时候，之前输入的内容会被清空，焦点回到原点，又需要重新输入）自动会有光标闪动，一般应用于第一个表单（登录，注册时）

3. autocomplete(根据用户输入的内容，自动完成表单，默认是on)

4. required提示用户必填的字段在提交信息的同时，提出警报，不填写，就不会给予通

过

5. pattern(规定内部文字格式

)

0-9的字符三个，后面跟上A-Z的大写字符三个。

是区分大小写格式的，一般应用于注册页面

6. list属性与datalist元素

<label>Yourfavorite fruit:

<datalistid="fruits">

<selectname="fruits">

<optionvalue="blackberry">Blackberry</option>

<optionvalue="blackcurrent">blackcurrent</option>

<optionvalue="aaaaaaa">aaaaaaaa</option>

<optionvalue="ccccccccc">cccccccc</option>

<optionvalue="bbbbbb">bbbbbbbbbbbbbbbbbbbbb</option>

</select>

ifother,please specify：

</datalist>

<inputtype="text" placeholder="在这里输入内容" list="fruits" autofocus>

</label>

<input>当中的list要和datalist的id匹配，另外要把总体关联起来

<input>要放在datalist的外面<label的里面>

Chorme支持，firefox也支持

Chorme中value还有自定义的值都会显示

比较全面

表单元素

1.<datalist>

2.<keygen>

3.<progress>(书写格式<progress max=”” value=””>)

4.<meter>（书写格式<meter max=”” value=””>）

交互元素

<meta>

1. details（默认隐藏）

2. summary(必须是details的第一个子元素)

3. command(用户可以调用的命令)

</details>

</menu>

平常是收起的效果

点击后展开列表下的内容

<span>使内联元素

CSS3

重置所有的属性

*{margin:0;padding:0}//虽然特别方便，但是会让网站变得特别的慢

一般建议一个个标签的清空，虽然可能有些麻烦

Clear:both;清除浮动属性

有的时候会因为之前设置的浮动属性，影响之后元素的显示，只要用clear:both清除浮动属性即可

一、clear语法与结构 - TOP

1、clear语法：
clear : none | left|right| both

2、clear参数值说明：
none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象

3、clear解释：
该属性的值指出了不允许有浮动对象的边情况，又对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象。

4、css结构
div{clear:left}
div{clear:right}
div{clear:both}

二、div clear常用地方

我们常常用于使用了float css样式后产生浮动，最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动，大对象背景或边框不能正确显示，这个时候我们就需要clear:both清除浮动。

三、css+div案例

DIVCSS5案例说明：这里设置一个css宽度（css width）为500px;盒子，css边框（css border）为红色，css背景（css background）为黑色、css padding为10px盒子，里面包裹着2个小盒子，一个css 浮动靠右（float:right）、一个css float靠左（float:left）,两者边框为白色，背景颜色为灰色,宽度为200px,css高度(css height)为150px。这样我们来观察案例效果，看浮动产生并使用clear清除浮动。

1、案例css代码：

.divcss5{width:500px;background:#000;border:1px solid #F00;padding:10px}

.divcss5_left,.divcss5_right{

border:1px solid #FFF;background:#999;width:200px;height:150px

}

/* css注释：这里为了截图分别，对css代码换行 */

.divcss5_left{ float:left}/* css注释：设置浮动靠左 */

.divcss5_right{ float:right}/* css注释：设置浮动靠右 */

2、案例html代码片段：

<div class="divcss5_left">float left盒子</div>

<div class="divcss5_right">float right盒子</div>

</div>

3、案例效果截图

css div浮动产生与清除案例截图

这个时候需要clear来清除浮动，让css命名为“divcss5”盒子撑开。

4、清除浮动方法

我们在css代码中加入CSS代码：

.clear{ clear:both}

Html代码中“.divcss5”盒子</div>结束标签前加入代码：

最终使用div css clear清除浮动后应用用法案例截图

Clear使用用法案例截图

扩展阅读：CSS清除float浮动技巧 http://www.divcss5.com/jiqiao/j406.shtml

四、DIVCSS5总结 - TOP

使用clear可以清除float产生的浮动，注意clear样式对象加入位置，如上案例对“.divcss5”清除浮动，我们就只需要在此对象div标签结束前加入即可清除内部小盒子产生浮动。而一般常用clear:both来清除浮动，其它clear:left和clear:right可以下来根据clear both案例扩展学习实践。

1. 厂商前缀

增加一个自定义的(专用)属性，添加到使用规范中，给这个属性增加前缀,之后使用，就可以直接更新，而不需要再添加前缀

不同厂家的不同前缀

Firefox(Mozilla)------------------------- -moz-(-moz-dancing-monkey:loop;)

Microsoft--------------------------------- -ms-

Konqueror------------------------------- -khtml-

Opera------------------------------------- -o-

Safari/Chorme(Webkit旗下的)--- -webkit-

一般需要包含所有厂家，然后才可以使用，而且只有声明了之后，才能真正使用

声明时，值也要写入，在使用的时候去掉前缀，再使用一次

例如-webkit-dancing-monkey:loop;

-o-dancing-monkey:loop;