编程笔记 html5&css&js 010 HTML全局属性

简介: 编程笔记 html5&css&js 010 HTML全局属性

HTML5常用的全局属性

是指可以应用于所有HTML元素的属性。以下是HTML5常用的全局属性及其用法:

  1. class:为元素设置一个或多个类名,用于样式化或脚本操作。
    示例:<div class="container">
  2. id:为元素设置一个唯一的标识符,通常用于通过JavaScript或CSS选择特定的元素。
    示例:<p id="intro">
  3. style:用于为元素设置行内样式。
    示例:<h2 style="color: blue;">Hello World!</h2>
  4. title:为元素设置一个额外的信息,当鼠标悬停在元素上时显示。
    示例:<img src="image.jpg" alt="Image" title="This is an image">
  5. lang:指定元素的语言。
    示例:<html lang="en">
  6. tabindex:指定元素在通过键盘导航时的顺序。
    示例:<input type="text" tabindex="1">
  7. accesskey:定义一个快捷键来激活元素。
    示例:<button accesskey="b">
  8. contenteditable:指定元素是否可编辑。
    示例:<div contenteditable="true">
  9. draggable:指定元素是否可拖动。
    示例:<img src="image.jpg" draggable="true">
  10. hidden:隐藏元素。
    示例:<p hidden>
  11. role:指定元素的角色。
    示例:<div role="navigation">
  12. data-*:自定义属性,用于存储元素相关的数据。
    示例:<div data-id="123">

这些全局属性可以应用于任何HTML元素,并且具有不同的用途。您可以根据您的需要使用这些属性来增强您的网页。

操作

本节操作将其他节中涉及到时练习。

学习方法

按每个属性名称,网上搜索使用方法,并写入自己的练习网页中。

相关文章
|
28天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
56 7
|
28天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
36 6
|
28天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
41 5
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
142 1
|
3月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
58 0
|
7月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
56 0
JS+CSS3点击粒子烟花动画js特效
|
前端开发 JavaScript
js css 悬浮动画字体
js css 悬浮动画字体
|
Web App开发 前端开发 JavaScript
孤陋寡闻了,才知道已经可以用 JS 来控制 CSS 动画了
最近翻 MDN 突然发现一套叫 Web Animations API 的东东,点进去看才知道,原来是一套控制 css animation 的 API,而且已经有段时间了 🤦‍♂️,而我居然一直不知道。
|
JavaScript 前端开发 索引
|
JavaScript 前端开发
原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能;   传统的js 可以通过回调函数判断动画是否结束;即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件;   transitionend事...
1339 0