Through the previous study, we already have a simple understanding of HTML tags and know that we can add some attributes to the tags. These attributes contain additional information about the tags, such as:
(1) The href attribute can provide the link address for the <a> tag;
(2) The src attribute can provide the path of the image for the <img> tag;
(3) The style attribute can define CSS styles for almost all tags.
In this article, we will explain the definition and usage of HTML tag attributes.
1. What are attributes?
Attributes can provide some additional information for HTML tags, or modify HTML tags. The attribute needs to be added in the start tag, and the syntax format is:
attr=value
attr represents the attribute name, and value represents the attribute value. Attribute values must be surrounded by double quotes or single quotes ' '.
Note: Although both double quotes and single quotes can surround attribute values, for the sake of standardization and professionalism, please use double quotes as much as possible.
A tag can have no attributes or one or more attributes.
Example of using HTML attributes:
<pid=user-infoclass=color-red>Welcome <fontcolor=redsize=3>username</font> to C Language Network. You have been using this site for 3 years. This is your 264th login. <p><divclass=clearfloat><pclass=left>Username account information</p><pclass=right>Username personalized signature</p></div>
Shown below:
1. Special properties
There are many HTML attributes, which can be roughly divided into two categories:
(1) Some attributes apply to most or all HTML tags. We call these attributes universal attributes;
(2) Some attributes are only applicable to one or several specific HTML tags. We call these attributes special attributes.
The <img> tag in HTML has two special attributes, src and alt, and the <a> tag also has two special attributes, href and target, as shown in the following example:
<img src=./logo.png alt=C Language Network Logo width=100 height=50>
<a href=http://c.biancheng.net/ target=_blank>C Language Network</a>
Description of the code:
The src attribute in the <img> 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 and cannot be displayed normally, the information in alt will be displayed.
The href attribute of the <a> 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.
2. Custom attributes
In addition to its own attributes, HTML also allows us to customize attributes. Although these attributes can be recognized by the browser, they do not add any special effects. We need to use CSS and JavaScript to process custom attributes and add specified styles to HTML tags or Behavior.
2. HTML attributes
● HTML elements can set attributes
●Attributes can add additional information to elements
●Attributes are generally described in the opening tag
●Attributes always appear in the form of name/value pairs, for example: name=value.
Summary: Elements in HTML can provide additional information for HTML elements by setting attributes; attributes are characteristics that belong to the element.
1. Common attributes
The following attributes apply to most HTML elements
(1) class
Define one or more classnames (classnames) for html elements (classnames are introduced from style files)
The class attribute can be used multiple times, that is, class=classname1 classname2 classname3... (Multiple class attributes can be filled in the quotation marks)
(2)id
Define the unique id of the element
The id attribute can only be set individually, that is, id=myid (only one can be filled in, multiple ones are invalid)
(3) style
Specify the inline style of an element
(4) title
Describes additional information about the element (used as a toolbar)
2. Commonly used reference attribute values of HTML attributes
Property values should always be enclosed in quotes.
Double quotes are the most commonly used, but there is no problem using single quotes.
Tip: In some individual cases, such as the attribute value itself contains double quotes, you must use single quotes, for example:
name='JohnShotGunNelson'
3. HTML Tip: Use lowercase attributes
Properties and property values are not case-sensitive.
However, the World Wide Web Consortium recommends lowercase attributes/attribute values in its HTML 4 recommendations.
The new version of (X)HTML requires lowercase attributes.
4. HTML Attributes Reference Manual
See the complete list of HTML attributes: HTML tag list.
The attributes that apply to most HTML elements are listed below: