One article explains HTML tags and attributes in detail (a brief analysis of the main structure)

This article will take you through HTML tags and attributes, and talk about the main structure and related tags of HTML documents. I hope it will be helpful to you!

The main structure of HTML

The basic structure of the HTML page is as follows, which includes various A variety of tags required to create web pages (such as doctype, html, head and body, etc.).

           
    这是我的第一个HTML页面  

• Top declaration
  

  • ##The declaration is the first component of the document , located at the very top of the document.

  • This tag tells the browser the HTML specification used.

##Starts with

• , ends with, and contains the head tag in the middle And the body tag

The syntax format of HTML tagGenerally, an HTML tag consists of a start tag, attributes , content and end tag. The name of the tag is not case-sensitive, but the values of most attributes need to be case-sensitive, as shown below:

属性 ↓ 
PHP中文网
 ↑ ↑ ↑ 开始标签 内容 结束标签

In addition to the class attribute, the start tag can also contain other attributes. Information, such as id, title, etc., we will explain these later.

When using a browser to open the HTML document we wrote, the browser will read the content in the document from top to bottom, and render the content in the tag in the browser based on the HTML tags and attributes. in the vessel.

An HTML document must have some basic tags so that the browser can distinguish between ordinary text and HTML documents. You can use any number of tags depending on the effect you want to achieve, but there are a few things to note:

All HTML tags must be placed within angle brackets < >;
Different tags in HTML can achieve different effects;
If a certain tag is used, it must be ended with the corresponding closing tag (Except for autism and labels).

Some HTML tags do not have a separate closing tag, but add / in the opening tag to close it. Such labels are called autistic and labelling. Please see the following example:

The closing tag does not need to surround the content, so there is no need for a separate closing tag. Only a small number of HTML tags are self-closing.

The concept and use of HTML attributes

Attributes can be provided for HTML tags Some additional information, or modifications to HTML tags. Attributes need to be added in the start tag, and the syntax format is:

attr="value"

represents the attribute name,valuerepresents the attribute value. Attribute values must be surrounded by double quotes""or single quotes''.

A tag can have no attributes, or it can have one or more attributes.

Examples of using HTML attributes:

 欢迎 Tom 来到PHP中文网。 

There are many HTML attributes, which can be roughly divided into two categories:

Some attributes apply to most or all HTML tags, we call these attributes universal attributes;

Some attributes only apply to one or a few specific HTML tags, we call these attributes special attributes.

Thetag in HTML has two special attributes, src and alt. Thetag also has two special attributes, href and target, as shown in the following example:

 PHP中文网

Description of the code:

The src attribute in the tag is used to define the path of the image, and the alt attribute is used to define the description information of the image. When the image is abnormal, it cannot be displayed normally. The information in alt will be displayed.
The href attribute of the tag is used to define the address of the link, and the target attribute is used to define how the new page is opened in the browser.

<element data-*="somevalue">

在标签里设置H5新增的自定义属性

data属性应用于CSS中

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

在标签里设置H5新增的自定义属性

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

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

在标签里设置多个自定义属性

var myDiv = document.getElementById("myDiv"); var attrs = myDiv.attributes, var expense = {}, i, j; for (i = 0, j = attrs.length; i < j; i++) { if(attrs[i].name.substring(0, 5) == 'data-') { expense[attrs[i].name.substring(5)] = attrs[i].value; } }

var expense = document.getElementById('myDiv').dataset;

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

delete myDiv.dataset.attribute;

myDiv.dataset.attribute4 = 'value4';

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

 
PHP中文网
 
//m.sbmmt.com/

 
PHP中文网
 
//m.sbmmt.com/

     
  HTML教程  

运行结果如下图所示：

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

4) style

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

     
  
//m.sbmmt.com/
  
PHP中文网
  

运行结果如下图所示：

标签中常用的标签

1、

标签中。

2、标签

标签用于为页面中所有相对链接指定一个基本链接，当您设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀，如下例所示：

3、标签

标签经常用于引用外部 CSS 样式表，标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：

4、