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）：
????????????絕對定位實現的效果，一個標簽在另外一個標簽上面
????????????一個標簽絕對定位以后，會向上尋找，找到有定位的標簽，然后以該標簽作為參照物
????????????一般情況下子級絕對定位，父級相對定位。相對定位對別的標簽影響最小
????????????不占位
????????????脫離標準流，變成行內塊
例：
<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>當面應懟</span><p>他給xxx上了一課</p></div> </body>這個例子就是在給span進行絕對定位，之后對他的父級div進行相對定位，注意在對父級進行相對定位時不要給父級的定位添加參數
精靈圖片引用
<!-- sprite精靈圖片：把很多小圖片整合到一張大圖片上的技術。減少服務器請求 -->
<!-- 引入圖片 img或者background ?一般通過background引入-->
??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><!-- bui和span標簽用法一樣，引入小元素 --><b>加粗</b><u>下劃線</u><i>傾斜</i></body>表單：
????????<!-- 瀏覽器有空白折疊現象，不管有多少空格，都只能識別一個 ?<br>換行 ?空格 -->
????????<!-- label的for值和表單的input值保持一致 -->
????????<!-- input單行表單 type內的屬性值 text文本 ?password密碼 number數字 radio單選框 checkbox復選框 button類型 reset重置 ?submit提交-->
????????<!-- p可以放置文本類標簽 ?input ?label ?img -->
????????<!-- form實現表單提交 ?action提交地址 -->
????????<!-- 標簽的屬性: <標簽 ?k="v" ?k="v"> ?k屬于標簽屬性 ?v屬于屬性的值-->
???????
總結
以上是生活随笔為你收集整理的htmlcss小白标签篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 财务报表怎么做？这款报表工具你千万不能错
- 下一篇： 日常css和js小知识点记录