html5可编辑(html5 编辑器)
华为云服务器特价优惠火热进行中! 2核2G2兆仅需 38 元;4核4G3兆仅需 79 元。购买时间越长越优惠!更多配置及优惠价格请咨询客服。
合作流程: |
本篇文章给大家谈谈html5可编辑,以及html5 编辑器对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
微信号:cloud7591如需了解更多,欢迎添加客服微信咨询。
复制微信号
本文目录一览:
wordpress html5主题怎么编辑?
编辑方法如下:
一.使用 HTML5 的 声明
在 HTML 4.01 和 XHTML 中那段长长的 DTD 类型声明应该是所有标签中最难记住的标签了,但在 HTML5 中, DTD 声明非常简单:
1
!DOCTYPE html
就是这么简洁,要使用 HTML5 ,第一步肯定是先使用 HTML5 的 !DOCTYPE 声明。
二.加入 html5.js
可以在主题的 head 元素内加入一段 js 来让 IE8 及以下的 IE 完全支持 HTML5 的标签。
下载由 html5shiv 提供的这个 html5.js 文件。
1
2
3
!--[if lte IE 9]
script type="text/javascript" src="./js/html5.js"/script
![endif]--
代码中使用了条件注释针对低版本的 IE(IE8 及以下版本)浏览器来调用这个 js 文件,其他浏览器会忽略掉这段代码,不会造成浪费的 HTTP 请求。
三.CSS Reset
CSS Reset 是为了把浏览器提供的默认样式去掉的一段 CSS ,详细的介绍可以参见 Kayo 之前所写的一篇文章 《关于 CSS Reset 》,本文中的 CSS Reset 是根据前文的 CSS Reset 改造的,主要是加入了对 HTML5 中新加入的标签的重置。下面是 Kayo 针对 HTML5 的 CSS Reset ,供大家参考,也可以参照前文定制更适合个人情况的 CSS Reset 。
/*** 加入 HTML5 新标签的样式重置 ***/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body{line-height: 1; text-align: left; }
:focus {outline: 0; }
/*** 将一些可以代替 div 标签的 HTML5 标签定义为块状元素 ***/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block; }
ol, ul {list-style: none; }
blockquote, q {quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none; }
ins {text-decoration: none; }
mark {background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del {text-decoration: line-through; }
table {border-collapse: collapse; border-spacing: 0; }
input, select {vertical-align: middle; }
现在,可以放心的在 WordPress 主题中使用 HTML5 标签了。
四.修改主题中的标签为语义化的 HTML5 标签
在网页重构中,舍弃了没有任何语义的 table 布局,取而代之的是新的标记,最常见的莫过于 div 这个标签,不过在设计复杂的页面时,新的问题出来了—— div 的滥用导致页面变得臃肿并且难于理解。值得兴奋的是, HTML5 为开发者引入了新的语义化标记,下面给大家介绍一些适合在 WordPress 主题中使用的 HTML5 标签。
header 用于定义文档的页眉,可以代替原本包裹页眉的 div 。
footer 用于定义文档的页脚,可以代替原本包裹页脚的 div 。
nav 用于定义导航链接的部分,即代替包裹菜单的 div 。
article 用于定义独立的内容,很适合代替包裹文章的 div,如 WordPress 首页、归档页或文章页的文章列表中可使用该标签包裹文章。
aside 该标签用于定义其所处内容之外的内容,并且 aside 的内容应该与附近的内容相关,因此很适合用来包裹 WordPress 的侧边栏。
另外 time, small, section 等 HTML5 标签也适合用来改造升级 WordPress 主题,这些标签的具体意义可以参见 W3school 。
五.为主题加入 HTML5 微数据
关于 HTML5 微数据的介绍和使用方法可以参见 Kayo 之前所写的文章 《HTML5 之微数据》,这里主要介绍一些适合 WordPress 使用的微数据规范,因此建议读者先阅读前文再阅读下文。
这里使用的是 schema.org 的微数据规范,加入微数据是为了让机械(如搜索引擎)识别网页内容的意义,可以说是华丽丽的 SEO 。
下面列举一些适合的微数据规范:
这是定义网页版头的微数据,需要注意的是 WPHeader 的 “WP” 不是指 WordPress ,而是 Web Page 的缩写,不过用在 WordPress 上也是非常合适的。
定义网页页脚。
定义一篇博客文章。
定义一条评论。
请问HTML5用什么编辑器啊编写啊
目前基于eclipse的编辑器中有html和js的代码补全功能和高亮功能,我比较推荐使用webstorm,快捷键很方便,并且直接在编辑器内部就能启动浏览器看效果

如何使html页面中的文本变为可编辑的
HTML5有contenteditable的全局属性,例如:
p contenteditable="true"这是一段可编辑的段落。请试着编辑该文本。/p
其中各属性赋值:
true 规定可以编辑元素内容。
false 规定无法编辑元素内容。
classname 继承父元素的 contenteditable 属性。
哪一款 HTML5 编辑器最值得推荐?为什么
1. Mercury : HTML5 Powered WYSIWYG Editor
Mercury 是个全功能的编辑器,包含TinyMCE和CKEditor同样的功能,但又有不同的特性。与iFrames有所不同,它使用了HTML5内容可编辑功能等。Mercury 是由CoffeeScript代码编写,其支持所有的主流浏览器。
Website/Downoad
2 Aloha Editor – HTML5 WYSIWYG Editor
Aloha Editor 是个基于浏览器的富文本编辑器框架。不像其他大多数的HTML编辑器,Aloha可以被嵌入到CMS、Blog,及其他标准的web开发框架中。
Website
3. Rendra- Online HTML 5 Editor
Rendra 是个在线HTML5 编辑器,支持用户实时预览,用户可以使用哪个浏览器支持的HTML 5和CSS 3,以及HAML 和SASS。它是由CoffeeScript 和 Sinatra代码编写的。用户可以用Rendra测试JS代码,允许用户利用 jQuery UI,jQuery 工具和插件。
Website
4. BlueGriffon: Next Generation HTML5 WebEditor
BlueGriffon是一个新的WYSIWYG编辑器,跨平台, 支持Windows, Linux and Mac OSX。 该编辑器内置HTML5/CSS3编辑功能,可以轻松地用它来实现传输、文本和边框的阴影、斜体等效果。它使用Google Font Directory 和FontSquirrel addons,可以设置个性化网页字体。
Website
5. Maqetta : Open Source Project HTML5 Editor
Maqetta,一个创建桌面和移动用户界面的HTML5设计编辑工具,并同时宣布将项目捐助给开源机构Dojo基金会。
Maqetta已经是开源项目,提供WYSIWYG可视化HTML5用户界面设计功能,仅需简单的拖曳操作,支持桌面和移动用户界面。
6. Apatana Studio 3
Aptana Studio 3 是开源web开发工具,它允许开发者测试web应用,支持最新的web开发技术如HTML5, CSS3, JavaScript, Ruby, Rails, PHP 和 Python。Apatanna包含很多的功能,比如GIF integration, HTML,CSS和JavaScript Code assists, integrated debugger, 部署向导,以及IDE定制化。
html5可编辑的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于html5 编辑器、html5可编辑的信息别忘了在本站进行查找喔。
