HTML5与HTML4的比较

HHTML5封装一些标签和属性,方便了开发。

1     <form>
2         <p>
3             <label>Username:<input name="search" type="text" id="search" autofocus></label>
4         </p>
5     </form>
HTML5的方式获取输入焦点
1     <form>
2         <p>
3             <label>Username:<input name="search" type="text" id="search"></label>
4         </p>
5         <script type="text/javascript">
6             document.getElementById("search").focus();
7         </script>
8     </form>
HTML4的方式获取输入焦点

 

对于页面结构,HTML5将不同结构使用不同的标记进行区分,这点在HTML4的时候,基本上都用div标签,然后使用class属性进行区分

 

  • HTML5的出现是为了解决以下问题

浏览器之间的兼容性问题

文档结构不明确

Web应用程序功能受限

 

  • HTML5与HTML4在语法上的一些区别

1、DOCTYPE声明

2、指定字符集编码

HTML4:

<meta http-equiv="CONTENT-TYPE" content="text/html;charset=UTF-8">

HTML5:

<meta charset="UTF-8">

两种方式都能用,但不能混用

 

  • 可以省略标记的元素

不允许写结束标记:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

可以省略结束标记:li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th

可以完全省略标记:html、head、body、colgroup、tbody

 

  • 具有boolean值得属性

这些属性,只要写上了就比表示true,如:

<input checked type="checkbox">

还有readonly、disabled等

 

  • 新增结构元素

section:表示页面中的一个内容区块,如:章节、页眉、页脚等,可以与h1~h6元素结合使用,标示文档结构

article:标示页面中的一块与上下文不相关的独立内容,如博客中的一篇文章或报纸上的一篇文章

aside:标示article元素之外,但是相关的,辅助信息

header:页面中的一个内容区块或整个页面的标题

hgroup:对整个页面或页面中的一个内容区块的标题进行整合

footer:整个页面或页面中内容区块的脚注,一般包含作者的姓名、创作日期以及作者的联系方式的等

nav:页面中的导航链接

figure:表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元,使用figcaption元素在figure元素组添加标题

 

  • 其他新增元素

video:视频

audio:音频

embed:插入各种多媒体格式

mark:在视觉上需要高亮的文字

progress:表示运行中的进程,一般用于显示js耗时的时间函数

time:日期或时间

ruby:ruby注释,中文注音或字符

rt:字符的解释或发音

rp:在ruby注释中石油

wbr:软换行,当父级元素宽度不够的时候才换行

canvas:绘图的画布

command:命令按钮,如单选按钮、复选框、复选按钮

details:表示用户要求得到并且可以得到的细节信息。可以与summary元素配合使用

datalist:下拉列表,与input配合使用

datagrid:可选数据列表,树形列表的形式显示

keygen:生成密匙

output:表示不同类型的输出

source:为媒介元素定义媒介资源

menu:菜单列表

 

  • 新增的input类型,也就是input元素中,type的属性

email、url、number、range、date、month、week、time、datetime、datetime-local

 

对于新增的元素或属性,在使用前最好查阅一下浏览器的支持情况

 

  • 废除的元素

能够用CSS代替的一般都废除了,如 basefont、big、center、font、s、strike、tt、u等

不再使用frame框架:frameset、frame、noframes元素。因为frame框架对网页的可用性存在负面影响。HTML5中只支持iframe框架

 

  • 新增的表单属性

autofocus:自动获取焦点

placeholder:提示用户输入

form:声明属于哪个表单,然后可以放在页面的任何位置,不一定非要在表单内

required:表示是否必填

list:与datelist元素配合使用,生成下拉框

multiple:允许一次上传多个文件

 

其他属性详见HTML5

 

  • 全局属性

contentEditable:是否允许编辑元素内的内容

 1 <!DOCTYPE html>2 <html>3 <head lang="en">4     <meta charset="UTF-8">5     <title></title>6     <script type="text/javascript">7         function getInnerHTML(){8             alert(document.getElementById("price1").innerHTML+"\n"+document.getElementById("price2").innerHTML); 9  } 10 </script> 11 </head> 12 <body> 13 <table contenteditable="true"> 14 <tr contenteditable="false"> 15 <td>书籍</td> 16 <td>单价</td> 17 </tr> 18 <tr> 19 <td contenteditable="false">ajax权威指南</td> 20 <td id="price1">10元</td> 21 </tr> 22 <tr> 23 <td contenteditable="false">JavaScript权威指南</td> 24 <td id="price2">20元</td> 25 </tr> 26 <tr> 27 <td><button οnclick="getInnerHTML()">提交</button></td> 28 </tr> 29 </table> 30 </body> 31 </html>
contenteditable 属性允许直接编辑html元素的内容,然后可以通过innerHTML获取编辑完后的值
该属性具有继承的特点,也就是说如果父元素设置了为true,那么子元素默认也都是true,除非手动修改为false

页面一旦刷新后,编辑的数据就会恢复成编辑前的

如果想要对页面的全部元素都设置为可编辑的,可以这么干
1 <body οndblclick="document.designMode='on';">
2 .......
3 .......
4 .......
5 </body>

 

designMode:指定整个页面是否可编辑

hidden:隐藏

speelcheck:拼写检查

tabindex:tab获取焦点

<input tabindex="1">
<input tabindex="2">
<input tabindex="3">

 

转载于:https://www.cnblogs.com/sherrykid/p/4591430.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403392.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[iOS]Unable to run app in Simulator

From: http://blog.csdn.net/snowwind/article/details/41099575 今天在试Admob的时候&#xff0c;发现在simulator上&#xff0c;程序突然不能运行了&#xff0c; 提示 [plain] view plaincopy Unable to run app in Simulator An error was encountered while running (…

uni-app微信小程序动态样式设置;微信小程序style行内式无效;微信小程序style行内式编译报错;微信小程序:style设置样式

场景&#xff1a;微信小程序设置动态样式&#xff0c;有些时候是需要用到变量来书写的&#xff1b;但是实际使用发现&#xff0c;行内式书写虽然有效&#xff0c;但是会使得微信小程序的编辑失败&#xff1b;故需要使用动态的v-bind来写动态变量行内式样式&#xff08;既使用:s…

循环队列及C语言实现二

在我的上一篇博文中已经讲到循环队列的特点作用以及C语言实现&#xff0c;当然实现和操作的方式比较简单&#xff0c;在实际项目应用中略显粗糙。因此&#xff0c;这一篇提供一个进阶篇的实现与操作接口。具体函数作用可以参见我的注释部分&#xff0c;使用的时候直接把里面的接…

MAC下secureCRT无法保存密码的解决方法

From: http://www.php230.com/securecrt-for-mac-store-password.html 在mac下新安装了secureCRT&#xff0c;取代系统自带的终端工具&#xff0c;主要是为了方便链接服务器。 mac下面的secureCRT默认保存不上密码&#xff0c;我们选择了保存密码后&#xff0c;下次登录还是提…

微信小程序下拉刷新列表onPullDownRefresh;微信小程序上划加载列表onReachBottom;uni-app微信小程序下拉加载数据;uni-app微信小程序上划页面加载数据

需求&#xff1a;微信小程序列表加载有两种方式&#xff0c;分别是按住页面下拉加载数据数据&#xff08;触发onPullDownRefresh&#xff09;和直接上划滚动页面到底部加载数据&#xff08;触发onReachBottom函数&#xff09;。 本文主要是使用上划滚动页面触底加载数据&#x…

ARP协议在同网段及跨网段下的工作原理

一、ARP在同个网段下的工作原理 首先&#xff0c;每台主机都会在自己的ARP缓冲区中建立一个 ARP列表&#xff0c;以表示IP地址和MAC地址的对应关系。当源主机需要将一个数据包要发送到目的主机时&#xff0c;会首先检查自己 ARP列表中是否存在该 IP地址对应的MAC地址&#xff0…

如何查看服务器当前的负载信息

From: http://blog.csdn.net/mal327/article/details/7423750 如何查看服务器当前的负载信息http://www.flybaaa.com/help/69_1.html网吧内突然很卡&#xff0c;这个情况我相信大家都有遇见过&#xff0c;但是通过什么方法来排查是否linux服务器的负载过大导致的这个问题呢&am…

Realtek网卡如何识别具体型号是8111B/8111C/8111D还是8111E???

From: http://support.icafe8.com/technologynews/focus/1347.html 貌似在去年&#xff0c;Realtek网卡把型号都统一为Realtek GBE什么什么的这种名字&#xff0c;这个修改说实话&#xff0c;对有盘没啥影响&#xff0c;只要驱动装好&#xff0c;能上网就ok了&#xff0c;但是…

【leetcode77】Single Number

一题目描述&#xff1a; 给定一个数组&#xff0c;只有一个数字出现一次&#xff0c;其余都是两次&#xff0c;判断那个数字 思路&#xff1a; 不断取出数据进行异或&#xff0c;最后一个数字&#xff0c;因为相同的数字会抵消代码&#xff1a; public class Solution {public …

Remoting-1

什么是Remoting&#xff0c;简而言之&#xff0c;我们可以将其看作是一种分布式处理方式。从微软的产品角度来看&#xff0c;可以说Remoting就是DCOM的一种升级&#xff0c;它改善了很多功能&#xff0c;并极好的融合到.Net平台下。Microsoft .NET Remoting 提供了一种允许对象…

DEBUG 调试

1.Step Into (also F5) 跳入 2.Step Over (also F6) 跳过 3.Step Return (also F7) 执行完当前method&#xff0c;然后return跳出此method 4.step Filter 逐步过滤 一直执行直到遇到未经过滤的位置或断点(设置Filter:window-preferences-java-Debug-step Filtering) 5.resume 重…

promise使用详解

原文链接以及promise练习题 先说结论&#xff1a; promise是解决异步函数的一种方案 将异步操作以同步方式展现出来 避免了回调地狱 1.三种状态&#xff1a;padding–等待 resolved–成功–then rejected–失败–catch 2.promise上有then和catch方法 then接受一个参数是函数 这…

Android 对话框(Dialog)大全 建立你自己的对话框

Activities提供了一种方便管理的创建、保存、回复的对话框机制&#xff0c;例如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog(int), dismissDialog(int)等方法&#xff0c;如果使用这些方法的话&#xff0c;Activity将通过getOwnerActivity()方法返回该Act…

HDU 5795

题意&#xff1a; 两人轮流从 n 堆 糖果里取糖果&#xff0c;每次可以1&#xff09; 选择一堆取任意个&#xff08;不为 0&#xff09;2) 选择一堆糖果分成 3 堆&#xff08;每堆数量 > 1)拿到最后一颗糖果的人赢。 解题 &#xff1a; 打表算出一些 sg 值&#xff0c;就可以…

mac下beyond compare配置图

配置Tab键为4个空格&#xff1a; 显示行号&#xff1a;

Win7下安装linux虚拟机

关于如何在Win7下搭建linux学习环境&#xff0c;特在此分享下. 一、工具 1、VMware-workstation-full-9.0.0-812388.exe 下载地址:http://pan.baidu.com/s/1bpFT0ZX 2、32位的CenOS系统镜像文件CentOS-6.7-i386-bin-DVD1.iso. 下载地址:http://pan.baidu.com/s/1cHrxLG…

el-table处理某一行样式;el-table表格row-class-name无效原因;el-table格式化某行样式和数据

如果是设置点击el-table某行变色或者hover 点击看这篇 情景&#xff1a;:row-class-name“tableRowClassName” 无效果 原因是&#xff1a;el-table的属性里 多了个stripe&#xff0c;stripe属性可以创建带斑马纹的表格。会影响到row-class-name的渲染。去掉stripe即可。 &l…

国内ios分亨组件,

2019独角兽企业重金招聘Python工程师标准>>> 1. 新浪微博 (支持新浪微博官方 SSO OAuth 及 iOS 6 特性&#xff09; 2. 微信&#xff08;仅支持分享到朋友&#xff09; 3. 网易微博 4. 腾讯微博 5. 豆瓣 6. 人人网 https://github.com/icyl…

el-table文字超出隐藏;el-table表格文字一行展示,超出隐藏,多余的内容会在 hover时显示 ;

el-table文字默认情况下若内容过多会折行显示&#xff0c;若需要单行显示可以给el-table-column使用show-overflow-tooltip属性&#xff0c;它接受一个Boolean&#xff0c;为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。 给el-table-column添加show-overflow-t…

ssh自动输入密码登录服务器/ssh免输入密码登录/非交互ssh 密码验证

From: http://www.linuxidc.com/Linux/2011-02/31921.htm 由于经常需要登录一些远程的服务器&#xff0c;每次都需要将密码重输一遍&#xff0c;如下&#xff1a; #ssh 用户名我的服务器的ip 用户名我的服务器的ips password: &#xff08;这里需要手动输入密码后回车&#x…