HTML属性

演讲者:whqet

内容提纲

  1. html属性
  2. html全局属性

html简介

超文本标记语言

html属性

属性为 HTML 元素提供附加信息。

属性一般以名称/值对的形式出现,比如:<img src="abc.jpg" alt="替换文本">

属性也可以没有属性值,比如:<input type="text" value="无值属性用法" disabled>

html全局属性

所有html标签有效的属性,w3school w3

html全局属性

属性 描述
id 规定元素的唯一id
class 规定元素的一个或多个类名,引用样式表中的类
title 规定有关元素的额外信息,鼠标悬停提示
accesskey 规定激活元素的快捷键,Alt+指定键
tabindex 规定元素的tab键次序
style 规定元素的行内 CSS 样式
lang 规定元素内容的语言

html全局属性示例

<a 
  id="zptc" 
  class="link" 
  title="访问学校主页" 
  accesskey="z"
  tabindex="2" 
  href="//www.zptc.cn" 
  target="_blank"
  style="text-shadow: 1px 1px 1px #000">Zptc</a> 
<a 
  id="soft" 
  class="link github" 
  title="访问课程主页" 
  accesskey="s" 
  tabindex="1" 
  href="//github.com/zptcsoft/" target="_blank">Soft</a>

Zptc Soft

html全局属性-html5新增

属性 描述
contenteditable 规定元素内容是否可编辑
data-* 用于存储页面或应用程序的私有定制数据
hidden 规定元素是否隐藏
spellcheck 规定是否对元素进行拼写和语法检查
translate 规定是否应该翻译元素内容

html5新增全局属性示例

<h2 contenteditable>可编辑标题</h2>
<h2 hidden>编辑标题之后显示</h2>

可编辑标题

data-*属性-自定义存放数据属性

<div class="spaceship" 
    data-ship-id="92432"
    data-weapons="laser 2" 
    data-shields="50%"
    data-x="30" 
    data-y="10" 
    data-z="90">
    <button class="fire"
        onclick="alert("第"+this.parentNode.dataset.shipId+"号飞船开始发射!")">
        Fire
    </button>
</div>

translate属性-标签内容是否翻译

<p>The Bee Game is a text adventure game in English. </p>
<p>When the game launches, the first thing you should do 
is type <kbd translate="no">eat honey</kbd>.</p> 
<p>The game will respond with:<samp translate="no">Yum yum! That was some good honey!</samp></p>

The Bee Game is a text adventure game in English.

When the game launches, the first thing you should do is type eat honey.

The game will respond with:Yum yum! That was some good honey!

前端开发

旨为前端开发工程师的前端开发基础课程