前端學習之HTML 一

2021-09-20 00:09:43 字數 1433 閱讀 5214

一、塊級元素

塊級元素預設佔一行,一行內新增乙個塊元素後一般無法新增其他的元素,其寬度自動填滿其父元素寬度

常見的塊元素:

address - 位址blockquote - 塊引用dir - 目錄列表div- 常用塊級元素dl - 定義列表fieldset - form控制組form - 互動表單h1-h6 - 標題hr - 水平分隔線ol - 排序列表p - 段落pre - 格式化文字table - **ul - 非排序列表

二、行內元素

行內元素也叫內聯元素,和其他元素都在一行上,高度、行高、內邊距和外邊距都不可改變,寬度是它文字或者的寬度,也是不可改變的,行內元素只能容納文字或者其他行內元素,padding-top和padding-bottom都不會產生邊距效果

常見的內聯元素:

a - 錨點abbr - 縮寫b - 粗體(不推薦)bdo - 覆蓋預設的文字方向big - 大字型br - 換行cite - 引用code - 計算機**(在引用原始碼的時候需要)dfn - 定義欄位em - 強調font - 字型設定(不推薦)i - 斜體img - input - 輸入框kbd - 定義鍵盤文字label- **標籤q - 短引用s - 中劃線(不推薦)samp - 定義範例計算機**select- 專案選擇small - 小字型文字span - 常用內聯容器,定義文字內區塊strong- 粗體強調sub - 下標sup - 上標textarea - 多行文字輸入框u - 下劃線var - 定義變數

塊級元素和內聯元素之間的轉換:

1.display

塊元素預設display:block;行內非替換元素(a,span)預設為display:inline;行內替換元素(input)預設為display:inline-block;

display:none;不顯示該元素,也不會保留該元素原先占有的文件流位置。

display:block;轉換為塊級元素.

display:inline;轉換為行內元素。

display:inline-block;轉換為行內塊級元素。

2.float

當把行內元素設定完float:left/right後,該行內元素的display屬性會被賦予block值,且擁有浮動特性。行內元素去除了之間的莫名空白。 

3.position

當為行內元素進行定位時,position:absolute與position:fixed.都會使得原先的行內元素變為塊級元素。

三、html 速查列表

菜鳥教程:

:行內元素與塊級元素參考自:

前端學習(一) Html

html全稱hypertext mackeup language,超文字標記語言 標記就相當於你在本子上對重點部分進行的螢光筆塗鴉,利用特殊的東西對重點的東西標記出來 至於語言 自己想 如果你用的是pycharm,那你就輸入乙個!然後緊接著乙個tab,就出來了 如果你用的是sublime,那你就輸入...

前端學習(一)HTML基礎

前端開發需要學習的技術 前情提要 重點掌握html標籤結構 塊狀元素 行內元素等相關概念tips html是標記語言,不是程式語言,不能使用邏輯運算 靜態網頁和動態網頁的區別 靜態網頁除非修改 否則頁面內容和顯示效果不改變 動態網頁隨著時間 環境等因素改變頁面效果瀏覽器 解釋和執行html原始碼的工...

前端HTML學習

html 標題 heading 是通過 標籤來定義的 是英文header 頁首 標題的縮寫 html 段落是通過標籤來定義的 是英文paragraph 段落 的縮寫 html 鏈結是通過標籤來定義的 是英文anchor 錨點 的縮寫 html 影象是通過標籤來定義的 注意 元素是自關閉元素,不需要結...