HTML标签和属性应用实例分析

本篇内容主要讲解“HTML标签和属性应用实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML标签和属性应用实例分析”吧!HTML的主体结构HTML 页面的基本结构如下所示，其中包含了各种创建网页所需的标签（例如 doctype、html、head 和 body 等）。最顶部声明
声明是文档的第一成份，位于文档的最顶部。该标签就是告诉浏览器所使用的 HTML 规范。以开始，以结束，中间包含头部标签及主体标签HTML 标签的语法格式一般情况下，一个 HTML 标签由开始标签、属性、内容和结束标签组成，标签的名称不区分大小写，但大多数属性的值需要区分大小写，如下所示：除了 class 属性外，开始标签中还可以包含其它属性信息，比如 id、title 等，这些我们会在后面进行讲解。注意，虽然 HTML 标签在语法上不区分大小写，但是为了规范和专业，强烈建议在定义标签时一律采用小写。当使用浏览器打开我们编写的 HTML 文档时，浏览器会从上到下依次读取文档中的内容，并根据 HTML 标签和属性将标签中的内容呈现在浏览器中。一个 HTML 文档中必须具有一些基本的标签，以便浏览器区分普通文本和 HTML 文档。您可以根据想要实现的效果使用任意数量的标签，但有以下几点需要注意：所有 HTML 标签都必须放在尖括号内；HTML 中不同的标签可以实现不同的效果；如果使用了某个标签，则必须使用对应的结束标签来结尾（自闭和标签除外）。自闭和标签有一些 HTML 标签没有单独的结束标签，而是在开始标签中添加/来进行闭合，这种标签称为自闭和标签。请看下面的例子：自闭和标签不用包围内容，所以不需要单独的结束标签。只有少部分 HTML 标签是自闭和的。 表示 HTML 注释，用来对 HTML 代码进行说明，浏览器会忽略注释内容，所以用户在网页中看不到注释HTML属性的概念和使用什么是属性属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：attr 表示属性名，value 表示属性值。属性值必须使用双引号""或者单引号''包围。注意，虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号。一个标签可以没有属性，也可以有一个或者多个属性。使用 HTML 属性的例子：
欢迎Tom来到云技术。
专用属性HTML 属性有很多，大体可以分为两类：有些属性适用于大部分或者所有 HTML 标签，我们将这些属性称为通用属性；有些属性只适用于一个或者几个特定的 HTML 标签，我们将这些属性称为专用属性。HTML 中的 标签就有 src 和 alt 两个专用属性， 标签也有 href 和 target 两个专用属性，如下例所示：对代码的说明： 标签中的 src 属性用来定义图像的路径，alt 属性用来定义图像的描述信息，当图像出现异常无法正常显示时就会显示 alt 中的信息。 标签的 href 属性用来定义链接的地址，target 属性用来定义新页面在浏览器中的打开方式。自定义属性除了自带的属性，HTML 也允许我们自定义属性，这些属性虽然可以被浏览器识别，但是并不会添加什么特殊效果，我们需要借助 CSS 和 JavaScript 处理自定义属性，为 HTML 标签添加指定样式或者行为。data-* 属性用于存储私有页面后应用的自定义数据，是 HTML5 新增的属性。somevalue：指定属性值 (一个字符串)data-* 属性可以在所有的 HTML 元素中嵌入数据。自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。data-* 属性由以下两部分组成：属性名不要包含大写字母，在 data- 后必须至少有一个字符。属性值，该属性值可以是任何字符串注意： 自定义属性前缀 “data-” 会被客户端忽略。利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。这个data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：如何获取data属性的值？1、使用getAttribute来获取2、使用Html5自定义属性对象Dataset来获取注意：带连字符连接的名称免费云主机、域名在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如data属性为data-other-attribute，则我们要获取相应的值可以使用：myp.dataset.otherAttribute如果Html元素定义了多个自定义属性，如何获取？1、使用循环遍历2、使用dataset属性注：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量1）、让所有的自定义的属性值塞到一个数组中2）、删掉一个data属性3、增加一个data属性dataset的兼容性处理如果浏览器不支持dataset，有必要做一下兼容处理：结语：使用dataset操作data 要比使用getAttribute速度稍微慢些，虽然使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的。通用属性介绍HTML 标签中有一些通用的属性，如 id、title、class、style 等，这些通用属性可以在大多数 HTML 标签中使用，下面来简单介绍一下它们的用法。1) idid 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。为标签定义 id 属性可以给我们提供很多便利，比如：如果标签中带有 id 属性作为唯一标识符，通过 id 属性可以很方便的定位到该标签；如果 HTML 文档中包含多个同名的标签，利用 id 属性的唯一性，可以很方便的区分它们。注意：在一个 HTML 文档中 id 属性的值必须是唯一的。示例代码如下所示：https://www.byun.com/2) class与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值，如下所示：云技术当使用 CSS 或者 JavaScript 来操作 HTML 标签时，同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的，所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中。3) titletitle 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值，如下例所示：运行结果如下图所示：将鼠标在链接处悬停片刻才能看到提示框。4) style使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等，如下例所示：https://www.byun.com/标签中常用的标签1、2、 标签 标签用于为页面中所有相对链接指定一个基本链接，当您设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀，如下例所示：3、 标签 标签经常用于引用外部 CSS 样式表， 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：4、

使用

5、 标签 标签用于提供有关 HTML 文档的元数据，例如页面有效期、页面作者、关键字列表、页面描述等信息。 标签定义的数据并不会显示在页面上，但却会被浏览器解析。6、7、当用户的浏览器不支持 JavaScript 脚本或者禁用 JavaScript 脚本时，可以在 欢迎来到云技术注释可以出现在 HTML 文档的任意位置，包括文档开头、文档末尾、文档中间、标签外部、标签内容中等。到此，相信大家对“HTML标签和属性应用实例分析”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: CSS如何实现图片渐隐消

这篇文章主要介绍了CSS如何实现图片渐隐消的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS如何实现图片渐隐消文章都会有所收获，下面我们一起来看看吧。 在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是…