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>

<div id ="d1"></div>

<div id ="d2"></div>

</body>

2、Html标签:(标签语义化)

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

<div title="Hyper text Markup Language">HTML</div>

<dl> (dl标签也是块级元素,定义列表,一般用于解释)

<dt>子曰:“巧言令色,鲜矣仁!”</dt>

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

<dt>季</dt>

<dd>1、兄弟排行次数最小的:季弟(小弟),季父(小叔叔)</dd>

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

</dl>

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

版权符:&copy;

对Html标签进行转义:   &lt;p&gt;你好&lt;/p&gt;

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 controls="controls" autoplay loop>

<source src="1.mp3" type="audio/mpeg"/>

<source src="1.ogg" type="audio/ogg"/>

</audio>

(2)视频标签video

<video src="1.mp4" controls="controls" autoplay>

<video controls="controls">

<source src="1.mp4" type="video/mpeg"/>

<source src="1.ogg" type="video/ogg"/>

</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">(点进文本框会显示下拉箭头,而且删除之后才可以重新选择)

<option>苹果</option>

<option>橘子</option>

<option>西红柿</option>

</datalist>

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

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

<summary>Copyright 2011.</summary>

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

</details>

7、menu标签定义列表

<menu>

<li>home</li>

<li>home</li>

<li>home</li>

</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>

</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="search" />

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

<input type="date" />(年月日)

<input type="month" />(年月)

<input type="week" />(周)

<input type="time" />(时间)

<input type="submit"/>

</form>

13、自动填充功能

<form  autocompelete="on">

<input type="text"  list="citylist"/>

<datalist id="citylist">

<option>Beijing </option>

<option>Shanghai</option>

<option>Shenzhen</option>

</datalist>

</form>

14、自动获取焦点

<input type="text" autofocus="autofocus">

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

<form action="" method="get" id="form1"></form>

<input type="text" name="address1" form="form1"/>

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

<form action="1.aspx">

<input type="submit" value="提交" formaction="2.aspx"/>

</form>

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

<input type="file" name="img" multiple="multiple"/>

18、支持自定义验证功能

<form action="1.aspx">

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

<input type="submit"/>

</form>

19、默认内容提示

<input type="text" placeholder="请输入用户名"/>

20、不能为空属性

<form action="1.aspx">

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

<input type="submit"/>

</form>

21、全局属性

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

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

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

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

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

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

<a href="http://www.baidu.com" tabindex="2"> 百度</a><br/>

<a href="http://www.google.com/" tabindex="1"> 谷歌</a><br/>

<a href="http://www.microsoft.com" tabindex="3"> 微软</a>

22、其他属性

(1)ol的reversed属性对列表顺序进行降序

<ol  reversed start="5">

<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>

<script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>

Html标签第三课的更多相关文章

  1. CodeIgniter框架入门教程——第三课 URL及ajax

    本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...

  2. SQL初级第三课(下)

    我们续用第三课(上)的表 辅助表 Student                   Course               Score                    Teacher Sno ...

  3. shellKali Linux Web 渗透测试— 初级教程(第三课)

    shellKali Linux Web 渗透测试— 初级教程(第三课) 文/玄魂 目录 shellKali Linux Web 渗透测试—初级教程(第三课) 课程目录 通过google hack寻找测 ...

  4. 【第三课】ANR和OOM——贪快和贪多的后果(下)

    Out of Mana,法力耗尽. 内存就像法力,耗尽了就什么都不能做了.有时候一个应用程序占用了太大的内存,超过了Android系统为你规定的限制,那么系统就会干掉你,以保证其他app有足够的内存. ...

  5. 【第三课】ANR和OOM——贪快和贪多的后果(上)

    恼人的ANR 早先年用Android的时候,就连很多知名的app也总是莫名其妙崩溃,好像手机快的时候会崩溃,手机卡的时候app会卡死.卡死的时候会弹出来一个框,询问是要结束app还是继续等待.这就是A ...

  6. NeHe OpenGL教程 第三课:颜色渲染

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  7. php删除html标签的三种解决方法

    分享下PHP删除HTMl标签的三种方法. 方法1:直接取出想要取出的标记 <?php //取出br标记 function strip($str) { $str=str_replace(" ...

  8. BeagleBone Black 板第三课:Debian7.5系统安装和远程控制BBB板

    BBB板第三课:Debian7.5系统安装和远程控制BBB板 由于BBB板系统是Debian 7.4.据说使用Debian系统能够实现非常多BBB板的无缝连接.能够更好的学习和控制BBB板,所以就决定 ...

  9. 【Linux探索之旅】第二部分第三课:文件和目录,组织不会亏待你

    内容简介 1.第二部分第三课:文件和目录,组织不会亏待你 2.第二部分第四课预告:文件操纵,鼓掌之中 文件和目录,组织不会亏待你 上一次课我们讲了命令行,这将成为伴随我们接下来整个Linux课程的一个 ...

随机推荐

  1. python走起之第十七话

    选择器 #id 概述 根据给定的ID匹配一个元素. 使用任何的元字符(如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~)作为名称的文本部分, 它必须被两个 ...

  2. 一些JavaScript中的DOM的优化小技巧

    在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...

  3. 【积累】发送验证码按钮倒计时js

    注册的时候要发送验证码,就上网研究了一下,写了一个简单点的... jsp页面: <input type="button" id="testbtn" val ...

  4. thinkphp发邮件失败原因

    使用phpmailer出现连接失败, 代码是别人已经封装好的没有问题,可能原因有如下. qq提示: SMTP server error: mail from address must be same ...

  5. nginx.conf 解释

    http://snapshot.sogoucdn.com/websnapshot?ie=utf8&url=http%3A%2F%2Fwww.cszhi.com%2F20120513%2Fngi ...

  6. 组件嵌套+Mixin函数demo

    非DOM属性:1.dangerouslysetInnerHTML(xxs跨站攻击) 2.key 3.ref 编写组件嵌套 <!DOCTYPE html><html>  < ...

  7. 对Android开发者有益的40条优化建议

    下面是开始Android编程的好方法: 找一些与你想做事情类似的代码 调整它,尝试让它做你像做的事情 经历问题 使用StackOverflow解决问题 对每个你像添加的特征重复上述过程.这种方法能够激 ...

  8. SPSS数据分析—判别分析

    判别分析作为一种多元分析技术应用相当广泛,和其他多元分析技术不同,判别分析并没有将降维作为主要任务,而是通过建立判别函数来概括各维度之间的差异,并且根据这个判别函数,将新加入的未知类别的样本进行归类, ...

  9. css新增样式

    一. box-shadow(阴影效果)使用:box-shadow: 20px 10px 0 #000;-moz-box-shadow: 20px 10px 0 #000;-webkit-box-sha ...

  10. nodejs学习篇

    最近在找工作,然后都说会个后台语言更好,选来选去,觉得nodejs比较有意思,就开始着手学这个了. 其实个人觉得,没有人领一下或者没有本好书去跟着做,这样的学习实在特别累,像我这种刚入门的菜鸟,完全搞 ...