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认证考试,一文详解