一、新建HTML目錄和檔案
二、開發教程（VS Code）
（一）HTML決議
1、元素：<head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等
2、注釋
用<!--和-->包括起來
3、空元素
<br>, <hr>, <input>, <img>, <a>等等
4、屬性
元素屬性，不會在頁面中顯示出來
<p title="這是一個title屬性">移過來試試！</p>
5、標題
h1-h6各等級標題
例如：
<h1>我的第一個世界</h1>
<p>歡迎來到!<br>王者聯盟</p>
<p title="這是一個title屬性">移過來試試！</p>
<h2>第二個標題</h2>
<p>王者</p>
<hr>
<h3>第三個標題</h3>
<p>世界</p>
<hr>
顯示效果：
6、格式
<p>我是 <mark>可愛的</mark>豬豬！</p>
<p><del>我是可愛的豬豬!</del></p>
<p><s>我是可愛的豬豬!</s></p>
<p><ins>我是可愛的豬豬!</ins></p>
<p><u>我是可愛的豬豬!</u></p>
<p><small>我是可愛的豬豬!</small></p>
<p><strong>我是可愛的豬豬!</strong></p>
<p><em>我是可愛的豬豬!</em></p>
顯示效果：
7、超鏈接
<a href="https://www.4399.com/" target="_blank">4399小游戲</a>
顯示效果：
8、瞄點
<h2 id="C3">第三章</h2>
<a href="#C3">跳到第三章</a>
顯示效果：
9、圖片以及路徑
路徑分為相對路徑和絕對路徑
相對路徑例子：
例如：
<img src="1111.jpg" alt="MDB Logo" width="200" height="400">
后面數字是設定的尺寸，
顯示效果：
10、表格
<table>
<tr>
<th>語文</th>
<th>數學</th>
<th>英語</th>
</tr>
<tr>
<td>90</td>
<td>90</td>
<td>89</td>
</tr>
<tr>
<td>87</td>
<td>90</td>
<td>94</td>
</tr>
</table>
其中：tr表示行，th表示表頭，td表內單元
顯示效果：
11、串列
分為有序和無序
有序：
<ol>
<li>喜羊羊</li>
<li>懶洋洋</li>
<li>灰太狼</li>
</ol>
無序：
<ul>
<li>喜羊羊</li>
<li>懶洋洋</li>
<li>灰太狼</li>
</ul>
顯示效果：
12、表單
<form>
賬號：<br>
<input type="text" name="name" placeholder="請輸入用戶名"><br>
密碼：<br>
<input type="password" name="ps" placeholder="請輸入密碼"><br>
年齡：<br>
<input type="number" name="age" min="18" value="18"><br>
性別：<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
顯示效果：
13、其他
區塊元素：
<h4>區塊元素</h4>
<div>你是</div>
<div>豬嗎</div>
<p>單獨的一行</p>
行內元素：
<h3>下面的元素將在一行中顯示</h3>
<span>姓名：</span>
<input name="username">
<span>啦啦啦</span>
<a href="https://www.baidu.com/">百度</a>
<img src="1111.jpg"width="400" height="400">
顯示效果：
預設格式：
<pre>
如果我不見了
請不要哭泣
只是換個方式
在生命里輪回
如果我不見了
請不要尋找
你身邊的草木中
有我參與的細胞
如果我不見了
請不要落淚
那美艷的花朵
就是我的微笑
如果我不見了
請不要記掛
你頭頂的云朵
有我熱情的瀟灑
如果我不見了
就忘了吧
我已在美麗島
神仙般逍遙，
</pre>
顯示效果：
特殊字符：
<p>你還 我錢，請 還錢！</p>
如果想在在頁面顯示一段 HTML 的源代碼，你打算用標簽<pre>:
<pre>
<h4>這是個一級標題</h4>
<p>這是一個段落<p>
<a href="https://www.4399.com/">身處何方，心思何人</a>
<pre>
顯示效果：
以上代碼將得不到你想要的結果，
原因是：在 HTML 中，某些字符是預留的，
在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認為它們是標簽，
如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符物體
<p>你還 我錢，請 還錢！</p>
<hr>
<h5>test.html</h5>
<pre>
<h1>這是個一級標題</h1>
<p>這是一個段落<p>
<a href="https:/www.4399.com/">身處何方，心思何人</a>
<pre>
顯示效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/271624.html
標籤：區塊鏈