【前端】HTML属性

介绍

HTML元素上的属性,可以在元素中添加附加信息。

  • 可以在元素中添加附加信息
  • 一般描述于开始标签
  • 总是以名称/值对的形式出现,比如:name="value"

全局属性

本文只介绍全局属性,个个标签独有的属性,这边就不一一介绍了。

id

规定元素的唯一 id

通过 JavaScript 利用 id 属性来改变一段文本

<h1 id="myHeader">Hello World!</h1>
function change_header()
{
    document.getElementById("myHeader").innerHTML="Nice day!";
}

class

规定元素的一个或多个类名(引用样式表中的类)。

在head中定义style

<head>
    <style type="text/css">
    h1.intro {color:blue;}
    p.important {color:green;}
    </style>
</head>

使用

<body>
    <h1 class="intro">Header 1</h1>
    <p>A paragraph.</p>
    <p class="important">Note that this is an important paragraph.</p>
</body>

class 属性不能在以下 HTML 元素中使用:base, head, html, meta, param, script, style 以及 title

style

属性规定元素的行内样式 属性将覆盖任何全局的样式设定,例如在 <style> 标签或在外部样式表中规定的样式。

<p style="color: #27ad9a;">段落1</p>
<p style="color: #FFF; background: #27ad9a;">段落2</p>

效果:

style

lang

规定元素内容的语言。

<element lang="language_code">

lang 属性在以下标签中无效:<base>, < br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>

accesskey

规定激活(使元素获得焦点)元素的便捷按键

通过Alt + F (或者 Shift + Alt + F)打开指定链接(mac:Control + option + F)

<a href="http://www.w3school.com.cn/css/" accesskey="f">CSS</a>

以下元素支持 accesskey 属性:<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>

dir

规定元素内容的文本方向

  • rtl:从右到左
  • ltr:从左到右

<p dir="rtl">Write this text right-to-left!</p>
<p dir="ltr">Write this text left-to-right!</p>

dir 属性在以下标签中无效:<base>, < br>, <frame>, <frameset>, < hr>, <iframe>, <param> 以及 <script>

title

规定关于元素的额外信息 通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)

<a href="https://www.jianshu.com/u/769d3d3a9d4b" title="我的简书主页">链接</a>

效果:

title

title 属性常与 form 以及 a 元素一同使用,以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。

tabindex

规定元素的 tab 键次序。

<a href="https://www.jianshu.com/u/769d3d3a9d4b" tabindex="1">链接1</a>
<a href="https://www.jianshu.com/u/769d3d3a9d4b" tabindex="3">链接3</a>
<a href="https://www.jianshu.com/u/769d3d3a9d4b" tabindex="2">链接2</a>

效果:

tabindex

以下元素支持 tabindex属性:<a>, <area>, <button>, <input>, <object>, <select> 以及<textarea>

HTML5中添加的全局属性

contenteditable

规定元素内容是否可编辑,true、false

如果元素未设置 contenteditable 属性,那么元素会从其父元素继承该属性。

contextmenu

属性规定元素的上下文菜单。当用户右键点击元素时,会出现上下文菜单

<menu type="context" id="mymenu">
  <menuitem label="Refresh"></menuitem>
  <menuitem label="Twitter"></menuitem>
</menu>

data-*

用于存储页面或应用程序的私有自定义数据

<ul>
<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li> 
<li data-animal-type="蜘蛛">蝇虎</li> 
</ul>

draggable

规定元素是否可拖动

<p draggable="true">这是一个可拖动的段落。</p>

链接和图像默认是可拖动的

dropzone

规定在元素上拖动数据时,是否拷贝、移动或链接被拖动数据。

<div dropzone="copy"></div>

hidden

元素隐藏

<p hidden>这个段落应该被隐藏。</p>

hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。然后,JavaScript 可以删除 hidden 属性,以使此元素可见。

spellcheck

规定是否对元素进行拼写和语法检查

<p contenteditable="true" spellcheck="true">这是一个段落。</p>

可以对以下内容进行拼写检查

  • input 元素中的文本值(非密码)
  • <textarea> 元素中的文本
  • 可编辑元素中的文本

translate

规定是否应该翻译元素内容

<p translate="no">请勿翻译本段。</p>
<p>本段可被译为任意语言。</p>

Tips

1、在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,如:name='John "ShotGun" Nelson' 2、class 属性可以多用,中间用空格隔开,如:class="class1 class2 class3 " 3、id 属性只能单独设置,如:id="id1 "

参考

http://www.runoob.com/ http://www.w3school.com.cn/

有错误之处,感谢指出,接收批评

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.jianshu.com/u/769d3d3a9d4b复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 前端基础-HTML标签的通用属性

    id属性是标签的唯一标识,一个页面中可以有很多id属性,但是每个标签的id属性的值必须是唯一的

    cwl_java
  • HTML 属性

    <a href="http://www.runoob.com">这是一个链接</a>

    用户6884826
  • HTML 属性

    提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'

    用户8442333
  • HTML DOM 属性

    可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。

    陈不成i
  • 前端 — HTML

    标签之间的结构关系, 构成了一个 DOM 树 D: Document 文档 O: Object 对象 M: Model 模型

    全栈程序员站长
  • HTML——全局属性

    全局属性通常适用于某一种或多种类型的绝大多数HTML元素,包括标准属性和事件属性。

    Html5知典
  • HTML事件属性--DOM

    研究html的对象,事件和方法,从js的角度来思考,这个标签的属性是通过什么方法,触发什么事件来实现的

    子舒
  • HTML属性及事件

    白胡杨同学
  • html中align属性

    成员名称 说明 AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。 AbsMiddle 图像的中间与同一行...

    闵开慧
  • html多媒体属性

    音乐自动播放 audio src=路径 autoplay 音频 audio autoplay="autoplay" source src="视频路径"

    爱喝水的木子
  • HTML前端知识

    婷婷的橙子
  • 【前端】初识HTML

    刚开始接触HTML的时候,对一些名词多少会有点疑问。在学习之前,不如先弄清楚它们是什么,以及他们之间的关系。

    Gavin-ZYX
  • HTML前端基础

    >块元素:无论内容多少,该元素独占一行 行内元素:内容撑开宽度,左右都是行内元素的可以排在一行

    Albert_xiong
  • 前端之HTML

    所谓统一接口就是统一一个标准,比如一部手机当统一了充电接口之后不同牌子的手机可以使用同一个品牌的充电器进行充电,因为大家的产品都遵循了同样的接口规格和充电协议。...

    GH
  • 前端基础:HTML

    HTML 是一种描述网页语言, 指的是超文本标记语言 (Hyper Text Markup Language)。其中,超文本指的是网页上可以包含图片,视频,连接...

    RendaZhang
  • 前端html换肤

    这个红色的大盒子就是#box,我给它添加了一个默认颜色,如果不加就是透明。 我给每个盒子都添加了边框,容易区分块儿与块儿

    我不是费圆
  • 【前端】HTML标签

    本文主要在初学HTML时,对常用标签做一些记录。主要是标签的使用,以及效果展示。目的在于有个大概的认识:有什么标签?能做什么?

    Gavin-ZYX
  • 前端基础-HTML

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java

扫码关注腾讯云开发者

领取腾讯云代金券