html css基礎 遺忘 重要知識點總結

2022-06-01 20:42:12 字數 4300 閱讀 5000

星期六用了一天的時間刷完慕課上的html、css基礎課程。撿起了許多遺忘的 或者以前不重視的知識點。現在整理如下(炒雞基礎...):

1.標籤字型加粗     標籤字型傾斜    標籤表示強調語氣(傾斜效果)標籤表示更強的強調語氣(加粗效果)

示例**:

<

b>b標籤

b><

br>

<

i>i標籤

i><

br>

<

em>em標籤

em><

br>

<

strong

>strong標籤

strong

>

示例效果:

2.q標籤是短的引用 會標籤內的元素外圍自動生成引號  

blockquote標籤是多行引用 標籤內的元素會自動縮排

顯然,q是行內元素 blockquote是塊級元素

示例**:

<

q>床前明月光

q>

<

blockquote

>

望嶽

<

br>

杜甫

<

br>

西嶽崚嶒竦處尊,諸峰羅立似兒孫。

<

br>

安得仙人九節杖,拄到玉女洗頭盆。

<

br>

車箱入谷無歸路,箭栝通天有一門。

<

br>

稍待秋風涼冷後,高尋白帝問真源。

<

br>

blockquote

>

看上面

示例效果:

3.標籤 新增水平分割線

可通過css設定一些樣式 如寬度、外邊距等

4.標籤內的元素會自動傾斜並前後都換行 前面還會再空一行 

示例**:

<

p>

<

span

>參考文字

span

>

<

address

>南二環東路二十號河北師範大學新校區

address

>

<

span

>參考文字

span

>

p>

示例效果:

5.標籤 只能在單行內包含**var i=8;

標籤  作用:新增多行** 預格式化的文字  標籤內換行和空格有效  不止對**有效

示例**:

<

code

>

var i=0;

i++;

alert(i);

code

>

<

pre>

var i=0;

i++;

alert(i);

pre>

<

pre>

pre標籤內的

回車和 空格

都有效pre>

示例效果:

6. 標籤和

標籤的title的屬性值都可以自定義   滑鼠滑過標籤會顯示定義的資訊

示例**:(

標籤同)

<

a href

="#"

title

="鏈結到必應"

>必應搜尋

a>

例項效果:

7.表單中submit 與 reset 必須在input標籤的type屬性中才會生效 

8.label標籤的for屬性必須與繫結的表單元素的id屬性相同 才能生效(點選label標籤內的文字或 自動聚焦到相應的表單元素中)

示例**:

<

form

action

=""method

="">

<

label

for="names"

><

img

src="tempcropped.jpeg"

alt=""

width

="300px"

height

="200px"

>

label

>

<

input

type

="text"

id="names"

name

="myname"

>

form

>

示例效果:

點選這個影象時,會自動聚焦到輸入文字框上

9.注釋:

html:   

css:    /*    */

js:      //

/*    */

10.css樣式設定中 嵌入式(style標籤內)要在外部式(link)的下面 

11.:first-child 也是偽類選擇器

12.font-weight:bold; font-style:italic;text-decoration:underline;text-decoration:line-through;  text-indent:2em; letter-spacing:20px;word-spacing:50px;

別記錯 別拼錯(屬性名)

13.letter-spacing  對英文本母有效 對漢字也有效        word-spacing對英文單詞有效 

14.塊級元素特點:

1、每個塊級元素都從新的一行開始,並且其後的元素也另起一行。(乙個塊級元素獨佔一行)

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定乙個寬度。

內聯元素特點:

1、和其他元素都在一行上;

2、元素的高度、寬度及頂部和底部邊距不可設定;

3、元素的寬度就是它包含的文字或的寬度,不可改變。

(如果標籤包含乙個img標籤 則這個span的寬度為該的寬度 高度還是預設的高度   如果span元素內是文字 包括p pre h1 等  則span的高度為span內元素撐起的高度  div同)

inline-block 元素(img、input)特點:

1、和其他元素都在一行上;

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

(span 設定了display:inline-block;之後 預設的寬度和高度 為span內元素撐起的寬度和高度    div同)

15.塊級元素都滿足盒子模型 

16.給出的寬度高度為盒子模型中內容的寬高,最終實際的寬高為內容的寬高加上內邊距加邊框 

即 我們在通過css設定元素的寬度和高度時,只是給盒子模型中的內容區域設定了寬高(padding以內的)

17.dashed 虛線  用於border聯合寫法的第二個引數   或 border-style 的值

18.font縮寫:

使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性,其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用預設值。

在縮寫時 font-size 與 line-height 中間要加入「/」斜扛

19.長度單位em:

就是本元素(注意 是本元素)給定字型的 font-size 值,如果元素的 font-size 為 14px ,那麼 1em = 14px;如果 font-size 為 18px,那麼 1em = 18px

但當給 font-size 設定單位為 em 時,此時計算的標準以 該元素 的父元素的 font-size 為基礎

HTML css重要知識點總結

base元素 a元素的錨點鏈結 a元素和img元素結合 letter word spacing text transform 不常用 text indent text align font family font weight font style font varient 不常用 line hei...

HTML CSS基礎知識

二 cs與bs 面試題 三 html使用 四 css 1.概述 html hypertext markup language 超文字標記語言。2.作用 編寫網頁內容的 3.常見標籤 1.table 2.img 3.超連結a 4.表單form 文字框 type text 密碼框 type passwo...

HTML CSS基礎知識

5大瀏覽器 4大核心 ie trident firefox gecko google chrome webkit blink safari webkit opera presto 在html中body 預設margin 8px。float float會產生浮動流 所有產生了浮動流的元素,塊級元素看不...