HTML5-从0开始学习之HTML5标签，属性，与元素之间的关系

旧城等待， 2022-05-11 11:04 195阅读 0赞

上次我介绍了HTML5的结构，如下图所示

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <script src="script.js">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

这次我们来继续学习HTML5的标签，属性，元素之间的关系。

## 什么是标签？ ##

**<html></html> <head></head> <body></body>**这就是三个标签，代码**必须**要写在标签当中，当然标签不止这三种标签，以后我们在列举其他标签。

## 什么是属性？ ##

属性就是标签的属性，比如我们现在先创建一个div，div就是一个标签，可以用来定义文档中的分区和节，是经常要用的标签。

我们先在body标签里写上一个div：

<body>
        <div style="height:100px;width:100px;background-color:black"></div>
    </body>

我们可以看到标签内部有三个属性值，分别是**height**，**width**，**background-color**三个属性值，分别代表高度，宽度，背景颜色。

在这里我们将三个属性值分别设置为高100像素，宽100像素，背景色设置为黑色。

效果如图：

![70][]

我们的页面中就出现了这么一个高宽分别为100像素，背景色为黑色的小方块。

## 什么是元素？ ##

元素是指标签，标签的属性与其包装在内的内容的总称。

或者可以说是元素=标签+属性+内容。

# 所以来说，网页就是由一个个元素组成的。 #

### 元素又分为：文本元素，图像元素，列表元素，表单元素，视频元素等。 ###

[70]: /images/20220505/750d81775c344b379b724d02e7d60de4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5-从0开始学习之音频标签介绍

<audio src="1.mp4" controls></audio> 效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_sh

心已赠人/ 2022年05月14日 17:20/ 0 赞/ 195 阅读

相关 HTML5-从0开始学习之视频标签介绍

<video src="1.mp4" controls></video> 具体效果如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_

亦凉/ 2022年05月14日 17:17/ 0 赞/ 170 阅读

相关 HTML5-从0开始学习之H5新增表单属性（一）

1，placeholder：设置提示信息或默认值 <input type="text" placeholder="用户名不能为空" name="" id="">

骑猪看日落/ 2022年05月14日 16:51/ 0 赞/ 155 阅读

相关 HTML5-从0开始学习之行内文本标签详解

这次我们来学习行内文本的一系列标签，学习这些标签后能有效的增加阅读性。下面我们来学习有哪些标签： <body> <p>今天下午<time>3点到5

r囧r小猫/ 2022年05月11日 11:14/ 0 赞/ 228 阅读

相关 HTML5-从0开始学习之HTML段落，标题与格式化文本

这次我们来学习html中得到段落，标题，格式化文本。这三个元素都属于文本元素。文本是网站访问者最重要的信息来源。段落<p></p> <p>标签是用来包装段落

梦里梦外;/ 2022年05月11日 11:06/ 0 赞/ 186 阅读

相关 HTML5-从0开始学习之HTML5标签，属性，与元素之间的关系

上次我介绍了HTML5的结构，如下图所示 <!DOCTYPE html> <html lang="en"> <head> <meta

旧城等待，/ 2022年05月11日 11:04/ 0 赞/ 196 阅读

相关 HTML5-从0开始学习之HTML文档结构

首先我使用的代码编译器是VS code，一键生成HTML文档格式后如图 <!DOCTYPE html> <html lang="en"> <head>

﹏ヽ暗。殇╰゛Y/ 2022年05月11日 10:50/ 0 赞/ 183 阅读

相关 HTML5-从0开始学习之表单属性详解

什么是表单？表单是网页中数据采集的工具。表单组成部分由三部分组成：（一）表单标签<form> （二）表单域<input> （三）表单按钮<

悠悠/ 2022年05月03日 14:26/ 0 赞/ 175 阅读

相关 HTML5-从0开始学习之img图片属性

我们平常在页面中不只是能看到文字说明，也能看到很多图片出现在页面中，图片的出现大大增加了用户的观赏性，使页面内容不在枯燥无味，下面我们来学习如何在页面中插入图片。

﹏ヽ暗。殇╰゛Y/ 2022年05月03日 03:28/ 0 赞/ 311 阅读

相关 HTML5-从0开始学习之table表格

这次我们来学习制作网页中的表格，表格标签用<table>标签使用。接下来我们用一个例子来展示表格的效果。 <body> <table border

谁借莪１个温暖的怀抱￠/ 2022年05月03日 03:28/ 0 赞/ 195 阅读