基礎(chǔ)標(biāo)簽

<div></div>:用于存放大元素，做盒子布局，大區(qū)域大面積排版等；

<span></span>:適用于用作于小元素等等；

h1-h6:h1用作于文本標(biāo)簽，或者網(wǎng)頁logo這類重要的布局元素，h2-h6可以用作其他的。

<a></a>:用存放鏈接

<img>:存放圖片，它的原生局內(nèi)屬性含義為

?alt圖片不能正常顯示的時(shí)候提示文字 個(gè)別瀏覽器鼠標(biāo)移入提示文字?

? ?title鼠標(biāo)移入提示文字?

<ul><li></li></ul>:無序列表 ， ul的子標(biāo)簽只能是li，但li里可以嵌套別的標(biāo)簽

<ol><li></li></ol>:有序列表 ?， li的父級只能是ul或者ol

<dl></dl>:定義列表 ?，dl定義列表 ?dt放置標(biāo)題 一般只有一個(gè)dt ?dd放置描述性內(nèi)容

<dt></dt>:放置標(biāo)題 ??，dl的子級只能是dt和dd ??dt和dd的父級只能是dl

<dd></dd>:放置描述性文字

其中dl的格式為：

<dl>

????????????<dt>水果</dt>

????????????<dd>蘋果</dd>

????????????<dd>橘子</dd>

????????????<dd>香蕉</dd>

????????</dl>

?<video?controls?src=""></video>：存放視頻

<audio?src=""></audio>:存放音頻

標(biāo)簽分類

?單雙標(biāo)簽

????????????????????雙標(biāo)簽：<標(biāo)簽></標(biāo)簽>

????????????????????單標(biāo)簽：<標(biāo)簽>或者<標(biāo)簽 />

塊級行內(nèi)標(biāo)簽

????????????????????塊級標(biāo)簽：獨(dú)占一行 p ?div ?h1-h6 dl dt dd ul li等等

????????????????????行內(nèi)標(biāo)簽：和其他標(biāo)簽并排 a ?span等等

? ? ? ? ? ? ? ? ? ? ? ?img是一個(gè)特殊的標(biāo)簽，屬于行內(nèi)塊，既可以修改高度，也不獨(dú)占一行

其中行內(nèi)標(biāo)簽不可以添加高，如果想要讓行內(nèi)標(biāo)簽有高度可以給他添加一個(gè)display的css,display的屬性有block（塊級），inline-block（行內(nèi)塊），inline（行內(nèi)）

盒子模型

盒子模型是html一個(gè)很重要的內(nèi)容，主要用于布局應(yīng)用，它的思想是將每一個(gè)網(wǎng)頁分成不同的盒子。讓其可以更好的進(jìn)行布局，就好比一個(gè)網(wǎng)頁可以頭部，主要內(nèi)容以及底部，這時(shí)候就可以將這幾部分化成幾個(gè)大盒子，在這里大盒子里又可以劃分為幾個(gè)小盒子，就好比

?

從這個(gè)網(wǎng)頁就可以看出，整個(gè)網(wǎng)頁分成了三個(gè)大盒子，之后在每個(gè)大盒子里再分為別的小盒子。

盒子模型指的就是標(biāo)簽的占位 margin padding width height border

簡單css

?height:設(shè)置高度

width：設(shè)置寬度

background:設(shè)置背景，background的參數(shù)可以直接是顏色，或者可以填下列的參數(shù)

????????????????????第一個(gè)值：圖片地址

? ? ? ? ? ? ? ? ? ?第二個(gè)值：平鋪方式 默認(rèn)平鋪 repeat ?no-repeat ?repeat-x ?reapeat-y

? ? ? ? ? ? ? ? ? ?第三個(gè)值：水平方向坐標(biāo) 可以書寫具體的值 ?left ?center right

? ? ? ? ? ? ? ? ? ?第四個(gè)值：垂直方向坐標(biāo) 可以書寫具體的值 ?top ?center bottom

? ? ? ? ? ? ? ? ? ?第五個(gè)值：顏色

如background:url(https://p3.ssl.qhimgs1.com/sdr/400__/t01cf4a2005f74c201d.png) repeat-y;

這個(gè)的意思是將圖片向y軸的方向平鋪

border：設(shè)置邊框，參數(shù)為，（線的粗細(xì) ?線的類型solid（實(shí)線）?dashed（虛線） dotted（圓點(diǎn)虛線）? ?線的顏色），比如

?border:10px dashed #00f;設(shè)置邊框大小為10px，線的類型為虛線，顏色為#00f

字體大小：font-size

字體類型：font-family

首行縮進(jìn)：text-indent

去掉下劃線：text-decoration:none;

list-style:去掉a標(biāo)簽前面的小圓點(diǎn)

border；設(shè)置邊框 ?( 邊框大小 邊框類型（solid實(shí)線，dashed（虛線） dotted ） 邊框顏色)

margin:設(shè)置外邊距大小，（上 右 下 左）

padding：設(shè)置內(nèi)邊距大小

float（重要）:設(shè)置浮動(dòng) ，浮動(dòng)參數(shù)為left或者right，浮動(dòng)只是用來做左右排列的。如果給子級浮動(dòng)過后，一般的標(biāo)簽不設(shè)置高度的話會(huì)根據(jù)內(nèi)容來確定高度，沒有單獨(dú)設(shè)置高度的父級會(huì)沒有高度，將會(huì)將整個(gè)布局變亂，這就需要給父級加上overflow：hidden消除浮動(dòng)也可以用作圖片超出部分隱藏

設(shè)置盒子居中（兩個(gè)一起用）：

margin-left：auto；

margin-right：auto；

?/* 鼠標(biāo)移入樣式改變

????????選擇標(biāo)簽:hover{

????????????鼠標(biāo)移入樣式

????????}

????*/

.nav li:hover{

????background: blueviolet;

????/* 設(shè)置圓角 值越大圓角越明顯 */

????border-radius: 15px;

}

?line-height: 24px;設(shè)置文字垂直居中，參數(shù)為你放置的容器高度

text-align:center ?:文字水平居中

transform：rotate（） 可以旋轉(zhuǎn)

transform：translate（）實(shí)現(xiàn)平移

讓字體變成透明色：

background：rgba(0，0，0，0.3) ????/* 實(shí)現(xiàn)透明色 ?rgb書寫紅綠藍(lán) a書寫透明度，a的方位填0--1之間就可以實(shí)現(xiàn)透明色 */ ?，用background做透明色的話會(huì)有一個(gè)灰色的背景色，如果不需要背景色的話可以使用oopacity：參數(shù)0--1之間,0隱藏占位；

?visibility: hidden;??/* 隱藏標(biāo)簽占位 */

定位：

固定定位

固定定位( position:fixed)：

/* 網(wǎng)站布局的時(shí)候，首先考慮標(biāo)準(zhǔn)流(不浮動(dòng)，不定位)，再次是浮動(dòng)，最后是定位 */

????????????????固定定位實(shí)現(xiàn)的效果是不會(huì)隨著窗口的滾動(dòng)而滾動(dòng)，會(huì)一直存在網(wǎng)頁中的一個(gè)固定位置

????????????????參照物是當(dāng)前的窗口 ?left top bottom right ?left和right ?top和bottom只能存在一個(gè)

????????????????不占位,相互遮蓋的效果。多個(gè)定位同時(shí)存在，默認(rèn)后寫(結(jié)構(gòu))的在上面。可以通過z-index調(diào)整圖層順序。值越大越靠上。默認(rèn)是0

????????????????固定定位以后脫離標(biāo)準(zhǔn)流(行內(nèi)標(biāo)簽水平排列，塊級標(biāo)簽垂直，不浮動(dòng)不定位)，變成行內(nèi)塊

????????????????*/

例：img{ ????

????????????????position: fixed;

????????????????left:10px;

????????????????bottom:10px;

????????????????z-index: 1;

????????????}

相對定位（position：relative）（重要）:

?相對定位：相對自身移動(dòng)。參照物是自身原來的位置。

????????????一般用來做微調(diào)。不會(huì)對其余標(biāo)簽造成影響

????????????占位：占的是原來的位置

????????????半脫離標(biāo)準(zhǔn)流：不會(huì)改變標(biāo)簽的性質(zhì)。一方面標(biāo)簽的性質(zhì)沒有改變。另外一方面可以微調(diào)位置

????????????很少單獨(dú)使用,配合絕對定位使用

?????例子：.pic{

????????????????position: relative;

????????????????top:-100px

????????????}

絕對定位（position:absolute）：

????????????絕對定位實(shí)現(xiàn)的效果，一個(gè)標(biāo)簽在另外一個(gè)標(biāo)簽上面

????????????一個(gè)標(biāo)簽絕對定位以后，會(huì)向上尋找，找到有定位的標(biāo)簽，然后以該標(biāo)簽作為參照物

????????????一般情況下子級絕對定位，父級相對定位。相對定位對別的標(biāo)簽影響最小

????????????不占位

????????????脫離標(biāo)準(zhǔn)流，變成行內(nèi)塊

例：

<style>div{background:lime;margin:200px 200px 0px 200px;width:400px;position: relative;}span{position: absolute;top:0px;left:0px;background:red;color:white;width:100px;text-align: center;} </style><body><div><img src="https://p0.ssl.img.360kuai.com/dmfd/155_155_/t01b81ca7f9ed5da91a.webp?size=155x155" alt=""><span>當(dāng)面應(yīng)懟</span><p>他給xxx上了一課</p></div> </body>

這個(gè)例子就是在給span進(jìn)行絕對定位，之后對他的父級div進(jìn)行相對定位，注意在對父級進(jìn)行相對定位時(shí)不要給父級的定位添加參數(shù)

精靈圖片引用

<!-- sprite精靈圖片：把很多小圖片整合到一張大圖片上的技術(shù)。減少服務(wù)器請求 -->

<!-- 引入圖片 img或者background ?一般通過background引入-->

??span?

? ? ? ? ? ? ? span{width:71px;height: 71px;display: inline-block; //設(shè)置成行內(nèi)塊，給span增加高度background:url('https://www.txpc.cn/res/images/sprite/my-icons-sc9dad631e6.png') no-repeat?0px?-323px;}span:hover{/* 鼠標(biāo)移入圖片時(shí)需要更換的背景圖片位置地址?*/background-position: 0px?-394px;}<body><span></span><!-- bui和span標(biāo)簽用法一樣，引入小元素 --><b>加粗</b><u>下劃線</u><i>傾斜</i></body>

表單：

????????<!-- 瀏覽器有空白折疊現(xiàn)象，不管有多少空格，都只能識(shí)別一個(gè) ?<br>換行 ?空格 -->

????????<!-- label的for值和表單的input值保持一致 -->

????????<!-- input單行表單 type內(nèi)的屬性值 text文本 ?password密碼 number數(shù)字 radio單選框 checkbox復(fù)選框 button類型 reset重置 ?submit提交-->

????????<!-- p可以放置文本類標(biāo)簽 ?input ?label ?img -->

????????<!-- form實(shí)現(xiàn)表單提交 ?action提交地址 -->

????????<!-- 標(biāo)簽的屬性: <標(biāo)簽 ?k="v" ?k="v"> ?k屬于標(biāo)簽屬性 ?v屬于屬性的值-->

???????

?<!-- 表單屬性:autofocus自動(dòng)聚焦 selected默認(rèn)選中 ?checked選框選中 ?maxlength最大長度 disabled禁用 placeholder默認(rèn)提示--><form action="xxx.html"><p><label for="user" >用戶名:</label><input id="user" autofocus type="text" maxlength="4" disabled placeholder="百度一下"></p><p><label for="pass">密碼:</label> <input id="pass" type="password" placeholder="請輸入密碼"></p><p><label for="pass">手機(jī)號:</label> <input id="pass" type="number"></p><!-- radio單選框，需要加相同的name值，成為真正的單選框 --><p><label for="">性別:</label> <input type="radio" name="sex" checked>男 <input name="sex" type="radio" checked>女 </p><p> <label for="">愛好:</label> <input type="checkbox" checked>寫代碼 ??<input type="checkbox" checked>xxx </p><p><label for="">地址</label><!-- ?select>option下拉選框--><select name="" id=""><option value="">北京</option><option value="">上海</option><option value="" selected>廣州</option></select></p><p><label for="">個(gè)人介紹</label><!-- textarea文本域，輸入多行內(nèi)容 --><textarea name="" id="" maxlength="10"></textarea></p><!-- 按鈕 --><button>按鈕</button><input type="button" value="按鈕"><!-- reset和submit放置在 form內(nèi)部有用 --><input type="reset" ><input type="submit"></form>

總結(jié)

以上是生活随笔為你收集整理的htmlcss小白标签篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。