HTML（二）元素分类

最新推荐文章于 2024-08-07 14:19:47 发布

Oliver尹

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量1.4k

点赞数 1

分类专栏： WEB前端开发入门分享文章标签： html 元素笔记学习

本文链接：https://blog.csdn.net/zy21131437/article/details/80614627

版权

WEB前端开发入门分享专栏收录该内容

79 篇文章 4 订阅

订阅专栏

根据元素的作用，我们大致把元素分为以下几种：

根元素，文档元数据，内容分区，分组内容，文本级语意，嵌入内容，表格，表单，脚本，交互，编辑。

根元素：即html元素，表示整个文档的根，是一个顶级元素，其他元素必须是该元素的后代，换句话说，除了文档声明，第一个标签就是html标签，然后其他的元素都是这个元素的子元素；

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>    
</html>

文档元数据：用于定义页面的一些信息，比如标题，样式，字符编码等等，也可以用于SEO优化，被搜索引起收录，元素大致有：head，title，base，link，meta，style，sricpt等其中这里面的根元素是head标签，其他的都写在head里面；

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' href='xxx.css'>
        <script src="../js"></script>
    </head>
    <body></body>    
</html>

内容分区元素：在h5以前都是用div的方式区分内容分区的，这个标签没有自己的语义，也就是代表任何情况下都可以使用（如果你的网站需要兼容以前的老浏览器版本比如，ie8这些，那么还是建议直接使用div），h5之后，在内容逻辑上主持了划分，可以为页面明确的制作大纲，

常见的页面元素有：<header>-头部,<nav>-导航，<article>-主要内容，<aside>-边栏，<footer>-底部，<h1>-<h6>-标题等等；

这个部分元素，怎么说呢，就是用来搭建你页面的框架，框架搭建好了，才可以往里面填写东西，比如：

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' href='xxx.css'>
        <script src="../js"></script>
    </head>
    <body>
        <header>
            <nav></nav>
        <header>
        <article>
        </article>
        <footer></footer>
    </body>    
</html>

分组内容：可以组织<body>内容中的块或者章节内容,对SEO很重要，

常用的有：p-段落，address-定义文档或文章的作者，hr-分割线，pre-表示计算机的源代码、对源码的展示，main-规定文档的主要内容，div-无定义、仅仅是个外框，ol-有序列表，ul-无序列表，li-列表的具体列，dl-定义列表，dt-定义列表的标题，dd-定义列表的内容；

文本级语意：可以定义文档中语句，结构，可以是一个词，一段文字，比如电商网站的特价，就是<strong>包裹的，

常用的有：a-代表是一个链接，span-用于组合行内元素，没有特定含义，主要给目标文字进行修饰，em-代表内容强调（目前浏览器对这个标签包括的文字内容会用斜体表示），strong-代表内容加粗，也代表这段文字重要，cite-表示下面是引用，比如引用的书籍名称，q-标签定义一个短的引用，br-换行（注意，这个标签没有结束标签，也就是没有</br>），i-文字斜体表示，b-代表粗体文本，u-表示下划线文本等等；

注意：文本级语意标签使用，我个人的建议是，遵循定义，但是没有必要完全对照使用，比如下划线标签，斜体标签，最终的实现效果完全可以通过css实现

嵌入内容相关：可以支持多种多媒体资源，比如图像，音频，视频，画布，

常用的有：picture-图像，source-资源，img-图片，iframe-创建另一个内联的框架，embed-定义了嵌入的内容，video-视频，audio-音频，track-如video这类媒体媒介的外部文本，如字幕，map-可点击的图像，area-map的子元素，规定那些区域是可点击的，canvas-画布

表格元素：可以创建和处理表格，

常用的有：table-表格，caption-表格标题，colgroup-列表横跨，col-列表纵向跨列，tbody-表格主体，thead-表格头部，tfoot-表格底部，tr-行，td-单元格，th-表头单元格

表单元素：可以创建和处理表单元素，比如登录页面就是表单元素；

常用的有：form-表单，label-标注，input-输入框，button-按钮，select-选择框，datalist:选项列表、和input配合使用，optgrou-选择框内的分组，option-选择框选项，textarea-多行输入，output-输出，progress-进度条，meter-定义已知范围或分数值内的标量测量，fieldset-表单内元素分组，legend-为fieldset定义标题

脚本元素：可以创建和处理表单元素，比如登录页面就是表单元素；

script-定义了内嵌或者外联的脚本，可以创建动态内容；

noscript-定义了当前页面的脚本元素不受支持，或者浏览器关闭了脚本允许时显示的内容；

交互元素：有助于创建交互式的元素，比如弹窗；

details-标签用于描述文档或文档某个部分的细节；

summary-标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息；

dialog-定义对话框或窗口；

编辑元素：可以用来标识某个文档被更改过的部分，假如要显示文档更改的过程，可能就要用到以下元素；

ins-表示新插入的内容；

del-表示删除的内容；