Html标签第三课

1、css

div

{

position:absolute;

}

#d1

{

height:100px;

width:100px;

border: solid 1px red;

background-color:blue;

/*display:none;(隐藏div ，将不占位置)

visibility：hidden；（隐藏div ，占位置）*/

top:30px;

left:30px;

z-index:2(默认为1，为2的时候d1的div块级元素在上面)

}

#d2

{

height:100px;

width:100px;

border: solid 1px red;

background-color:yellow;

top:50px;

left:50px;

}

<body>

</body>

2、Html标签：（标签语义化）

<abbr title="Hyper text Markup Language">HTML</abbr> (缩写说明,使用abbr标签是为了标签语义化，让搜索引擎更容易找到它)

<dl> （dl标签也是块级元素，定义列表，一般用于解释）

<dd>孔子说：“花言巧语，装出和颜悦色的样子，这种人的仁心就很少了”

<dd>1、兄弟排行次数最小的：季弟（小弟），季父（小叔叔）</dd>

<dd>2、三个月为一季，一年分春夏秋冬四季</dd>

</dl>

<pre>被包围在pre元素中文本通常会保留空格和换行符</pre>

版权符：©

对Html标签进行转义： <p>你好</p>

3、html5的标签：（支持版本较高的浏览器）

（1）(音频标签)<audio src="file/nanshannan.mp3" controls="controls" loop(循环播放) autoplay（自动播放）></audio>（很多浏览器不支持MP3的音频，支持OGG的音频，则可在FFmpeg中进行转换），若对音频要求较高，最好同时有mp3格式跟ogg格式的。

在开始中输入cmd，先跳到mp3文件的目录（H盘），然后再跳到ffmpeg安装位置的磁盘（E盘），H:\E:\ffmpeg\bin\ffmpeg-i nanshannan.mp3-acodec libvorbis nanshannan.ogg然后按回车键即可转换。

若有双份音频，则写法如下：

</audio>

（2）视频标签video

</video>

(3)音视频播放、暂停、停止方法：

var audio dotcument.getElementById('music');

audio.play(); //播放

audio.pause();//暂停

audio.currentTime=0;//停止

（4）canvas(画布，需配合js来做效果，后续再做总结)

4、主体结构标签（为了标签语义化）

<header>显示网页中任意一个头部的内容

<nav> 元素代表页面的导航链接区域，用于定义页面的主要导航部分

<article>元素展示网页中独立的一块内容，譬如论坛的帖子，博客的文章，一篇用户的评论<section>文章的小节标题<aside>文章右边显示的与文章相关的内容<footer>文章底部页面显示的内容

<hgroup>代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6的元素放在其内，譬如文章的主标题和副标题的组合。

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。如删除，对整个网页不会影响其他的内容。<figcaption>标签定义figure元素的标题（例如广告标题）

< input type=“text” list="taglist" />

5、<datalist id ="taglist">(点进文本框会显示下拉箭头，而且删除之后才可以重新选择)

</datalist>

6、<details>标签定义文档细节

<details> (点击summary中的内容，即可显示p中的内容)

<p>All pages and graphics on this web site are the property of W3school</p>

</details>

7、menu标签定义列表

<menu>

</menu>

8、address地址标签

<address> Written by <a href="mailto:webmaster@example.com"> Donald Duck</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564,Disneyland<br>

USA

</address>

9、<progress>进度条标签

下载进度：

</progress>

10、<mark>标签是一个高亮显示

<mark> 中国</mark>人民最伟大

11、<time>标签定义日期或时间，或者两者

<p>我们在每天早上<time>9:00</time>开始营业</p>

12、新增的表单元素

<form>

<input type="email" />(点击提交时自动验证输入内容中是否含有@)

<input type="url" />（是否是正确的网址）

<input type="tel" />（是否是正确的手机号）

<input type="number" min="1" max="20" step="4" />（是否是正确的数字，最小值为1，最大值为20，步长为4）

<input type="ranger" min="1" max="20" step="4" />（进度条，最小值为1，最大值为20，步长为4）

<input type="color" />（点击可以调出选色板）

<input type="date" />（年月日）

<input type="month" />（年月）

<input type="week" />（周）

<input type="time" />（时间）

</form>

13、自动填充功能

<option>Beijing </option>

<option>Shanghai</option>

<option>Shenzhen</option>

</datalist>

</form>

14、自动获取焦点

15、form外也可以做数据提交(action指的是提交到哪个页面上去)

16、form内的内容也可以改action地址

</form>

17、file可以支持多文件上传了

18、支持自定义验证功能

请输入邮编地址：<input type="text" pattern="[0-9] {6}" title="请输入六位数的邮编"/>

</form>

19、默认内容提示

20、不能为空属性

请输入邮编地址：<input type="text" required="required"/>

</form>

21、全局属性

(1)contenteditable 属性规定是否可编辑元素的内容

<p contenteditable="true">这是一段可编辑的段落，请试着编辑该文本。</p>

(2)hidden属性规定对元素进行隐藏

<p hidden="hidden">这是一端隐藏的段落。</p>

<p>这是一段可见的段落</p>

(3)tabindex属性规定当使用“tab”键进行导航时元素的顺序。

22、其他属性

（1）ol的reversed属性对列表顺序进行降序

<li> sdfuiu</li>

<li> 1dfuiu</li>

<li> rdfuiu</li>

<li> udfuiu</li>

<li> odfuiu</li>

</ol>

（2）js的async属性规定一旦脚本可用，则会异步执行

<p id="p1">Hello World!</p>

巴特西

Html标签第三课

最新文章

热门文章