您的位置：首页 > Web前端 > HTML

初生牛犊不怕虎之HTML初辨

2014-03-20 22:44 176 查看

借着实践牛腩新闻发布系统的机会,顺便把HTML语言初步学习了一下.HTML的标准解释如下：

HTML 指的是超文本标记语言 (HyperText Markup Language)
HTML 不是一种编程语言，而是一种标记语言(markup language)
标记语言是一套标记标签 (markuptag)，
HTML 使用标记标签来描述网页

这些标签主要是给Web浏览器识别的，Web 浏览器的作用是读取 HTML文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

例如这样一段html文本

<html>
<body>

<palign="center" color：blue>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p标签定义。</p>

</body>
</html>

经过web浏览器解释为

HTML文档中的最基本构成的就是标签元素属性

上面展示的一段文本，其中<body>是一个标签，
</body> 也是一个标签 ,这俩需要一块儿出现,是一对儿标签,前者就叫"开始标签"后者叫"结束标签"
,像这样的还有<p></p><h1></h1> .元素通常由标签构成例如上面的：

<p>这是段落。</p>

属性，就是用来设置标签的，例如，第一个段落标签被设置align属性后，居中显示；属性不仅仅是这点，还有许多的属性，一个丰富的页面，离不了对属性的设置。

明白，就能够像web浏览器一样，可以翻译比较基础的html文档了。

如果想再进一步了解html那就得好好学习一下标准流、内联元素（亦称为行内元素）、块级元素了。

标准流是一种普遍的叫法,书上并没有给出确切的定义,这一概念是描述html文档基本的排布模式,即：html文档在web浏览器翻译过来后,将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素,即为标准流.弄明白这个概念有助于我们更清晰的了解内联元素和块级元素。接下来主要从从排布和属性两个角度来区分这两个基本的元素：

从页面排布的角度上来说：

内联元素：最基本的元素，它在页面上的排布就是在标准流中从左到右依次排布，排满一行后从下一行继续按照这个规律排布。

块级元素：它在页面排布时，会独占一行。就相当于内联元素前后加了换行标签<br>.

从属性设置的角度上来说：、

1.尺寸-块级元素和行内元素之间的一个重要的不同点

width/ heigh

内联元素设置宽高无效，它的宽高仅会因内容的大小和多少而延展

块级元素可以任意设置宽高

padding/ margin

内联元素的间距和边距左右设置有效，但是上下的间距和边距无效

块级元素是构成一个html的主要和关键元素,而任意一个块级元素均可以用盒子模型来解释说明.

2.text-align属性是两者表现的又一不同之处{left| right | center}

注意一点，标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。

解释一下，行内内容是说由行内元素组成的内容。

虽然标准里这么规定，那么是不是所有浏览器都遵守。猜猜是哪个浏览器这么特立独行啊？IE！！

IE6/7及IE8混杂模式中，text-align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。

解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto;margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的"text-align:center;"。

明白了这些，对接下来要讲的div+css理解起来就方便多了！在下篇博客中，将会初步辨析一下div+css...

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航