HTML属性

1人阅读 评论(0) 收藏 举报
分类:

HTML 属性

为了表示元素的一些特征,我们可以在开始标签中添加一些属性。如下:

属性特征

一般属性都具有以下特征:

  • 每个属性之间或与元素名之间都有一个空格隔开
  • 属性名后面紧跟等号
  • 属性值使用双引号包裹

但也有一些属性只有属性名,没有属性值,这种属性我们称之为布尔属性,如下disabled就是布尔属性,表示是否禁用,有该属性则为禁用:

<input type="text" disabled>

除此之外,我们还可以自定义属性来存储我们的一些数据以便 JS 使用。具体可参考:HTML data-* 属性。(我们后面的课程会讲解,先不用纠结)

属性分类

属性有很多种,从使用来说大概可以分为三类:

  • 可以用于每个元素的全局属性,如class属性
  • 可用于某一类元素的,如form表单相关元素的namevalue属性
  • 只用于某一个元素的,如alt属性只用于img元素

这里我们先介绍几个常用的全局属性

class

用来设置元素的一个或多个类名,这样以后的 CSS 或 JS 就可以方便对该元素进行操作。具有以下特点:

  • 类名不能以数字开头(一定要牢记)
  • 类名可以设置多个值,以空格分开,如<div class="box box--menu"></div>
  • 不同的元素可以有相同的类名

简单示例如下:

<p class="p1 red">文本段落</p>
<div class="red">我也有一个类名为red</div>

id

设置元素的唯一性,经常用于 JS 操作或 CSS 操作,也可用作定义锚点。具有以下特点:

  • 在整个 HTML 文档中必须是唯一的,也就是说一个 HTML 文档中不能出现两个一样的id值
  • 不可以和 class 那样设置多个值

简单示例如下:

<p id="text">文本段落</p>
<div id="block">区块内容</div>

title

用来设置元素的额外信息,鼠标滑过元素暂停一会会显示 title 属性的内容。大概效果如下图:

简单示例如下:

<a title="全部的链接文字" href="#">链接文字很多...</a>

style

用于设置元素的行内样式,一般用于 JS 动态改变元素的样式。(以后讲 CSS 的时候会详细介绍)

简单示例如下:

<div style="display: none;">我是隐藏的区域,可以通过JS来切换显示</div>
<p style="width: 500px;">设置宽度为500px</p>

更多全局属性参考

另附 HTML 属性参考手册一份:HTML 属性参考

查看评论

推技术聊天室的实现(2)

发信人: luckyboy (海阔天空~将上网进行到底), 信区: Network  下面我们来看看具体实现流程:聊天服务器的实现  我们的服务器的核心部分是ThreadedChatHandle类,我...
  • wxyxl
  • wxyxl
  • 2001-05-05 01:23:00
  • 1464

html-html标记与属性速查表

  • 2008年11月06日 11:41
  • 70KB
  • 下载

DOM属性和HTML属性的区别

这两者之间的区别我之前可能不小心涉及过。参考这篇博客:http://blog.csdn.net/u014291497/article/details/50639628。 但是没有细致的了解之间的本质...
  • u014291497
  • u014291497
  • 2017-03-14 22:09:58
  • 530

HTML属性与DOM属性的区别

对于浏览器引擎而言,并不存在“HTML标签”这回事,其本质是DOM节点对象。也并不存在“HTML文档”这回事,其本质是DOM节点对象组成的文档树。浏览器引擎只是存储和渲染DOM节点对象。...
  • BonJean
  • BonJean
  • 2016-10-05 23:33:50
  • 1860

js控制HTML元素自身属性的使用

HTML元素有许多自身的属性,例如disabled、readonly、required、selected……这些属性我们可以直接在HTML元素中设置 也可以使用js设置HTML的自带属性。 js设置...
  • MOONCOM
  • MOONCOM
  • 2017-01-16 13:51:51
  • 743

jquery 添加或删除HTML属性

上面一组是正确的,下面是不正确的,但是在coding的时候,代码段自动补全功能会补成误导你的样子。 $('#nav-back-btn').attr('hidden', true); /...
  • worldzhy
  • worldzhy
  • 2016-04-14 22:59:39
  • 1587

909422229__HTML中DIV常用属性

div style常用属性 本人前台差一些,用到的时候可以进来查查看,方便以后的开发。 一、常用属性: 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。...
  • a909422229
  • a909422229
  • 2017-05-03 10:39:30
  • 505

HTML标签元素属性的概念

转载自:http://www.cnblogs.com/lovelq522/archive/2010/11/22/1884792.html 什么是HTML标签 HTML标签标记了HTML文档和HTM...
  • lvyuan30276
  • lvyuan30276
  • 2016-09-08 10:43:29
  • 666

HTML的title属性

HTML的title属性有两种情况使用到(暂时遇到的,可能还有别的情况,水平有限敬请见谅) 1,HTML的title属性,当光标移动到该标签时,信息提示框内的内容 属性选择器 ...
  • zxwd2015
  • zxwd2015
  • 2016-05-07 16:08:06
  • 4348

HTML之表格标签及属性

表格的标签属性及其应用实例
  • hxwm_8937
  • hxwm_8937
  • 2017-07-21 13:59:52
  • 738
    个人资料
    持之以恒
    等级:
    访问量: 9689
    积分: 492
    排名: 10万+
    博客专栏
    最新评论