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. kubernetes 文档

    kubernetes 官方文档:http://kubernetes.io/docs/ null

  2. Html-浅谈如何正确给table加边框

    一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...

  3. 【原】iOS 同时重写setter和getter时候报错:Use of undeclared identifier '_name';did you mean 'name'

    写了那么多的代码了,平时也没有怎么注意会报这个错误,因为平时都很少同时重写setter和getter方法,一般的话,我们大概都是使用懒加载方法,然后重写getter方法,做一个非空判断.然后有时候根据 ...

  4. AC自动机 HDU 2896

    n个字串 m个母串 字串在母串中出现几次 #include<stdio.h> #include<algorithm> #include<string.h> #inc ...

  5. 常look的Git命令

    常用的Git命令   命令  简要说明 git add 添加至暂存区 git add–interactive 交互式添加 git apply   应用补丁 git am  应用邮件格式补丁 git a ...

  6. iOS推送证书转pem文件

    iOS推送证书转 .pem文件. 推送证书转pem文件openssl x509 -in apns_miaobozhibo.cer -inform der -out apns_miaobozhibo.p ...

  7. Mysql触发器

    触发器(trigger)作用:监视某种情况,并触发某种操作. 触发器创建语法四要素: 1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/b ...

  8. 获取iis网站信息

    1.获取网站的url地址 var ht = GetWebPathAndWebName(""); var rootUrl = ht["webaddr"].ToSt ...

  9. Android源码——应用程序的消息处理机制

    Android应用程序在启动每个线程时,都会创建一个消息队列.线程的生命周期分为创建消息队列和进入消息循环两个阶段. 消息循环分为:发送消息和处理消息. Android系统主要通过MessageQue ...

  10. NTFS交换数据流隐写的应用

    by Chesky ##目录 ####一.NTFS交换数据流(ADS)简介 ####二.ADS应用 写入隐藏文件(文本\图像\可执行文件) ADS在Windows平台下的利用--写入后门 ADS在We ...