标签：
HTML即超文本标记语言，htyper text markup language，指页面内可以包含图片、链接、音乐、程序等非文字元素的一种标签语言。当我们用浏览器打开url访问网页的时候，服务器就给我们返回的是一个HTML页面。即网页==HTML文档，由浏览器解析，用来展示。
超文本标记语言是标准通用标记语言下的一个应用，是一种规范，一种标准，通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）浏览器负责将标签翻译成更人性化的格式呈现给用户！
刚刚说到了网页即HTML文档，但是随着前端技术的发展，我们现在看到的那些花哨的网页除了用到HTML作为主干之外，还搭配着CSS和JS来应用。苑昊老师做了一个比喻来生动形象的诠释了HTML、CSS、JS三者之间的关系：
我们看网页就相当于是在看一场皮影戏，皮影戏的主要道具就是皮影，结合我们的技术知识，即HTML。然而好看的皮影需要上颜色吧， CSS就是负责给皮影上颜色用的，让皮影道具看起来更漂亮更生动形象。到这里，也仅仅是静态的画面，皮影戏之所以好看，是不是因为后面有人在提着那根线让其动起来呀，这里就用到了JS，让静态页面动起来。结合中国传统文化将HTML/CSS/JS三者之间的关系完美诠释，perfect！
一句话总结：HTML负责描述网页的结构和内容（如标题，导航栏等） CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。JS负责动态效果。
上面说过了，HTML语言是一种标签语言，那么我们下面就来从三个方面介绍下标签：
1、什么是标签？
1 标签是由一对尖括号包裹的单词构成，eg：<h1>，所有标签中的单词不可能以数字开头。 2 标签不区分大小写。eg：<html>和<HTML>，推荐使用小写。 3 标签分为两部分：开始标签<h1>和 结束标签</h1>。两个标签之间的部分，叫标签体。 4 有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭合标签。常见的自闭合标签有：<br/> <hr/> <input /> <img /> 5 标签可以嵌套，但不能交叉嵌套eg：正确嵌套：<p><select></select></p> 6 错误嵌套：<a><b></a></b>
2、标签的属性：
1 通常是以键值对形式出现的。eg：name=‘tina‘ 2 属性只能出现在开始标签或自闭合标签中 3 属性名字全部小写，属性值必须使用双引号或单引号包裹。eg：backgroud-color=‘pink‘ 4 如果属性值和属性名完全一样，直接写属性名即可。eg：readonly
3、常用的标签有哪些？
主干标签：
1 <head>和</head>之间的内容，是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息 2 <body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意 3 <html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>
头部标签：
<meta>标签提供HTML页面的元信息，比如：页面编码，刷新，跳转，针对搜索引擎和更新频率的描述和关键词等 <meta charset="UTF-8"> <meta http-equiv="refresh" content="5"> #指定每5秒刷新一次 <meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之后跳转页面至另一个网页 <title>etiantian</title>网页头部信息 <link rel="icon" href="http://www.jd.com/favicon.ico">网页头部图标 <style>导入CSS <script>导入JS
身体标签：
body标签就比较多了，这里大概做了几个分类： 1、基本标签 <hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 <div><span> 2、图形标签 <img> 其属性有： src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.) 3、超链接标签（锚标签） <a></a> 其属性有： href:要连接的资源路径 格式如下: href="http://www.baidu.com" target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容. name: 定义一个页面的书签. 用于跳转 href : #书签名称. eg：<a href="html2.html">第二章</a><br>#即设置一个链接，打开另一个页面 <a href="#123">跳下面</a><br>#即在当页面中另一处设置一个链接 4、列表标签 <ul>无序列表</ul> <ol>有序列表</ol><li>列表中的每一项</li> <dl>定义列表</dl><dt>列表标题</dt><dd>列表项</dd> 5、表格标签 <table></table> 其属性有： border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.（最好通过css来设置长宽） <tr>: table row <th>: table head cell <td>: table data cell rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格） <th>: table header <tbody>(不常用): 为表格进行分区. 6、表单标签 <from></from> 表单标签中又含有很多其他标签，下面会详细说明，这里只是简单介绍一下，做个铺垫。 表单用于向服务传输数据。 表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等 表单还可以包含textarea、select、fieldset和label元素
1、新建HTML页面的基本结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
2、头部标签的应用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="3;url=http://www.cnblogs.com/tina-python/"><!--设置3秒刷新并跳转到我的博客地址--> <meta name="keywords" content="博客，美女，HTML技术"><!--设置关键字，爬虫优先找到--> <meta name="description" content="这是一个测试页面"> <meta http-equiv="X-UA-COMPATIBLE" content="IE=EmulateIE7"><!--设置IE兼容性问题，X-UA-Compatible是IE8特有的，这里是使用IE8的时候以IE7的模式运行--> <title>菲菲的HTML页面处女作</title><!--给HTML页面起名字--> <link rel="icon" href="2.png"> <link rel="stylesheet" href="css/css_model.css"><!--导入CSS，类似python中的导入模块--> </head> <body> </body> </html>
浏览器中实现的页面效果：
3、身体标签的应用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="3;url=http://www.cnblogs.com/tina-python/"><!--设置3秒刷新并跳转到我的博客地址--> <meta name="keywords" content="博客，美女，HTML技术"><!--设置关键字，爬虫优先找到--> <meta name="description" content="这是一个测试页面"> <meta http-equiv="X-UA-COMPATIBLE" content="IE=EmulateIE7"><!--设置IE兼容性问题，X-UA-Compatible是IE8特有的，这里是使用IE8的时候以IE7的模式运行--> <title>菲菲的HTML页面处女作</title><!--给HTML页面起名字--> <link rel="icon" href="2.png"> <link rel="stylesheet" href="css/css_model.css"><!--导入CSS，类似python中的导入模块--> </head> <body> <h1>hello world!</h1> <h2 style="color: pink">I am tina</h2> <a style="background-color: aquamarine;color: azure">tina</a> <p>这里是一个段落标签</p> <strike>strike小练习划掉</strike> <br> <b>这里加粗</b><br> <strong>这里也加粗</strong><br> 正常<em>变斜体</em><br> <a href="html2.html">第二章</a><br> <a href="#123">跳下面</a><br> <div style="width: 1000px;height: 1000px;background-color: aqua"></div> <h1 id="123">123</h1> <img src="1.png" alt="丢了" title="悬浮" width="1000px" height="2000px"/> </body> </html>
4、列表和表格标签的应用：
5、表单标签的应用：
标签：
原文地址：http://www.cnblogs.com/tina-python/p/5613831.html
