【web前端基礎(chǔ)之HTML】——HTML基本知識(shí)
1??表題輸出<hn>元素
<hn>元素用于HTML文件的標(biāo)題輸出，一行只顯示一個(gè)（塊元素），具有換行輸出和加粗的效果。n的值是1~6，代表6個(gè)級(jí)別標(biāo)題，1字號(hào)最大，隨數(shù)字增大字號(hào)減小。
案例：demo1.html??
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo1</title>
</head>
<body>
<h1>標(biāo)題 1</h1>
<h2>標(biāo)題 2</h2>
<h3>標(biāo)題 3</h3>
<h4>標(biāo)題 4</h4>
<h5>標(biāo)題 5</h5>
<h6>標(biāo)題 6</h6>
</body>
</html>
效果圖??
2??換行輸出<br>元素
br 是個(gè)單標(biāo)簽，沒有 結(jié)束標(biāo)記，主要功能是讓文字換行輸出。
案例：demo2.html??
<html>
<head>
<meta charset="utf-8">
<title>demo2</title>
</head>
<body>
第一行文字<br>
第二行文字
</body>
</html>
效果圖??
3??保持原始文件樣式<pre>元素
這個(gè)元素內(nèi)的內(nèi)容在瀏覽器中呈現(xiàn)的效果和編寫程序時(shí)效果一樣。常用在顯示詩詞或是程序語言源代碼，在網(wǎng)頁內(nèi)保留空格和換行。
案例：demo3.html??
<html>
<head>
<meta charset="utf-8">
<title>demo3</title>
</head>
<body>
<pre>
pre第一行文字
pre第二行文字
</pre>
</body>
</html>
效果圖??
4??水平線<hr>元素
hr 也是個(gè)單標(biāo)簽，沒有 結(jié)束標(biāo)記。輸出為一條水平線。
案例：demo4.html??
<html>
<head>
<meta charset="utf-8">
<title>demo4</title>
</head>
<body>
下面是一條水平線。
<hr>
</body>
</html>
效果圖??
5??段落<p>元素
<p>標(biāo)簽定義段落。<p>元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白。瀏覽器會(huì)自動(dòng)添加這些空間， 您也可以在樣式表中規(guī)定
案例：demo5.html??
<html>
<head>
<meta charset="utf-8">
<title>demo5</title>
</head>
<body>
<p>這是第一段文字</p>
<p>這是第二段文字</p>
</body>
</html>
效果圖??
6??粗體顯示<b>和<strong>元素
b 和 strong 都能讓文字粗體顯示，兩者效果一樣，一般重要內(nèi)容使用strong。
案例：demo6.html??
<html>
<head>
<meta charset="utf-8">
<title>demo6</title>
</head>
<body>
<p>這是粗體練習(xí)1：<b>這是粗體文字1</b></p>
<p>這是粗體練習(xí)2：<strong>這是粗體文字2</strong></p>
</body>
</html>
效果圖??
7??斜體<em>和<i>元素
i 和 em 都能讓文字斜體顯示,且顯示的效果一樣，但em元素語意的重點(diǎn)是強(qiáng)調(diào)，如果表示重要內(nèi)容，建議使用em。
案例：demo7.html??
<html>
<head>
<meta charset="utf-8">
<title>demo7</title>
</head>
<body>
<p>這是斜體練習(xí)1：<i>這是斜體文字1</i></p>
<p>這是斜體練習(xí)2：<em>這是斜體文字2</em></p>
</body>
</html>
效果圖??
8??加底紋<mark>元素
mark標(biāo)簽內(nèi)文本會(huì)以黃色高亮顯示。
案例：demo8.html??文章來源：http://www.zghlxwxcb.cn/news/detail-418115.html
<html>
<head>
<meta charset="utf-8">
<title>demo8</title>
</head>
<body>
<p>這是加底紋練習(xí)：<mark>高亮文字</mark></p>
</body>
</html>
效果圖??
文章來源地址http://www.zghlxwxcb.cn/news/detail-418115.html
到了這里，關(guān)于【web前端基礎(chǔ)之HTML】——HTML基本知識(shí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
