HTML标签篇

最新推荐文章于 2022-07-23 13:52:45 发布

孤磊

最新推荐文章于 2022-07-23 13:52:45 发布

阅读量139

点赞数

分类专栏：知识梳理文章标签： HTML

本文链接：https://blog.csdn.net/wangsiyao0423/article/details/100022636

版权

知识梳理专栏收录该内容

0 篇文章 0 订阅

订阅专栏

谈到HTML就不能不提一下标签了，毕竟整个HTML文档都是由各个标签组成的。

HTML标签介绍

HEAD头部标签

首先咱们说一个比较重要的，其实严格来说它不属于HTML头部标签，但因为内容太少我就把他合并到这里面了。

<!DOCTYPE html>

这一行代表了当前这个HTML文档为HTML5，有了这个以后就可以使用HTML5的一些特性了。为什么一定要写这个呢，因为到目前为止，HTML5以前的版本已经几乎可以说被淘汰了，所以各位在写代码的时候一定要记得加上。

<meta charset="UTF-8">
 <title>Document</title>

这个第一行meta标签的作用为声明当前文档编码格式为UTF-8,这样可以让你的文档中的中文字符在任意浏览器上都可以正常显示。目前来说utf-8是一个非常普遍的一种编码了，所有的系统都支持这个。
第二行title顾名思义，指的就是网页的标题。

正文部分

因为文章篇幅限制，所以我就讲一下常用的几个标签吧
首先就是标题部分

<h1>这是1级标题</h1>
 <h2>这是2级标题</h2>
 <h3>这是3级标题</h3>
 <h4>这是4级标题</h4>
 <h5>这是5级标题</h5>
 <h6>这是6级标题</h6>

h1~h6分别对应一级标题二级标题，跟word类似

<p>这是段落</p>

同上，这个也跟word中的段落差不多

<ul>
        <li>这是无序标签</li>
        <li>这是无序标签</li>
    </ul>
    <ol>
        <li>这是有序标签</li>
        <li>这是有序标签</li>
    </ol>

这个就是序列，他的效果如下

这是无序标签
这是无序标签

这是有序标签
这是有序标签

ul代表其中的为无序序列，
ol代表其中的为有序序列

接下来就是table标签

	<table>
        <thead>
            <th>这是表头</th>
            <th>这是表头</th>
        </thead>
        <tbody>
            <tr>
                <td>这是单元格</td>
                <td>这是单元格</td>
            </tr>
            <td>这是单元格</td>
            <td>这是单元格</td>
            </tr>
        </tbody>
    </table>

table中一共有6种标签，分别为table代表表格，thead代表表头，th代表表头中某一项，tbody代表表格内容，tr代表行，td代表单元格。
上面的代码的效果为

这是表头	这是表头
这是单元格	这是单元格
这是单元格	这是单元格

大致上就是这么个效果，当然啊，这个样式是csdn自动设置的，到时候需要各位自己在设置，不懂得我会在后面详细说明css样式的。
接下来是重头戏啦，HTML中最最重要的一个标签，div，目前现在所有的网站中使用的标签都会有div，随便一个网站中都会有几十个div标签。div标签相当于盒子，它里面可以装任何东西，同时也可以设置盒子的大小属性，已达到布局的目的。
div标签属于块标签，块标签有两个特性，分别为独占一行与自动延展。
独占一行相信大家都会理解，就是它比较哼，自己占一行，至于自动延展，整个HTML文档是有一定宽度的，每一个标签无论是继承父标签还是有css样式设置的（父标签指当前标签的上一级标签，例如上面的td标签的父标签为tr标签），也都会有一定宽度，而这个自动延展就表示当前标签的宽度无限延展，直到等于父标签的宽度，也就是每一个块标签不进行设置的情况下，他的宽度等于父标签的宽度。

    <div>
        我是div
        <div>
            我也是div
            <div>
                <ul>
                    <li>这是无序标签</li>
                    <li>这是无序标签</li>
                </ul>
            </div>
        </div>
    </div>