本文最后更新于:星期日, 五月 31日 2020, 2:37 下午

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

源属性 src 的值是图像的 URL 地址。alt 属性用来为图像定义一串预备的可替换的文本,当图片获取失败时,就会显示该文本。

除此以外,可以使用 heightwidth 属性设置图像的高度与宽度,如下所示:

<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>。她也没有特定的含义,是文本的容器。


更多编程教学请关注公众号:潘高陪你学编程

image




本文标题:HTML5常用标签-HTML5极速入门
文章作者:潘高
发布时间:2020年05月14日 - 20:01:22
最后更新:2020年05月31日 - 14:37:59
原始链接:https://blog.pangao.vip/HTML5%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE-HTML5%E6%9E%81%E9%80%9F%E5%85%A5%E9%97%A8/
许可协议:署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

CSS和JS简介-HTML5极速入门 上一篇
HTML5标签-HTML5极速入门 下一篇
如果这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝

 目录