扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇内容主要讲解“HTML标签和属性应用实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML标签和属性应用实例分析”吧!
成都创新互联公司10多年成都企业网站定制服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,成都企业网站定制及推广,对成都服务器托管等多个行业拥有丰富的网站营销经验的网站建设公司。
HTML的主体结构
HTML 页面的基本结构如下所示,其中包含了各种创建网页所需的标签(例如 doctype、html、head 和 body 等)。
Hello 这是我的第一个HTML页面
最顶部声明
声明是文档的第一成份,位于文档的最顶部。
该标签就是告诉浏览器所使用的 HTML 规范。
以开始,以
结束,中间包含头部标签及主体标签
HTML 标签的语法格式
一般情况下,一个 HTML 标签由开始标签、属性、内容和结束标签组成,标签的名称不区分大小写,但大多数属性的值需要区分大小写,如下所示:
属性 ↓创新互联
除了 class 属性外,开始标签中还可以包含其它属性信息,比如 id、title 等,这些我们会在后面进行讲解。
注意,虽然 HTML 标签在语法上不区分大小写,但是为了规范和专业,强烈建议在定义标签时一律采用小写。
当使用浏览器打开我们编写的 HTML 文档时,浏览器会从上到下依次读取文档中的内容,并根据 HTML 标签和属性将标签中的内容呈现在浏览器中。
一个 HTML 文档中必须具有一些基本的标签,以便浏览器区分普通文本和 HTML 文档。您可以根据想要实现的效果使用任意数量的标签,但有以下几点需要注意:
所有 HTML 标签都必须放在尖括号< >内;
HTML 中不同的标签可以实现不同的效果;
如果使用了某个标签,则必须使用对应的结束标签来结尾(自闭和标签除外)。
自闭和标签
有一些 HTML 标签没有单独的结束标签,而是在开始标签中添加/来进行闭合,这种标签称为自闭和标签。请看下面的例子:
自闭和标签不用包围内容,所以不需要单独的结束标签。只有少部分 HTML 标签是自闭和的。
表示 HTML 注释,用来对 HTML 代码进行说明,浏览器会忽略注释内容,所以用户在网页中看不到注释
HTML属性的概念和使用
什么是属性
属性可以为 HTML 标签提供一些额外信息,或者对 HTML 标签进行修饰。属性需要添加在开始标签中,语法格式为:
attr="value"
attr
表示属性名,value
表示属性值。属性值必须使用双引号""
或者单引号''
包围。
注意,虽然双引号和单引号都可以包围属性值,但是为了规范和专业,请尽量使用双引号。
一个标签可以没有属性,也可以有一个或者多个属性。
使用 HTML 属性的例子:
欢迎 Tom 来到创新互联。
专用属性
HTML 属性有很多,大体可以分为两类:
有些属性适用于大部分或者所有 HTML 标签,我们将这些属性称为通用属性;
有些属性只适用于一个或者几个特定的 HTML 标签,我们将这些属性称为专用属性。
HTML 中的 标签就有 src 和 alt 两个专用属性, 标签也有 href 和 target 两个专用属性,如下例所示:
创新互联
对代码的说明:
标签中的 src 属性用来定义图像的路径,alt 属性用来定义图像的描述信息,当图像出现异常无法正常显示时就会显示 alt 中的信息。
data-*
属性用于存储私有页面后应用的自定义数据,是 HTML5 新增的属性。
自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。
只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。
在标签里设置H5新增的自定义属性
这个data属性还可以应用在CSS中,前提是你的浏览器支持after伪类,以及content的attr属性(低版本的IE不支持):
data属性应用于CSS中
#myDiv{ position: ralative; } #myDiv:hover:after{ position: absolute; top: 0px; left: 0px; content: attr(data-attribute); color: red; }
在标签里设置H5新增的自定义属性
var myDiv = document.getElementById("myDiv"); var theValue = myDiv.getAttribute("user-defined-attribute");
var myDiv = document.getElementById("myDiv"); var theValue = myDiv.dataset.attribute;
在标签里设置多个自定义属性
var myDiv = document.getElementById("myDiv"); var attrs = myDiv.attributes, var expense = {}, i, j; for (i = 0, j = attrs.length; i < j; i++) { if(attrs[i].name.substring(0, 5) == 'data-') { expense[attrs[i].name.substring(5)] = attrs[i].value; } }
var expense = document.getElementById('myDiv').dataset;
注:dataset
并不是典型意义上的JavaScript对象,而是个DOMStringMap对象
,DOMStringMap
是HTML5一种新的含有多个名-值对的交互变量
var chartInput = []; for (var item in expense) { chartInput.push(expense[item]); }
delete myDiv.dataset.attribute;
myDiv.dataset.attribute4 = 'value4';
if(myDiv.dataset) { myDiv.dataset.attribute = "valueXX"; // 设置自定义属性 var theValue = myDiv.dataset.attribute; // 获取自定义属性 } else { myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性 var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性 }
使用dataset
操作data
要比使用getAttribute
速度稍微慢些,虽然使用dataset
不能提高代码的性能,但是对于简洁代码,提高代码的可读性和可维护性是很有帮助的。
HTML 标签中有一些通用的属性,如 id、title、class、style 等,这些通用属性可以在大多数 HTML 标签中使用,下面来简单介绍一下它们的用法。
id 属性用来赋予某个标签唯一的名称(标识符),当我们使用 CSS 或者 JavaScript 来操作这个标签时,就可以通过 id 属性来找到这个标签。
如果标签中带有 id 属性作为唯一标识符,通过 id 属性可以很方便的定位到该标签;
如果 HTML 文档中包含多个同名的标签,利用 id 属性的唯一性,可以很方便的区分它们。
注意:在一个 HTML 文档中 id 属性的值必须是唯一的。
创新互联https://www.cdcxhl.com/
创新互联
https://www.cdcxhl.com/
title 属性用来对标签内容进行描述说明,当鼠标移动到该标签上方时会显示出 title 属性的值,如下例所示:
演示文档 HTML教程
运行结果如下图所示:
将鼠标在链接处悬停片刻才能看到提示框。
4) style
使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式,例如设置文本的颜色、字体等,如下例所示:
演示文档 https://www.cdcxhl.com/
创新互联
标签中常用的标签
1、
欢迎来到创新互联
注释可以出现在 HTML 文档的任意位置,包括文档开头、文档末尾、文档中间、标签外部、标签内容中等。
到此,相信大家对“HTML标签和属性应用实例分析”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流