HTML 和 CSS 快速入門

2021-10-25 19:32:16 字數 1874 閱讀 6818

hyper text markup language 超文字標記語言,是最基礎的網頁開發語言。網頁檔案字尾名以.html/.htm結束。

:html5 中定義該文件型別是html文件:html 文件的根標籤:頭標籤,用於指定 html 文件的一些屬性,引入外部的資源。:標題標籤:體標籤

注釋cascading style sheets 層疊樣式表,多個樣式可作用在同乙個 html 元素上,同時生效。

在標籤內使用style屬性指定 css **

eg:

style="color:red;">hello cssdiv>

head標籤內,定義style標籤 style 標籤體內容就是 css **

eg:

divstyle>

hello cssdiv>

1.定義 css 資源檔案

2.在head標籤內,定義link標籤,引入外部的資源檔案

eg:.css檔案

div

.html檔案

rel="stylesheet"

href="css/a.css">

hello cssdiv>

格式:

選擇器 

注意:每一對屬性需要使用;隔開,最後一對屬性可以不加;

篩選具有相似特徵的元素

id選擇器:選擇具體的 id 屬性值的元素,建議在 html 頁面中 id 值唯一;語法:#id屬性值{}元素選擇器:選擇具有相同標籤名稱的元素;語法:標籤名稱{},注意 id 選擇器優先順序高於元素選擇器

類選擇器:選擇具有相同的 class 屬性值的元素.class屬性值{},注意類選擇器優先順序高於元素選擇器,低於 id 選擇器

選擇素有元素;語法:*{}並集選擇器;語法:選擇器1,選擇器2{}子選擇器:篩選選擇器1元素下的選擇器2元素;語法:選擇器1 選擇器2{}父選擇器:篩選選擇器2的父元素選擇器1;語法:選擇器1 > 選擇器2{}屬性選擇器:選擇元素名稱,屬性名=屬性值的元素;語法:元素名稱[屬性名="屬性值"]{}偽類選擇器:選擇一些元素具有的狀態;語法:元素:狀態{}字型、文字font-size:字型大小color:文字顏色text-align:對齊方式line-height:行高

邊框border:設定邊框,復合屬性

尺寸width:寬度height:高度

盒子模型:控制布局margin:外邊距padding:內邊距,預設情況下調整內邊距會影響整個盒子的大小,這時可設定box-sizing:border-box;確定盒子的指定寬高為最終大小float:left,right

HTML快速入門

html 是用來描述網頁的一種語言。html 指的是超文字標記語言 hyper text markup language html 不是一種程式語言,而是一種標記語言 markup language 標記語言是一套標記標籤 markup tag html 使用標記標籤來描述網頁 html 標籤通常是...

HTML快速入門

b s架構 伺服器 瀏覽器 接收請求並解析,處理業務,返回資料 響應 頁面組成 html css js 測試工具 chrome 特點 說明 標籤就是html的骨架,最重要的組成部分。屬性 幾乎每個標籤都有的屬性 加粗 斜體 下劃線 刪除線 上標 下標 字型 其中的每個元素都是乙個 有序列表 例子 n...

HTML快速入門

這是乙個宣告,目的是告訴瀏覽器使用html的標準來解析這個網頁 doctype html 根標籤,最頂層的標籤 頭標籤,用於指定html文件的一些屬性。utf 8 定義標題的標籤 title head 體標籤,網頁的主要內容就寫在這裡 hellow body html 注釋 標題標籤 四級標題 五級...