先看一下HTML整體結構
首先創建一個以.html結尾的文件
注意：<!-、- --> 代表注釋
<!DOCTYPE html> <!-- 文檔聲明，需要頂格書寫 -->
<html> <!-- 全部內容，都需要放在這對標簽里 -->
<head> <!-- 網頁頭部，對網頁進行設置 -->
<meta charset="utf-8"> <!-- 設置網頁編碼 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 設置縮放，針對移動端 -->、
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- ie瀏覽器以最高版本渲染 -->
<title>初識網頁</title> <!-- 設置網頁標題 -->
</head>
<body> <!-- 網頁主體，顯示在網頁上的內容 -->
這里放內容
</body>
</html>
相信看了上面這段代碼，應該對HTML基本結構有了大致的了解。
那接下來我們看一下一些基本的標簽
基本標簽
注意，這里僅僅只展示了一小部分經常使用的標簽
元素標簽分為兩類：
- 塊級元素：獨占一行，默認寬與父級寬相同
- 行內元素：元素之間排列在一行，不能設置寬高，由內容撐開。
一些塊級元素
這里只列出了一些常用的
- 標題
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
...
<h6>這是六級標題</h6>
注：標題從一級標題到六級標題。
- 段落
<p>這是段落</p>
3.塊級容器
<div>塊級容器，沒有默認樣式</div>
- 表單
<form>...</form>
- 列表
<!-- 無序列表 -->
<ul>
<li>a</li>
...
<li>z</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>1</li>
...
<li>n</li>
</ol>
<!-- 定義列表 -->
<dl>
<dt>項</dt>
<dd>描述</dd>
...
</dl>
- 表格
<!-- 基本結構 -->
<table>
<tr>
<td>列1</td>
<td>列2</td>
</tr>
</table>
一些常用行內元素
- 錨點
<a href="">...</a>
- 圖片
<img src="" alt="">
注：img雖然是行內元素，但可以設置寬高
- 常用內聯標簽
<span>...</span>
標簽語義化
在布局中，盡量使用帶語義的標簽，目的是為了搜索引擎更好的理解網頁結構，提高排名（SEO），也為了代碼的維護和閱讀。
最后，一定要多敲代碼，都敲出來在瀏覽器看看顯示效果。
