2 2 1 Web前端HTML技術與CSS技術

2021-10-07 21:30:34 字數 3218 閱讀 9551

什麼是html

「html」是「hyper text markup language」的縮寫,即「超文字標記語言」,是標準通用標記語言下的乙個應用。html並不是一種程式語言,它是一種標記語言,是由一些標籤組成,主要是用來製作網頁的。

標籤不區分大小寫.和 . 推薦使用小寫.

html 標籤通常是成對出現的,比如

開始和結束標籤也被稱為開放標籤和閉合標籤

標籤可以巢狀.但是不能交叉巢狀.

標籤一般分為兩種:

1. 塊級標籤

霸佔一整行的標籤。比如:,,,這是第乙個段落

使用者名稱:

密碼:

這是第二個段落

使用者名稱:

密碼:

bananaorange這是span標籤

這是span標籤

這是span標籤

css 規則由兩個主要的部分構成:選擇器,以及一條或多條宣告。

selector
選擇器通常是您需要改變樣式的 html 元素。

每條宣告由乙個屬性和乙個值組成。

屬性(property)是您希望設定的樣式屬性(style attribute)。每個屬性有乙個值。屬性和值被冒號分開。

selector
下面這行**的作用是將 p元素內的文字顏色定義為紅色,同時將字型大小設定為 18 畫素。

在這個例子中,p是選擇器,color 和 font-size 是屬性,red 和 18px 是值。

p
p
你應該在每行只描述乙個屬性,這樣可以增強樣式定義的可讀性,就像這樣:

p
可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇器分開。在下面的例子中,我們對所有的標題元素進行了分組。所有的標題元素都是紅色的。

h1,h2,h3,h4,h5,h6
id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式。

id 選擇器以 "#" 來定義。

下面的兩個 id 選擇器,第乙個可以定義元素的顏色為紅色,第二個定義元素的顏色為綠色:

#red#green
下面的 html **中,id 屬性為 red 的 p 元素顯示為紅色,而 id 屬性為 green 的 p 元素顯示為綠色。​​​​​​​

這個段落是紅色。

這個段落是綠色。

類選擇器

在 css 中,類選擇器以乙個點號顯示:

.center
在上面的例子中,所有擁有 center 類的 html 元素均為居中。

在下面的 html **中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。​​​​​​​

以下相關標籤的詳細說明

屬性選擇器

可以為擁有指定屬性的 html 元素設定樣式,而不僅限於 class 和 id 屬性。

注釋:只有在規定了 !doctype 時,ie7 和 ie8及以上才支援屬性選擇器。在 ie6 及更低的版本中,不支援屬性選擇。

下面的例子為帶有 title 屬性的所有元素設定樣式:​​​​​​​

[title]
下面的例子為 title="wood_programming" 的所有元素設定樣式:​​​​​​​

[title=wood_programming]
css示例​​​​​​​

/*設定背景*/bodyh1h2pspan.highlight/*設定文字顏色*/bodyh1p.ex/*設定字型大小、風格、格式*/h1h2pp.normalp.serifp.sansserif/*設定邊框樣式、顏色*/p.doublep.groovep.ridgep.onep.two/*無序列表標記*/ul.discul.circleul.squareul.none/*下面表示 是table標籤的tr第乙個標籤設定的css*/table tr:nth-child(1)/*與上面是等價的*/tr:first-child/*下面表示的是偶數行tr設定的css*/tr:nth-child(2n)

web前端三大技術介紹之HTML

按照我們的老習慣,從它的誕生的之前開始講起,1991年,tim berners lee編寫了乙份叫做 html標籤 的文件,裡面包含了大約20個用來標記網頁的html標籤。他直接借用sgml的標記格式,也就是後來我們看到的html標記的格式,html在誕生之初,其目的想法非常簡單。當時tim ber...

web 前端技術點

prototype為類定義的方法要先定義後使用,跟js執行原理有關 prototyp只能在類中進行方法和變數的定義,例項中沒有這個屬性 例項對prototyp定義的屬性進行直接賦值是在例項中生成乙個新的屬性,而不是改變prototyp裡的屬性,如果是資料push進去就是各例項共享的。所以protot...

現代前端技術解析 Web 前端技術基礎

對 dom 操作進行封裝 dom 文件物件模型 指 html 內容通過瀏覽器解析後建立的具有節點父子關係的樹形物件 模組化 元件化 非同步載入 保證盡快展示頁面 webp 格式的 更高壓縮比 瀏覽器快取檔案 304 狀態碼 客戶端傳送了乙個帶條件的 get 請求且該請求已被允許,而文件的內容並沒有改...