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,技术干货尽在掌握. ...
随机推荐
- VS2013下使用cjson
想要在C++实现json文件的读取.因为中间也遇到过很简单的坑,为了增加记忆,对实现过程做一个记录. 本文采用的是静态链接库的方式: 1.先在github上下载源码, json源码下载地址 2.打开m ...
- Linux使用日志
Linux使用日志 ----------------------------------------------------------------------------- SecureCRTPor ...
- 一篇Java图片验证码生成的代码
package projectUtil; /** * @author tian * @date 2019/4/1015:58 */ import javax.imageio.ImageIO; impo ...
- python中掉过又爬出来的那些坑
一.中文是不是“字母”? 当然,看到标题你肯定想这答案是显而易见的,但是.but.问题就在这里,我也是这么想的!!!然后就被python打脸了 看下面的例子: s = '你说我是字母吗' print( ...
- 更改kindeditor编辑器，改用支持h5的video标签替换原有embed标签
kindeditor是一款不错的可视化编辑器,不过最近几年似乎没在更新,现在h5趋于主流,正好有个业务需要编辑器支持mp4视频的播放,考虑到现在h5中的video标签的强大,于是决定将原来系统中的em ...
- 2016424王启元 Exp2 后门原理与实践
一.实验准备 1.在实验前关闭或退出了防火墙.360杀毒软件.电脑卫士等所有的电脑保护软件,避免在实验过程中攻击时被拒绝. 2.使用Windows获linux shell (1)在Wind ...
- MongoDB实战开发
[目标]:本文将以实战的形式,向您展示如何用C#访问MongoDB,完成常见的数据库操作任务, 同时,也将介绍MongoDB的客户端(命令行工作模式)以及一些基础的命令. [说明]:MongoDB是什 ...
- HttpUtils 封装类
作为一个web开发人员,对Http 请求,并不陌生.有时候,我们请求的时候,需要使用代码实现,一般情况,我们使用Apache Jakarta Common 下的子项目.的HttpClient. 可是我 ...
- uni-app 页面配置和跳转（一）转
今天看Dcloud官网更新了个uni-app,据说一套代码三端发布(Android,iOS,微信小程序),果断一试. uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面 ...
- ExtJs6解决添加和修改Form共用一个form的隐藏域的id的取消传值
问题重现:修改不会有问题,id会绑定之前的grid,有具体数字 添加有问题,因为id是空,传的是绑定值的话会显示“类名-1”,从int类型变成了string类型,后台会出错 这是EduQuestion ...