关于HTML
百度百科里是这么说的:超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。
为什么叫用于“描述”网页文档的“标记”语言呢?
简单地说,它不像Java,C++等程式语言,而是通过标记(也称标签)来表示一个网页的结构与内容,它的语法非常简单,只是由各种不同的标记组合而成,因此这类语言的学习方式主要靠积累,而非程式语言般靠理解来学习。
HTML的构成
HTML文件的结构通常由以下几个部分构成:
- 文档类型声明(doctype)
- 网页头部信息(head)
- 网页主体内容(body)
一个最简单的网页文件:
-
<!DOCTYPE html>
-
<htmllang="zh-CN">
-
<head>
-
<metacharset="UTF-8">
-
<title>网页标题</title>
-
</head>
-
<body>
- 网页内容
-
</body>
- </html>
文档类型
如果你了解过HTML,你可能会发现很多网页的头部会有这么一段又臭又长的东西:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这到底是什么呢?这就是文档类型的声明了。XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional以及 Frameset,为了兼容性与开发方便,我们一般使用Transitional。
但如果你比较细心,你会发现上面最简单的网页文件代码只使用了这么一小段代码:
- <!DOCTYPE html>
这段代码是HTML5文档类型的声明方式,而且是向后兼容的。自从有了它,妈妈再也不用担心文档类型的声明(哈哈,小小的开个玩笑)~
元素
块元素(block)
div , p , h1~h6 , ul , li , dt , dd , dl , form, section , article , nav , aside...
特点:在文档流中默认占据整行的位置。
内联元素(inline)
span , em , strong , label , a , img , input , button , select , var , del ...
特点: 在文档流中默认一行可以展示多个内联元素。
嵌套规则
块元素可以嵌套所有内联元素,内联元素不能嵌套块元素。
错误的写法:
-
<span><div>内容</div></span>
盒子模型(Box Model)
无论是块元素,还是内敛元素,在HTML中都是一个“盒子”,这个盒子包含了以下属性:
- 外边距(Margin)
- 边框(Border)
- 内边距(Padding)
- 内容(Content)
可以看出,在W3C标准模式下的CSS盒子模型中,盒子的内容是不包含边框跟内边距的,但在IE的怪异模式(怪异)模式下,盒子的内容包含了边框与内边距,因此相同的代码在不同的浏览器中查看,看到的布局可能的是完全不同的,这也是造成网页浏览器差异的一个重要原因。
一种解决方式是,CSS中的padding及border属性不要同width及height属性出现在同一个盒子上,而是将其分解在父子两个元素上,便可以避免实用CSS Hack而解决浏览器之间的差异问题。
另一种解决方式是正确地声明文档类型,以保证IE不会以怪异模式渲染网页。全面的DOCTYPE渲染模式表格如下:
更详细的表格请参见:http://hsivonen.iki.fi/doctype/
=======================签 名 档=======================
原文地址(我的博客):http://www.clanfei.com/2012/10/1656.html
欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================
分享到:
相关推荐
web前端技术方案web前端技术方案
WEB前端开发规范文档、WEB开发必备资源,标准规范文档
web前端开发帮助文档大合集,前端帮助文档都齐全了。jquery,css,html,javascript,xml。。等等等
WEB前端开发规范文档说明
web前端-定位的盒子如何水平和垂直居中
web前端技术文档(JavaScript、css2、css3、jQuery帮助文档)web前端技术文档(JavaScript、css2、css3、jQuery帮助文档)
Web前端开发简易规范文档, 给予你前台开发明确的规则,和开发过程中的经验。
Web前端word模板,Web前端word模板下载,Web前端Word文档模板,Web前端word模板下载,Web前端word样本模板,Web前端Word模板大全,Web前端word常用模板,Web前端word内容模板,Web前端word文档素材 通用web前端开发工程师...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)使用的是原生的 html,css,js代码大学生Web前端静态网页设计...
web(World Wide Web)即全球广域网,也称为万维网,它是一种基于超文本和HTTP的...是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面,其中的文档及超级链接
资源名称:WEB前端开发规范文档 CSS命名规范 中文WORD版内容简介: Web前端开发,主要职责是利用(X)HTML/CSS/Javascript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发,...
web前端的面试技巧,该文档包含甚广:html css web前端开发
百度 web 前端 文档pdf
web前端与springmvc文档
HTML5与CSS3web前端开发技术习题答案
实训1 Web前端开发环境配置与HTML基础.docx
《Web前端开发技术》是一门专业基础性课程,是后续计算机语言程序和软件开发类课程的基础,也是为了让大学一年级学生提早学会的一门入门级技术操作性课程。