目錄
1、accesskey 屬性
2、class 属性
3、contenteditable 属性
4、dir 属性
5、draggable 属性
6、dropzone 属性
7、id 属性
8、hidden 属性
9、lang 属性
10、spellcheck 属性
11、style 属性
12、tabindex 属性" >12、tabindex 属性
13、title 属性
14、contextmenu 属性
15、data-* 属性
16、translate 属性
首頁 web前端 前端問答 html全域屬性是什麼

html全域屬性是什麼

Nov 17, 2021 pm 04:14 PM
html 全域屬性

在html中,全域屬性是指可以用來配置所有元素共有行為、可以用在任何一個元素身上的屬性。常用全域屬性有:class、hidden、id、lang、style、title、dir、contenteditable等等。

html全域屬性是什麼

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

局部屬性:有些元素能規定自己的屬性,這種屬性稱為局部屬性。例如 link 元素,它擁有的局部屬性有 href、 rel、 hreflang、 media、 type、 sizes 這六個。 

全域屬性:可以用來設定所有元素共有的行為,這種屬性稱為全域屬性,可以用在任何一個元素身上。

1、accesskey 屬性

使用 accesskey 屬性可以設定一個或幾個用來選擇頁面上的元素的快速鍵。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta >
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HTML全局属性测试</title>
</head>
<body>
  <form action="">
      <p>
          Name: <input type="text" >                
      </p>
      <p>
          Password: <input type="password" >                
      </p>
      <p>
          Name: <input type="submit" >                
      </p>
  </form>
</body>
</html>
登入後複製

在上面的範例中,三個input 元素加入了accesskey 屬性,這樣在Mac 下就可以用 <span class="typ">Control<span class="pln"> <span class="pun"> <span class="pln"> <span class="typ">Alt<span class="pun">(<span class="typ">Option<span class="pun">)<span class="pln"> <span class="pun"> <span class="pln"> n</span></span></span></span></span></span></span></span></span></span></span>

瀏覽器/ 平台WindowLinuxMacFirefox#Alt Shift keyAlt Shift key#Control Alt keyInternet ExplorerAlt key#N/AN/AGoogle Chrome
快速鍵存取到Name 的輸入框了。用來觸發accesskey 機制的按鍵組合因平台而異,如下:
###Alt key######Alt key######Control Alt key############Safari######Alt key ######N/A######Control Alt key#############Opera######同Google Chrome######同Google Chrome## ####同Google Chrome############

关于 accesskey 这个全局属性的详解,可以看一下 HTML accesskey 属性与 web 自定义键盘快捷访问

2、class 属性

class 属性用来将元素归类,这个就无需多言了。

3、contenteditable 属性

contenteditable 是 HTML5 中新增加的属性,,其用途是让用户能够修改页面上的内容。

<body>
   <!-- contenteditable属性应用 -->
   <p contenteditable="true">设置为 true 是可编辑的</p>
  </body>
登入後複製

如上例,p 元素的 contenteditable 属性值设置为 true 时,用户可以单击文字编辑内容。设置为 false 时禁止编辑。

4、dir 属性

dir 属性用来规定元素中文字的方向。有效值有两个:ltr(从左到右)、rtl(从右到左)。

<!-- dir属性应用 -->
<p dir="ltr">从左到右</p>
<p dir="rtl">从右到左</p>
登入後複製

5、draggable 属性

draggable 属性是 HTML5 支持拖放操作的方式之一,用来表示元素是否可被拖放。

6、dropzone 属性

dropzone 属性是 HTML5 支持拖放操作的方式之一,与 draggable 属性搭配使用。

7、id 属性

id 属性用来给元素分配一个唯一的标识符。这个也无需多言。需要说明的一点是,id 属性还可以用来导航到文档中的特定位置。

8、hidden 属性

hidden 是个布尔属性,表示相关元素当前不需要关注,浏览器对它的处理方式是隐藏相关元素(隐隐想起来控制一个元素的展示隐藏的时候,会自定义一个 hidden 类,然后在里面写隐藏样式),具体也可以看一下这篇介绍 HTML5 的 hidden 属性

<!-- hidden属性应用 -->
<div hidden>这个元素将会被隐藏</div>
登入後複製

9、lang 属性

lang 属性用于说明元素内容使用的语言。lang 属性必须使用有效的 ISO 语音代码,使用这个属性的目的在于,让浏览器调整其表达元素内容的方式,比如在使用了文字朗读器的情况下正确发音。

<!-- lang属性应用 -->
<p>Hello - how are you?</p>
登入後複製

10、spellcheck 属性

spellcheck 属性用来表明浏览器是否应该对元素的内容进行拼写检查,这个属性只有用在用户可以编辑的元素上时才有意义。 spellcheck 属性可以接受的值有两个:true 和 false。至于拼写检查的实现方式则因浏览器而异。

<!-- spellcheck属性应用 -->
 <textarea >This is some lalalala text</textarea>
登入後複製

11、style 属性

style 属性用来直接在元素身上定义 CSS 样式,这个也不做过多描述了。

12、tabindex 属性

HTML 页面的键盘焦点可以通过按 Tab 键在各元素之间切换。用 tabindex 属性可以改变默认的转移顺序。

<!-- tabindex属性应用 -->
 <form action="">
    <label>Name: <input type="text" ></label>
    <label>City: <input type="text" ></label>
    <label>Country: <input type="text" ></label>
    <input type="submit" value="" tabindex="3">
 </form>
登入後複製

上面的代码实现效果是:在按 Tab 键的过程中,tabindex 为 1 的 Country 输入框第一个被选中,接着焦点会跳到 Name 输入框,最后是 submit 提交。tabindex 设置为 - 1 的元素不会在用户按下 Tab 键后被选中。

13、title 属性

title 属性提供了元素的额外信息,浏览器通常用这些东西显示工具条提示,这个在一些展示不全的文本标题也经常使用。

<!-- title属性应用 -->
<a href="https://qiqihaobenben.github.io/" title="我的个人网站">qiqihaobenben.github.io</a>
登入後複製

14、contextmenu 属性

自定义鼠标右键弹出菜单内容

15、data-* 属性

为元素增加自定义属性

16、translate 属性

元素和子孙节点内容是否需要本地化

推荐教程:《html视频教程

以上是html全域屬性是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles