html, css知识点
常見的瀏覽器的前綴
1.?歌chrome======內(nèi)核(webkit)========前綴(-webkit-)
2.蘋果safari======內(nèi)核(webkit)======前綴(-webkit-)
3.?狐firefox=====內(nèi)核(gecko)=======前綴(-moz-)
4.歐朋opera=======內(nèi)核(presto)======前綴(-o-)
5.IE=============內(nèi)核(trident)=====前綴(-ms-)
6.edge===前綴(-webkit-)
微軟win11系統(tǒng)上瀏覽器已經(jīng)全面改成edge了,win11以下的系統(tǒng)用的還是IE(IE目前已經(jīng)停產(chǎn)了)
一:線性漸變linear-gradient
? ? 不加瀏覽器前綴:方向必須要寫to,寫的是終點
? ? 加瀏覽器前綴:方向就不能寫to了,寫的是起點
? ? 加了不同的前綴只能在對應(yīng)的瀏覽器上識別,比如加了ms只能在IE上識別,加了webkit就可以在谷歌、蘋果、edge上識別
二:徑向漸變radial-gradient()
? ? 注意:
? ? ? ? 起點可以寫方位名詞,也可以寫具體的坐標(biāo)點。
? ? ? ? 如果寫了起點了,就必須加瀏覽器的前綴。
? ? ? ? 如果不寫起點,起點默認(rèn)在中心點,可以不加前綴。
? ? 漸變的形狀:
? ? ? ? 默認(rèn)情況:
? ? ? ? ? ? 正方形盒子默認(rèn)是圓形(正方形盒子永遠(yuǎn)都只呈現(xiàn)圓形)
? ? ? ? ? ? 長方形盒子默認(rèn)是橢圓形(長方形盒子是可以改成圓形的)
? ? ? ? circle=====圓
? ? ? ? ellipse====橢圓
三:重復(fù)性漸變
? ? 線性漸變和徑向漸變都支持重復(fù)。
? ? 在漸變的單詞之前加repeating-,該顏色分配比例。
四:精靈圖
? ? ?精靈圖也叫做雪碧圖,英文單詞是sprite,這是一種圖片整合技術(shù),就是把很多張小圖放到了一張大圖之上。
? ? 用精靈圖的好處:
? ? ? ? 1.減少對服務(wù)器的請求次數(shù)
? ? ? ? 2.提高網(wǎng)頁的加載速度
? ? ? ? 3.減少圖片的體積
? ? 使用精靈圖的核心技術(shù)點:背景圖的位置
五、過渡
? ? ? 過渡:可以實現(xiàn)從一個狀態(tài)緩慢的變化到另外一個狀態(tài),有一個動畫效果
? ? 一般過渡都需要結(jié)合鼠標(biāo)滑過等一起實現(xiàn)
? ? 非簡寫:
? ? ? ? transition-property:過渡要參與的屬性
? ? ? ? transition-duration:過渡時間
? ? ? ? transition-delay:過渡的延遲時間
? ? 簡寫:transition
? ? 簡寫方式里面:其他值沒有書寫順序,但是過渡時間必須在前,延遲時間在后,如果只寫了一個時間那么必然是過渡時間
? ? 缺一個:過渡的運動曲線(明天再講)
六:變形transform
? ? 位移translate,主要作用:調(diào)整元素的位置。
? ? ? ? 常見寫法:
? ? ? ? transform: translateX();====只會做橫向移動
? ? ? ? transform: translateY();====只會做縱向移動
? ? ? ? transform: translateX() translateY();====橫向和縱向同時移動
? ? ? ? transform: translate(x,y);====橫向和縱向同時移動
? ? 旋轉(zhuǎn): 旋轉(zhuǎn)常見書寫方式
? ? ? ? 賦值的時候用的單位是角度單位deg
? ? ? ? ?transform: rotateX(0deg);====圍繞x軸做旋轉(zhuǎn)
? ? ? ? ?transform: rotateY(0deg);===圍繞y軸做旋轉(zhuǎn)
? ? ? ? ?transform: rotate(0deg);===圍繞整個盒子中心點做旋轉(zhuǎn)
? ? transform-origin:可以更改變形點
? ? 縮放:可以實現(xiàn)元素的放大和縮小
? ? ? ? 縮放的常見寫法:
? ? ? ? 賦值不帶單位,值是倍數(shù)的意思
? ? ? ? 寫1沒有變化,如果比1大,就是放大多少倍,如果比1小,就是縮小多少倍
? ? ? ? transform: scaleX();====沿著x軸做縮放,改變的寬度
? ? ? ? transform: scaleY();====沿著y軸做縮放,改變的高度
? ? ? ? ?transform: scaleX() scaleY();====x和y同時改變
? ? ? ? ?transform: scale();
? ? ? ? ? ? 小括號里面只寫一個值,就是x和y同時改變
? ? ? ? ? ? 寫了2個值,第一個值是x,第二個值代表的是y
? ? ? ? 默認(rèn)變形點都是在中間,可以通過transform-origin更改變形點
? ? 傾斜:skew
要記住的東西
? ? 1.瀏覽器的前綴
? ? 2.漸變的單詞
? ? 3.精靈圖的好處
? ? 4.過渡的單詞
? ? 5.變形中位移、旋轉(zhuǎn)和縮放的單詞
作業(yè):
? ? 1.扇子:元素不可見千萬不要用display:none;
? ? ? ? 因為display:none這個屬性是不參與過渡
? ? ? ? 可以使用opacity實現(xiàn)元素的隱藏效果
? ? 2.縮放的線條:
? ? ? ? 一開始線條不可見是讓縮放值為0實現(xiàn)的,也不是x和y同時為0,只需要讓其中一個為0
? ? ? ? 提示:創(chuàng)建2個盒子,一個加左右邊框線,一個加上下邊框線即可
? ? 3.百葉窗盡力去做(明天會講)
1.選擇器的權(quán)重值
2.浮動的作用、特點
3.文字水平居中、垂直居中
4.如何取消超鏈接自帶的下劃線
5.紅綠藍(lán)白黑的rgb和十六進(jìn)制寫法?
一、背景
? ? 非簡寫方式(單一寫法)
? ? ? ? 1.背景的顏色:background-color
? ? ? ? 2.背景的圖片:background-image:url(圖片的路徑)
? ? ? ? ? ? 盒子大于圖片:會發(fā)生平鋪的現(xiàn)象
? ? ? ? ? ? 盒子等于圖片:剛好顯示
? ? ? ? ? ? 盒子小于圖片:會把圖片裁切
? ? ? ? 3.背景圖片的平鋪規(guī)則:background-repeat
? ? ? ? ? ? repeat===平鋪,默認(rèn)值
? ? ? ? ? ? no-repeat===不平鋪
? ? ? ? ? ? repeat-x===橫向平鋪
? ? ? ? ? ? repeat-y===縱向平鋪
? ? ? ? 4.背景圖片的位置:background-position
? ? ? ? ? ? 寫法一:寫具體的坐標(biāo)點
? ? ? ? ? ? ? ? 左上角是0,0
? ? ? ? ? ? ? ? x軸:向右為正,向左為負(fù)
? ? ? ? ? ? ? ? y軸:向下為正,向上為負(fù)
? ? ? ? ? ? 寫法二:借助方位名詞寫(top、bottom、left、right、center)
? ? 簡寫方式(復(fù)合寫法)
? ? ? ? background:需要什么就寫什么。沒有書寫順序。
二、盒子模型
? ? 組成部分:內(nèi)容 ?內(nèi)間距 ? 邊框線 ?外間距
? ? 我們寫的width和height指的是內(nèi)容區(qū)的寬度和高度
? ? 加了內(nèi)間距和邊框線會導(dǎo)致把盒子撐大
? ? 總寬:width+左右的內(nèi)間距+左右的邊框線
? ? 總高:height+上下的內(nèi)間距+上下的邊框線
三、內(nèi)間距的常見書寫方式
? ? 內(nèi)間距padding:內(nèi)容到盒子邊的距離
? ? padding:1個值,同時給4個方向都添加
? ? padding:2個值,上下 ?左右
? ? padding:3個值,上 ?左右 ?下
? ? padding:4個值,上 右 下 ?左 順時針的順序賦值
? ? padding-left:左間距
? ? padding-right
? ? padding-top
? ? padding-bottom
? ? 注意:內(nèi)間距不支持寫負(fù)數(shù)
四、外間距的常見書寫方式
? ? 外間距margin:盒子與盒子的距離
? ? 書寫方式和內(nèi)間距是一樣的
? ? 注意:外間距支持寫負(fù)數(shù)
? ? 調(diào)整位置:
? ? ? ? 上下:margin-top
? ? ? ? ? ? 正數(shù):向下走 ?負(fù)數(shù):向上走
? ? ? ? 左右:margin-left
? ? ? ? ? ? 正數(shù):向右走 ?負(fù)數(shù):向左右
五、邊框線的書寫方式
? ? 非簡寫方式(單一寫法):
? ? ? ? 1.border-width:邊框線的粗細(xì)
? ? ? ? 2.border-style:邊框線的樣式
? ? ? ? ? ? solid:實線
? ? ? ? ? ? dashed:虛線
? ? ? ? ? ? dotted:點線
? ? ? ? ? ? double:雙線
? ? ? ? ? ? none:沒有線
? ? ? ? 3.border-color:邊框線的顏色,默認(rèn)顏色是黑色
? ? 簡寫方式(復(fù)合寫法):border:需要哪個值就寫哪個,沒有書寫順序。
六、利用邊框線畫三角形
? ? 1.寬高為0
? ? 2.給4個方向都加透明的邊框線(transparent)
? ? 3.需要哪個方向就給對立面寫上顏色即可。
七、元素的居中方式
? ? 文字的居中
? ? ? ? 水平居中:text-align:center
? ? ? ? 垂直居中:line-height的值height一致
? ? 圖片的居中
? ? ? ? 水平居中:text-align:center;
? ? ? ? 注意:要寫在圖片的父元素身上。
? ? ? ? 垂直居中:下周再講。
? ? 盒子的居中:
? ? ? ? 水平居中:margin:0 auto;
? ? ? ? 注意:一定要寫在自己身上。
? ? ? ? 垂直居中:下周再講。
八、清除標(biāo)簽自帶的間距
? ? *{padding:0;margin:0;}
?
一、元素類型
? ? ?1.塊元素block
? ? ? ? ? ? 特點:
? ? ? ? ? ? ? ? 1.縱向排列,可以設(shè)置寬高
? ? ? ? ? ? ? ? 2.如果不設(shè)置寬度,那么寬度默認(rèn)和父親保持一致。
? ? ? ? ? ? ? ? 3.一般在網(wǎng)頁布局中都當(dāng)作容器來使用。
? ? ? ? ? ? 常見標(biāo)簽:div、p、標(biāo)題標(biāo)簽(h1,h2,h3,h4,h5,h6)、ul、ol、li、dl、dt、dd、hr、form
? ? ? ? 2.行內(nèi)元素inline
? ? ? ? ? ? 特點:
? ? ? ? ? ? ? ? 1.橫向排列的,不能設(shè)置寬高
? ? ? ? ? ? ? ? 2.寬度默認(rèn)由內(nèi)容決定
? ? ? ? ? ? ? ? 3.有時候上下的內(nèi)外間距有可能加不上。
? ? ? ? ? ? 常見標(biāo)簽:span、a、b、strong、i、em、u、s、del、sup、sub
? ? ? ? 3.行內(nèi)塊元素inline-block
? ? ? ? ? ? 特點:
? ? ? ? ? ? ? ? 1.橫向排列的,可以設(shè)置寬高
? ? ? ? ? ? ? ? 2.自帶3-5px的間距,這個間距不是由padding、margin造成的。
? ? ? ? ? ? 常見標(biāo)簽:img、input
二、元素類型之間的轉(zhuǎn)換
? ? ? display:block;====轉(zhuǎn)成塊元素
? ? ? display:inline;===轉(zhuǎn)成行內(nèi)元素
? ? ? display:inline-block;====轉(zhuǎn)成行內(nèi)塊元素
三、元素的顯示和隱藏
? ? ? 隱藏:display: none;元素隱藏之后不占據(jù)位置。
? ? ? 顯示:只要讓display的值不為none就是顯示。
? ? ? ? block、inline、inline-block
? ? ? ? 顯示一般推薦用block。
四、vertical-align可以實現(xiàn)的垂直居中。(了解)
? ? 但是僅限于行內(nèi)塊元素使用
? ? top:頂線對齊
? ? middle:中線對齊
? ? baseline:基線對齊,默認(rèn)值
? ? bottom:底線對齊
? ? 行內(nèi)塊元素為什么自帶3-5px的間距?
? ? ? ? 因為行內(nèi)塊元素默認(rèn)是和文字的基線進(jìn)行的對齊。
? ? 如何取消這個自帶的間距呢?
? ? ? ? 1.讓vertical-align的值只要不是baseline即可。
? ? ? ? 2.浮動:缺點:會脫離文檔流,不占據(jù)位置。
? ? ? ? 3.font-size: 0;使用這種方式的前提是盒子里面沒有文字才能使用,如果有文字,雖然能取消間距,但是文字就看不見了。
五、省略號的制作
? ? ? ?1.加寬度
? ? ? ? 2.讓文字不要自動換行: white-space: nowrap;
? ? ? ? 3.讓超出的部分隱藏:overflow: hidden;
? ? ? ? 4.顯示省略號:text-overflow: ellipsis;
六、overflow的值
? ? ? ? visible:超出的部分依然可見,默認(rèn)值
? ? ? ? hidden:讓超出的部分隱藏====常用
? ? ? ? auto:當(dāng)內(nèi)容超出之后會自動產(chǎn)生滾動條。(推薦auto制作滾動條)====常用
? ? ? ? scroll:不管內(nèi)容有沒有超出都會產(chǎn)生滾動條
標(biāo)簽嵌套:
? ? 建議:豎著排列的可以嵌套橫向排列的,但是橫向排列的里面最好不好嵌套豎著排列
? ??
一、偽類選擇器
? ? 偽類選擇器:標(biāo)志是一個冒號
? ? :link===鏈接未訪問(只能用在超鏈接)
? ? :visited====鏈接已訪問(只能用在超鏈接)
? ? :hover===鼠標(biāo)滑過、鼠標(biāo)懸停(可以用在任何一個標(biāo)簽之上)=====常用
? ? :active===鼠標(biāo)按下(可以用在任何一個標(biāo)簽之上)
? ? 注意:如果這4個狀態(tài)同時書寫,順序不可打亂。
二、選擇器的權(quán)重
? ? 權(quán)重值越大,優(yōu)先級越高。
? ? ? ? 通配符選擇器:0
? ? ? ? 標(biāo)簽選擇器:1
? ? ? ? 類選擇器:10
? ? ? ? 偽類選擇器:10
? ? ? ? id選擇器:100
? ? ? ? 行內(nèi)樣式表:1000
? ? ? ? 包含選擇器(后代和子代):用到的所有的選擇器權(quán)重相加之和
? ? ? ? 群組選擇器:各自選擇器的權(quán)重值(選擇器和選擇器之間毫無關(guān)系)
三、和文字相關(guān)的樣式
? ? 1.文字的顏色:color
? ? ? ? 1.直接寫顏色單詞:red
? ? ? ? ? ? ? ? 2.rgb()===取值區(qū)間:0-255
? ? ? ? ? ? ? ? ? ? rgb(50,200,100)
? ? ? ? ? ? ? ? ? ? 紅色:rgb(255,0,0)
? ? ? ? ? ? ? ? ? ? 綠色:rgb(0,255,0)
? ? ? ? ? ? ? ? ? ? 藍(lán)色:rgb(0,0,255)
? ? ? ? ? ? ? ? ? ? 白色:rgb(255,255,255)
? ? ? ? ? ? ? ? ? ? 黑色:rgb(0,0,0)
? ? ? ? ? ? ? ? 3.十六進(jìn)制寫法===取值區(qū)間:0-9a-f
? ? ? ? ? ? ? ? ? ? #跟6位數(shù)字,2位是一組,可以分成3組,依次代表紅色、綠色、藍(lán)色的取值
? ? ? ? ? ? ? ? ? ? 紅色:#ff0000====#f00
? ? ? ? ? ? ? ? ? ? 綠色:#00ff00====#0f0
? ? ? ? ? ? ? ? ? ? 藍(lán)色:#0000ff===#00f
? ? ? ? ? ? ? ? ? ? 白色:#ffffff===#fff
? ? ? ? ? ? ? ? ? ? 黑色:#000000===#000
? ? 2.字號:font-size
? ? ? ? ?谷歌瀏覽器默認(rèn)字號為16px
? ? ? ? ? ? ? ? 谷歌最小字號是12px ?其他瀏覽器中可能是10px
? ? ? ? ? ? ? ? 字號最好寫偶數(shù)
? ? 3.字體:font-family
? ? ? ? ?谷歌的默認(rèn)字體是微軟雅黑,其他瀏覽器可能是宋體。
? ? ? ? ? ? ? ? 注意:寫字體的時候如果字體是漢字或者1個以上的英文單詞,那么必須加引號。
? ? ? ? ? ? ? ? 字體可以寫多個,中間通過逗號隔開,使用字體的時候會從左到右依次查找,如果能用就用,不能用就下一個,如果都不能使用就使用默認(rèn)的。
? ? 4.加粗:font-weight
? ? ? ? ?1.寫單詞
? ? ? ? ? ? ? ? ? ? ? ? ? ? lighter===變細(xì)
? ? ? ? ? ? ? ? ? ? ? ? ? ? normal===正常
? ? ? ? ? ? ? ? ? ? ? ? ? ? bold==加粗
? ? ? ? ? ? ? ? ? ? ? ? ? ? bolder==更粗(只是語氣加重而已)
? ? ? ? ? ? ? ? ? ? ? ? 2.寫數(shù)字(100-900)
? ? ? ? ? ? ? ? ? ? ? ? ? ? 100===變細(xì)
? ? ? ? ? ? ? ? ? ? ? ? ? ? 400===正常
? ? ? ? ? ? ? ? ? ? ? ? ? ? 600===變成加粗了,但是程序員更加喜歡用700
? ? ? ? ? ? ? ? ? ? ? ? ? ? 注意:千萬不要帶單位
? ? 5.傾斜:font-style
? ? ? ? ?normal===正常
? ? ? ? ? ? ? ? ? ? italic===傾斜
? ? ? ? ? ? ? ? ? ? oblique===更傾斜(只是語氣加重而已)
? ? 6.首行縮進(jìn)text-indent
? ? ? ? ? em單位是一個相對單位,相對于當(dāng)前元素的文字大小而言的
? ? ? ? ? ? ? ? 假設(shè)當(dāng)前文字大小是16px,那么1em=16px ?2em=32px
? ? ? ? ? ? ? ? 假設(shè)當(dāng)前文字大小是20px,那么1em=20px ?2em=40px
? ? 7.對齊方式
? ? ? ? ?水平對齊:text-align
? ? ? ? left:左對齊
? ? ? ? right:右對齊
? ? ? ? center:居中對齊(常用)
? ? ? ? justify:2端對齊
? ? ? ? 垂直對齊:line-height
? ? ? ? ? ? 當(dāng)line-height與height保持一致的時候:文字垂直居中
? ? ? ? ? ? 當(dāng)line-height比height小:文字垂直偏上
? ? ? ? ? ? 當(dāng)line-height比height大:文字垂直偏下
? ? ? ? 注意:
? ? ? ? ? ? 如果文字是單行的,line-height可以調(diào)整文字的垂直對齊方式
? ? ? ? ? ? 如果文字是多行的,那么line-height就變成行高了(行與行的間距,上一行文字的頂端到下一行的頂端)
? ? 8.修飾線:text-decoration
? ? ? ? ?underline:下劃線
? ? ? ? ? ? ? ? overline:上劃線
? ? ? ? ? ? ? ? line-through:中劃線、刪除線、貫穿線
? ? ? ? ? ? ? ? none:沒有線(常用)
? ? 9.了解
? ? ? ? 字間距:letter-spacing
? ? ? ? 詞間距:word-spacing
? ? ? ? 大小寫轉(zhuǎn)換:text-transform
? ? ? ? ? ? ?uppercase===轉(zhuǎn)大寫
? ? ? ? ? ? ? ? lowercase==轉(zhuǎn)小寫
? ? ? ? ? ? ? ? capitalize==首字母大寫
四、浮動
? ? ?浮動float:
? ? 主要作用:實現(xiàn)元素的橫向排列。
? ? 浮動的書寫方式:
? ? ? ? float:left;=====讓元素向左漂浮
? ? ? ? float:right;===讓元素向右漂浮
? ? ? ? float:none;====不漂浮(寫了和不寫是一樣)
? ? 特點:
? ? ? ? 1.元素一旦加了浮動,就會立即漂浮起來,不占據(jù)位置,后面的元素會向前補齊。
? ? ? ? 2.浮動的元素是無法覆蓋文字和圖片的。
? ? ? ? 3.如果給‘相鄰’的多個元素都寫了左浮動:那么元素會從左到右依次橫向排列
? ? ? ? ? 如果給‘相鄰’的多個元素都寫了右浮動:那么元素會從右到左依次橫向排列
? ? ? ? 4.如果元素過多,一行放不下,會自動換行的。
? ? ? ? ? ? 注意:換到下一行的時候如果上一行有一個元素的高度太大了,會導(dǎo)致卡著過不去
? ? ? ? 5.大多情況下縱向排列的標(biāo)簽比如div如果不設(shè)置寬度,寬度默認(rèn)和父親保持一致,但是一旦加了浮動,寬度是由內(nèi)容去決定的。
? ? ? ? 6.大多情況下橫向排列的標(biāo)簽是無法設(shè)置寬高的,但是加了浮動之后就可以設(shè)置了。
? ? 清除浮動:是清除上一個浮動的元素帶來的影響,而不是取消浮動(誰受到影響就寫在誰的身上)
? ? ? ? ?clear:left;====清除左邊浮動帶來的影響
? ? ? ? clear:right;===清除右邊浮動帶來的影響
? ? ? ? clear:both;===左右2邊都清除
?
一、網(wǎng)站三要素(網(wǎng)頁的組成部分)
? ? html====結(jié)構(gòu)=================w3c
? ? css====表現(xiàn)(美化網(wǎng)頁的)=====w3c
? ? js====行為(實現(xiàn)交互效果的)===ECMA
二、標(biāo)簽語法
? ? html:超文本標(biāo)記語言,目前使用的版本是5.0
? ? 標(biāo)記:也叫做標(biāo)簽、元素、盒子
? ? 記住:所有的標(biāo)簽都是長在尖括號里面的<>
? ? ? ? 長在尖括號里的第一個單詞叫做:標(biāo)簽的名字,后面的單詞統(tǒng)稱為屬性
? ? ? ? 屬性:分為屬性名字和屬性值,中間通過等號連接,屬性值需要加引號
? ? ? ? 屬性根據(jù)情況可寫可不寫。
? ? 分類:
? ? ? ? 單標(biāo)簽:<標(biāo)簽名字 屬性名字1='屬性值' 屬性名字2='屬性值'。。。>
? ? ? ? 雙標(biāo)簽:<標(biāo)簽名字 屬性名字1='屬性值' 屬性名字2='屬性值'。。。>標(biāo)簽內(nèi)容</標(biāo)簽名字>
三、標(biāo)簽的關(guān)系
? ? 父子關(guān)系(嵌套)
? ? 兄弟關(guān)系(并列)
四、各種標(biāo)簽
? ? 1.文章標(biāo)題標(biāo)簽h1-h6
? ? ? ? 特點:雙標(biāo)簽 ?文字自帶加粗效果,h1字號最大,h6字號最小的,縱向排列
? ? ? ? 注意:h1標(biāo)簽有唯一性,一個頁面只允許使用一次,h1標(biāo)簽一般是用來放logo圖的
? ? 2. 段落標(biāo)簽:p
? ? 特點:雙 段落與段落中間自帶間距 縱向排列
? ? 3.傾斜標(biāo)簽:i、em
? ? ? ? 特點:雙、橫向排列
? ? ? ? 區(qū)別:em標(biāo)簽表示強調(diào),有語氣加重效果,有利于搜索引擎的搜索
? ? 4.加粗:b、strong
? ? ? ? 特點:雙、橫向排列
? ? ? ? 區(qū)別:strong標(biāo)簽表示強調(diào),有語氣加重效果,有利于搜索引擎的搜索
? ? 5.下劃線:u
? ? ? ? 特點:雙、橫向排列
? ? 6.刪除線:s、del
? ? ? ? 特點:雙、橫向排列
? ? ? ? 區(qū)別:del標(biāo)簽表示強調(diào),有語氣加重效果,有利于搜索引擎的搜索
? ? 7.上標(biāo):sup ?下標(biāo):sub
? ? ? ? 特點:雙、橫向排列
? ? 8.修飾性標(biāo)簽
? ? ? ? hr:水平線
? ? ? ? br:強制換行
? ? ? ? 都是單標(biāo)簽
? ? 9.列表標(biāo)簽
? ? ? ? 有序列表:ol+li=====幾乎不用
? ? 默認(rèn)列表符號是數(shù)字
? ? 可以通過type屬性更改列表符號
? ? ? ? type="1"===按照阿拉伯?dāng)?shù)字排序
? ? ? ? type="A"===-按照大寫字母排序
? ? ? ? type="a"====按照小寫字母排列
? ? ? ? type="I"===按照大寫的羅馬數(shù)字排序
? ? ? ? type="i"====按照小寫的羅馬數(shù)字排序
? ? start屬性:可以更改排序的起始值。
? ? 無序列表:ul+li
? ? ? ? 默認(rèn)列表符號是實心圓點
? ? ? ? type="disc"====實心圓點
? ? ? ? type="circle"===空心圓
? ? ? ? type="square"===實心方塊
? ? ? ? type="none"===沒有符號
? ? 使用場景:新聞條、導(dǎo)航條
? ? 自定義列表:dl+dt和dd
? ? ? ? 使用場景:用在圖文混排的地方
? ? ? ? dd是對dt的解釋說明,所以一般會再dt中放圖片,dd中文字
? ? 10.圖片標(biāo)簽:img
? ? ? ? 單標(biāo)簽
? ? ? ? src屬性:寫圖片的路徑的
? ? ? ? 上一級:../ ?上2級:../../
? ? ? ? alt屬性:當(dāng)圖片加載不出來的時候顯示的提示信息
? ? ? ? title屬性:鼠標(biāo)懸停時候的提示信息
? ? 11.超鏈接:a
? ? ? ? 雙、自帶文字顏色和下劃線、橫向排列
? ? ? ? href屬性:寫你要跳轉(zhuǎn)的地址的
? ? ? ? ? ? 1.可以寫真實網(wǎng)址
? ? ? ? ? ? 2.可以寫自己創(chuàng)建的頁面(就是自己創(chuàng)建的html文件)
? ? ? ? ? ? 3.可以寫圖片的地址
? ? ? ? target屬性:規(guī)定頁面的打開方式的
? ? ? ? ? ? ?_self:在當(dāng)前窗口打開,默認(rèn)值
? ? ? ? ? ? ?_blank:在新窗口打開
? ? 12.div和span
? ? ? ? ?div標(biāo)簽:一般是用來劃分區(qū)域的(雙,縱向排列)
? ? ? ? ?span標(biāo)簽:一般是用來修飾某一小段文字的(雙,橫向排列)
總結(jié)
以上是生活随笔為你收集整理的html, css知识点的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 为什么DNS监测能够让你的网络更加安全
- 下一篇: LCON解说分析