HTML5基本布局

时间：2023-01-04 08:25:43

HTML4布局

HTML5基本布局

HTML5布局

HTML5基本布局

基本的HTML5文档的模式为：

<!DOCTYPE html>

<html lang = "en">

<head>

<meta charset = "utf-8">

<title>HTML5 Demo</title>

<body>

<header><h1></h1><h2></h2></header>

<nav><ul><li></li><li></li></ul></nav>

<section>

<article></article>

<article></article>

</section>

<aside></aside>

<footer></footer>

</body>

</html>

推荐一个HTML5模板的在线编辑器

http://jsbin.com/#javascript,html

经常在项目中会用到reset的样式，在这里罗列出来参考下：

HTML5 Reset Stylesheet

/*

html5doctor.com Reset Stylesheet

v1.6.1

Last Updated: 2010-09-17

Author: Richard Clark - http://richclarkdesign.com

Twitter: @rich_clark

*/

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

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;

}

article,aside,details,figcaption,figure,

footer,header,hgroup,menu,nav,section {

    display:block;

}

nav ul {

    list-style:none;

}

blockquote, q {

    quotes:none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content:'';

    content:none;

}

a {

    margin:0;

    padding:0;

    font-size:100%;

    vertical-align:baseline;

    background:transparent;

}

/* change colours to suit your needs */

ins {

    background-color:#ff9;

    color:#000;

    text-decoration:none;

}

/* change colours to suit your needs */

mark {

    background-color:#ff9;

    color:#000;

    font-style:italic;

    font-weight:bold;

}

del {

    text-decoration: line-through;

}

abbr[title], dfn[title] {

    border-bottom:1px dotted;

    cursor:help;

}

table {

    border-collapse:collapse;

    border-spacing:0;

}

/* change border colour to suit your needs */

hr {

    display:block;

    height:1px;

    border:0;

    border-top:1px solid #cccccc;

    margin:1em 0;

    padding:0;

}

input, select {

    vertical-align:middle;

}

参照：http://html5doctor.com/html-5-reset-stylesheet/

HTML5基本布局的更多相关文章

  1. html5 基本布局&plus;新标签&plus;新选择器 &plus; 线性渐变

    html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. html5 弹性布局

    html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1.width=device-width: 设置Viewport视口宽度等于设备宽度2.init ...

  3. Html5元素布局

    本教程十分简单,适合新手(因为我也是新手).本教程参考了"菜鸟教程". 笔者希望做到元素相对于浏览器的角落布局,即九个典型位置: 这个理念其实和UE4中的UMG锚定一样.Html5 ...

  4. 移动设备HTML5页面布局

    在HTML5标准添加的新元素中,用于常见页面结 构的包括header footer footer nav aside aside article section hgroup . 下面简单介绍一下这个 ...

  5. HTML5 01&period; 布局、语义化标签、智能化表单、表单元素／标签／属性／事件、多媒体、类操作、自定义属性

    1.知识点 lang = “en”   所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...

  6. html5&sol;css3布局（一）

    响应式布局 1.响应式布局介绍 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,就是一个网页可以在不同设备上显示,比如:电脑.平板.手机等,不同设备都可以兼容显示.这样就不必为每一种 ...

  7. html5弹性布局两则，有交互。

    要开发一个后台管理框架,要求如下效果. 然后开始找各种弹性布局啊什么的,用了flex写了一个,但是觉得不好,首先是兼容,其次它会破坏掉里面子元素的一些css特性,为了不给自己找麻烦我还是用传统写法吧. ...

  8. 移动端Html5控制布局

    <meta name="viewport" content="width=device-width, height=device-height, inital-sc ...

  9. html5 流动布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. 条件注释判断IE浏览器

    最近在用jquery 2.0 才知道已不支持IE6/7/8 但又不想换回 jquery 1.X; 找了一资料发现条件注释可以解决这个问题 这个也像程序中的条件判断,先来介绍几个单词lt :Less t ...

  2. Golang 开发移动应用的OpenGL&lpar;Android为例）的渲染管线

    golang.org/x/mobile/gl 实现的是 OpenGL ES 2 的封装. 参考:https://godoc.org/golang.org/x/mobile/gl OpenGL ES(O ...

  3. IOS9以上如何导入铃声并设置

    1.打开iTunes,点击左侧的“音乐” .2.在右侧的MP3等音乐列表中选中一个要制作铃声的名字 .3.在这个名字上点击鼠标右键选择“显示简介”,在弹出窗口中选择“选项”.4.在选项标签栏中设定开始 ...

  4. 【原创】用python实现shell的tail操作

    在工作过程中发现监控实时刷新文件时,不是那么的任性. 故结合shell中的tail,做了一个类似tail的python脚本. 详情如下: #!/usr/bin/env python #coding=u ...

  5. daemon not running&period; starting it now on port 5037 ADB server didn&&num;39&semi;t ACK

    adb kill-server adb start-server 显示如下 daemon not running. starting it now on port 5037 ADB server di ...

  6. Java虚拟机内存优化实践

    前面一篇文章介绍了Java虚拟机的体系结构和内存模型,既然提到内存,就不得不说到内存泄露.众所周知,Java是从C++的基础上发展而来的,而C++程序的很大的一个问题就是内存泄露难以解决,尽管Java ...

  7. 使用pscp实现Windows 和 Linux 服务器间的远程拷贝文件

    在工作中,每次部署应用时都需要从本机Windows 服务器拷贝文件到Linux 上,有时还将Linux 上的文件拷到本机,这些操作都是可以使用pscp实现的.下文将详细描述如何使用: PSCP (Pu ...

  8. 通过sqlalchemy操作mysql

    # 安装 pip3 install sqlalchemy import sqlalchemy from sqlalchemy import create_enginefrom sqlalchemy.e ...

  9. python cmd的各种实现方法及优劣

    Python_cmd的各种实现方法及优劣(subprocess.Popen, os.system和commands.getstatusoutput)   目前我使用到的python中执行cmd的方式有 ...

  10. IIS 网站 HTTP 转 HTTPS

    最近需要做 http 链接转成 https 链接,所以就去弄了,现在记录下: 1.准备SSL证书 最开始的时候用的是腾讯云的免费证书,有效期1年,但只能绑定一个二级域名.测试成功后,就去阿里云购买了证 ...

相关文章