<!DOCTYPE html>

<html>

<head>

<script>

function showDetails(animal) {

    var animalType = animal.getAttribute("data-animal-type");

    alert("The " + animal.innerHTML + " is a " + animalType + ".");

}

</script>

</head>

<body>

<h1>Species</h1>

<p>Click on a species to see what type it is:</p>

<ul>

  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>

  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>

  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>

</ul>

<h2 onclick="showDetails(this)" data-animal-type="第2级标题的子标题">第2级标题</h2>

</body>

</html>

html 标签附加文本属性的更多相关文章

  1. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  2. jQuery-对标签元素 文本操作-属性操作-文档的操作

    一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...

  3. 关于html与css的标签及属性（text文本属性、背景background属性、表格标签table、列表、）

    text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...

  4. JAVAWEB开发之JSTL标签库的使用、 自己定义EL函数、自己定义标签（带属性的、带标签体的）

    JSTL  JSTL简单介绍: JSTL的全称:JSP Standard Tag Library,JSP标准标签库 JSTL的作用:   提供给Java Web开发者一个标准通用的标签函数库   和E ...

  5. css文本属性

    CSS1&2中的文本属性 属性 版本 简介 text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  6. HTML <input> 标签的 type 属性

    HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...

  7. Web前端新人笔记之文本属性

    前一段时间因工作时间减缓了更新笔记的时间.我也不知道有没有会观看并且能不能帮到一些初学者,这只是我的一些小随笔而已.当然我也希望的的每一篇随笔都可以帮到更多的想要学习前端开发的初学者们,更希望你们也可 ...

  8. HTML<label> 标签的 for 属性

    定义和用法 for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <l ...

  9. UIlabel - 富文本属性

    1.NSKernAttributeName: @10 调整字句 kerning 字句调整 2.NSFontAttributeName : [UIFont systemFontOfSize:_fontS ...

随机推荐

  1. MapReduce的编程思想(1)

    MapReduce的编程思想(1) MapReduce的过程(2) 1. MapReduce采用分而治之的思想,将数据处理拆分为主要的Map(映射)与Reduce(化简)两步,MapReduce操作数 ...

  2. IDEA安装及基本配置

    IDEA基本介绍 IntelliJ IDEA是JetBrains公司开发的一款开发Java的开发工具,简称IDEA,JetBrains公司还有其他几款优秀的开发工具. IDEA是一款收费软件,在财力允 ...

  3. CoordinatorLayout使用笔记

    CoordinatorLayout的使用笔记 首先第一个子控件是AppBarLayout存放首部控件,里面放了一个CollapsingToolbarLayout.代码如下: <android.s ...

  4. 【extjs6学习笔记】1.3 初始：根据模板创建项目

    使用sencha创建应用 命令说明:sencha -sdk /path/to/sdk generate app -s /your/templates/path/ MyApp /path/to/myap ...

  5. MySQL++简单使用记录.md

    #1.简介 MySQL++ is a powerful C++ wrapper for MySQL’s C API. Its purpose is to make working with queri ...

  6. Linux文件压缩命令

    一.zip命令(常用) 用zip命令压缩的文件在Windows系统下也是可以解压缩的,即此格式压缩文件两个系统通用. 文件压缩:zip  filename.zip   filename 目录压缩:zi ...

  7. python+selenium之中类/函数/模块的简单介绍和方法调用

    # coding=utf-8 class ClassA (object): string1 = "这是一个字符串." def instancefunc(self): print ( ...

  8. JavaScript_7_运算符

    1. 算术运算符 2. 赋值运算符 3. 用于字符串的+运算 如果把字符串与数字相加,结果将成为字符串 <!DOCTYPE html> <html> <head> ...

  9. last命令

    last——列出目前与过去登入系统的用户信息 命令所在路径:/usr/bin/last 示例1: $ last

  10. Codeforces Round #321 (Div. 2) C Kefa and Park（深搜）

    dfs一遍,维护当前连续遇到的喵的数量,然后剪枝,每个统计孩子数量判断是不是叶子结点. #include<bits/stdc++.h> using namespace std; ; int ...