html基礎知識1

2021-10-04 13:31:56 字數 4635 閱讀 6565

1、

如果是0px,可以簡化為0

2、

3、顏色有以下幾種常用表示方式:

屬性值說明

color-name

例如red、blue

hex-number

十六進製制,例如#d2691e是棕色,#後面是red、green、blue三原色搭配,每個色系一般佔兩位,數值越大顏色越淺,兩位數值如果一樣可以寫一位,例如#000

rgb-number

rgb(255,255,255)也是三原色,0~255

rgba-number

rgba(255,255,255,0.5),a是指alpha,透明度(0~1)

inherit

繼承父元素的顏色

hsl-number

hsl(359,75%,50%),hsl指的是色調(0~360)、飽和度,亮度

hsla-number

和上面一樣,只是多了乙個透明度alpha(0~1)

4、標題標籤的預設屬性:

標題標籤

font-size

h12em<=>xx-large<=>32px

h21.5em<=>x-large<=>24px

h31.17em<=>large<=>18.72px

h41em<=>medium<=>16px

h50.83em<=>small<=>13.28px

h60.75em<=>x-small<=>12px

標題標籤

margin值

h1margin:1.34em 0;

h2margin:1.25em 0;

h3margin:1.17em 0;

h4margin:1.33em 0;

h5margin:1.39em 0;

h6margin:1.75em 0;

5、塊級元素:

6、行內元素:

7、水平居中:

8、垂直居中:

9、img:

img是一種類似text的元素,在結束的時候,會在末尾加上乙個空白符,所以就會多出3px。 將img設定成塊級元素就可以了。

10、li:

之前還遇到過的乙個問題,當我想讓ul的li橫向排列時,把li的display的屬性設定為inline-block,然後就發現,li之間不能緊挨著,有額外的空隙,通過設定padding和margin為0都不能消除這個間隙。

產生這個問題的原因是:瀏覽器會把inline元素間的空白字元(空格、換行、tab等)渲染成乙個空格。而為了美觀。我們通常是乙個放在一行,這導致換行後產生換行字元,它變成乙個空格,占用了乙個字元的寬度。

解決方法也很多:

(1)把margin設乙個負值就是一種消除間隙的方法。

(2)給li標籤設定浮動。

(3)將font-size設定為0,或者將letter-spacing設定為-8px,這種方法會導致其他字元的樣式也會受到影響。

(4)還有一種在html**上做修改,不用修改css的方法。加上注釋,消除因換行帶來的空白字元。

11、設定文字陰影

語法:text-shadow: h-shadow v-shadow blur color;

h-shadow:必需值。水平陰影的位置。允許負值。

v-shadow 必需值。垂直陰影的位置。允許負值。

blur 可選。模糊的距離。

color 陰影顏色。

12、

英文、數字字型的最佳寫法如下 font-family: helvetica, tahoma, arial;

13、補充字型族名稱:

字型族大體上分為兩類:sans-serif(無襯線體)和serif(襯線體),當所有的字型都找不到時,我們可以使用字型族名稱作為作業系統最後選擇字型的方向。一般非襯線字型在顯示器中的顯示效果會比較好,因此我們需要在最後新增

sans-serif,寫法如下:

font-family

: helvetica, tahoma, arial, "pingfang sc", "hiragino sans gb", "heiti sc", "microsoft yahei", "wenquanyi micro hei", sans-serif;

14、設定字型的經典寫法:

font-family

:"lucida grande", "lucida sans unicode", lucida, helvetica, "hiragino sans gb", "microsoft yahei", "wenquanyi micro hei", sans-serif;

說明:該設定優先選擇了lucida家族的系列字型作為英文本型,該系列字型在mac和win上都是預裝的,且顯示效果較好;中文字型方面將冬青黑體作為最優先使用的字型,sans-serif(無襯線體)字型族為最後字型選擇,同時考慮了linux系統。

font

: 14px/1.5 "helvetica neue",helvetica,arial,"microsoft yahei","hiragino sans gb","heiti sc","wenquanyi micro hei",sans-serif;

說明:優先使用helvetica

neue這款字型以保證mac使用者的最佳體驗,選擇了arial作為win下預設英文本型及mac的替代英文本型;中文字型方面首選了微軟雅黑,然後選擇了冬青黑體及黑體-簡作為mac上的替代方案;最後使用文泉驛微公尺黑兼顧了linux系統。

font

: 12px/1.5 tahoma,arial,'hiragino sans gb','\5b8b\4f53',sans-serif;

說明:**中使用了tahoma、arial作為首選英文本型,中文字型首選了冬青黑體,由於win下沒有預裝該款字型,所以顯示出了後面的宋體(5b8b4f53為漢字宋體用unicode 表示的寫法,不用simsun是因為 firefox 的某些版本和 opera 不支援 simsun的寫法)

15、設定文字字型大小

乙個網頁中,標題通常使用較大的文字顯示,用於吸引人的注意,小的文字用來顯示網頁內容,大小字型結合,形成網頁,即吸引了人的注意力,又提高了閱讀速度。

在html5中通常使用font-size設定文字大小,其語法格式如下:

font-size

: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length

一、各引數的含義

xx-small :  絕對字型尺寸。根據物件字型進行調整。最小

x-small :  絕對字型尺寸。根據物件字型進行調整。較小

small :  絕對字型尺寸。根據物件字型進行調整。小

medium :  預設值。絕對字型尺寸。根據物件字型進行調整。正常

large :  絕對字型尺寸。根據物件字型進行調整。大

x-large :  絕對字型尺寸。根據物件字型進行調整。較大

xx-large :  絕對字型尺寸。根據物件字型進行調整。最大

larger :  相對字型尺寸。相對于父對像中字型尺寸進行相對增大。使用成比例的 em 單位計算

smaller :  相對字型尺寸。相對于父對像中字型尺寸進行相對減小。使用成比例的 em 單位計算

length :  百分數 | 由浮點數字和單位識別符號組成的長度值,不可為負值。其百分比取值是基於父物件中字型的尺寸。

二、單位標識

px: 基於畫素的單位。畫素是一種有用的單位,因為在任何**上都可以保證乙個畫素的差別確實是可見的。

em :一般用來測量長度的通用單位(例如元素周轉的頁邊空白和填充),當用於指定字型大小時,em單位是指父元素的字型大小。 比如

style

="font-size

:12px

">

style

="fontsize

:2em

">

這裡的字是24pxspan

>

div>

總結:px是畫素單位,em是相對單位,pt是絕對單位

它們各自的好處是:

HTML基礎知識1

web標準的概念及組成 web標準 結構 xhtml xml 表現 css 行為 js 結構和變現都由w3c 全球資訊網聯盟 指定 行為是由ecma 歐洲電腦廠商聯合會 制定為標準。html的相關概念 html 超文字標記語言 hyper text markup language xhtml 可擴充...

Html學習1 基礎知識

gecko firefox firefox。chromium blink chrome 內置於 chrome 瀏覽器之中 html 英文hyper text markup language的縮寫 中文譯為 超文字標籤語言 是用來描述網頁的一種語言。基礎骨架 1 html標籤 作用所有html中標籤的...

HTML基礎知識1 HTML簡介

超文字標記語言即是我們所熟知的html語言,它是一種用於建立網頁的標記語言,我們可以使用 html 來建立自己的 web 站點,html 執行在瀏覽器上,由瀏覽器來解析 對html的理解 1 它是一種標記語言即是一套標記標籤並不是一種程式語言,html使用標記標籤 來描述網頁 2 html文件又叫做...