当前位置：首页 > 编程日记 > 正文

HTML属性说明

编程日记 2024-08-01 09:20:00

HTML elements can have attributes, which contain additional information about the element.

HTML元素可以具有属性，其中包含有关该元素的其他信息。

HTML attributes generally come in name-value pairs, and always go in the opening tag of an element. The attribute name says what type of information you’re providing about the element, and the attribute value is the actual information.

HTML属性通常以名称/值对的形式出现，并且总是放在元素的开始标记中。属性名称说明您要提供的有关元素的信息类型，而属性值是实际信息。

For example, an anchor (<a>) element in an HTML document creates links to other pages, or other parts of the page. You use the href attribute in the opening <a> tag to tell the browser where the link sends a user.

例如，HTML文档中的锚点( <a> )元素创建到其他页面或页面其他部分的链接。您可以在开始的<a>标记中使用href属性，以告诉浏览器该链接将用户发送到何处。

Here’s an example of a link that sends users to freeCodeCamp’s home page:

这是将用户发送到freeCodeCamp主页的链接的示例：

<a href="www.freecodecamp.org">Click here to go to freeCodeCamp!</a>

Notice that the attribute name (href) and value (“www.freeCodeCamp.org”) are separated with an equals sign, and quotes surround the value.

请注意，属性名称( href )和值(“ www.freeCodeCamp.org”)用等号分隔，并用引号引起来。

There are many different HTML attributes, but most of them only work on certain HTML elements. For example, the href attribute won’t work if it’s placed in an opening <h1> tag.

HTML有许多不同的属性，但是大多数属性仅适用于某些HTML元素。例如，如果将href属性放在开头的<h1>标记中，则该属性将不起作用。

In the example above, the value supplied to the href attribute could be any valid link. However, some attributes only have a set of valid options you can use, or values need to be in a specific format. The lang attribute tells the browser the default language of the contents in an HTML element. The values for the lang attribute should use standard language or country codes, such as en for English, or it for Italian.

在上面的示例中，提供给href属性的值可以是任何有效链接。但是，某些属性只有一组可以使用的有效选项，或者值必须采用特定格式。 lang属性告诉浏览器HTML元素中内容的默认语言。对于值lang属性应当使用规范的语言或国家代码，如en英语，或者it意大利。

布尔属性 (Boolean Attributes)

Some HTML attributes don’t need a value because they only have one option. These are called Boolean attributes. The presence of the attribute in a tag will apply it to that HTML element. However, it’s okay to write out the attribute name and set it equal to the one option of the value. In this case, the value is usually the same as the attribute name.

一些HTML属性不需要值，因为它们只有一个选项。这些称为布尔属性。标签中属性的存在会将其应用于该HTML元素。但是，可以写出属性名称并将其设置为等于值的一个选项。在这种情况下，该值通常与属性名称相同。

For example, the <input> element in a form can have a required attribute. This requires users to fill out that item before they can submit the form.

例如，表单中的<input>元素可以具有required属性。这就要求用户填写该项目，然后才能提交表单。

Here are examples that do the same thing:

以下是执行相同操作的示例：

<input type="text" required >
<input type="text" required="required" >

You can read more about the <a href>, <a target>, <script> src, and roll attributes here:

您可以在此处阅读有关<a href>，<a target>，<script> src和roll属性的更多信息：

<a href>属性 (<a href> Attribute)

<script> src属性 (<script> src Attribute)

滚动属性 (roll Attribute)

<目标>属性 (<a target> Attribute)

Now let's learn more about some other HTML attributes:

现在，让我们进一步了解其他一些HTML属性：

P对齐属性 (P Align Attribute)

重要 (Important)

This attribute is not supported in HTML5. It is recommended to use the text-align CSS property.

HTML5不支持此属性。建议使用text-align CSS属性。

To align the text inside a <p> tag, this attribute will help.

要在<p>标记内对齐文本，此属性将有所帮助。

句法 (Syntax)

<p align="position">Lorem Ipsum...</p>

属性 (Attributes)

left - Text aligns to the left
左 -文本向左对齐
right - Text aligns to the right
右 -文本右对齐
center - Text aligns to the center
中心 -文本与中心对齐
justify - All lines of text have equal width
对齐 -文本的所有行均具有相等的宽度

例 (Example)

<html>
<body>
<p align="center">Paragraph align attribute example</p>
</body>
</html>

Img Src属性 (Img Src Attribute)

The <img src> attribute refers to the source of the image you want to display. The img tag will not display an image without the src attribute. However, if you set the source to the location of the image, you can display any image.

<img src>属性引用您要显示的图像的来源。没有src属性， img标签将不会显示图像。但是，如果将源设置为图像的位置，则可以显示任何图像。

There is an image of the freeCodeCamp Logo located at https://avatars0.githubusercontent.com/u/9892522?v=4&s=400

在https://avatars0.githubusercontent.com/u/9892522?v=4&s=400上有freeCodeCamp徽标的图像。

You can set that as the image using the src attribute.

您可以使用src属性将其设置为图像。

<html><head><title>Img Src Attribute Example</title></head><body><img src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400"></body>
</html>

The above code displays like this:

上面的代码显示如下：

The src attribute is supported by all browsers.

所有浏览器都支持src属性。

You can also have a locally hosted file as your image.

您还可以将本地托管的文件作为映像。

For example, <img src="images/freeCodeCamp.jpeg> would work if you had a folder called images which had the freeCodeCamp.jpeg inside, as long as the ‘images’ folder was in the same location as the index.html file.

例如， <img src="images/freeCodeCamp.jpeg>会如果有一个文件夹中称为工作images ，其具有freeCodeCamp.jpeg内，只要该‘图像’文件夹是在相同的位置index.html文件。

../files/index.html

..files/images/freeCodeCamp.jpeg

字体大小属性 (Font Size Attribute)

This attribute specifies the font size as either a numeric or relative value. Numeric values range from 1 to 7 with 1 being the smallest and 3 the default. It can also be defined using a relative value, like +2 or -3, which set it relative to the value of the size attribute of the <basefont> element, or relative to 3, the default value, if none does exist.

此属性将字体大小指定为数字值或相对值。数值范围为1到7其中1为最小值，默认值为3 。也可以使用相对值来定义它，例如+2或-3 ，将其相对于<basefont>元素的size属性值设置，或者相对于默认值3 (如果不存在的话)进行设置。

Syntax:

句法：

<font size="number">

Example:

例：

<html><body><font size="6">This is some text!</font></body>
</html>

Note : The size attribute of <font> is not supported in HTML5. Use CSS instead.

注意： The size attribute of <font> is not supported in HTML5. Use CSS instead. The size attribute of <font> is not supported in HTML5. Use CSS instead.

字体颜色属性 (Font Color Attribute)

This attribute is used to set a color to the text enclosed in a <font> tag.

此属性用于为<font>标记中包含的文本设置颜色。

句法： (Syntax:)

html

### Important:
This attribute is not supported in HTML5. Instead, this [freeCodeCamp article](https://guide.freecodecamp.org/css/colors) specifies a CSS method, which can be used.### Note:
A color can also be specified using a 'hex code' or an 'rgb code', instead of using a name.### Example:
1. Color name attribute
```html
<html><body><font color="green">Font color example using color attribute</font>
</body>
</html>

Hex code attribute

十六进制代码属性

<html>
<body>
<font color="#00FF00">Font color example using color attribute</font>
</body>
</html>

RGB attribute

RGB属性

<html>
<body>
<font color="rgb(0,255,0)">Font color example using color attribute</font>
</body>
</html>

自动对焦属性 (Autofocus Attribute )

The autofocus attribute is a boolean attribute.

自动对焦属性是布尔属性。

When present, it specifies that the element should automatically get input focus when the page loads.

如果存在，它指定元素在页面加载时应自动获得输入焦点。

Only one form element in a document can have the autofocus attribute. It cannot be applied to <input type="hidden">.

文档中只有一个表单元素可以具有自动对焦属性。它不能应用于<input type="hidden"> 。

适用于 (Applies to)

ElementAttribute<button>autofocus<input>autofocus<select>autofocus<textarea>autofocus

ElementAttribute <button>自动对焦<input>自动对焦<select>自动对焦<textarea>自动对焦

例 (Example)

<form><input type="text" name="fname" autofocus><input type="text" name="lname">
</form>

兼容性 (Compatibility)

This is an HTML5 attribute.

这是HTML5属性。

Onclick事件属性 (Onclick Event Attribute)

When the element is clicked fires a event.

单击该元素时将触发一个事件。

It works just like the onclick method or addEventListener('click') to the element.

就像onclick方法或元素的addEventListener('click') 。

<element onclick="event"></element>

event can be a JavaScript function or you can write raw JavaScript

event可以是JavaScript函数，也可以编写原始JavaScript

例子 (Examples)

Changing the color of a <p> element when clicked

单击时更改<p>元素的颜色

<p id="text" onclick="redify()">Change my color</p><script>
function redify(){let text = document.querySelector('#text');text.style.color = "red";
}
</script>

Using raw JavaScript onclick attribute:

使用原始JavaScript onclick属性：

<button onclick="alert('Hello')">Hello World</button>

图对齐属性 (Img Align Attribute)

The align attribute of an image specifies where the image should be aligned according to the surrounding element.

图像的align属性指定应根据周围元素将图像对齐的位置。

Attribute Values:right - Align image to the right left - Align image to the lefttop - Align image to the topbottom - Align image to the bottommiddle - Align image to the middle

属性值：右-将图像左对齐-将图像左对齐-将图像对齐到底部-将图像对齐到底部-将图像对齐到中间

For example:

例如：

<!DOCTYPE html>
<html lang="en"><head><title>Img Align Attribute</title></head>
<body><p>This is an example. <img src="image.png" alt="Image" align="middle"> More text right here<img src="image.png" alt="Image" width="100"/></body>
</html>

We can also align in right if we want:

如果需要，我们也可以右对齐：

<p>This is another example<img src="image.png" alt="Image" align="right"></p>

Please note the align attribute is not supported in HTML5, and you should use CSS instead. However, it is still supported by all the major browsers.

请注意，HTML5不支持align属性，而应使用CSS。 但是，所有主要浏览器仍支持该功能。

输入类型属性 (Input Type Attribute)

The input type attribute specifies the type of the input the user should put in your form.

输入类型属性指定用户应在表单中输入的输入类型。

文本 (text)

One line of a text.

一行文本。

<form><label for="login">Login:</label><input type="text" name="login"></form>

密码 (password)

One line of a text. Text is automatically displayed as a series of dots or asterisks (depends on the browser and OS).

一行文本。文本将自动显示为一系列的点或星号(取决于浏览器和OS)。

<form><label for="password">Password:</label><input type="password" name="password"></form>

电子邮件 (email)

The HTML checks if the input matches the e-mail address format (something@something).

HTML检查输入的内容是否与电子邮件地址格式(something @ something)相匹配。

<form><label for="email">E-mail address:</label><input type="email" name="email"></form>

数 (number)

Allow only numeric input. You can also specify the min and max value allowed. The example below check that the input is number between 1 and 120.

仅允许数字输入。您还可以指定允许的最小值和最大值。下面的示例检查输入的数字是否在1到120之间。

<form><label for="age">Age:</label><input type="number" name="age" min="1" max="120"></form>

无线电 (radio)

Only one option can be selected by the user. The group of radio buttons need to have the same name attribute. You can select automatically one option by using checked property (in example below the value Blue is selected).

用户只能选择一个选项。单选按钮组必须具有相同的名称属性。您可以通过使用checked属性来自动选择一个选项(例如，在下面的“蓝色”值中被选中)。

<form><label><input type="radio" name="color" value="red">Red</label><label><input type="radio" name="color" value="green">Green</label><label><input type="radio" name="color" value="blue" checked>Blue</label></form>

复选框 (checkbox)

User can select zero or more options from the group of checkboxes. You can use checked property here too for one or more options.

用户可以从复选框组中选择零个或多个选项。您也可以在此处将checked属性用于一个或多个选项。

<form><label><input type="checkbox" name="lang" value="english">english</label><label><input type="checkbox" name="lang" value="spanish">spanish</label><label><input type="checkbox" name="lang" value="french">french</label></form>

纽扣 (button)

The input is displayed as button, the text which should be displayed in the button is in value attribute.

输入显示为按钮，应在按钮中显示的文本在value属性中。

<form><input type="button" value="click here"></form>

提交 (submit)

Displays the submit button. The text which should be displayed in the button is in value attribute. After clicking on the button, the HTML do the validation and if it passes, the form is submitted.

显示提交按钮。按钮中应显示的文本位于value属性中。单击按钮后，HTML进行验证，如果通过，则提交表单。

<form><input type="submit" value="SUBMIT"></form>

重启 (reset)

Displays the reset button. The text which should be displayed in the button is in value attribute. After clicking on the button, all values from the form are deleted.

显示重置按钮。按钮中应显示的文本位于value属性中。单击按钮后，将删除表单中的所有值。

<form><input type="reset" value="CANCEL"></form>

There are more types elements.

类型元素更多。

其他HTML属性： (Other HTML Attributes:)

<script> src属性 (<script> src attribute)

滚动属性 (roll attribute)

<a href>属性 (<a href> attribute)

<目标>属性 (<a target> attribute)

翻译自: https://www.freecodecamp.org/news/html-attributes-explained/

https://www.dkcj.cn/info/12331.html

布尔属性 (Boolean Attributes)

<a href>属性 (<a href> Attribute)

<script> src属性 (<script> src Attribute)

滚动属性 (roll Attribute)

<目标>属性 (<a target> Attribute)

P对齐属性 (P Align Attribute)

重要 (Important)

句法 (Syntax)

属性 (Attributes)

例 (Example)

Img Src属性 (Img Src Attribute)

字体大小属性 (Font Size Attribute)

字体颜色属性 (Font Color Attribute)

句法： (Syntax:)

自动对焦属性 (Autofocus Attribute )

适用于 (Applies to)

例 (Example)

兼容性 (Compatibility)

Onclick事件属性 (Onclick Event Attribute)

例子 (Examples)

图对齐属性 (Img Align Attribute)

输入类型属性 (Input Type Attribute)

文本 (text)

密码 (password)

电子邮件 (email)

数 (number)

无线电 (radio)

复选框 (checkbox)

纽扣 (button)

提交 (submit)

重启 (reset)

其他HTML属性： (Other HTML Attributes:)

<script> src属性 (<script> src attribute)

滚动属性 (roll attribute)

<a href>属性 (<a href> attribute)

<目标>属性 (<a target> attribute)

相关文章：