作为一个前端，相信大家最先接触应该都是HTML吧？在HTML中很多人可能都没有把什么叫标签，什么叫元素这个概念搞清楚，为了把这个大家不曾留意的易混淆的搞清楚，特作此一文彻底解决掉这个问题！

　　首先我们来看概念

　　1.标签

  1. 由尖括号包围的关键词，比如 <html>
  2. 通常是成对出现的，比如 <div> 和 </div>
  3. 标签对中的第一个标签是开始标签，第二个标签是结束标签；
  4. 开始和结束标签也被称为开放标签和闭合标签。
  5. 也有单独呈现的标签，如：<img src="百度百科.jpg" />等。
  6. 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如<h1>标题</h1>和 <input type="text" value="按钮" />。
  7. 网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。

　　2.元素

　　1.HTML 元素以开始标签起始

　　2.HTML 元素以结束标签终止

　　3.元素的内容是开始标签与结束标签之间的内容

　　4.某些 HTML 元素具有空内容（empty content）

　　5.空元素在开始标签中进行关闭（以开始标签的结束而结束）

　　6.大多数 HTML 元素可拥有属性

　　通过对比我们可以清楚的了解到，HTML标签是超文本标记语言的最基本单位，而HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。标签不区分大小写，但是官方建议小写。

　　现在超文本标记语言发布第五个版本。那就是大名鼎鼎的HTML5.顺便吐槽一句，现在许多外行，包括部分脑残码农，张口闭口就是你们做h5的怎么怎么滴，在此我只想大喊一声：“我们是前端工程师，Front End Engineer！！！我们会的不仅仅是HTML ! OK？”

HTML中标签和元素的区别的更多相关文章

  1. css中伪类与伪元素的区别

    一:伪类:1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为伪 ...

  2. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

  3. html中内联元素和块级元素的区别

    1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别 块级元素 行内元素 独占一行,默认情况下,其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里,直到一行排不下,才 ...

  4. （实用篇）PHP中unset,array_splice删除数组中元素的区别

    php中删除数组元素是非常的简单的,但有时删除数组需要对索引进行一些排序要求我们会使用到相关的函数,这里我们来介绍使用unset,array_splice删除数组中的元素区别吧 如果要在某个数组中删除 ...

  5. PHP中unset,array_splice删除数组中元素的区别

    php中删除数组元素是非常的简单的,但有时删除数组需要对索引进行一些排序要求我们会使用到相关的函数,这里我们来介绍使用unset,array_splice删除数组中的元素区别吧 如果要在某个数组中删除 ...

  6. spring bean中的properties元素内的ref和value的区别；* 和 ** 的区别

    spring bean中的properties元素内的ref和value的区别 至于使用哪个是依据你所用的属性类型决定的. <bean id="sqlSessionFactory&qu ...

  7. delete 和 splice 删除数组中元素的区别

    delete 和 splice 删除数组中元素的区别 ` var arr1 = ["a","b","c","d"]; d ...

  8. HTML中行内元素与块级元素的区别：

    HTML中行内元素与块级元素的区别:在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关:④它可以 ...

  9. jsp中两种include的区别【转】

    引用文章:http://www.ibm.com/developerworks/cn/java/j-jsp04293/ http://www.cnblogs.com/lazycoding/archive ...

随机推荐

  1. Tiny4412汇编流水灯代码，Tiny4412裸机LED操作[1]

    从今天开始就正式进入到tiny4412的开发学习中了,今天主要看了一下Tiny4412的启动流程及存储器映射及Exynos4412数据手册,用汇编写了一个跑马灯程序(后续会有C语言版本的出来),先说一 ...

  2. FTPClient 工具类

    package com.photoann.core.util; import java.io.BufferedInputStream; import java.io.File; import java ...

  3. python sort()和sorted()方法

    直接上代码: list_a=['a','c','z','E','T','C','b','A','Good','Tack'] list_b=['a','c','z','E','T','C','b','A ...

  4. .woff 文件404，配置到web.config

    <staticContent>        <remove fileExtension=".woff" />        <mimeMap fil ...

  5. WindowsPhone8SDK重装后设计器加载异常的处理办法

    Close all running instances of Visual Studio 2012 start cmd.exe (as admin/elevated) cd /d %windir%\i ...

  6. Linux中的文件特殊权限

    linux中除了常见的读(r).写(w).执行(x)权限以外,还有3个特殊的权限,分别是setuid.setgid和stick bit 1.setuid.setgid 先看个实例,查看你的/usr/b ...

  7. 【转】 当程序崩溃的时候怎么办 Part-2

    转自:http://www.tairan.com/archives/1143 欢迎回到当程序崩溃的时候怎么办 教程! 在这个教程的第一部分,我们介绍了SIGABRT和EXC_BAD_ACCESS错误, ...

  8. (七)学习MVC之CodeFirst迁移更新数据库

    1.首先在程序包管理控制台输入:enable-migrations -force ,然后回车: 问题1: The EntityFramework package is not installed on ...

  9. WCF：为 SharePoint 2010 Business Connectivity Services 构建 WCF Web 服务（第 1 部分，共 4 部分）

    转:http://msdn.microsoft.com/zh-cn/library/gg318615.aspx 摘要:通过此系列文章(共四部分)了解如何在 Microsoft SharePoint F ...

  10. Linux nc命令详解

    NetCat,在网络工具中有“瑞士军刀”美誉,其有Windows和Linux的版本.因为它短小精悍(1.84版本也不过25k,旧版本或缩减版甚至更小).功能实用,被设计为一个简单.可靠的网络工具,可通 ...