css的div，span，img，a，map等一些常见标签使用 回顶设置
生活随笔
收集整理的這篇文章主要介紹了
css的div，span，img，a，map等一些常见标签使用 回顶设置
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
目錄
- h標(biāo)簽
- 常用（p、hr、br等）和改變字體標(biāo)簽
- 特殊字符標(biāo)簽
- ol、ul、dl標(biāo)簽
- div和span標(biāo)簽
- img標(biāo)簽
- a標(biāo)簽
- map標(biāo)簽（圖片熱區(qū)鏈接）
- 回頂設(shè)置
基礎(chǔ)知識(shí),一些標(biāo)簽的使用
h標(biāo)簽
<body><h>h標(biāo)簽是標(biāo)題</h>h$*3>{標(biāo)題$} <!--$代表數(shù)字，*3代表h標(biāo)簽出現(xiàn)三次--> </body> <!--然后加tap鍵，結(jié)果如下--> <body><h>h標(biāo)簽是標(biāo)題</h><h1>標(biāo)題1</h1><h2>標(biāo)題2</h2><h3>標(biāo)題3</h3> </body>運(yùn)行結(jié)果
常用（p、hr、br等）和改變字體標(biāo)簽
<body><u>u標(biāo)簽是下劃線的意思</u><sup>sup:上標(biāo)</sup><sub>sub:下標(biāo)</sub><strong>strong:粗體</strong><big>big:變大</big><small>small:變小</small><p>p標(biāo)簽自動(dòng)形成段落，下面段落為小于號(hào)</p><p><</p><font face="黑體" size="10" color="red">font標(biāo)簽用來(lái)設(shè)置字體樣式</font><br><!--br標(biāo)簽自動(dòng)換行--><font face="黑體" size="10" color="red">font標(biāo)簽用<br>來(lái)設(shè)置字體樣式</font><hr><!--hr標(biāo)簽產(chǎn)生水平線，可以進(jìn)行設(shè)置--><hr size="3" color="blue" width="400px" align="left"><!--align的意思是左對(duì)齊--> </body>運(yùn)行結(jié)果：
特殊字符標(biāo)簽
ol、ul、dl標(biāo)簽
<body><!--ol是有序列表，默認(rèn)數(shù)字1234，type代表類型，start代表從哪個(gè)開(kāi)始--><ol type="A" start="3"><li>吃</li><li>喝</li><li>睡</li></ol><!--ul為無(wú)序列表，用的比較多，也可以用type設(shè)置類型--><ul><li>吃吃吃</li><li>睡睡睡</li><li>喝喝喝</li></ul><!--dl為定義列表 dt為標(biāo)題，dd為內(nèi)容--><dl><dt>標(biāo)題一</dt><dd>描述一</dd><dt>標(biāo)題二</dt><dd>描述一</dd><dd>描述二</dd><dd>描述三</dd></dl> </body>運(yùn)行結(jié)果
div和span標(biāo)簽
<body><!--div屬于一個(gè)容器差不多style="塊元素的樣式" class="類選擇器名稱" align="對(duì)齊方式"--><!--span也和div差不多，相對(duì)應(yīng)，他屬于行內(nèi)塊，多半選擇特定的文本--><div style="border:2px #f00 solid;"> div總內(nèi)容部分，框框顏色為紅色實(shí)線，<span style="color: #30F;font-weight:bold;font-style:italic;">span內(nèi)容部分：顏色是藍(lán)色，字體加粗傾斜</span></div> </body>運(yùn)行結(jié)果
img標(biāo)簽
<body><!--圖像標(biāo)簽，src是路徑，這個(gè)一定要注意別弄錯(cuò)了，alt對(duì)圖像文本的描述，height和width，還有align和border常用屬性，title是指到圖片時(shí)會(huì)出現(xiàn)的字--><img src="images/heisehunsha.jpg" title="他好帥"alt="這圖好好看" width="60%" ><!--這個(gè)路徑是對(duì)的，所以alt屬性不會(huì)顯示--><img src="heisehunsha.jpg" alt="第二個(gè)圖路徑錯(cuò)了"width="60%"><!--路徑是錯(cuò)的，所以會(huì)顯示alt標(biāo)簽--> </body>運(yùn)行結(jié)果
我的文件目錄
a標(biāo)簽
<body><!--a標(biāo)簽，鏈接標(biāo)簽 href是要跳轉(zhuǎn)的頁(yè)面，有個(gè)target屬性，如果沒(méi)寫(xiě)，則默認(rèn)=_self,直接本頁(yè)面變成要跳轉(zhuǎn)的頁(yè)面，如果加了target="_blank"則會(huì)生成一個(gè)新的頁(yè)面--><a href="index.html"><img src="images/heisehunsha.jpg" title="點(diǎn)擊進(jìn)去index頁(yè)面"alt="這圖好好看" width="60%" ></a><a href="http://www.baidu.com">百度</a> </body>沒(méi)有target標(biāo)簽跳轉(zhuǎn)前：
點(diǎn)圖片跳轉(zhuǎn)后：
點(diǎn)百度跳轉(zhuǎn)后：
加了target="_blank"屬性后
跳轉(zhuǎn)后：
map標(biāo)簽（圖片熱區(qū)鏈接）
(這里我也還沒(méi)太清楚，我的好像是把鼠標(biāo)放那個(gè)位置點(diǎn)一下才會(huì)出來(lái)圖形）
<body><!--圖片熱區(qū)鏈接,myMap是前后呼應(yīng)的name，確定形狀后，再確定位置，形狀是circle時(shí)，coords的前兩個(gè)數(shù)是原點(diǎn)坐標(biāo)，后面是半徑大小，rect是矩形，兩個(gè)坐標(biāo)分別是斜對(duì)角坐標(biāo)，poly是多邊形，自己想要幾個(gè)點(diǎn)就寫(xiě)幾個(gè)坐標(biāo)。--><map name="myMap"><area shape="circle" coords="32,35,31" href="#" alt=""/><area shape="rect" coords="62,8,103,66" href="#" alt=""/><area shape="poly" coords="114,73,133,11,107,11" color="#30F" href="#" alt=""/></map><img src="images/kuaibenhuijia.jpg" usemap="#myMap" width="60%" /> </body>
回頂設(shè)置
<!--錨點(diǎn)設(shè)置，就是當(dāng)滑頁(yè)面滑到最低端的時(shí)候，可以直接回到頂端--><a id="myAncher">top</a>br*100 <!--此時(shí)還沒(méi)按tab鍵，按完就可以了--><a href="#myAncher"><img src="images/huidingbu.png" alt=""></a> </body>運(yùn)行結(jié)果，還沒(méi)點(diǎn)圖標(biāo)時(shí)
點(diǎn)完圖標(biāo)后直接跳到頂部
總結(jié)
以上是生活随笔為你收集整理的css的div，span，img，a，map等一些常见标签使用 回顶设置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 关于金融风险数据的ETL到分析(下）
- 下一篇： CISAW认证考试，一文详解