在HTML中,属性用于提供有关HTML元素的附加信息。在这篇文章中你将学习多个HTML属性,它们可以增强网站的视觉吸引力。
Accept属性
将accept
属性与<input>
元素(仅用于文件类型)一起使用,以指定服务器可以接受的文件类型。
<input type="file" accept=".jpg, .jpeg, .png">
ALT属性
将alt
属性与<img>
元素一起使用,以指定图像无法在网页上显示时的替代文本。
<img src="nature.png" alt="A beautiful sunset">
Autocomplete属性
将autocomplete
属性与<form>
、<input>
、<select>
和<textarea>
元素一起使用,以控制浏览器的自动完成功能。
<input type="text" name="name" autocomplete="on" />
Contenteditable属性
使用contenteditable
属性指定元素的内容是否可编辑。它允许用户修改元素中的内容。
这是一个全局属性,这意味着您可以将此属性用于所有HTML元素。
<div contenteditable="true">You can edit this content.</div>
Controls属性
将controls
属性与<video>
或<audio>
元素一起使用,以指示浏览器显示标准的视频或音频控件。默认控件包括播放、暂停、搜索(移动位置)和音量等播放要素,以及仅用于视频内容的全屏切换、字幕/字幕和跟踪。
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<track kind="captions" src="sampleCaptions.vtt" srclang="en" />
<track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
<track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />
Your browser does not support the video tag.
</video>
Download属性
将download
属性与<a>
元素一起使用,以指定当用户单击链接时,链接的资源应该被下载而不是导航到。
<a href="document.pdf" download="document.pdf">Download PDF</a>
Dir属性
您可以使用dir
属性设置您的文本方向从右到左还是从左到右,从右到左设置为rtl
即可。
<p dir="rtl">Awesome!</p>
Hidden属性
使用hidden
属性来隐藏网页上的元素。这对于通过JavaScript或CSS控制可见性非常有用。
这是一个全局属性,这意味着您可以将此属性用于所有HTML元素。
<div hidden>This is hidden content.</div>
Hreflang属性
使用hreflang
属性指定<a>
或<link>
元素上链接资源的语言。它的工作原理类似于lang
属性,但专门用于链接。改善用户体验和SEO,可以告诉搜索引擎其他语言或地区的页面的不同变化。
<link href="https://example.com" rel="alternate" hreflang="x-default" />
<link href="https://example.com/de" rel="alternate" hreflang="de" />
<a href="https://example.com" hreflang="x-default">English</a>
<a href="https://example.com/de" hreflang="de">German</a>
增强可访问性的另一种方法是将aria-current="true"包含到当前活动的链接中。
<a href="https://example.com" hreflang="x-default" aria-current="true">English</a>
Loading属性
将loading
属性与<img>
元素一起使用,以控制浏览器加载图像的方式。它有三个值:eager
、lazy
和auto
。
<img src="image.png" loading="lazy" />
Multiple属性
将multiple
属性与<input>
和<select>
元素一起使用,可以允许用户一次选择/输入多个值。
<input type="file" multiple />
<select multiple>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="typescript">TypeScript</option>
<option value="rust">Rust</option>
</select>
Poster属性
将poster
属性与<video>
元素一起使用,可以用来显示视频封面,直到用户播放视频。
<video controls poster="image.png" width="500">
<source src="video.mp4" type="video/mp4" />
</video>
Readonly属性
将readonly
属性与<input>
元素一起使用,以指定该元素为只读,不可编辑。
<input type="text" value="This is readonly." readonly />
Reversed属性
使用reversed
属性可以反转列表编号的顺序。
<ol reversed>
<li>Pineapple🍍</li>
<li>Apple🍎</li>
<li>Greenapple 🍏</li>
</ol>
Start属性
使用start
属性允许您指定列表项的起始编号。
<ol start="20">
<li>Pineapple🍍</li>
<li>Apple🍎</li>
<li>Greenapple 🍏</li>
</ol>
Srcset属性
将srcset
属性与<img>
和<source>
(在<picture>
中)元素一起使用,以提供图像源列表。这有助于浏览器为不同的屏幕尺寸选择不同的图像。
<img src="image.jpg" srcset="image.jpg, image-2x.jpg, image-3x.jpg">
Spellcheck属性
将spellcheck
属性与<input>
元素(非密码类型)、内容可编辑元素和<textarea>
元素一起使用,以启用或禁用浏览器的拼写检查。
<input type="text" spellcheck="false" />
Title属性
使用title
属性来提供有关元素的其他信息。当用户将鼠标悬停在元素上时,通常会显示此信息。
这是一个全局属性,这意味着您可以将此属性用于所有HTML元素。
<a href="document.pdf" title="Click to download">Download File</a>
Translate属性
使用translate
属性用于指示元素是否应该被翻译。指定一个空字符串("")或yes用于翻译,而no用于避免翻译。
<span translate="no">Wien<span>