HTML文档是由各种标签组成的。那么，学习了标签的使用，也就可以轻松自如的编写HTML文档了。
HTML标题
标题是通过 <h1> - <h6> 这样的标签进行定义的。
<h1>这是一个标题1</h1>
<h2>这是一个标题2</h2>
<h3>这是一个标题3</h3>
…
…
<h6>这是一个标题6</h6>
其中，<h1> 是最大的标题，<h6> 是最小的标题。效果如下：
image
HTML水平线
<hr> 标签可用于分隔内容，如下所示：
<h1>这是一个标题1</h1>
<h2>这是一个标题2</h2>
<h3>这是一个标题3</h3>
<hr>
<h6>这是一个标题6</h6>
image
HTML段落
段落是通过 <p> 标签定义的，浏览器会自动地在段落的前后添加空行。如下所示：
<p>这是段落A</p>
<p>这是段落B</p>
image
HTML 折行
如果想在一个段落内进行换行，可以使用 <br> 标签，如下所示：
<p>现在<br>演示一下<br>分行的效果</p>
image
HTML超链接
HTML 文档使用超链接与网络上的另一个文档相连，如下所示：
<a href="https://blog.pangao.vip/">访问潘高陪你学编程</a>
image
如果想在新窗口打开文档，可以使用target 属性，如下所示：
<a href="https://blog.pangao.vip/" target="_blank">访问潘高陪你学编程</a>
HTML图片
在HTML 文档中，图像由 <img> 标签定义。该标签只包含属性，并没有闭合标签。如下所示：
<img src="https://blog.pangao.vip/images/avatar.jpg" alt="潘高的头像">
[站外图片上传中...(image-f208f-1589467900098)]
源属性 src 的值是图像的 URL 地址。alt 属性用来为图像定义一串预备的可替换的文本，当图片获取失败时，就会显示该文本。
除此以外，可以使用 height 与 width 属性设置图像的高度与宽度，如下所示：
<img src="https://blog.pangao.vip/images/avatar.jpg" alt="潘高的头像" width="300" height="400">
HTML表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。如下所示：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
image
HTML列表
HTML 文档支持有序列表和无序列表，如下所示:
- 有序列表
<ol>
<li>第一个序列</li>
<li>第二个序列</li>
<li>第三个序列</li>
</ol>
image
- 无序列表
<ul>
<li>这是序列</li>
<li>这是序列</li>
<li>这是序列</li>
</ul>
image
HTML区块和内联
大多数 HTML 元素被定义为块级元素或内联元素。
- 块级元素
块级元素在浏览器显示时，通常会以新行来开始和结束。例如: <h1>, <p>, <ul>, <table> 等。
这里介绍一个新的块级元素标签 <div>。她没有特定的含义，是组合其他 HTML 元素的容器。
- 内联元素
内联元素在显示时通常不会以新行开始。
这里介绍一个新的内联元素标签 <span>。她也没有特定的含义，是文本的容器。
网友评论