初生牛犢不怕虎之HTML初辨

2021-06-21 02:42:07 字數 2172 閱讀 5935

藉著實踐牛腩新聞發布系統的機會

,順便把

html

語言初步學習了一下

.html

的標準解釋如下:

這些標籤主要是給

web瀏覽器識別的,web 瀏覽器的作用是讀取 html文件,並以網頁的形式顯示出它們。瀏覽器不會顯示 html 標籤,而是使用標籤來解釋頁面的內容:

例如這樣一段

html

文字

這是段落。

這是段落。

段落元素由 p標籤定義。

經過web

瀏覽器解釋為

文件中的最基本構成的就是

標籤

元素

屬性

上面展示的一段文字,其中

是乙個標籤

也是乙個標籤

,這倆需要一塊兒出現

,是一對兒標籤

,前者就叫

"開始標籤

"後者叫

"結束標籤

" ,像這樣的還有

.元素通常由標籤構成

例如上面的:

這是段落。

屬性,就是用來設定標籤的,例如,第乙個段落標籤被設定align屬性後,居中顯示;屬性不僅僅是這點,還有許多的屬性,乙個豐富的頁面,離不了對屬性的設定。

明白,就能夠像

web瀏覽器一樣,可以翻譯比較基礎的

html

文件了。

如果想再進一步了解

html

那就得好好學習一下

標準流內聯元素(亦稱為行內元素)、塊級元素了。

標準流是一種普遍的叫法

,書上並沒有給出確切的定義

,這一概念是描述

html

文件基本的排布模式,即:

html

文件在web

瀏覽器翻譯過來後

,將窗體自上而下分成一行行,並在每行中按從左至右的順序排放元素,即為標準流.弄明白這個概念有助於我們更清晰的了解內聯元素和塊級元素。接下來主要從從排布和屬性兩個角度來區分這兩個基本的元素:

從頁面排布的角度上來說:

內聯元素:最基本的元素,它在頁面上的排布就是在標準流中從左到右依次排布,排滿一行後從下一行繼續按照這個規律排布。

塊級元素:它在頁面排布時,會獨佔一行。就相當於內聯元素前後加了換行標籤.

從屬性設定的角度上來說:、

1.尺寸-塊級元素和行內元素之間的乙個重要的不同點

width/ heigh

內聯元素設定寬高無效,它的寬高僅會因內容的大小和多少而延展

塊級元素可以任意設定寬高

padding/ margin

內聯元素的間距和邊距左右設定有效,但是上下的間距和邊距無效

塊級元素是構成乙個html的主要和關鍵元素,而任意乙個塊級元素均可以用盒子模型來解釋說明.

2.text-align屬性是兩者表現的又一不同之處

注意一點,標準裡說這個屬性是用來對齊行內內容的,所以,不應該對塊級內容起作用。

解釋一下,行內內容是說由行內元素組成的內容。

雖然標準裡這麼規定,那麼是不是所有瀏覽器都遵守。猜猜是哪個瀏覽器這麼特立獨行啊?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...

初生牛犢不怕虎

北京在 對於歐陽明的外甥來說,是在天上。因為他是看著歐陽明坐著飛機走的。從此,每次舅舅回來,就會嚷著要跟舅舅一起做飛機走。對於孩子來說,北京就是意味著神秘和有趣。可是對於歐陽明的父母來說,北京就是意味著離別。目前在目送完歐陽明登上飛機之後,眼淚完全控制不住的流了一路。最後大家勸他,想兒子了,就可以去...

java遊戲後端日誌 6 初生牛犢不怕虎?

2018年5月9日 今天,不早不晚,正值星期三,深圳大雨,很有必要做一番總結 桑心ing.事情是醬紫的,話說五一假期前的一天,老大發話,開始準備一款新的小遊戲,雖然你才來倆月 是的,倆月 但人手缺緊,你先給我上。我剛剛完成後台的需求,沒來及思考,就 嗯嗯.如今回頭一想,那便是苦海的起點啊 五一假期,...