한 기사에서는 HTML 태그와 속성을 자세히 설명합니다(주요 구조에 대한 간략한 분석).-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

한 기사에서는 HTML 태그와 속성을 자세히 설명합니다(주요 구조에 대한 간략한 분석).

青灯夜游

Aug 02, 2022 pm 06:47 PM

html5

이 글은 HTML 태그와 속성을 이해하고 HTML 문서의 주요 구조와 관련 태그에 대해 이야기하는 것이 모든 사람에게 도움이 되기를 바랍니다.

한 기사에서는 HTML 태그와 속성을 자세히 설명합니다(주요 구조에 대한 간략한 분석).

HTML의 주요 구조

HTML 페이지의 기본 구조는 다음과 같으며, 웹 페이지를 생성하는 데 필요한 다양한 태그(doctype, html, head 및 body 등)가 포함되어 있습니다. .

<!--这是html的注释信息-->

<!DOCTYPE html> <!--这是DOCTYPE声明-->

<html> <!--这是根-->

<head> <!--这是头-->

    <meta charset = "UTF-8"> <!--  描述性标签  -->
    
     <title>Hello</title> <!--标题栏-->
</head>

    <body> <!--网页体-->
    
    <!--这里的内容显示到网页上-->
    这是我的第一个HTML页面
    
    </body>
</html>

상위 선언 <br><code><br>
- 声明是文档的第一成份，位于文档的最顶部。
- 该标签就是告诉浏览器所使用的 HTML 规范。
以开始，以结束，中间包含头部标签及主体标签

HTML 标签的语法格式

一般情况下，一个 HTML 标签由开始标签、属性、内容和结束标签组成，标签的名称不区分大小写，但大多数属性的值需要区分大小写，如下所示：

	  属性
	   ↓
<div class="foo">PHP中文网</div>
 ↑            ↑           ↑
开始标签        内容   结束标签

除了 class 属性外，开始标签中还可以包含其它属性信息，比如 id、title 等，这些我们会在后面进行讲解。

注意，虽然 HTML 标签在语法上不区分大小写，但是为了规范和专业，强烈建议在定义标签时一律采用小写。

当使用浏览器打开我们编写的 HTML 文档时，浏览器会从上到下依次读取文档中的内容，并根据 HTML 标签和属性将标签中的内容呈现在浏览器中。

一个 HTML 文档中必须具有一些基本的标签，以便浏览器区分普通文本和 HTML 文档。您可以根据想要实现的效果使用任意数量的标签，但有以下几点需要注意：

所有 HTML 标签都必须放在尖括号内；
HTML 中不同的标签可以实现不同的效果；
如果使用了某个标签，则必须使用对应的结束标签来结尾（自闭和标签除外）。

自闭和标签

有一些 HTML 标签没有单独的结束标签，而是在开始标签中添加/来进行闭合，这种标签称为自闭和标签。请看下面的例子：

<img src="/static/imghwm/default1.png"  data-src="./logo.png"  class="lazy"   alt="C语言中文网Logo" />  <!-- 图像 -->
<hr />  <!-- 分割线 -->
<br />  <!-- 文本换行 -->
<input type="text" placeholder="请输入内容" />  <!-- 文本输入框 -->

自闭和标签不用包围内容，所以不需要单独的结束标签。只有少部分 HTML 标签是自闭和的。

表示 HTML 注释，用来对 HTML 代码进行说明，浏览器会忽略注释内容，所以用户在网页中看不到注释

HTML属性的概念和使用

什么是属性

属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：

attr="value"

attr 表示属性名，value 表示属性值。属性值必须使用双引号""或者单引号''包围。

注意，虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号。

一个标签可以没有属性，也可以有一个或者多个属性。

使用 HTML 属性的例子：

<p id="user-info" class="color-red">
欢迎 <font color="red" size="3">Tom</font> 来到PHP中文网。
<p>

专用属性

HTML 属性有很多，大体可以分为两类：

有些属性适用于大部分或者所有 HTML 标签，我们将这些属性称为通用属性；

有些属性只适用于一个或者几个特定的 HTML 标签，我们将这些属性称为专用属性。

HTML 中的 한 기사에서는 HTML 태그와 속성을 자세히 설명합니다(주요 구조에 대한 간략한 분석). 标签就有 src 和 alt 两个专用属性，标签也有 href 和 target 两个专用属性，如下例所示：

<img src="/static/imghwm/default1.png"  data-src="./logo.png"  class="lazy"   alt="PHP中文网Logo"    style="max-width:90%"  style="max-width:90%">
<a href="http://c.biancheng.net/" target="_blank">PHP中文网</a>

对代码的说明：

标签中的 src 属性用来定义图像的路径，alt 属性用来定义图像的描述信息，当图像出现异常无法正常显示时就会显示 alt 中的信息。
标签的 href 属性用来定义链接的地址，target 属性用来定义新页面在浏览器中的打开方式。

自定义属性

除了自带的属性，HTML 也允许我们自定义属性，这些属性虽然可以被浏览器识别，但是并不会添加什么特殊效果，我们需要借助 CSS 和 JavaScript 处理自定义属性，为 HTML 标签添加指定样式或者行为。

data-*

이 태그는 사용된 HTML 사양을 브라우저에 알려줍니다. 🎜

🎜🎜🎜HTML 태그의 구문 형식🎜🎜🎜🎜일반적으로 HTML 태그는 시작 태그, 속성, 콘텐츠 및 종료 태그로 구성됩니다. 태그 이름은 대소문자를 구분하지 않습니다. -sensitive. 하지만 대부분의 속성 값은 아래와 같이 대소문자를 구분해야 합니다. 🎜

<element data-*="somevalue">

🎜 클래스 속성 외에도 시작 태그에는 ID, 제목 등과 같은 다른 속성 정보도 포함될 수 있습니다. , 이에 대해서는 나중에 설명하겠습니다. 🎜

🎜 HTML 태그는 구문상 대소문자를 구분하지 않지만 표준화와 전문성을 위해 태그 정의 시 항상 소문자를 사용하는 것이 좋습니다. 🎜

🎜우리가 작성한 HTML 문서를 브라우저를 사용하여 열면 브라우저는 문서의 내용을 위에서 아래로 읽고 HTML 태그와 속성을 기반으로 브라우저의 태그 내용을 렌더링합니다. 🎜🎜HTML 문서에는 브라우저가 일반 텍스트와 HTML 문서를 구별할 수 있도록 몇 가지 기본 태그가 있어야 합니다. 원하는 효과에 따라 원하는 수의 태그를 사용할 수 있지만 몇 가지 참고할 사항이 있습니다. 🎜🎜🎜🎜모든 HTML 태그는 꺾쇠 괄호 안에 배치되어야 합니다. 🎜🎜🎜 HTML 서로 다른 태그는 서로 다른 효과를 얻을 수 있습니다. 🎜🎜🎜특정 태그를 사용하는 경우 해당 닫는 태그로 끝나야 합니다(자체 닫는 태그 제외). 🎜🎜🎜자동 닫는 태그🎜🎜🎜HTML 태그에는 별도의 닫는 태그가 없는 경우가 있는데, 대신 시작 태그에 /를 추가하여 닫는 태그 유형입니다. 자동 닫힘 태그라고 합니다. 아래 예시를 참고해주세요: 🎜

<div>在标签里设置H5新增的自定义属性</div>

🎜닫는 태그는 내용을 둘러쌀 필요가 없으므로 별도의 닫는 태그가 필요하지 않습니다. 소수의 HTML 태그만 자동으로 닫힙니다. 🎜

🎜는 HTML 코드를 설명하는 데 사용되는 HTML 주석을 나타냅니다. 브라우저는 주석 내용을 무시하므로 사용자는 웹 페이지에서 주석을 볼 수 없습니다🎜

🎜🎜 🎜 HTML 속성의 개념 및 사용🎜🎜🎜🎜🎜속성은 무엇입니까? 속성은 HTML 태그에 대한 추가 정보를 제공하거나 HTML 태그를 수정할 수 있습니다. 시작 태그에 속성을 추가해야 합니다. 구문 형식은 다음과 같습니다. 🎜

<div>data属性应用于CSS中</div>

🎜attr는 속성 이름을 나타내고 value는 속성 값을 나타냅니다. 속성 값은 큰따옴표 "" 또는 작은따옴표 ''로 묶어야 합니다. 🎜

🎜 속성값은 큰따옴표와 작은따옴표 모두 가능하지만, 표준화와 전문성을 위해 최대한 큰따옴표를 사용해주세요. 🎜

🎜태그에는 속성이 없거나 하나 이상의 속성이 있을 수 있습니다. 🎜🎜HTML 속성 사용의 예: 🎜

#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

🎜🎜특수 속성🎜🎜🎜대략 두 가지 범주로 나눌 수 있는 많은 HTML 속성이 있습니다. 🎜🎜일부 속성은 대부분 또는 모든 HTML 태그에 적용되며 이러한 속성을 범용 속성이라고 합니다. ;🎜🎜일부 속성은 하나 또는 몇 개의 특정 HTML 태그에만 적용됩니다. 이러한 속성을 특수 속성이라고 합니다. 🎜🎜HTML의 한 기사에서는 HTML 태그와 속성을 자세히 설명합니다(주요 구조에 대한 간략한 분석).

한 기사에서는 HTML 태그와 속성을 자세히 설명합니다(주요 구조에 대한 간략한 분석).

태그에는 src와 alt라는 두 가지 특수 속성이 있습니다. 다음 예와 같이 태그에도 두 가지 특수 속성인 href가 있습니다. 🎜

<div>在标签里设置H5新增的自定义属性</div>

🎜코드 설명: 🎜🎜🎜 🎜 한 기사에서는 HTML 태그와 속성을 자세히 설명합니다(주요 구조에 대한 간략한 분석).

태그의 src 속성은 이미지의 경로를 정의하는 데 사용되며, alt 속성은 이미지가 이상하여 정상적으로 표시할 수 없는 경우에 사용됩니다. Alt의 정보가 표시됩니다. 🎜🎜🎜 태그의 href 속성은 링크의 주소를 정의하는 데 사용되며, target 속성은 브라우저에서 새 페이지가 열리는 방식을 정의하는 데 사용됩니다. 🎜🎜🎜사용자 정의 속성🎜🎜🎜HTML은 자체 속성 외에도 속성을 사용자 정의할 수 있지만 이러한 속성은 브라우저에서 인식할 수 있지만 특별한 효과를 추가하지는 않습니다. 사용자 정의 속성을 처리하고 지정된 스타일이나 동작을 HTML 태그에 추가하려면 CSS와 JavaScript를 사용해야 합니다. 🎜🎜 data-* 속성은 비공개 페이지 뒤에 적용된 사용자 정의 데이터를 저장하는 데 사용됩니다. 이는 HTML5의 새로운 속성입니다. 🎜

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

🎜🎜🎜somevalue: 속성 값 지정(문자열) 🎜

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

属性名不要包含大写字母，在 data- 后必须至少有一个字符。
属性值，该属性值可以是任何字符串

注意：自定义属性前缀 "data-" 会被客户端忽略。

利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

<div>在标签里设置H5新增的自定义属性</div>

这个data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：

<div>data属性应用于CSS中</div>

#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

如何获取data属性的值？

<div>在标签里设置H5新增的自定义属性</div>

1、使用getAttribute来获取

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

2、使用Html5自定义属性对象Dataset来获取

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;

注意：带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如data属性为data-other-attribute，则我们要获取相应的值可以使用：myp.dataset.otherAttribute

如果Html元素定义了多个自定义属性，如何获取？

<div>在标签里设置多个自定义属性</div>

1、使用循环遍历

 var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;  
for (i = 0, j = attrs.length; i <p>2、使用<code>dataset</code>属性</p><pre class="brush:php;toolbar:false">var expense = document.getElementById('myDiv').dataset;

注：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

1）、让所有的自定义的属性值塞到一个数组中

var chartInput = [];
 
for (var item in expense) {
  chartInput.push(expense[item]);
}

2）、删掉一个data属性

delete myDiv.dataset.attribute;

3、增加一个data属性

myDiv.dataset.attribute4 = 'value4';

dataset的兼容性处理

如果浏览器不支持dataset，有必要做一下兼容处理：

if(myDiv.dataset) {
  myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
  var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
  myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
  var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}

结语：

使用dataset操作data 要比使用getAttribute速度稍微慢些，虽然使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的。

通用属性介绍

HTML 标签中有一些通用的属性，如 id、title、class、style 等，这些通用属性可以在大多数 HTML 标签中使用，下面来简单介绍一下它们的用法。

1) id

id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。

为标签定义 id 属性可以给我们提供很多便利，比如：

如果标签中带有 id 属性作为唯一标识符，通过 id 属性可以很方便的定位到该标签；

如果 HTML 文档中包含多个同名的标签，利用 id 属性的唯一性，可以很方便的区分它们。

注意：在一个 HTML 文档中 id 属性的值必须是唯一的。

示例代码如下所示：

<input type="text" id="username" />
<div id="content">PHP中文网</div>
<p id="url">https://www.php.cn/</p>

2) class

与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值，如下所示：

<div class="className1 className2 className3"></div>
<p>PHP中文网</p>
<div>https://www.php.cn/</div>

当使用 CSS 或者 JavaScript 来操作 HTML 标签时，同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的，所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中。

3) title

title 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <a href="https://www.php.cn/" title="HTML教程">HTML教程</a>
</body>
</html>

运行结果如下图所示：

한 기사에서는 HTML 태그와 속성을 자세히 설명합니다(주요 구조에 대한 간략한 분석).

将鼠标在链接处悬停片刻才能看到提示框。

4) style

使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <p style="color:red;">https://www.php.cn/</p>
    <img src="/static/imghwm/default1.png"  data-src="./logo.png"  class="lazy"     style="max-width:90%" alt="PHP中文网LOGO">
    <div style="padding:10px;border:2px solid #999;text-align:center;">PHP中文网</div>
</body>
</html>

运行结果如下图所示：

한 기사에서는 HTML 태그와 속성을 자세히 설명합니다(주요 구조에 대한 간략한 분석).