上学 HTML5-页面结构(1)

HTML5页面结构

写了那般多,终于得以先导敲代码了。

DOCTYPE声明

DOCTYPE是document
type的简写。主要用来表达你用的XHTML恐怕HTML是怎样版本。浏览器依据你DOCTYPE定义的DTD(文档类型定义)来表明页面代码。html4的一般是那般写的

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

表示近来页面是html4的过渡型页面。过渡型的首要性目的是协作不扶助层叠样式表(CSS)的浏览器。与此相同的还有严苛型和框架型的DOCTYPE申明。

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">

假若你必要彻底的号子,免于表现层的眼花缭乱,请使用此严俊型申明。该类型需求与层叠样式表(CSS)协作使用,而且某些老的浏览器大概不能渲染出你想要的效应,所以一般那种类型不采取。

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

框架型首要用来使用frameset标签等讲页面划分成区其他区域。那几个宣称IE浏览器支持的可比好。java语言生成的javaDoc里的index.html文件就是其一宣称。

争辨html4的DOCTYPE,html5的要简单的多了,下边就是html5的DOCTYPE申明。

1 <!DOCTYPE html>

太简单了,不难的连5都未曾,有种html不会出6的觉得。

基础

“君子务本,本立而道生。”

啥是HTML了?

HTML叫超文本标记语言,是正式通用标记语言里的一种,紧要用以互连网。程序员每日写的页面,不管是jsp照旧php,最后都会拼装成2个整机的HTML文本传递给浏览器,浏览器在根据HTML标准,对文件进行剖析,然后在页面里显示出华丽的情节。

接着大家看看HTML标准有哪些。

  • 超文本标记语言(第③版)——在1994年二月看作网络工程工作小组(IETF)工作草案发表(并非正规):
  • HTML 2.0——1994年二月看成奥迪Q7FC 1866发布,在普拉多FC
    2854于2000年3月公布之后被颁发已经不合时宜
  • HTML 3.2——壹玖玖陆年三月二十三日,W3C推荐标准
  • HTML 4.0——壹玖玖玖年九月15日,W3C推荐标准
  • HTML 4.01(微小革新)——一九九六年12月5日,W3C推荐标准
  • HTML 5——二零一五年11月113日,W3C推荐标准

HTML文本在编排是必须要准予其中3个标准,否则浏览器解析会出难点。

HTML文本里面一般紧如果内容,能够用CSS对这一个故事情节做修饰以便在浏览器中表现华丽的成效。

啥是JavaScript了?

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的言语,内置辅助项目。它的解释器被誉为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的二个应用)网页上利用,用来给HTML网页增加动态功效。JaveScript已毕的二个框架Node.js就已经起来协理服务器端编程了。JaveScript也和前面的HTML一样,须要浏览器支持,否则是运作不起来的。方今浏览器还广泛帮助的事JavaScript1.5本子。最新的JavaScript是1.8.5本子,火狐四 、IE9和Opera11都早已支撑。

  • JavaScript 1.0 1996年3月
  • JavaScript 1.1 1996年8月
  • JavaScript 1.2 1997年6月
  • JavaScript 1.3 1998年10月
  • JavaScript 1.4
  • JavaScript 1.5 2000年11月  
  • JavaScript 1.6 2005年11月
  • JavaScript 1.7 2006年10月
  • JavaScript 1.8 2008年6月
  • JavaScript 1.8.1
  • JavaScript 1.8.2 2009年6月22日
  • JavaScript 1.8.5 2010年7月27日

 用于布局的价签

先前在html4中,大家一般都施用div来对页面内容展开布局。在html5中,增加了一些专程用于布局的价签。

section可以完全代替div,用来表示1个区域。

article用来标记一篇小说,评论。

aside用来标记一段旁注。

header用来标记页面的尾部,比如logo的消息就在这一栏。

footer用来标记页面的尾巴,比如版权讲明就在这一栏。

hgroup一般在header后边使用,用来标记标题组,意思就是文章的主标题和副标题作为3个完好无缺被标记。

nav用来标记网站的导航栏。

自然了,div在html5中要么协理的,然而使用新的布局标签,可以对寻找引擎更团结,此外页面开发人士也很简单看懂标签的功用。上边让我们看看3个拔取这么些标签的完整例子。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>hello html5</title>
 6 </head>
 7 <body>
 8     <header>
 9         <h1>飞车兔</h1>
10         <hr>
11     </header>
12     <nav>
13         <a href="#">首页</a>|
14         <a href="#">随笔</a>|
15         <a href="#">新随笔</a>|
16         <a href="#">联系</a>|
17         <a href="#">订阅</a>|
18         <a href="#">管理</a>
19     </nav>
20     <article>
21         <hgroup draggable="true">
22             <h1>学习html5</h1>
23             <h3>页面结构标签</h3>
24         </hgroup>
25         <aside
26             style="font-size: larger; font-style: italic; color: blue; float: right; width: 120px;">
27             这篇文章主要用来介绍html5的页面结构和结构标签</aside>
28         <section>
29             <p>2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,HTML5标准规范终于最终制定完成了,并已公开发布。</p>
30             <p>
31                 而HTML5的草稿版本在13年就已经放出。作为一个有追求的程序猿这次想赶一次潮流学习一下HTML5,并作一次笔记以便日后温故。</p>
32         </section>
33     </article>
34     <footer> &copy;2015-飞车兔工作室版权所有</footer>
35 </body>
36 </html>

 

页面效果如下图

图片 1

 

字符编码的扬言

以前html4是这样的

1 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

当今html5中是如此的

1 <meta charset="UTF-8">

缘起

2016年7月3日,万维网联盟颁发,经过大概8年的费力努力,HTML5标准规范终于最后制定完结了,并已当面发表。

而HTML5的文稿版本在13年就已经释放。作为壹个有追求的程序猿本次想赶两次时尚学习一下HTML5,并作一回笔记以便日后温故。

啥是HTTP了?

超文本传输协议(HTTP,HyperText Transfer
Protocol)是网络上运用最为普遍的一种网络协议。是按照TCP的一种协议。

概念有个别拗口,大家都清楚这样说,其实过多程序员假使没写过socket对于那些概念是很难真正清楚的。其实那个概念的关键所在是基于TCP,TCP里面传输的事二进制流。一般从这几个流里可以博得开首标记、甘休标记、头、体等。HTTP是基于TCP的,一般也会有这几个东西。上边那幅图是用谷歌(Google)浏览器得到的HTTP的伸手头消息。

图片 2

图片 3

从图纸可以看来,底部音讯包涵了请求地址,请求方法,请求头等消息。倘若想对http协议的乞求头有更尖锐的知情,可以看看这篇小说《HTTP请求头详解》。

这体是什么呢?体就是HTML文本了。

啥是CSS了?

CSS即层叠样式表(Cascading StyleSheet)。
在网页制作时采纳层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和任何成效落到实处更为准确的支配。

实则这是一种设计思想导致的结果,即剧情与修饰分离。那样就足以本着同一个内容,使用区其他梳洗而已毕差距的展现效果。CSS也是有正统的,类似HTML一样,每种标准都亟待浏览器协助才能科学修饰内容来展现。最新的是CSS3。一般景色浏览器解析并未CSS修饰的HTML文件是就会使用默许样式修饰。

  • CSS 1--一九九八年十月1一日,W3C推荐标准
  • CSS 2--一九九六年7月31日,W3C推荐标准
  • CSS 3--2001年5月21日

除了CSS可以对HTML文本进行修饰外,还有页面脚本语言可以对HTML和CSS做动态修改,常见的脚本语言有javascript。

admin

网站地图xml地图