html5自我总结
2017年7月30日
合抱之木，生于毫末。九层之台，起于累土。软件行业要熟记和训练的东西有很多，在此，写一下如何快速搭建html及自我见解（这里只介绍我自己用到的，还有部分存在但是用不到的就不讲解了）。
一、首先讲一下什么是html
英文名叫：HyperTextMarket language，超文本标记语言。就是通过标记，来描述网页内容的一门语言。
二、直接在布局代码里面讲解
<!DOCTYPE html>
<html> <head>
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head> <body> <header>
<h1>City Gallery</h1>
</header> <nav>
London<br>
Paris<br>
Tokyo<br>
</nav> <section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section> <footer>
Copyright W3Schools.com
</footer> </body>
</html>
首先，关于布局，我们在此直接讲解html5新标准。
|
header |
定义文档或节的页眉，一般由h和p组成 |
|
nav |
定义导航链接的容器，一般由list组成 |
|
section |
定义文档中的节，强调部分，内容及其标题组成 |
|
article |
定义独立的自包含文章，强调整体，有header有footer |
|
aside |
定义内容之外的内容（比如侧栏） |
|
footer |
定义文档或节的页脚 |
|
details |
定义额外的细节 |
|
summary |
定义 details 元素的标题 |
div section article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。
通常布局情况如下：
h5全局属性
一、data-*
html:
<div id='test' data-age="23">html5 data-*自定义属性 data-age</div>
js获取自定义"data-*"属性
var oDiv=document.getElementById("test");
alert(oDiv.dataset.age);
jquery获取
$('#test').data('age');
获取设置类似。可查看详细文章介绍。
二、hidden布尔值
三、spellcheck
四、tabindex
tabindex 属性规定元素的 tab键切换顺序（当 tab 键用于导航时），可将tabIndex属性设成1到32767的一个值。
Note：tabindex属性设为一个负值（如tabindex="-1")时，用户使用tab键切换时该html元素将不会被选中。
五、contenteditable
<p contenteditable>我的内容可修改</p>
六、accesskey
accesskey属性允许设置一个或者多个键盘快捷键，实现快速选取页面元素。
举例：
<form>
用户名： <input type="text" name="name" accesskey="n"/>
<p/>
密码： <input type="password" name="password" accesskey="p"/>
<p/>
<input type="submit" value="登录" accesskey="s"/>
</form>
文本格式化
加粗 b
倾斜 i
html5自我总结的更多相关文章
- 关于自我总结的html5新特性
最近本包子制订了一个学校计划,第一步就是了解并总结一下html5现在所含有的新特性,好吧,这只是一个了解,- -! 自己总结了一个word文档,里面很多东西自己都还没实际用过,下一步,本包子要写pc端 ...
- Html5 Json应用
本文主要说明Json的基本概念,和一个在Html中使用Json给元素赋值的小例子,属于基础性信息 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Obj ...
- 【HTML5&CSS3进阶03】Jser与Csser如何一起愉快的翻新老组件
上次,我们形成了两种header的布局,一种flexbox,一种float,最后与身边做重构的同事交流下来,选择了float的布局. 事实上布局的选型不需要我关注,我的参与或者一些意见多数是自我提升, ...
- 二胎上位之路：html5报表和原生报表的笑尿撕逼
前段时间,小编和我们移动端产品经理之间发生了一场罕见的撕逼大战. (看到撕逼二字,估计读者朋友们来劲了,呵呵呵……) 事情起因是这样的.小编基于对客户需求以及同行产品的了解,发了一篇关于报表在各种屏幕 ...
- [转] 移动前端不得不了解的HTML5 head 头标签
HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...
- 通通的最后一篇博客（附自制html5平面射击小游戏一枚）
这是我最后一篇博客了,由于本人的人生规划吧,以后应该也写不出什么好的技术文章了,到现在在博客园写了2年, 今天一看,我也有了120个粉丝,好几万的浏览量,感谢大家的支持啊~~ 半年没有写博客了,由于半 ...
- 深入理解html5系列-文本标签
转:http://blog.csdn.net/lihui130135/article/details/45150501 文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在 ...
- 自给自足：动手打造html5俄罗斯方块
时间:凌晨2:36 历时:两晚+半个下午 代码:约300行 这两天发烧,头痛脑壳昏的,没想到竟然还能有动力去做小游戏,其实这不是我第一次想要弄个俄罗斯方块,前几个星期的时候就尝试着去弄一个,然后被凌乱 ...
- 移动前端不得不了解的HTML5 head 头标签（2016最新版）
小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...
随机推荐
- SpringBoot中使用Jackson导致Long型数据精度丢失问题
数据库中有一个bigint类型数据,对应java后台类型为Long型,在某个查询页面中碰到了问题:页面上显示的数据和数据库中的数据不一致.例如数据库中存储的是:1475797674679549851, ...
- 通过overflow: scroll;来实现部分区域的滚动
在移动端中,我们希望元素的滚动,可以通过一些插件的使用来实现滚动,当然也可以自己来实现. 比如:对于某一个区域,我们可以限制好高度之后,设定:overflow-y: scroll; 这样,就可以实现滚 ...
- Js正则Replace方法
JS正则的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\s+)|(\s+$)" ...
- oracle timestamp转换date及date类型相减
--timestamp转换为date(ts字段为timestamp类型) ; --timestamp转换为date(ts字段为timestamp类型) ; --date相减 )) FROM dual; ...
- Windows加密服务架构
Windows加密是安全体系的重要基础和组成部分.现代CPU的保护模式是系统安全的硬件基石,基于CPU硬件的特权分级,Windows让自身的关键系统代码运行在高处理器特权级的内核模式,各种应用程序则运 ...
- Ajax介绍及爬取哔哩哔哩番剧索引追番人数排行
Ajax,是利用JavaScript在保证页面不被刷新,页面链接不改变的情况下与服务器交换数据并更新部分网页的技术.简单的说,Ajax使得网页无需刷新即可更新其内容.举个例子,我们用浏览器打开新浪微博 ...
- step4: Xpath的使用
XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 包含一个标准函数库. XPath 是一个 W3C 标准. 语法简介: htt ...
- Silverlight & Blend动画设计系列三：缩放动画（ScaleTransform）
在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动 ...
- golang学习之beego增删改查代码实现
记录下使用beego的增删改查实现,数据库使用mysql,完整代码如下: package main import ( _ "crud_beego/routers" //自动注册路由 ...
- nodejs获取客户机ip
/** * Created by chaozhou on 2015/11/24. */ var getIp = function(req){ var ipStr = req.headers['x-fo ...