使用微信掃一掃
掃一掃關注官方微信 html5的一些小知識
- 來源：縱橫數據
- 作者：中橫科技
- 時間：2022/8/18 17:04:51
- 類別：新聞資訊
1.base標簽:專門用來統一的指定當前的網頁中所有的超鏈接(a標簽)需要如何打開
<base target="_blank">
注意:base標簽必須寫在head標簽的開始標簽和結束標簽之間
2.假連接:點擊后不會跳轉,我們稱之為假鏈接!
1 2 | 1) <a href="#">百度一下,你就知道</a> #的假鏈接會自動回到網頁的頂部2) <a href="javascript">百度一下,你就知道</a> 而Javascript的假鏈接不會自動跳轉到網頁頂部 |
兩者之間的區別:#的假鏈接會自動回到網頁的頂部,而Javascript的假鏈接不會自動跳轉到網頁頂部.
3.錨點:
要想通過a標簽跳轉到指定的位置,那么必須告訴a標簽一個獨一無二的身份證號碼,這樣a標簽才能在當前界面中找到需要跳轉到的目標位置.
1).給目標位置的標簽添加一個id屬性,然后指定一個獨一無二的值;
2). 告訴a標簽你需要跳轉到的目標標簽對應的獨一無二的省份證號碼是多少.
a標簽 href="#center"<a href="#center"></a>目標標簽里面設置 id="center"<h1 id="center">中部位置</h1>
3).跳轉到新界面的指定位置 href="13-錨點.html#bottom" target="_blank"新界面中打開
原界面中<a href="13-錨點.html#bottom" target="_blank">跳轉到新界面的指定位置</a>目標界面中這樣寫<h1 id="bottom">我是錨點測試界面333333</h1>
4.列表標簽 :
無序列表 >>> 應用場景 : a).新聞列表 b).商品列表 c).導航條
快捷方式 :
1 2 3 4 | ul>li*3<ul> <li>北京</li> <li>上海</li> <li>廣州</li></ul> |
有序列表 >>> 應用場景 : 排行榜
1 2 3 4 5 | <ol> <li>演員</li> <li>小丑</li> <li>龍卷風</li> <li>青花瓷</li></ol> |
定義列表 >>> 應用場景 : a) . 做網站尾部的相關信息 b) . 做圖文混排
dt dd 中還可以嵌套其他的標簽
快捷方式: dl>(dt+dd)*2<dl>
1 2 | <dt>北京</dt> //definition title 定義標題 <dd>中國的首都</dd> //definition description 定義描述 <dt>上海</dt> <dd>富人的集中地</dd></dl> |
5.表格標簽
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!--默認情況下,邊框寬度為0--><table border="1"> <!--tr:代表整個表格中的一行數據--> <tr> <!--td:代表一行中的一個單元格--> <td>姓名</td> <td>年齡</td> <td>籍貫</td> </tr> <tr> <td>張三</td> <td>18</td> <td>重慶</td> </tr></table> |
細線表格
<!--細線表格:在表格上想通過指定外邊距為0來實現細線表格是不靠譜的,其實它是將2條線合并為了一條線,
所以看上去很不舒服,故通過以下方式設置--><!--
1.給table標簽設置bgcolor
2.給tr標簽設置bgcolor
3.給table標簽設置 cellspacing="1px",注意:我設置為1px邊框顯示不出來,設置為2px正常
1 2 3 4 5 6 7 8 9 | --><table bgcolor="black" width="200px" cellspacing="2px"> <tr bgcolor="white" align="center"> <td>1.1</td> <td>1.2</td> </tr> <tr bgcolor="white" align="center"> <td>2.1</td> <td>2.2</td> </tr></table> |
caption標簽 >>>專門用來設置table的標題,標題會自動相對于表格的寬度居中
th標簽>>>專門用來設置標題的,會自動居中加粗
td 標簽>>>專門用來存儲數據的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <table bgcolor="black" width="800px"> <!--caption : 專門用來設置table的標題,標題會自動相對于表格的寬度居中--> <caption> <h2>今日小說排行榜</h2> </caption> <tr bgcolor="#a9a9a9" align="center"> <!--th : 專門用來設置標題的--> <th>排名</th> <th>關鍵字</th> <th>趨勢</th> <th>今日搜索</th> <th>最近七日</th> <th>先關鏈接</th> </tr> <tr bgcolor="white" align="center"> <td>1</td> <td>陳二狗的妖孽人生</td> <td>上升</td> <td>678328</td> <td>28378173</td> <td> <a href="#">今日頭條</a> <a href="#">網易新聞</a> <a href="#">新浪微博</a> </td> </tr></table> |
