當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

htmlcss小白标签篇

發布時間：2024/3/24 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 htmlcss小白标签篇小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

基礎標簽

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

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

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

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

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

?alt圖片不能正常顯示的時候提示文字個別瀏覽器鼠標移入提示文字?

? ?title鼠標移入提示文字?

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

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

<dl></dl>:定義列表 ?，dl定義列表 ?dt放置標題一般只有一個dt ?dd放置描述性內容

<dt></dt>:放置標題 ??，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>:存放音頻

標簽分類

?單雙標簽

????????????????????雙標簽：<標簽></標簽>

????????????????????單標簽：<標簽>或者<標簽 />

塊級行內標簽

????????????????????塊級標簽：獨占一行 p ?div ?h1-h6 dl dt dd ul li等等

????????????????????行內標簽：和其他標簽并排 a ?span等等

? ? ? ? ? ? ? ? ? ? ? ?img是一個特殊的標簽，屬于行內塊，既可以修改高度，也不獨占一行

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

盒子模型

盒子模型是html一個很重要的內容，主要用于布局應用，它的思想是將每一個網頁分成不同的盒子。讓其可以更好的進行布局，就好比一個網頁可以頭部，主要內容以及底部，這時候就可以將這幾部分化成幾個大盒子，在這里大盒子里又可以劃分為幾個小盒子，就好比

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

盒子模型指的就是標簽的占位 margin padding width height border

簡單css

?height:設置高度

width：設置寬度

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

????????????????????第一個值：圖片地址

? ? ? ? ? ? ? ? ? ?第二個值：平鋪方式默認平鋪 repeat ?no-repeat ?repeat-x ?reapeat-y

? ? ? ? ? ? ? ? ? ?第三個值：水平方向坐標可以書寫具體的值 ?left ?center right

? ? ? ? ? ? ? ? ? ?第四個值：垂直方向坐標可以書寫具體的值 ?top ?center bottom

? ? ? ? ? ? ? ? ? ?第五個值：顏色

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

這個的意思是將圖片向y軸的方向平鋪

border：設置邊框，參數為，（線的粗細 ?線的類型solid（實線）?dashed（虛線） dotted（圓點虛線）? ?線的顏色），比如

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

字體大小：font-size

字體類型：font-family

首行縮進：text-indent

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

list-style:去掉a標簽前面的小圓點

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

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

padding：設置內邊距大小

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

設置盒子居中（兩個一起用）：

margin-left：auto；

margin-right：auto；

?/* 鼠標移入樣式改變

????????選擇標簽:hover{

????????????鼠標移入樣式

????????}

????*/

.nav li:hover{

????background: blueviolet;

????/* 設置圓角值越大圓角越明顯 */

????border-radius: 15px;

}

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

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

transform：rotate（）可以旋轉

transform：translate（）實現平移

讓字體變成透明色：

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

?visibility: hidden;??/* 隱藏標簽占位 */

定位：

固定定位

固定定位( position:fixed)：

/* 網站布局的時候，首先考慮標準流(不浮動，不定位)，再次是浮動，最后是定位 */

????????????????固定定位實現的效果是不會隨著窗口的滾動而滾動，會一直存在網頁中的一個固定位置

????????????????參照物是當前的窗口 ?left top bottom right ?left和right ?top和bottom只能存在一個

????????????????不占位,相互遮蓋的效果。多個定位同時存在，默認后寫(結構)的在上面?？梢酝ㄟ^z-index調整圖層順序。值越大越靠上。默認是0

????????????????固定定位以后脫離標準流(行內標簽水平排列，塊級標簽垂直，不浮動不定位)，變成行內塊

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

例：img{ ????

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

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

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

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

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

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

?相對定位：相對自身移動。參照物是自身原來的位置。

????????????一般用來做微調。不會對其余標簽造成影響

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

????????????半脫離標準流：不會改變標簽的性質。一方面標簽的性質沒有改變。另外一方面可以微調位置

????????????很少單獨使用,配合絕對定位使用

?????例子：.pic{

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

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

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

絕對定位（position:absolute）：

????????????絕對定位實現的效果，一個標簽在另外一個標簽上面

????????????一個標簽絕對定位以后，會向上尋找，找到有定位的標簽，然后以該標簽作為參照物

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

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

????????????脫離標準流，變成行內塊

例：

這個例子就是在給span進行絕對定位，之后對他的父級div進行相對定位，注意在對父級進行相對定位時不要給父級的定位添加參數

精靈圖片引用

??span?

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

表單：

????????

????????

????????

????????

????????

????????

???????

?<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">手機號:</label> <input id="pass" type="number"></p><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 name="" id=""><option value="">北京</option><option value="">上海</option><option value="" selected>廣州</option></select></p><p><label for="">個人介紹</label><textarea name="" id="" maxlength="10"></textarea></p><button>按鈕</button><input type="button" value="按鈕"><input type="reset" ><input type="submit"></form>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：财务报表怎么做？这款报表工具你千万不能错
下一篇：日常css和js小知识点记录