:前端Demo |HTML常用標籤|適合學習前端一個月的同學-經驗觀點免费ppt模版下载-道格办公

標題

在瀏覽網頁中最先關注的是文章的標題,字體很大很突出. 通常使用<h1></h1>對標籤.h標籤分為6種,分別是< h1> - <h6> ,字體從大到小.

基本語法：

<h1>...</h1><h2>...</h2> ;......<h6>...< ;/h6>

實例：

<!DOCTYPE html>< span class='code-snippet_outer'><html lang='en'><head> <meta charset='UTF-8'>    < ;meta http-equiv='X-UA-Compatible ' content='IE=edge'>     <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></< span class='code-snippet__name'>head><body>    <h1>我是h1標籤</h1 >    << span class='code-snippet__name'>h2 >我是h2標籤</h2 >    <h3 >我是h3標籤</h3 >     <h4 > 我是h4標籤</h4 >     <h5 >我是h5標籤</h5 >    <h6 >我是h6標籤</h6 ></body></html< /span>>


字體和顏色
    定義文字大小和顏色使用font標籤
    它的的屬性值有：face（字體 ）color（顏色）等
實例：
< li>
<!DOCTYPE html>< ;html lang='en'> ;<head< /span>>    <meta charset='UTF-8'>    <meta http-equiv='X-UA-Compatible' content ='IE=edge'>    <meta name= 'viewport' content='width=device-width, initial-scale=1.0' >    <title >Document</title>< /code></head> <body>     <font   face = '黑體'  color = 'red' >文字的字體和顏色</font ></body>< ;/html>
效果：


段落

    瀏覽器解析HTML文檔會忽略空白符，所以要想保證正常的分段換行的話，必須指出哪些文字是屬於同一段落的，這就用到了標籤<p>。 <p>標籤式段落標記,瀏覽器會自動地在段落的前後添加空行。 
基本語法：
 <p> …… </p>
 實例：
< li>
<!DOCTYPE html>< ;html lang='en'> ;<head< /span>>    <meta charset='UTF-8'>    <meta http-equiv='X-UA-Compatible' content ='IE=edge'>    <meta name= 'viewport' content='width=device-width, initial-scale=1.0' >    <title >Document</title>< /code></head> <body>     <p >這是第一個段</p >    <p >這是第二個段</p > </html>
效果：


字體加粗

基本語法：
<b>...</b>
實例：
< li>
<!DOCTYPE html><html lang='en '><head>    <meta charset='UTF-8'>     <meta http-equiv='X-UA-Compatible' content='IE=edge'>    <meta name='viewport' content='width=device-width, initial-scale= 1.0'>    <title>Document</title></head ><body >    這是沒有使用b標籤的正常字體     <b >使用b標籤加粗的字體</b >
</body></html>
效果：


斜體

基本語法：
<i > ……</i> 
<em> ……</em >
<cite> …… </cite>
實例：
< li>
<!DOCTYPE html><html lang='en'><head>    < ;meta charset='UTF-8'>    < meta http-equiv='X-UA-Compatible' content='IE=edge'>    <meta name=< span class='code-snippet__string'>'viewport' content='width=device-width, initial -scale=1.0'>    <title>Document</title> </head< /span>><body>    <i >斜體標記i演示</i > ;    <em< /span> >斜體標記em演示</em >    <cite >斜體標記cite演示</cite > </body></html>< /span>
效果：


換行
    也有人不用<p>，而用<br>。 <br>只表示換行，不表示段落的開始或結束，所以通常沒有結束標籤。 

基本語法：
....<br/>< /span>
實例：
< li>
<!DOCTYPE html>< ;html lang='en'> ;<head< /span>>    <meta charset='UTF-8'>    <meta http-equiv='X-UA-Compatible' content ='IE=edge'>    <meta name= 'viewport' content='width=device-width, initial-scale=1.0' >    <title >Document</title>< /code></head> <body>     這是第一段<br  />    這是第二段</html>< /code>
效果：



可跳轉鏈接
    允許我們同其他網頁或站點之間進行連接的元素。各個網頁鏈接在一起後，才能真正構成一個網站。 

基本語法：
<a href='http://www.baidu.com' title=< span class='code-snippet__string'>'鏈接到百度' target='_blank'>百度網</a>
實例：
< li>
<!DOCTYPE html><html lang='en'><head >    <meta  charset='UTF-8'>< /code>    <meta http-equiv='X-UA-Compatible' content='IE=edge'>    <meta name='viewport'  content='width=device-width, initial-scale=1.0'>< /span>    <title>Document</title> </head><body>    <a < span class='code-snippet__attr'>href='http://www.baidu.com'  title='鏈接到百度' target='_blank'>百度網</a> </html> ;
效果：
E N D
        
         掃描二維碼
        關注我們        
                          
java技術大本營
 

 

有什麼建議可以留言告訴我們哦!

文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Frontend%20DemoCommon%20HTML%20tagsSuitable%20for%20students%20who%20have%20studied%20the%20frontend%20for%20a%20month.html