2019-01-05 html和CSS 主要基本編寫網(wǎng)頁運用標簽

標簽 :

P???????????????????????????? 段落標簽

h1-h6????????????????????? 標題標簽 (1-6 標題字體逐漸減?。?/p>

strong???????????????? 加粗展示

em????????????????????? 斜體展示(strong與em 可嵌套)

del????????????????????? 中劃線

address?????????????? 斜體獨占一行

div????????????????????? 充當模塊(容器指父)

span?????????????????? 充當文本

??????????????? 空格文本

<???????????????????? <

>??????????????????? >

br?????????????????????? 回車鍵(換行符)

hr?????????????????????? 水平線

ol????????????????????? 有序標簽 type =1、a、A、i、I(滿級為24進制)reversed(倒序)? start(第幾個開始排序)

ul?????????????????????無序列表 type = disc(實心圓) square(方塊) circle(空心圓) list-style:none(去掉前綴符號)

img?????????????????? 加載圖片?? alt(圖片占位符) title(圖片提示符)

a????????????????????? 1.超鏈接? target=“_blank”(新的標簽打開網(wǎng)頁)text-decoration:none;(去掉下劃線)

??????????????????????? 2.毛點herf=“#id”(id指某個標簽的id)

?????????????????????? 3.打電話 herf=“tel:電話號碼、mailto:郵箱”

?????????????????????? 4.協(xié)議限定符:javascript:while(1){alert(‘你試試這段代碼‘)}

form???????????????? method? (發(fā)送數(shù)據(jù)的方式) action(發(fā)送對象)

input??????????????? 輸入框????type類型包括:http://www.runoob.com/tags/att-input-type.html多種類型

select????????????? 下拉菜單?與option使用 例如:

瀏覽器包括:shell 和內核 shell指外觀

???????????????? 瀏覽器名稱???內核名稱

???????????????? IE??????????????? trident

???????????????? Firefox???????? Gecko

???????????????? Google??????? blink

??????????????? Safari??????????? webkit

??????????????? Opera?????????? presto


css? 的權重(之間的進制256)

!important????????????????????????? infinity (無窮大)

行間樣式? (style)?? ?????????????? 1000

id.????????????? ???????????????????????? 100

class/屬性/偽類??????????????????? 10

標簽/偽元素(例如:div)??? ????? ?1

通配符????????????????????????????????? 0

三顏色

red?????????????????????????????? greed?????????????????????????????????? blue

00-ff???????????????????????????? 00-ff????????????????????????????????? 00-ff

Text-indent 首行縮近?????????????????????????????????

偽類選擇器:a:hover{屬性}. 功能 鼠標移動設置的狀態(tài)

(一):行級元素 內聯(lián)元素??inline

?????????feature:內容決定元素所占位置

???????????????????? 不可以通過css改變寬高

??span、strong、em、a、del???????????????????

(二):塊級元素block

?????????feature:獨占一行

?????????????????? 可以通過css改變寬高

????div、p、ul、li、ol、form、address

? (三):行級塊元素. Inline-block

?????????feature:內容決定大小

可以改變寬高

行級元素只能嵌套行級元素

塊級元素可以嵌套任何元素

p標簽不能嵌套塊級元素

margin:0 auto (自適應)居中 效果:兩邊背景縮小,中間樣式不變,一直到兩邊縮到無,中間再縮小


定位 position (一般relative作為absolute的參照物)

1.相對定位? absolute.特點:1.脫離原來的位置進行定位 2.最近的有定位的父級進行定位,如果沒有,那么相當于文檔定位

2.相對定位relative??? 特點:1.保持原來的位置進行定位 2.相對自己原來的位置進行定位

在整個頁面進行居中代碼寫法:

3.fixed 固定(指固定一位置無論頁面如何滑動此模塊都不動)

4.z-index


position:fixed; left:50%;top:50%;width:100px;height:100px;background-color:red;margin-left:-50px;margin-top:-50px;

<!--bfc—>

<!--block format context—>

<!— 如何觸發(fā)一個盒子的bfc

?position:obsolute;?display:inline-block;???float:left/right;???? overflow:hidden;(溢出部分隱藏)

浮動元素:????? clear:both(清除兩邊的浮動流但必須是塊級元素)

?float:left/right;(浮動元素產(chǎn)生了浮動流)?? 指所有產(chǎn)生了浮動流的元素,塊級元素看不到他們


產(chǎn)生bfc的元素和文本類屬性(inline)的元素以及文本都能看到浮動元素


補充知識:

<span></span>中設置position:obsolute;或者 float:left/right; 可以設置寬高,自帶display:inline-block屬性

vertical-align(地步對齊線調試調試):

偽元素:

? span::before/after{content:”必須有content”+屬性}

white-space:nowrap; 禁止換行

overflow:hidden; 溢出隱藏

text-overflow:ellipsis;

Height = 40; line-height = 20; 它們有倍數(shù)關系,要想讓字體占行高完整就算好之間的進制;

Div設置背景圖片:

background-image:url(圖片路徑)? ;

background-size:大小;

background-repet:no-repet(不重復)

background-position:left top;????????

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,533評論 1 41
  • 瀏覽器與服務器的基本概念 瀏覽器(安裝在電腦里面的一個軟件) 作用: ①將網(wǎng)頁內容渲染呈現(xiàn)給用戶查看。 ②讓用戶通...
    云還灬閱讀 1,285評論 0 0
  • 序言 整理谷歌的小弟的筆記,版權歸原作者所有,本文僅作整理,原文鏈接:http://blog.csdn.net/l...
    在代碼下成長閱讀 1,338評論 1 5
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么? ...
    Simon_s閱讀 2,387評論 0 8
  • 《秋草》(原創(chuàng)首發(fā)) 文/一江水(黑龍江) 你 從稚嫩從青春 走來 用泛黃的身體 告白 世界是龐大的 可在,浩瀚的...
    一江水wxj閱讀 278評論 0 0

友情鏈接更多精彩內容