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