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>
<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>
版权符：©
对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 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标签第三课的更多相关文章
- CodeIgniter框架入门教程——第三课 URL及ajax
本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...
- SQL初级第三课(下)
我们续用第三课(上)的表 辅助表 Student Course Score Teacher Sno ...
- shellKali Linux Web 渗透测试— 初级教程（第三课）
shellKali Linux Web 渗透测试— 初级教程(第三课) 文/玄魂 目录 shellKali Linux Web 渗透测试—初级教程(第三课) 课程目录 通过google hack寻找测 ...
- 【第三课】ANR和OOM——贪快和贪多的后果（下）
Out of Mana,法力耗尽. 内存就像法力,耗尽了就什么都不能做了.有时候一个应用程序占用了太大的内存,超过了Android系统为你规定的限制,那么系统就会干掉你,以保证其他app有足够的内存. ...
- 【第三课】ANR和OOM——贪快和贪多的后果（上）
恼人的ANR 早先年用Android的时候,就连很多知名的app也总是莫名其妙崩溃,好像手机快的时候会崩溃,手机卡的时候app会卡死.卡死的时候会弹出来一个框,询问是要结束app还是继续等待.这就是A ...
- NeHe OpenGL教程 第三课：颜色渲染
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- php删除html标签的三种解决方法
分享下PHP删除HTMl标签的三种方法. 方法1:直接取出想要取出的标记 <?php //取出br标记 function strip($str) { $str=str_replace(" ...
- BeagleBone Black 板第三课：Debian7.5系统安装和远程控制BBB板
BBB板第三课:Debian7.5系统安装和远程控制BBB板 由于BBB板系统是Debian 7.4.据说使用Debian系统能够实现非常多BBB板的无缝连接.能够更好的学习和控制BBB板,所以就决定 ...
- 【Linux探索之旅】第二部分第三课：文件和目录，组织不会亏待你
内容简介 1.第二部分第三课:文件和目录,组织不会亏待你 2.第二部分第四课预告:文件操纵,鼓掌之中 文件和目录,组织不会亏待你 上一次课我们讲了命令行,这将成为伴随我们接下来整个Linux课程的一个 ...
随机推荐
- React 快速入门小记
大约半个月前,我一直在思考一个问题,Angular.React 和 Vue,究竟该学什么? 听取了几位前辈的意见,也综合考虑了各方面的原因,最终选择了 React,希望我"没有选错" ...
- VS.Net 2015 Update3 学习(1) 支持Webpack
让vs.net 编译的时候自动执行webpack 首先 管理员模式下打开 “Developer Command Prompt for VS2015", 是管理员模式啊! 然后进入 cd c: ...
- iOS - WXPay 微信支付
1.微信支付申请 微信支付官方集成指引 微信支付官方集成指导视频 微信 APP 支付开发者文档 微信公众平台 微信开放平台 微信商户平台 1.1 微信 APP 支付申请步骤 APP 支付:APP 支付 ...
- Google C++ Style Guide
Background C++ is one of the main development languages used by many of Google's open-source project ...
- javascript学习内容--object.style.display="value" value值为“”none“隐藏”或 "block"显示
<head> var mychar=document.getElementById("con"); function hidden(){ mychar.style.di ...
- ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)
在安装好的MySQL服务器上,配置了环境变量之后,发现用mysql无法登录,报如题的错误,实在没有办法,决定用安全模式对root用户修改密码: 首先关闭正在运行的MySQL; 在一个终端窗口运行命令: ...
- Pyinstaller打包Selenium脚本为exe文件执行问题
由于同事辞职,许多运维工具的维护工作就交到我这里处理了,运维居然没人会Python脚本! 用Selenium编写的一个爬虫脚本cctv.py,需要给不懂软件的人运行.为了不让他去搭建,安装各种包,库, ...
- MAC OSX环境下cordova+Ionic的安装配置
一.简介 1.Ionic是什么 IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaSc ...
- HDMI之CEC DDC学习笔记（可能有误）
1 HDMI的音视频通路,有待学习: 2 DDC通路,大致是个IIC接口,读取上游器件的EDID或者E-EDID数据: EDID的前128字节数据格式如下:(可能有不同版本,格式可能有区别)
- 《Javascript设计模式》笔记一js的表现力
用不同方法完成同样一个任务:启动和停止动画. 1.过程式的程序设计: function startAnimation(){ ... } function stopAnimation(){ ... } ...