HTML5常用基础标签

HTML5中的标签众多，有时新手刚入门前端很容易步入误区，即想要一把抓掌握所有的知识，其实全部掌握效果不尽人意，相反会让我们学习受挫，效率低下，因此“片面”的学习有助于我们提高学习效率等，对于一些不常用的标签或者知识即查即用。因此都是有哪些常用的基础HTML5标签呢？快来看看吧！

---

1.首先是一些重要的文本标签，辟如<div>、<span>、<p>、<h1-h6>、<br>、<hr>、<pre>等等

以下是依据官方解释以及我实战总结的标签相关用法：
①<div> 标签是一个通用型的流内容容器，在不使用css的情况下，其对内容或布局没有任何影响。当我们深入学习后会发现这是我们常用的一个容器标签，里面常常会嵌套使用其他标签。网页样式布局会用到很多div标签（css div）。

举个栗子吧：

<div>

        div容器

        <p>文章......</p>

</div>

显示在浏览器上是：

②<span>元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性）。其与 <div>元素很相似，但 <div>是一个 块元素而 <span> 则是行内元素。

③<p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进，其是块级标签。块级标签行级标签的区分（简单说就是行级标签会占用分给它的一整行，块级标签会分配给它设置好的空间）。

④<pre>元素，当我们想要保留诗歌或者代码等等的格式的时候时，该标签可以避免我们去调试其格式，其会保留我们复制好的格式。

例如:

<pre>

        这是一段Python代码：

        string = “Hello world！”

        print(string)

</pre>

效果如下：

⑤<hr>简单说就是画一条水平线嘿嘿，而<br>就是换一行展示自己的元素喽。

⑥<h1-h6>，标题标签当然少不了，h1-h6字体大小递减。

举例代码：

      <h1>

            标题1

            <h2>标题2

                <h3>标题3

                    <h4>标题4

                        <h5>标题5

                            <h6>标题6</h6>

                        </h5>

                    </h4>

                </h3>

            </h2>

        </h1>

效果图：

2.然后就是一些图片和视频、音频相关的标签了。

①<img>图片标签，其有src、height以及width属性，src="https://blog.csdn.net/weixin_53414403/article/details/链接"，图片来源可以是本地图片的路径或图片的链接，而height和width属性是图片的高与宽，常用的单位是像素px等,alt是图片相关的内容（加载不出来的时候显示）

例如<img src="https://blog.csdn.net/imgs/scenery.jpg" alt="夜景"  height="300px" width="500px">

那就插一个图喽嘿嘿

 ②<audio>标签，其是音频相关的标签。

如

<audio
    controls
    src="https://blog.csdn.net/audios/bgm.mp3">
</audio>

controls是播放控制按钮。

 

③video是视频相关的标签，话不多说，上例子啦。

<video controls width="500">

    <source src="https://blog.csdn.net/videos/curry.mp4"
            type="mp4">

    <source src="https://blog.csdn.net/videos/curry1.mp4"
            type="mp4">
</video>

controls功能同上,两个source，不是同时播放，第一个不能播放时，播放第二个。

给大家举个我男神的绝杀视频为例吧哈哈

3.这里介绍常用的超链接标签，不多但常用。

没错它就是<a>

target的属性这个属性是在新页面打开，不写默认在本页面打开。

还有就是引入外部链接的<link href="https://blog.csdn.net/weixin_53414403/article/details/124716878">标签。

4.常用的表单标签

①<form>元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

②<input type="text || password || email || number">

常用属性name: 名称，id: 唯一ID，maxlength：最大长度，minlength：最小长度，required：是否必填，placeholder：当表单控件为空时，控件中显示的内容

③<textarea>标签表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时很有用。

④<button>显示出按钮的标签，例如登录是的那个按钮，当然如果想用漂亮的按钮，可以现成UI框架的或自己用css做。

⑤<select>元素表示一个提供选项菜单的控件。其中<option>是每一个小选项

<select >
    <option value="language">--选择一门语言--</option>
    <option value="cpp">C </option>
    <option value="py">Python</option>
    <option value="Java">Java</option>
</select>
效果如下：

5.表格

①<table> 标签表示表格数据 ， 即通过二维数据表表示的信息。

②<thead>标签定义了一组定义表格的列头的行。

③<tbody>标签定义一组数据行。

④<tr>定义表格中的行。 同一行可同时出现<td> 和<th> 元素。

⑤<th>标签定义表格内的表头单元格。

⑥<td>标签定义了一个包含数据的表格单元格。

⑦<caption>标签展示一个表格的标题， 它常常作为 <table> 的第一个子元素出现，一般显示在表格内容的最前面，可以被 CSS 样式化，可以出现在相对于表格的任意位置。.

举个栗子吧：

<table>
    <caption>表格</caption>
    <thead>
        <tr>

               <--colspan="2"表示：表头占2个位置-->
            <th colspan="2">表格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
    </tbody>
</table>

---

本期的分享到此结束了，欢迎大家的指正，觉得有用的话就点个关注呗。后期有时间我会持续更新前端优质内容，期待同大家一起学习，共同进步。

这篇好文章是转载于：学新通技术网