前端重拾(簡單標籤(一))

2021-09-25 08:21:04 字數 897 閱讀 2284

一些最簡單的html標籤

(瀏覽器解析**換行問題)

今天重新從最基礎的前端**學了一遍,感受頗深,很多細節的東西都沒有注意到。哪怕是最簡單的p標籤也有了新的認識,對於以後的css布局有了很大的幫助。

標題標籤(h1~h6):作為標題標籤,字型自動加粗,佔據網頁的整行並且自動換行,上下具有邊框,也就是字型的高度為10px,那麼它在網頁中就可能是10+2+2px。

div標籤:作為最重要的分塊標籤,div預設情況下也會佔據一整行,自動換行,上下無邊框,兩個div上下緊緊相連。

段落標籤(p):作為乙個段落,自然而然會自動換行,同樣佔據一整行,上下具有邊框。

文字標籤(span):作為文字標籤可以插到p標籤中,作為段落的一部分。不具備自動換行的能力,上下無邊框。

涉及到**換行問題。

下面我們來實際看看(為了更好地看清我加了背景顏色)

自動解析了**中的換行 將**中的回車字元瀏覽器翻譯成了空格字元

兩個span標籤之間無換行,自動就連線在了一起。

其中這個第一種情況不是我們前端ui設計師想要的,由於**的換行導致了解析html的空格字元,可能會影響我們的布局細節。我查閱了相關資料其中input標籤也有同樣的問題,下面我們分享一些解決方案。

1.寫**的時候不要換行,input,span等在一行輸寫,那麼將解決該問題。但是**就變得不再那麼容易好看。

2.利用css,設定父級塊的格式,即font-size=0。

3.設定外邊框為負值。即margin-right或者margin-left=-3px。(可能瀏覽器不同,畫素距離也不同)。

外加一些常用不常見標籤

sup 上標籤 sub下標籤

dbo的(dir屬性)rtl 從右往左輸出顯示,ltr從左往右正常顯示。

重拾Android 之簡單複習

android系統允許應用程式建立僅能夠自身訪問的私有檔案,檔案儲存在裝置的內部儲存器上。滾動檢視scrollview 拖動條seekbar 評分元件ratingbar android體系架構 應用程式 日曆,通訊錄,郵件客戶端,瀏覽器 應用程式框架 函式庫 android執行時 linux核心 a...

重拾資料庫簡單操作

修改某一列的null 非空 屬性 alter table tabel name modify column column name column data type not null 修改某一列的預設屬性 alter table table name alter column column name...

重拾C (一) 引用高階

int z int x,int y int int 這道題可以先將外圍的函式指標提取出來,即如下 y int y int 這樣總體便可以化簡為如下形式 y z int x y why說 無論是遇到什麼看起來很複雜的題目或問題,首先應該做的就是不要慌,本人就有這個很大的毛病,考研數學最大的失利就是面對...