HTML:超文本標記語言基本結構
<!DOCTYPE html> <!--文檔的聲明 一個HTML文件就是一個文檔 --> <html lang="en"> <!-- --> <head> <!--head 中的內容不會顯示在瀏覽器上 雙別和標簽--> <meta charset="UTF-8"> <!-- 定義文檔的編碼類型 單閉合標簽--> <title>Title</title> <!-- 顯示標題--> </head> <body> <!--body中的內容都會顯示到瀏覽器中 --> </body> </html>
body中標簽的分類
行內標簽
在一行內顯示,不換行,不能設置寬高,默認是內容的寬高
span:標簽被用來組合文檔中的行內元素
<span>hello</span>
a:超鏈接
<!--a:超鏈接,行內標簽 -blank:在空白頁面打開網頁 title:鼠標懸浮顯示--> <a href="https://www.baidu.com/" target="_blank" title="跳轉百度">跳轉百度</a>
em或i:斜體標簽
<body> <em>hello</em>
<i>hello</i>
</body>
b或strong:粗體標簽
<body> <b>hello</b> <strong>hello</strong> </body>
u:下划線標簽
<body> <u>hello</u> </body>
sup上標文本和sub下標文本
<body> <sup>hello</sup> <sub>hello</sub> </body>
br:換行標簽
<body> <br> </body>
hr:水平線標簽
<body> <hr> </body>
center:居中標簽
<body> <center>hello</center> </body>
塊級標簽
獨占一行,可以設置寬高,如果不設置寬高,默認是內容的寬高
h1~h6: 塊級標簽:獨占一行
<body> <!--h1 只允許頁面中只有一個,為了seo和爬蟲--> <h1>hello</h1> <h2>hello</h2> <h3>hello</h3> <h4>hello</h4> <h5>hello</h5> <h6>hello</h6> </body>
div:分割頁面
<body> <!--id在文檔中是唯一的,為div添加標識--> <div id="top"> <!--class可以重復,為div添加標識--> <div class="top-l"> <!--span:是行內標簽,一行內顯示--> <span>hello</span> <!--a:超鏈接,行內標簽 -blank:在空白頁面打開網頁 title:鼠標懸浮顯示--> <a href="https://www.baidu.com/" target="_blank" title="跳轉百度">跳轉百度</a> <!--img:引入圖片--> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3234070121,1596383226&fm=11&gp=0.jpg" alt="圖片加載失敗的文本"> <!--取消a標簽的自動跳轉--> <a href="javascript:void(0)">hello</a> </div> </div> </body>
P:換行,只能放 字體標簽和img 表單 imput,不能放塊
<p>hello</p> <p>hello</p>
ul:無序列表,它的子元素自能是li標簽
<ul> <li></li> <li></li> <li></li> </ul>
ol:有序列表
<ol> <li></li> <li></li> <li></li> </ol>
dl:自定義列表
<ol> <li></li> <li></li> <li></li> </ol>
table
<table border="1" style="border-collapse: collapse"> <tr> <td>name</td> <td>age</td> </tr> <tr> <td>wl</td> <td>18</td> </tr> </table>
解決a標簽不能設置寬高的問題
style="display: block"
<a href=""> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3234070121,1596383226&fm=11&gp=0.jpg" alt="" style="display: block ;height: 100px ;width: 100px" > </a>