html5之网页编排

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>网页编排实例</title>

</head><body>      <header>          <h1>标题1</h1>          <nav>              <ul>                  <li><a href="#">百度一下</a></li>                  <li><a href="#">谷歌一下</a></li>                  <li><a href="#">搜狐一下</a></li>              </ul>          </nav>      </header>      <article>          <hgroup>              <h1>这是主标题</h1>              <h2>这是子标题</h2>          </hgroup>          <p>正文</p>          <section>              <div>                  <article>                      <h1>标题</h1>                      <p>评论正文</p>                  </article>              </div>

          </section>

      </article>      <footer>          <small>版权所有:..............</small>      </footer>

</body></html>

原文地址:https://www.cnblogs.com/cxydnxs/p/12272086.html

时间: 2024-10-16 21:01:07

html5之网页编排的相关文章

网页编排规则

所谓大纲,简单来说就是文档中各内容区块的结构编排.可以分为显式编排和隐式编排2种方式. 显式编排:明确使用section元素创建文档结构,在每个内容区块内使用标题 隐式编排:不明确使用section等元素,根据页面中所书写的各级标题等把内容区块自动创建出来. 隐式编排容易让自动生成的整个文档结构和想要的文档结构不一样,而且也容易引起文档结构的混乱,因此需要尽量使用显示编排. 不同的内容区块可以使用相同级别的标题. HTML5结构---大纲编排的结构1.显示编排内容区域块,明确使用section等

15个前卫的 HTML5 &amp; CSS3 网页设计作品

今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案. HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览. 您可能感兴趣的相关文章 那些让人赞不绝口的创新 HTML5 网站 激发你灵感的20个多彩的网页作品案例 30个独具匠心的精美单页网站设计案例 20个与众不同的网页联系表单设计案

Html5 实现网页截屏 页面生成图片(图文)

html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能. 因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样. 环境要求: jQuery兼容性: Firefox 3.5+, Chrome, Opera, IE9 官网主页: http://html2canvas.hertzen.com/ 测试生成的图片效果 有些元素的样式没有完全展示出来 1 <html> 2 <head> 3 <meta name=&q

怎么使用XSLT将 XML文件转化为HTML5的网页

怎么使用XSLT将 XML文件转化为HTML5的网页 在这篇文章中,我将展示怎么使用XSLT语言将 一个 XML 文件输出成HTML5 格式的网络页面. 让我们先看一下如下一个XML格式的文件 (movies.xml) ,文件包含了一些关于影片的相关信息: <?xml version="1.0" encoding="UTF-8"?> <movies>   <movie>     <title>Aliens</ti

HTML5设计网页动态条幅广告(Banner)

横幅广告(Banner): 1.横幅广告是网络广告的常见形式,一般位于网页的醒目位置上:当用户单击这些横幅广告时,通常可以链接到相应的广告页面: 2.设计横幅广告时,要力求简单明了,能够体现出主要的中心主旨,鲜明.形象地表达出最主要的广告意图: 3.横幅广告可以使静态图像,也可以是动态图像.一般而言,与静态横幅广告相比,动态横幅广告更醒目,更能吸引观众的注意力: 4.当然这还是在恰当适合的前提下(讨厌那种弹窗式和悬浮式的广告)使用不当会造成意想不到的后果,甚至因此观看者的反感造成恶性循环,从而对

前端新技术:HTML5实现网页元素的拖动操作

HTML5之前,要实现网页元素的拖动操作,需要依靠mousedown.mousemove.mouseup等API,通过大量的JS代码来实现:HTML5 中引入了直接支持拖动操作的API,大大简化了网页元素的拖动操作编程难度,并且这些API除了支持浏览器内部元素的拖动外,同时支持浏览器和其它应用程序之间的数据互相拖动. 本文通过一个简单示例,演示HTML5中拖动API的使用方法. 场景: 如下图所示,我们要实现: 通过拖动将照片从左侧"相册"区域拖拽到右侧"垃圾箱"区

HTML5 显式编排介绍

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body><h1>显式编排</h1><p>这里介绍显式编排</p><section> <h2>区块A</h2> <p>内容</p><

HTML5添加网页背景音乐

记录几个给网站添加背景音乐的HTML5代码,稍微总结一下 方式一:<video controls="" autoplay="" name="media"><source src="音乐" type="audio/mpeg"></video> 这种方式会显示播放器. 方式二:<embed src="music/We Don't Talk Anymore.mp

HTML5静态网页实战开发—企业网页

一.首先找到模板 二.勾画框架(写div),切图(ps) 三.实战开始 这一次共花了一下午时间,利用html.css做出静态网页 在外观,布局,动画都有一点改善 四.静态网页效果 倒数第二的div是一组图片滚动动画(仿js),利用css3写出(缺点是兼容性并不是很好) 五.部分源码(需要完整的可以联系我) HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8