html你可能还不知道的一些知识点
一、标签语义化
html标签语义化是让大家直观的认识标签和属性的用途和作用,好处最主要的是对搜索引擎友好。
Eg:
1、如果你想在页面中突出"奥巴马"这三个字,让搜索引擎重视它,如果你这么写:
<div> 奥巴马</div>
对于搜索引擎来说,它也只是一个普通得不能再普通的三个字而已,尽管它是指代美国总统。
那么应该怎样才能让搜索引擎知道它的重要性呢?来看看语义化的写法吧:
<h1>奥巴马</h1>
奥巴马看了后,乐了,哥本来就应该备受关注的!
2、如果文字要加粗显示,<em> 是用作强调的,strong是用作重点强调的。
3、对于标签<s>只是表示一个普通的删除线,而<del>标签更具语义化,它表示删除一个内容,并且del还带有cite和datetime来表明删除的原因以及删除的时间。
......
So,标签语义化其实就是把你想要表达的东西更容易被搜索引擎理解和重视,让你想表达的东西,to be girlfriend,not to be friend。
二、HTML标签补充
1、缩写说明
<abbr title="Hyper text Markup Language">HTML</abbr>
2、定义列表(一般用于内容解释)
<dl><dt>子曰:“巧言令色,鲜矣仁!”</dt><dd>孔子说:“花言巧语,装出和颜悦色的样子,这种人的仁心就很少了。”</dd><dt>季</dt><dd>1、兄弟排行次序最小的:季弟(小弟).季父(小叔叔)</dd><dd>2、三个月为一季,一年分春夏秋冬四季</dd> </dl>
3、预格式文本标签
被包围在 pre 元素中的文本通常会保留空格和换行符
<pre> 1、这是一沟绝望的死水 2、清风吹不起半点漪沦 3、不如多扔些破铜烂铁 4、爽性泼它的剩菜残羹 </pre>
4、版权符
©
5、对html进行转义
<body>
三、H5新增标签
1、多媒体标签:video、audio、canvas
1.1 音频标签video
不同浏览器对于html5 audio标签和音频格式的兼容性(一般提供ogg和mp3格式,就可以支持所有主流浏览器了。)
<audio src="1.mp3" controls="controls">
<audio controls="controls" autoplay loop><source src="1.mp3" type="audio/mpeg"/><source src="1.ogg" type="audio/ogg"/> </audio>
编解码工具:FFmpeg(下载地址:www.ffmpeg.org)
mp4转ogg方法同上。
1.2 视频标签video
<video src="1.mp3" controls="controls" autoplay> <video controls="controls"><source src="1.mp4" type="video/mpeg"/><source src="1.mp4" type="video/ogg"/> </video>
音视频播放、暂停、停止方法:
var audio = document.getElementById('music1'); audio.play();//播放 audio.pause();//暂停 audio.pause(); audio.currentTime=0;//停止
1.3 画布标签:Canvas (需要配合js来做效果,后续再总结)
2、主体结构标签
2.1 nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
<nav><ul><li>HTML 5</li><li>CSS3</li><li>JavaScript</li></ul> </nav>
2.2 article元素展示网页中独立的一块内容,譬如论坛的帖子、博客的文章、一篇用户评论。
<article><h1>一篇文章</h1><p>文章内容..</p><footer><p><small>版权:html5jscss网所属,作者:小北</small></p></footer> </article>
<article><header><h1>一篇文章</h1><p><time pubdate datetime="2012-10-03">2012/10/03</time></p></header><p>文章内容..</p><article><h2>评论</h2><article><header><h3>评论者: XXX</h3><p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p></header><p>哈哈哈</p></article><article><header><h3>评论者: XXX</h3><p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p></header><p>哈?哈?哈?</p></article></article> </article>
2.3 section元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。
<article><h1>前端技术</h1><p>前端技术有那些</p><section><h2>CSS</h2><p>样式..</p></section><section><h2>JS</h2><p>脚本</p></section> </article>
2.4 aside 元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等、
<article><p>内容</p><aside><h1>作者简介</h1><p>小北,前端一枚</p></aside> </article>
2.5 header元素展示一个区域的头部分
2.6 footer元素展示一个区域的尾部分
2.7 hgroup元素代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1
到h6
元素放在其内,譬如文章的主标题和副标题的组合
<hgroup><h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1><h2>HTML 5</h2> </hgroup>
2.8 figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
3、非主体结构标签
3.1 <datalist> 标签定义选项列表。
<input type="text" list="taglist" /> <datalist id="taglist"> <option>苹果</option> <option>橘子</option> <option>西红柿</option> </datalist>
3.2 details标签定义文档细节
<details> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details>
3.3 menu标签定义列表
<menu><li>home</li><li>home</li><li>home</li> </menu>
3.4 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>
3.5 progress进度条标签
下载进度: <progress> </progress>
3.6 mark高亮显示
<mark>中国</mark>人民最伟大
3.7 <time> 标签定义日期或时间,或者两者
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>
3.8 新增的表单元素
<input type="email" /> <input type="url" /> <input type="tel" /> <input type="number" min="1" max="20" step="4" /> <input type="range" min="1" max="20" step="4" /> <input type="search" /> <input type="color" /> <input type="date" /> <input type="month" /> <input type="week" /> <input type="time" />
3.9 新增的input属性
3.9.1 用户输入自动完成功能
<form autocompelete="on"> <input type="text" list="citylist" /> <datalist id="citylist"><option>BeiJing</option><option>QingDao</option><option>QingZhou</option><option>QingHai</option> </datalist> </form>
3.9.2 页面加载的时候获取焦点
<input type="text" autofocus="autofocus" />
3.9.3 form外也可以做数据提交
<form action="" method="get" id="form1"> </form> <input type="text" name="address1" form="form1" />
3.9.4 form内的内容也可以改action地址
<form action="1.aspx"><input type="submit" value="提交" formaction="2.aspx" /> </form>
3.9.5 file可以支持多文件上传了
<input type="file" name="img" multiple="multiple" />
3.9.6 支持自定义验证功能了
<form action="1.aspx">请输入邮政编码:<input type="text" pattern="[0-9]{6}" title="请输入6位数的邮编" /><input type="submit" /> </form>
3.9.4 新增默认内容提示了
<input type="text" placeholder="请输入用户名"/>
3.9.5 新增不能为空属性
<form action="1.aspx">请输入邮政编码:<input type="text" required="required" /><input type="submit" /> </form>
3.10 新增全局属性
3.10.1 contenteditable 属性规定是否可编辑元素的内容。
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
3.10.2 hidden 属性规定对元素进行隐藏。
<p hidden="hidden">这是一段隐藏的段落。</p> <p>这是一段可见的段落。</p>
3.10.3 tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。
<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a><br /> <a href="http://www.google.com/" tabindex="1">Google</a><br /> <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
3.11 其他属性
3.11.1 ol的reversed属性对列表顺序进行降序
<ol reversed start="5" ><li>SHUFFLE!/三界恋曲</li><li>扑杀天使</li><li>零之使魔</li><li>不要撒娇哦/极乐天师/纯情和尚俏尼姑</li><li>to love/出包王女</li> </ol>
3.11.2 js的async 属性规定一旦脚本可用,则会异步执行。
<p id="p1">Hello World!</p> <script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>
3.11.3 js的defer 属性规定当页面已完成加载后,才会执行脚本。
<script type="text/javascript" src="/example/html5/demo_defer.js" defer="defer"></script> <p>上面的脚本从下面的段落请求信息。通常,这是不可能的,因为脚本在段落加载之前已经执行了。</p> <p id="p1">Hello World!</p> <p>不过,defer 属性规定脚本稍后执行。这样脚本就可以从段落中请求信息了。</p>
转载于:https://www.cnblogs.com/ruanmou/p/4821894.html
html你可能还不知道的一些知识点相关推荐
- CSS你可能还不知道的一些知识点
一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...
- JS你可能还不知道的一些知识点(一)
1.js程序是用Unicode字符集编写的, 2.转义字符:反斜线 function Test(){ var s='you\'re right,it can\'t be a quote'; conso ...
- servlet后台如何接受multpartfile_Servlet进阶教程(你不得不知道的Servlet知识点)
" 人生的游戏不在于拿了一副好牌,而在于怎样去打好坏牌,世上没有常胜将军,勇于超越自我者才能得到最后的奖杯." 你好,我是梦阳辰!快和我一起学习吧! 精彩回放: Servlet入门 ...
- 自学平面设计,不能不知道的基础知识点是什么?
以下,是我总结的:学习平面设计不得不知道的基础知识点.也简要概括我对平面设计学习的理解,相信大家在看完下述分析后,都会有更加明确的学习思路. 1.什么是平面设计? 平面设计(graphic desig ...
- 网络运维与安全岗位月薪2.5w,您还不知道的前景!
网络运维与安全岗位月薪2.5w,您还不知道的前景! 一.为什么学网络安全?标重点 1..市场巨大 每年各安全厂商收入高达400亿左右,随着5G的发展,万物互联时代,市场将进一步扩大. 2..薪资高 网 ...
- 【Android】你可能还不知道的elevation、以及Z值等
Android你可能还不知道的elevation以及Z值等 elevation以及Z值是什么 有什么用处呢 影响View的阴影 影响View相互阻挡顺序 还有CardView [Android]你可能 ...
- android 签名包闪退,解决APP连续闪退的方案,你还不知道的签名方式
原标题:解决APP连续闪退的方案,你还不知道的签名方式 用户在使用APP检测到连续闪退后,接下来要尝试对闪退进行修复,这里先分析可能的闪退原因: 闪退原因 连续闪退,可能是 App 启动关键路径中执行 ...
- 很多人现在还不知道的知识点,Python多进程和多线程详解!
1 单进程单线程:一个人在一个桌子上吃菜. 2 单进程多线程:多个人在同一个桌子上一起吃菜. 3 多进程单线程:多个人每个人在自己的桌子上吃菜. 多线程的问题是多个人同时吃一道菜的时候容易发生争抢,例 ...
- iOS线程锁中你还不知道的内容
iOS线程锁 一:十种线程锁 我们在使用多线程的时候多个线程可能会访问同一块资源,这样就很容易引发数据错乱和数据安全等问题,这时候就需要我们保证每次只有一个线程访问这一块资源,锁 应运而生. 这里顺便 ...
最新文章
- Spring-注入参数详解-[字面值及引用其他Bean]
- oracle 保留一个记录吗,笔记:Oracle查询重复数据并删除,只保留一条记录
- Tomcat启动问题,启动是Tomcat8,结果却是Tomcat9
- C语言使用1到9求出所有k个数字的所有组合的算法(附完整源码)
- 计算机网络实验(华为eNSP模拟器)——第六章 密码模式和AAA模式
- Leetcode之仅仅反转字母
- python回声程序 一行代码_python实现的比较完成的带声音的摩斯码翻译程序的代码...
- 想转行人工智能?哈佛博士后有话说...
- mysql 存储过程代码_MySQL存储过程及常用函数代码解析
- Java实例变量和类变量
- C语言编写FFT程序
- BM3D、域变换与Non-Local
- matlab保存pdf图片太大,matlab中的图片保存方法精选.pdf
- Error: pngquant failed to build, make sure that libpng-dev is installed
- Mac 输入法候选词框消失的解决方法
- android开启wifi热点命令,Win7共享WIFI热点让Android手机上网
- python实时监听微博发文同步到微信
- oracle append parallel,大量数据快速插入方法探究[nologging+parallel+append]
- linux权限英文,Linux常见英文报错中文翻译(菜鸟必知)
- Farmer John 木瓜地 C++
热门文章
- 【工具类】发送邮件的方法
- 远程登录的机器不是域控制器的方法
- @ConfigurationProperties与@Value的区别
- 列了一些自己会但是不怎么精通的编程语言和知识,做个记录,空余时间加强学习...
- Linux c 基于内存的进程通信—共享内存、共享队列(消息队列)
- itext库产生word文档示例(.doc)
- 86.git使用 建立和克隆远程仓库
- 《高性能Linux服务器构建实战》——2.1节初识Varnish
- 公众号自定义图文消息推送(2)
- 15年第六届蓝桥杯第九题_(矩阵快速幂优化的动态规划)