您好,登录后才能下订单哦!
本篇内容主要讲解“HTML标签和属性应用实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML标签和属性应用实例分析”吧!
HTML的主体结构
HTML 页面的基本结构如下所示,其中包含了各种创建网页所需的标签(例如 doctype、html、head 和 body 等)。
<!--这是html的注释信息--> <!DOCTYPE html> <!--这是DOCTYPE声明--> <html> <!--这是根--> <head> <!--这是头--> <meta charset = "UTF-8"> <!-- 描述性标签 --> <title>Hello</title> <!--标题栏--> </head> <body> <!--网页体--> <!--这里的内容显示到网页上--> 这是我的第一个HTML页面 </body> </html>
最顶部声明<!DOCTYPE html>
声明是文档的第一成份,位于文档的最顶部。
该标签就是告诉浏览器所使用的 HTML 规范。
以<html>
开始,以</html>
结束,中间包含头部标签及主体标签
HTML 标签的语法格式
一般情况下,一个 HTML 标签由开始标签、属性、内容和结束标签组成,标签的名称不区分大小写,但大多数属性的值需要区分大小写,如下所示:
属性 ↓ <div class="foo">亿速云</div> ↑ ↑ ↑ 开始标签 内容 结束标签
除了 class 属性外,开始标签中还可以包含其它属性信息,比如 id、title 等,这些我们会在后面进行讲解。
注意,虽然 HTML 标签在语法上不区分大小写,但是为了规范和专业,强烈建议在定义标签时一律采用小写。
当使用浏览器打开我们编写的 HTML 文档时,浏览器会从上到下依次读取文档中的内容,并根据 HTML 标签和属性将标签中的内容呈现在浏览器中。
一个 HTML 文档中必须具有一些基本的标签,以便浏览器区分普通文本和 HTML 文档。您可以根据想要实现的效果使用任意数量的标签,但有以下几点需要注意:
所有 HTML 标签都必须放在尖括号< >内;
HTML 中不同的标签可以实现不同的效果;
如果使用了某个标签,则必须使用对应的结束标签来结尾(自闭和标签除外)。
自闭和标签
有一些 HTML 标签没有单独的结束标签,而是在开始标签中添加/来进行闭合,这种标签称为自闭和标签。请看下面的例子:
<img src="./logo.png" alt="C语言中文网Logo" /> <!-- 图像 --> <hr /> <!-- 分割线 --> <br /> <!-- 文本换行 --> <input type="text" placeholder="请输入内容" /> <!-- 文本输入框 -->
自闭和标签不用包围内容,所以不需要单独的结束标签。只有少部分 HTML 标签是自闭和的。
<!-- --> 表示 HTML 注释,用来对 HTML 代码进行说明,浏览器会忽略注释内容,所以用户在网页中看不到注释
HTML属性的概念和使用
什么是属性
属性可以为 HTML 标签提供一些额外信息,或者对 HTML 标签进行修饰。属性需要添加在开始标签中,语法格式为:
attr="value"
attr
表示属性名,value
表示属性值。属性值必须使用双引号""
或者单引号''
包围。
注意,虽然双引号和单引号都可以包围属性值,但是为了规范和专业,请尽量使用双引号。
一个标签可以没有属性,也可以有一个或者多个属性。
使用 HTML 属性的例子:
<p id="user-info" class="color-red"> 欢迎 <font color="red" size="3">Tom</font> 来到亿速云。 <p>
专用属性
HTML 属性有很多,大体可以分为两类:
有些属性适用于大部分或者所有 HTML 标签,我们将这些属性称为通用属性;
有些属性只适用于一个或者几个特定的 HTML 标签,我们将这些属性称为专用属性。
HTML 中的 <img> 标签就有 src 和 alt 两个专用属性,<a> 标签也有 href 和 target 两个专用属性,如下例所示:
<img src="./logo.png" alt="亿速云Logo" width="100" height="50"> <a href="http://c.biancheng.net/" target="_blank">亿速云</a>
对代码的说明:
<img> 标签中的 src 属性用来定义图像的路径,alt 属性用来定义图像的描述信息,当图像出现异常无法正常显示时就会显示 alt 中的信息。
<a> 标签的 href 属性用来定义链接的地址,target 属性用来定义新页面在浏览器中的打开方式。
自定义属性
除了自带的属性,HTML 也允许我们自定义属性,这些属性虽然可以被浏览器识别,但是并不会添加什么特殊效果,我们需要借助 CSS 和 JavaScript 处理自定义属性,为 HTML 标签添加指定样式或者行为。
data-*
属性用于存储私有页面后应用的自定义数据,是 HTML5 新增的属性。
<element data-*="somevalue">
somevalue:指定属性值 (一个字符串)
data-*
属性可以在所有的 HTML 元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。
data-*
属性由以下两部分组成:
属性名不要包含大写字母,在 data- 后必须至少有一个字符。
属性值,该属性值可以是任何字符串
注意: 自定义属性前缀 "data-" 会被客户端忽略。
利用dataset可以获取data-属性构造的对象,该方法目前只能在Chrome 、Opera等部分浏览器中实现,其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。
只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。
<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
这个data属性还可以应用在CSS中,前提是你的浏览器支持after伪类,以及content的attr属性(低版本的IE不支持):
<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>
#myDiv{ position: ralative; } #myDiv:hover:after{ position: absolute; top: 0px; left: 0px; content: attr(data-attribute); color: red; }
如何获取data属性的值?
<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
1、使用getAttribute来获取
var myDiv = document.getElementById("myDiv"); var theValue = myDiv.getAttribute("user-defined-attribute");
2、使用Html5自定义属性对象Dataset来获取
var myDiv = document.getElementById("myDiv"); var theValue = myDiv.dataset.attribute;
注意:带连字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类似,dom.style.borderColor
。例如data属性为data-other-attribute
,则我们要获取相应的值可以使用:myp.dataset.otherAttribute
如果Html元素定义了多个自定义属性,如何获取?
<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>
1、使用循环遍历
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; } }
2、使用dataset
属性
var expense = document.getElementById('myDiv').dataset;
注:dataset
并不是典型意义上的JavaScript对象,而是个DOMStringMap对象
,DOMStringMap
是HTML5一种新的含有多个名-值对的交互变量
1)、让所有的自定义的属性值塞到一个数组中
var chartInput = []; for (var item in expense) { chartInput.push(expense[item]); }
2)、删掉一个data属性
delete myDiv.dataset.attribute;
3、增加一个data属性
myDiv.dataset.attribute4 = 'value4';
dataset的兼容性处理
如果浏览器不支持dataset,有必要做一下兼容处理:
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 标签中使用,下面来简单介绍一下它们的用法。
1) id
id 属性用来赋予某个标签唯一的名称(标识符),当我们使用 CSS 或者 JavaScript 来操作这个标签时,就可以通过 id 属性来找到这个标签。
为标签定义 id 属性可以给我们提供很多便利,比如:
如果标签中带有 id 属性作为唯一标识符,通过 id 属性可以很方便的定位到该标签;
如果 HTML 文档中包含多个同名的标签,利用 id 属性的唯一性,可以很方便的区分它们。
注意:在一个 HTML 文档中 id 属性的值必须是唯一的。
示例代码如下所示:
<input type="text" id="username" /> <div id="content">亿速云</div> <p id="url">https://www.yisu.com/</p>
2) class
与 id 属性类似,class 属性也可以为标签定义名称(标识符),不同的是 class 属性在整个 HTML 文档中不必是唯一的,我们可以为多个标签定义相同的 class 属性值。另外,还可以为一个 HTML 标签定义多个 class 属性值,如下所示:
<div class="className1 className2 className3"></div> <p>亿速云</p> <div>https://www.yisu.com/</div>
当使用 CSS 或者 JavaScript 来操作 HTML 标签时,同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的,所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中。
3) title
title 属性用来对标签内容进行描述说明,当鼠标移动到该标签上方时会显示出 title 属性的值,如下例所示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示文档</title> </head> <body> <a href="https://www.yisu.com/" title="HTML教程">HTML教程</a> </body> </html>
运行结果如下图所示:
将鼠标在链接处悬停片刻才能看到提示框。
4) style
使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式,例如设置文本的颜色、字体等,如下例所示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示文档</title> </head> <body> <p style="color:red;">https://www.yisu.com/</p> <img src="./logo.png" style="height:50px;" alt="亿速云LOGO"> <div style="padding:10px;border:2px solid #999;text-align:center;">亿速云</div> </body> </html>
<head>标签中常用的标签
1、<title> 标签
<title> 标签用来定义 HTML 文档的标题,只有包含 <title> 标签的文档才算是一个有效的 HTML 文档。另外,一个 HTML 文档中仅允许存在一个 <title> 标签,并且 <title> 标签必须放置在 <head> 标签中。
2、<base> 标签
<base> 标签用于为页面中所有相对链接指定一个基本链接,当您设置了基本链接后,当前页面中的所有相对链接都会使用这个基本链接作为前缀,如下例所示:
3、<link> 标签
<link> 标签经常用于引用外部 CSS 样式表,<link> 标签中包含两个主要的属性,分别是 rel 和 href。rel 属性用来指示引用文件的类型,href 属性用来设置外部文件的路径。示例代码如下:
<link rel="stylesheet" href="common.css">
4、<style>标签
使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式,需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下:
<style> body { background-color: YellowGreen; } h2 { color: red; } </style>
5、<meta> 标签
<meta> 标签用于提供有关 HTML 文档的元数据,例如页面有效期、页面作者、关键字列表、页面描述等信息。<meta> 标签定义的数据并不会显示在页面上,但却会被浏览器解析。
6、<script> 标签
<script> 标签用于定义 JavaScript 脚本,示例代码如下:
<script> document.write("亿速云") </script>
7、<noscript> 标签
当用户的浏览器不支持 JavaScript 脚本或者禁用 JavaScript 脚本时,可以在 <noscript> 标签中定义一些内容来替代不能运行的 JavaScript 脚本或者给用户一些提示。除了 <script> 标签外,在 <noscript> 标签中可以包含任何 HTML 元素
HTML注释标签<!-- -->
在 HTML 中您可以使用<!-- -->
在代码中添加注释,<!--
和-->
之间的所有内容都会被视为注释。示例代码如下:
<!DOCTYPE html> <html> <!-- head 开始 --> <head> <meta charset="UTF-8"> <!-- 当前文档采用UTF-8编码 --> <title>HTML注释的写法</title> </head> <!-- head 结束 --> <!-- body 开始 --> <body> <!-- 一段文本 --> <p>欢迎来到亿速云</p> </body> <!-- body 结束 --> </html>
注释可以出现在 HTML 文档的任意位置,包括文档开头、文档末尾、文档中间、标签外部、标签内容中等。
到此,相信大家对“HTML标签和属性应用实例分析”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。