杂项标签
HTML的注释 <!-- --> (浏览器不会显示)
CSS的注释 /* */
JS的注释 /* */(注释代码块) //(注释单行)
HTML5新增标签:
<header>...</header>
定义文档或文档中某部分的页眉,该元素可作为介绍内容或导航链接栏的容器,同个文档中可定义多个<header>元素
<header>
<h1>文章标题</h1>
</header>
<nav><a></a><a></a><a></a></nav>
标注导航链接的区域,若文档中有“前后”按钮,可放到 <nav> 元素中
<nav>
<ul>
<li><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
</ul>
</nav>
<section></section>
定义文档的区段(节),比如章节、头部、底部或者文档的其他部分
<section>
<h1>标题</h1>
<p>内容</p>
</section>
<article></article>
定义独立的包含内容,内容本身应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发,内容潜在来源为:论坛帖子、博客文章、新闻、评论等
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章内容</p>
</article>
<aside></aside>
定义其<article>内容之外的内容,内容应与附近的内容相关,可用作文章的侧栏
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章内容</p>
<aside>相关内容</aside>
</article>
<footer></footer>
定义文档或节的页脚,同个文档中可定义多个<footer>元素
<footer>
<ul>
<li>友情链接</li><li>友情链接</li><li>友情链接</li>
</ul>
</footer>
<hgroup></hgroup>
对标题元素进行分组,标题有多个层级(副标题)时,<hgroup> 元素被用来对一系列 h1~h6 元素进行分组
<hgroup>
<h1>主标题</h1>
<h2>子标题</h2>
</hgroup>
<figure></figure>
规定独立的流内容(图像、图表、照片、代码等),内容应该与主内容相关,同时元素的位置相对于主内容是独立的,如果被删除,则不应对文档流产生影响
<figcaption></figcaption>
为 <figure> 元素定义标题,应该被置于 <figure></figure> 之间的第一个或最后一个位置
<figure>
<img src="" />
<img src="" />
<figcaption>标题</figcaption>
</figure>
<mark></mark>
定义带有记号的文本
<time></time>
定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的,该元素能够以机器可读的方式对日期和时间进行编码;例如,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果
datetime:规定日期或时间,在该元素的内容中未指定日期或时间时,使用该属性
<time datetime="2018-02-14 12:00:00">情人节</time>
<canvas></canvas>
定义一个图形容器,以供使用脚本(JavaScript)来绘制图形,元素中的文本将会被显示在不支持 <canvas> 标签的浏览器中,每当画布的高度或宽度被重设时,画布内容就会被清空
height:画布高度
width:画布宽度
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
解决IE不支持HTML5的方法:
方法一:在<head></head>部分引用Google的 html5.js 文件
<!--[if lt IE 9]>
<script src="/html5.js"></script>
<![endif]-->
方法二:使之成为块级元素,在CSS中加上修饰
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}
方法三:JavaScript代码
document.createElement("elementName").style.display = "block";
内嵌物件 <embed src="url" width="" height="" type="MIME类型" /> (定义一个容器,用来嵌入外部应用或者插件,如mp3、GIF、Flash等)
例:网页播放器 <embed src="url/a.mp3" width="300px" height="100px" autostart="true" loop="true" volume="0~100" controls="console/smallconsole/playbutton/pausebutton/stopbutton/volumelever" hidden="false" />
嵌入对象 <object data=""></object> (用于包含对象,如html文档、图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash)
data:定义对象使用资源的URL
name:对象的名称
height:对象的高度
width:对象的宽度
type:规定 data 属性中指定的数据的 MIME 类型
form:规定对象所属的一个或多个表单id,多个表单id用空格分隔
usemap:值为#加上要使用的 map 元素的名称,规定与对象一起使用的图像映射的名称(图像映射是带有可点击区域的图像),该属性与 <map> 元素的 name 属性相关联,创建对象和映射之间的关系
<object data=""><param name="autoplay" value="true" /><param name="border" value="1" /></object>
<param>元素允许您为插入的对象规定 run-time 设置,也就是说,此标签可为父级的 <object> 或者 <applet> 标签提供参数
name:指定对象支持的任何参数的名称,视对象格式而定
value:设置name属性中所指定的对象的参数对应值
定义视频(仅支持三种视频格式:mp4、webm、ogg)
<video src="" width="" height="" controls="controls">
<source src="a.mp4" type="video/mp4">
<source src="a.webm" type="video/webm">
<source src="a.ogg" type="video/ogg">
浏览器不支持video标签时显示的内容
</video>
src:要播放的视频的URL,如果想在所有浏览器播放视频文件,可在 <video> 元素中使用 <source> 元素,可以链接到不同的视频文件,浏览器将使用第一个可识别的格式
width:视频播放器的宽度
height:视频播放器的高度
poster:url/.jpg,视频下载时显示的图像,或者在用户点击播放按钮前显示的图像
preload:视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性
auto:指示一旦页面加载,则开始加载音频/视频
metadata:指示当页面加载后仅加载音频/视频的元数据
none:指示页面加载后不应加载音频/视频
单属性:
autoplay:视频自动播放
controls:显示播放控件
loop:视频循环播放
muted:视频的音频输出为静音
定义音频(仅支持三种音频格式:mp3、wav、ogg)
<audio src="">
<source src="a.mp3" type="audio/mpeg">
<source src="a.wav" type="audio/x-wav">
<source src="a.ogg" type="audio/ogg">
浏览器不支持audio标签时显示的内容
</audio>
url:音频URL,如果想在所有浏览器播放音频文件,可在 <audio> 元素中使用 <source> 元素,可以链接到不同的音频文件,浏览器将使用第一个可识别的格式
preload:auto/metadata/none,音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性
单属性:
autoplay:音频自动播放
controls:显示播放控件
loop:音频循环播放
muted:音频输出为静音
简易滚动效果制作:
<marquee width="" height="" direction="" behavior="" bgcolor="" onmouseover=this.stop() onmouseout=this.start() >...</marquee>
width:滚动区域的宽度
height:滚动区域的高度,作垂直滚动时一定要设height的值
direction:滚动的方向,默认为 left(←),可选 right(→)、down(↓)、up(↑)
behavior:滚动的方式,默认为 scroll(循环滚动),可选 alternate(来回滚动),slide(滑动幻灯片效果,滚动一次就停止)
loop:表示滚动的次数,值为正整数,默认为循环滚动
scrollamount:滚动速度,值越大速度越快,默认为6,建议1~3
scrolldelay:停顿时间,默认为0,值越大速度越慢,通常不需要设置
bgcolor:滚动区域背景色,默认为白色
onmouseover=this.stop():鼠标停留滚动区域时停止滚动
onmouseout=this.start():鼠标离开滚动区域时开始滚动