1 <h1>  </h> 标题

2 <p> </p> 段落

3 <br /> 换行

4 <!-- ...--> 注释

5 <p style="..."> </p> 样式属性

6 <head><link rel = "stylesheet" type="text/css" href="mystyle.css"></head>外部样式表

6 name属性用于定义anchor，之后就能在html中直接使用这个anchor

7  <img src="url" />  定义图片

8 <div>  </div> 块容器

9 布局，来自w3cschool http://www.w3school.com.cn/html/html_layout.asp

10 <script>  </script> 脚本

11 html头部元素 http://www.w3school.com.cn/html/html_head.asp

12 html5 语义新特性

　　html5可以将网页分块， 网页分块意味着将一个页面划分为几个独立的部分，包括内容、菜单、头部、底部、链接等， 这些只要使用一些新的标签。下面是一张html5概念图：

　　

　　1、<header> 网站头部标签

　　2、<nav> 导航标签

　　3、<article> 内容标签

　　4、<section> 文章标签

　　5、<aside>  侧边栏

　　6、<footer> 网站底部标签

　　典型html5页面

　　

　　

　　典型html5页面：　　

<!DOCTYPE html>

<html lang="en">

<title>HTML5</title>

<meta charset="utf-8">

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script>

<![endif]-->

<style>

body {

    font-family:Verdana,sans-serif;font-size:0.8em;

}

header,footer,section,article {

    border:1px solid grey;

    margin:5px;margin-bottom:15px;padding:8px;

    background-color:white;

}

header,footer {

    color:white;background-color:#444;margin-bottom:5px;

}

section {

    background-color:#ddd;

}

nav ul {

    margin:0;padding:0;

}

nav ul li {

    display:inline; margin:5px;

}

</style>

<body>

<header>

  <h1>Monday Times</h1>

</header>

<nav>

  <ul>

    <li>News</li>

    <li>Sports</li>

    <li>Weather</li>

  </ul>

</nav>

<section>

<h2>News Section</h2>

<article>

  <h2>News Article</h2>

  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum

  lurum hurum turum.</p>

  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum

  lurum hurum turum.</p>

  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum

  lurum hurum turum.</p>

</article>

<article>

<h2>News Article</h2>

  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum

  lurum hurum turum.</p>

  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum

  lurum hurum turum.</p>

  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum

  lurum hurum turum.</p>

</article>

</section>

<footer>

  <p>&copy; 2014 Monday Times. All rights reserved.</p>

</footer>

</body>

</html>

　　result:

　　

13 html5中使用<audio></audio>播放音频效果好

14 html5中使用<video></video>播放视频效果好

html_随笔的更多相关文章

  1. AI人工智能系列随笔

    初探 AI人工智能系列随笔:syntaxnet 初探(1)

  2. 【置顶】CoreCLR系列随笔

    CoreCLR配置系列 在Windows上编译和调试CoreCLR GC探索系列 C++随笔:.NET CoreCLR之GC探索(1) C++随笔:.NET CoreCLR之GC探索(2) C++随笔 ...

  3. C++随笔：.NET CoreCLR之GC探索（4）

    今天继续来 带大家讲解CoreCLR之GC,首先我们继续看这个GCSample,这篇文章是上一篇文章的继续,如果有不清楚的,还请翻到我写的上一篇随笔.下面我们继续: // Initialize fre ...

  4. C++随笔：从Hello World 探秘CoreCLR的内部(1)

    紧接着上次的问题,上次的问题其实很简单,就是HelloWorld.exe运行失败,而本文的目的,就是成功调试HelloWorld这个控制台应用程序. 通过我的寻找,其实是一个名为TryRun的文件出了 ...

  5. ASP.NET MVC 系列随笔汇总[未完待续……]

    ASP.NET MVC 系列随笔汇总[未完待续……] 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的. 学前篇之: ASP.NET MVC学前篇之扩展方法.链式编程 ASP. ...

  6. 使用Beautiful Soup编写一个爬虫 系列随笔汇总

    这几篇博文只是为了记录学习Beautiful Soup的过程,不仅方便自己以后查看,也许能帮到同样在学习这个技术的朋友.通过学习Beautiful Soup基础知识 完成了一个简单的爬虫服务:从all ...

  7. 利用Python进行数据分析 基础系列随笔汇总

    一共 15 篇随笔,主要是为了记录数据分析过程中的一些小 demo,分享给其他需要的网友,更为了方便以后自己查看,15 篇随笔,每篇内容基本都是以一句说明加一段代码的方式, 保持简单小巧,看起来也清晰 ...

  8. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  9. 《高性能javascript》 领悟随笔之-------DOM编程篇

    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

  1. [LeetCode] Second Highest Salary 第二高薪水

    Write a SQL query to get the second highest salary from the Employee table. +----+--------+ | Id | S ...

  2. [LeetCode] Binary Tree Maximum Path Sum 求二叉树的最大路径和

    Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. ...

  3. 用vue.js学习es6（二）：let和const使用

    一.运行及关闭运行: 在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,打开了我们的vue界面. 如果要关闭则在命令行中按住ctrl+C则可以关闭. ...

  4. cosbench 压测RGW生产环境

    配置信息: 使用  2个万兆网卡的RGW主机,并用OSPF做高可用和负载均衡.  Ceph OSD集群 有21Node (万兆网卡+ 12个4T SATA机械硬盘) 测试VM配置: 使用在使用VXLA ...

  5. html&css复习题(参考答案)

    1. 常用的块属性标签及特征有哪些? 常用块标签:Div  h1~ h6  ol ul li  dl td dd  table tr th td  p  br  form 块标签特征:独占一行,换行显 ...

  6. time step和采样频率的关系

    当前的采样频率为11025HZ,overlap=0.5,取的是1024个采样点为1帧.则time step为256时的时间长度为11秒.即以11秒为单位分割原始的音频,生成一张语普图. >> ...

  7. NodeJS 爬虫爬取LOL英雄联盟的英雄信息，批量下载英雄壁纸

    工欲善其事,必先利其器,会用各种模块非常重要. 1.模块使用 (1)superagent:Nodejs中的http请求库(每个语言都有无数个,java的okhttp,OC的afnetworking) ...

  8. Beta阶段第九次Scrum Meeting

    情况简述 BETA阶段第九次Scrum Meeting 敏捷开发起始时间 2017/1/2 00:00 敏捷开发终止时间 2017/1/3 00:00 会议基本内容摘要 deadline临近 参与讨论 ...

  9. sql笨办法同步数据

    Helpers.SqlHelper sqlHelper = new Helpers.SqlHelper("server=***;database=Cms;user id=sa;passwor ...

  10. webApp开发

    1.Viewport:视口屏幕,可以操作的属性如下: width //viewport的宽度,范围从200-10000,默认为980像素 height //viewport的高度 initial-sc ...