作为一个前端，相信大家最先接触应该都是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. Android 自定义对话框使用静态Handler传递参数

    JsdMainDialog.java package com.jsd.demo; import android.app.Activity; import android.content.Context ...

  2. 配置MySQL使用HugePages

    前言:对于有Oracle运维经验的童鞋来说,如果服务器内存很大,一般都会设置HugePages,是因为如下原因:对于 Linux 操作系统,通过 Linux kswapd 进程和页表内存结构(针对系统 ...

  3. ADT中的代码补全设置

    设置自动补全代码 刚刚学Android,有很多变量和方法 都不熟悉.需要有提示,才更加方便. 快捷方式:Alt + /    可以出现代码提示. 默认的只有输入“ .” 以后才会有代码补全提示,可作如 ...

  4. struts采用JavaServlet/JSP技术，实现了基于Java EEWeb应用的MVC设计模式的应用框架

    今天我用Ecipse搭建Struts框架,并且使用Struts框架编写一个最简单的例子,相信读者能够很容易的明白. Struts是当今Java比较流行的三大框架之一,三大框架是Struts,sprin ...

  5. 1022. Genealogical Tree（topo)

    1022 简单拓扑 不能直接dfs 可能有不联通的 #include <iostream> #include<cstdio> #include<cstring> # ...

  6. 1521. War Games 2(线段树解约瑟夫）

    1521 根据区间和 来确定第k个数在哪 #include <iostream> #include<cstdio> #include<cstring> #inclu ...

  7. 1471. Tree(LCA)

    1471 先学习了下tarjan算法的LCA 离线算法 它是先知道询问的结点对 在遍历的时候就已经算出来了 看篇图解 讲的很清楚 #include <iostream> #include& ...

  8. [swustoj 1092] 二分查找的最大次数

    二分查找的最大次数(1092) 问题描述 这里是一个在排序好的数组A(从小到大)中查找整数X的函数,返回值是查找次数. int binarySearch(inta[],int n,int x)//数组 ...

  9. ShopNc商城修改详情

    1. 修改400电话.(400.png) a.位置:在页面顶部搜索的后面. b.修改文件: t/layout/home_layout.php 增标签 <img border=0 src=&quo ...

  10. 多线程程序设计学习（10）Future pattern

    Future pattern[订单取货模式] 一:Future pattern的参与者--->Client(客户需求)--->Host(蛋糕门店)--->Data(票据和蛋糕的接口) ...