html的常见属性,html5标签及属性的语法规则

　　正如HTML5语法中所解释的，元素可以包含属性来设置元素的各种属性。

　　一些属性被定义为全局的，可以在任何元素上使用，而另一些属性被定义为特定于元素的。的所有属性都有一个名称和值，如下例所示。

　　下面是一个使用HTML5属性的示例，它演示了如何用名为class的属性和值“example”来标记div元素：

　　div class=示例./div

　　属性只能在开始标记中指定，不能在结束标记中使用。

　　5 HTML5属性不区分大小写，可以全部大写或混合，尽管最常见的约定是始终使用小写。

　　标准属性几乎所有HTML5标签都支持下列属性。

　　属性 选项 功能 访问键用户定义的用于访问元素的键盘快捷键。右对齐、左对齐、居中水平对齐标签。背景URL在元素后面设置背景图像。Bgcolor值，十六进制值，RGB值设置元素后的背景色。用户定义的类。对元素进行分类，以便于使用级联样式表。Contenteditable true，false定义用户是否可以编辑元素的内容。ContextMenuId定义元素的上下文菜单。用户定义数据-XXXX。自定义属性。HTML文档的作者可以定义自己的属性。自定义属性必须以“data-”开头。Draggable true，false，auto定义用户是否可以拖动元素。高度数值定义表格、图像或表格单元格的高度。Hidden hidden定义元素是否应该可见。用户定义的Id。命名元素，以便于使用级联样式表。项目元素列表。用于组合元素。Itemprop条目列表。用于合并条目。Spellcheck true，false定义元素是否必须进行拼写或错误检查。样式CSS样式表。定义元素的内联样式。主题用户定义的id。定义与元素关联的条目。索引标签号由元素的标签顺序决定。用户定义的标题。元素的“弹出”标题。valign上、中、下HTML元素中标记的垂直对齐方式。宽度数字值。定义表格、图像和表格单元格的宽度。

　　010-5900HTML5还引入了一个新功能，就是可以添加自定义数据属性。

　　自定义数据属性以数据开始，并根据我们的要求命名。这里有一个简单的例子：

　　div class=example 数据主题=物理数据级别=复杂

　　.

　　/div

　　上例中名为data-subject和data-level的两个自定义属性在HTML5中完全有效。我们也可以使用JavaScript API或以类似的方式在CSS中获取它们的值来获取标准属性。

　　向HTML元素添加自定义属性，并通过JavaScript访问它们。如果你之前尝试过，你会发现很容易忽略标签验证，而HTML5可以为你提供在有效网页内创建和使用自己的元素属性的功能。

　　创建HTML5文件：

　　如果还没想好用哪一个，可以复制下面的代码：

　　XML/HTML代码将内容复制到剪贴板！doctype html html head script/* functions here *//script/head body/body/html

　　在主体中设置自定义元素，通过head部分脚本区域的JavaScript元素访问。

　　创建元素：

　　首先，添加一些简单的内容和自定义属性以及ID等元素，以便我们可以识别JavaScript示例。

　　XML/HTML代码将内容复制到剪贴板divid= product 1 data-product-category= clothing 棉衬衫/div

　　正如您所看到的，自定义属性的形式是“data-*”，名称是在“data-”部分中设置的，或者是您选择的名称。在HTML5中使用自定义属性是唯一有效的方法。因此，只有在想要验证网页的有效性时，才能使用这种方法。

　　当然，项目的细节决定了自定义属性对你是否有用，以及如何命名。这个例子可以适用于不同产品类别的零售网站。

　　自定义属性允许您在页面中使用JavaScript代码以特殊方式设置元素，例如，动画显示功能。如果没有标准的HTML元素，我们建议使用自定义属性。

　　添加测试按钮

　　只要将以下代码添加到页面中，就可以通过在页面上使用事件自己的JavaScript元素来执行事件：

　　XML/HTML代码将内容复制到剪贴板input type= button value= get attribute onclick= getelementattribute( product 1 )/

　　获取属性：

　　在JavaScript中访问属性最常见的方法是使用“getAttributes”，这是我们必须采取的第一步。在页面的标题脚本区域添加以下函数：

　　代码将内容复制到剪贴板函数getelementattribute(ElemID){ varthe element=document . getelementbyid(ElemID)；varthe attribute=the element . get attribute( data-product-category )；alert(the attribute)；}这里，我们已经将警报值添加到示例中。当然，你也可以根据自己的需要，在剧本中加入。

　　获取数据：

　　可以用元素数据集代替DOM“get attributes”，这样可能更有效，特别是在某些情况下，代码迭代多个属性。但是浏览器对数据集的支持还是很低的，所以要记住这一点，这段代码可以执行和//后面的方法一样的过程。

　　//var the attribute=the element . get attribute( data-product-category )；

　　var the attribute=the element . dataset . product category；

　　从属性名开始的数据集中删除“data-”，它仍然包含在HTML中。

　　请注意，如果您的自定义属性名称中有连字符，那么在通过数据访问时，它将采用camel-case的形式，即(“数据-产品-类别”变为“产品类别”)。

　　其他模块、功能

　　我们获得了这个属性，脚本仍然可以设置和删除。下面的代码演示了如何使用标准JavaScript模块和数据集设置属性。

　　代码将内容复制到剪贴板//DOM method the element . set attribute( data-product-category ， sale )；//dataset version the element . dataset . product category= sale ；您还可以使用DOM方法或数据集来删除属性：//DOM方法element . remove attribute( data-product-category )；//dataset version the element . dataset . product category=null；在HTML5中实现自定义属性在技术上并不是很复杂，但真正的难点是所用的方法是否适合你的项目。如果有，如何才能让它更有效？记住，现在启用dataset方法作为页面功能还为时过早，毕竟很多浏览器暂时不支持这个功能。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。