知识内容:
1.标签
2.head内标签
3.body内常用标签
注：本人使用的HTML为HTML5
一、标签
1.标签格式
标签的语法：
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
2.自闭合标签与主动闭合标签
<meta charset="UTF-8"> (自闭合标签)
<title>标题</title> (主动闭合标签)
注: 建议自闭和标签后面加上一个/ eg: <br/>
3.块级标签与行内标签
本质区别: 是否独占一行
块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距） -> 一个直接占一行
行内(内联)标签： span（白板）-> 里面的内容多大就占多大
4.嵌套规则
标签之间可以进行嵌套，但是行内(内联)的不能嵌套块级，p标签不能套块级标签
二、head内标签
1.DOCTYPE标签
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范
1 <!--html5标准--> 2 <!DOCTYPE html>
2.meta标签 -> 编码，跳转，刷新，关键字，描述，IE兼容
Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1 页面编码（告诉浏览器是什么编码） 2 < meta http-equiv=“content-type” content=“text/html;charset=utf-8”> 3 刷新和跳转 4 < meta http-equiv=“Refresh” Content=“30″> 5 < meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ /> # 5秒后跳转到指定网址 6 关键词 7 < meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
3.title标签 -> 网页的标题
title标签中的内容是显示在浏览器网页上的标题
1 <title>这是网页标题<title/>
4.link标签 -> 引入css文件或者图标文件
1 引入css: 2 < link rel="stylesheet" type="text/css" href="css/common.css" > 3 引入图标icon: 4 < link rel="shortcut icon" href="image/favicon.ico">
5.style标签 -> 写css代码
注: style标签一般放在head标签中(即HTML的头部)
1 < style type="text/css" > 2 .bb{ 3 background-color: red; 4 } 5 < /style>
6.script标签 -> 写JavaScript或引入JavaScript
1 引进文件 2 < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script > 3 4 写js代码 5 < script type="text/javascript" > ... </script >
具体情况在后面的JavaScript中会详细介绍
7.base标签
base标签可以为页面的所有链接规定默认地址或默认目标，base标签中的href属性指定基本url，和其他标签中的链接连接在一起组成最后的url
1 <!--指定基本链接: www.ccc.com--> 2 <base href="www.ccc.com/i/"> 3 4 <!--最后的链接是: www.ccc.com/i/1.gif--> 5 <img src="1.gif">
注：在一个文档中最多使用一个base标签！建议把base标签放在head标签的最开始处
三、body内常用标签
1.标签分类:
标签一般分为两种：块级标签 和 行内标签
行内标签: a(链接)、span(白板)、select(选择) 等
块级标签: div、h系列(标题)、p(段落) 等
另外:
标签之间可以嵌套
标签存在的意义，css操作，js操作
2.各种符号
往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字，比如说>用>来表示，具体特殊符号见下面的链接中的文章
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
3.p标签和br标签和hr标签
p表示段落，默认段落之间是有间隔的！
br 是换行，hr是水平线
1 <p>第一段 世界大势，合久必分，分久必合</p> 2 <hr/> 3 <p>第二段 滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。 4 白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事</p> 5 <p>第三段 斩黄巾英雄首立功</p> <br/>
4.a标签
a标签又被称为超链接，是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序
1 < a href="http://www.autohome.com.cn"> </a>
功能:
- 跳转: target属性，_blank表示在新的页面打开，href属性指定跳转的链接
- 提示内容：title属性，当鼠标悬浮在a标签上时显示title中的内容
- 锚
锚的实现:
1 锚 -> 标记一个标签 -> name="xxx" 2 然后使用a中的href属性定义跳转的位置 3 – 锚标签用于使用户“跳”到文档的某个部分 4 – HTML 的NAME 属性用于创建锚标记 5 <A NAME = “marker”>xxx</A> 6 - 为达到这种跳转效果，请在HREF 参数中使用该标记 7 <A HREF= “#marker”>跳转到xxx</A> 8 - 跳转到本文档中相应锚标记位置 9 10 注: 只定义NAME属性相当于定义一个位置
1 <!--__author__ = "wyb"--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>锚</title> 7 </head> 8 <body> 9 10 <a href="#center" name="first">跳到中间</a> 11 <p>这是开头</p> 12 <a href="#last">跳到结尾</a> 13 14 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 15 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 16 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 17 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 18 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 19 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 20 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 21 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 22 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 23 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 24 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 25 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 26 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 27 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 28 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 29 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 30 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 31 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 32 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 33 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 34 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 35 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 36 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 37 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 38 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 39 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 40 41 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 42 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 43 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 44 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 45 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 46 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 47 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 48 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 49 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 50 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 51 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 52 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 53 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 54 <a href="#first" name="center">跳到开头</a> 55 <p>这是中间</p> 56 <a href="#last">跳到结尾</a> 57 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 58 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 59 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 60 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 61 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 62 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 63 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 64 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 65 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 66 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 67 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 68 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 69 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 70 71 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 72 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 73 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 74 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 75 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 76 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 77 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 78 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 79 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 80 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 81 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 82 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 83 <p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p> 84 85 <a href="#center" name="last">跳到中间</a> 86 <p>这是结尾</p> 87 <a href="#first" >跳到开头</a> 88 89 </body> 90 </html>