HTML CSS快速入門(二)

2021-08-02 20:24:44 字數 1188 閱讀 7011

堅持每天撰寫一點部落格,今天發現自己寫的快速入門一文章閱讀的人並不多,遠沒有第一篇文章水文看的人多,估計很多人看多了這一類科普文都覺得費勁,還是不費腦子的東西更吸引眼球。那這樣的話就要去撰寫更有意思,與眾不同的東西出來,關鍵是少寫廢話。

html語義化

css基礎

根據內容的結構化,不加以任何css樣式的美化,直接用html的標籤進行頁面編寫。

呈現出好的內容結構,**結構。引用別人總結的一句話那就是頁面裸奔的時候也能看出來這個頁面是在做什麼事情

好的內容結構、**結構也是方便爬蟲進行資料探勘。

同時,如果按照語義化的模式進行頁面的編寫,也方便後續的**維護,公升級。

裸奔好看

良好的使用者體驗

方便其他裝置解析

方便後續開發與維護,遵守w3c標準的團隊都在遵守這個標準,減少差異化

在實際開發使用css過程中,要記住一些常用的css樣式名

舉例如下:

1,背景顏色 background-color

2,字型 color

3,背景 background

4,邊框 border

5,盒模型 margin padding (tips:chrome除錯工具裡面可以很直觀的看到某個元素的盒模型,除錯過程可以檢查樣式)

6,定位 position

上面的內容基本都是最常用的樣式,其他的無非是一些微調,根據設計稿進行繪製。

接著是介紹選擇器,選擇器的用法很多變。作為新手上路的你,記住下面兩條資訊:

類選擇器是用.class來選擇,id選擇器是用#id來選擇。

舉例

"box" type="text"

.../>

如果要選擇上面那個標籤,則使用.class

class="box" id="mybox"

type=

"text" ../>

如果要通過id來選擇上面的標籤,則使用#mybox來選擇

剩下的就是其他選擇器,後面會在知識補充的章節裡面補充進來。

在css裡面還有一點比較重要的就是position和float,這個涉及到排版問題。在排版問題上面,這裡面學問就大了。

在下一章節將會講講css的具體內容以及一些常見的問題。

HTML CSS快速入門學習筆記

一 html與css 發展歷程 html的定義 是超文字標記語言,不是程式語言。html最新標準是html5.css的定義 css層疊樣式表控制web頁面的外觀。html搭建網頁的結構,css裝飾。二 常用的html標籤和屬性 標題標籤 h1 h6 僅用於標題 td td tr table 列表 o...

html css快速入門教程(5)

1.畫盒子1 2.畫盒子2 3.京東特色購物 4.京東發現好貨 5.京東玩3c 通過使用 position 屬性,我們可以選擇 3 種不同型別的定位,這會影響元素框生成的方式。relative 相對定位的參照物是原來自己的位置,元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。...

html css快速入門教程(4)

1.網易考拉下拉列表 2.愛奇藝新聞 3.ps濾鏡選單 4.愛奇藝列表 網頁設計,首先要做好整體的布局,網頁布局就是將不同的元素按照一定的規則放置在瀏覽器的不同位置,因此會經常用到一些內容 填充 邊框 邊界等屬性,html布局元素經過不同的巢狀與位置的擺放,就類似於日常生活中的用盒子裝東西,把每乙個...