蒂姆.伯纳斯.李------万维网(www)发明人，没有他就没有html
html：HyperText Markup Language 超文本标记语言------用来对网页中内容进行描述
超文本：比普通文本表达更为丰富的内容；
标记：标识符号，即html中的标签，为了凸显内容的某些属性；
语言：html不是编程语言而是与浏览器交流的语言，浏览器会将html文件翻译为人们看到的网页；
文字、图片、音频、视频都可以通过HTML呈现在网页中
HTML源文件后缀名为.html或者.htm(DOS时代后缀名最多只能3位，现在推荐用.html为后缀)
----------------------------------------------------------------------------------------------------------------------------------
HTML标签分类：
单标签（空标签）：<br />表示换行
双标签（围堵标签）：<p>hello world！</p>，有开始标签<p>和结束标签</p>
HTML标签书写标准：
这些标准有些就算不遵守也不会对内容产生影响，但是出于标准化的考虑，以及为了阅读方便，强烈建议遵循这些规范
1，所有标签都写在尖括号<>之中
2，所有标签都有开始和结束，即使是单标签也要有表示结束的/，比如<br />、<img />、<hr />
3，建议所有标签及其属性和值中的字母都是小写
4，标签与属性之间，属性与属性之间必须有空格分开
5，属性的值须加上双引号/单引号
6，写出的属性必须有值，比如<p color="red" size="5">hello world！</p>；
我们想让一个分割线没有阴影，所以写出了noshade这个属性，但是传统意义上noshade就是noshade，
没有值这种东西，这时候我们为了标准统一，就让属性等于自己，例如<hr noshade="noshade" />
7，属性可写可不写，就算不写，系统自动会用默认值代入
8，标签与标签之间一定要正确嵌套
正确例子：<p>hello w<b>orl</b>d!</p>；
错误例子：<p>hello w<b>orld!</p></b>；也许这种错误实际显示没问题，但是标签不能交叉，这不符合规范
标签格式：
双标签：<开始标签 属性1="值1" 属性2="值2" 属性n="值n">内容内容内容内容</结束标签>
单标签：<开始标签 属性1="值1" 属性2="值2" 属性n="值n" />
无属性单标签：<开始标签 />
html文档格式：
查看html文档时，ctrl+home回到文档开头；ctrl+end跳到文档末尾；ctrl+f查找关键字
<html>
<head>
<title>标题标题标题</title> <!--这是注释-->
</head>
<body>
内容内容内容内容
</body>
</html><head>叫做网页的头部，包含网页的基本信息基本设置，其中<title>用来定义网站标题，会显示在浏览器标签中；
<body>所有能在浏览器页面看到的内容全部在body内部；
<!--注释注释-->这是html文档中的注释写法；
从上可见网页包含两部分<head>和<body>
----------------------------------------------------------------------------------------------------------------------------------
HTML标签分类：
1，文本修饰
1-1）<font></font>
属性：color：red，green，blue，yellow，默认为黑色black；
size：取值范围1~7，默认为3；
face：楷体/KaiTi，黑体/SimHei，宋体/SimSun，微软雅黑/Microsoft YaHei，仿宋/FangSong；
1-2）<body></body>
属性：text：设置整个页面的文本颜色；
bgcolor：设置背景颜色；
background：背景贴图（值为图片路径）；
bgproperties：背景属性（值设置为fixed表示背景固定（有些浏览器不支持））；
1-3）<big>内容</big>呈现放大的文本；
<small>内容</small>呈现缩小的文本；
1-4）<b>内容</b> 或者 <strong>内容</srong>，设置内容文本为加粗；
1-5）<i>内容</i> 或者 <em>内容</em>，设置内容文本为斜体；
1-6）<u>内容</u> 或者 <ins>内容</ins>，表示给内容文本加下划线；
<s>内容</s> 或者 <del>内容</del>，表示给内容文本加删除线；
1-7）<sup>内容</sup>，将内容文本变为上标形式；上标------superscript
<sub>内容</sub>，将内容文本变为下标形式；下标------subscript
练习：将一首带注释的唐诗按照格式显示在网页中。
2，文字排版
2-1）<p>内容</p>
属性：align（表示内容文本的对齐方式，值为left、center、right）；
2-2）<h1>标题</h1>.........<h6>标题</h6>
h1~h6都是表示标题，字体大小依次递减
属性：align（表示标题文本的对齐方式，值为left、center、right）；
2-3）<hr /> 水平分割线
属性：width（值可以为800px，或者80%，表示占据总宽度的80%）；
size="5"（表示分割线的厚度）；
color="red"（分割线颜色）；
noshade="noshade"（无阴影）；
2-4）<pre>预先格式化的文本内容</pre> predefined预定义格式化文本
2-5）<center>内容</center> 将内容文本居中
2-6）<br /> 表示换行
2-7）<div></div> division，块元素，单独占一行；<span></span> 行内元素，两个span元素可在同一行
块元素：<div>、<p>、<h1~h6>、<pre>、<li>......
行内元素：<font>、<b>、<strong>、<i>、<em>、<small>、<big>、<sup>、<sub>、<img>......
一定要用块元素包含行内元素，而不是反过来，否则排版将极不方便。
3，图片
3-1）<img src="图片文件路径" alt="图片无法显示时就显示这句话" title="balabala" />是行内标签，且是单标签
属性：src，source，值为图片文件路径；
width，宽度；height，高度（宽度，高度只要设置一个，另一个就会按比例自动变化，除非要改变比例）；
align（left，right，没有居中）想居中可以加<center>标签；
alt，显示图片无法显示时的文本（此属性必须写）；
title，鼠标放到图片上去后显示的的文本内容
hspace，vspace，设置图片水平、竖直方向与边缘之间的空白大小；
border，<img src="路径" alt="文本" border="5"/>设置图片边框，一般通过style设置边框而不用此属性；
4，链接
超链接，anchor锚，双标签，行内标签，<a>标签禁止内部嵌套其它<a>标签
<a href="url" target="_blank">内容内容（文字或图片）</a>；
href表示hypertext reference；url(Uniform Resource Locator统一资源定位器)；
url就是一个网址，指向服务器上某一处的文件资源，指定的资源有唯一性；
URL例子：http://news.ifeng.com/?_114so 首要的http://表示HTTP协议，必不可少；
file:///------表示本机文件；http://------表示网络文件；ftp://------表示FTP下载协议；Thunder://；ed2k://；
target="_blank"表示从新页面打开此网址，默认从原页面打开target="_self"；
target="_top"在顶部打开；target="_parent"在父窗口打开（一般不用）；
超链接的种类：
1，外部链接：链接到别人的网站，比如用在友情链接之类的地方，可以提高搜索引擎PR值（PageRank访问量）
或者用于采集其它网站的信息（双方必须协商知情，否则是盗链行为）；
2，内部链接：链接到自己网站的其他页面；
3，文本链接：<a href="url">文本内容</a>；
4，图片链接：<a href="url"><img src="" alt=""/></a>；
5，下载链接：<a href="bta.rar">点击下载</a> href的值应为本地文件路径；
6，空链接：点了之后没有反应<a href="#" >空链接</a>，一般用于测试CSS样式；
<a href="JavaScript:void(0)" >JavaScript空链接/死链接</a>用来配合JS程序；
7，电子邮件链接：<a href="mailto:ssyhf@qq.com">联系我们</a>，自动关联邮箱工具；
<a href="mailto:ssyhf@qq.com?subject='Hi!'">联系我们</a>，自动添加邮件主题信息；
8，锚点链接：首先定义锚点<a name="top"></a>；使用锚点<a href="#top">回到顶部</a>，点此可回到顶部；
也可以链接到另一份html文档的top锚点<a href="another.html#top">在文档间飞翔</a>；
5，表格
<table border="3" bordercolor="green" width="500" bgcolor="yellow" align="center" cellpadding="10" cellspacing="10" rules="all">
<tr>
<td colspan="2">11</td>
<td>12</td>
</tr>
<tr>
<td rowspan="2">21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table><table width="300" align="center" border="3" rules="all">
<caption><font size="5">工作证</font></caption>
<tr>
<th width="40">姓名</th><td width="80"></td>
<td width="80" height="120" align="center" rowspan="3"><img src="tableIDcard.jpg" width="80" alt="ID_card"/></td>
</tr>
<tr>
<th>部门</th>
<td></td>
</tr>
<tr>
<th>职务</th>
<td></td>
</tr>
<tr>
<th height=40>时间</th>
<td colspan="2"></td>
</tr>
</table>6，列表
6-1）<ol> 表示有序列表，默认以1,2,3,4........为序号（属性type="a"则以abcde为序号，type="A"则以大写
<li>内容项</li> 字母为序号，type="i"则以小写罗马数字为序号，type="I"则以大写罗马数字为序号）；
<li>内容项</li> 属性start表示从哪个序号开始，start="2"，则数字序号从2开始；
<li>内容项</li> type属性对<ol>和<li>都有效；
</ol>
6-2）<ul> 表示无序列表，默认以黑圆点为序号（属性type="circle"则以黑圆圈为序号，type="square"则
<li>内容项</li> 黑方块为序号，type="disc"则恢复默认以黑圆点为序号；
<li>内容项</li>
<li>内容项</li> type属性对<ol>和<li>都有效；
</ul>
6-3）列表的嵌套
<ul>
<li>内容项1
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</li>
<li>内容项2</li>
<li>内容项3</li>
</ul>
6-4）自定义列表
<dl>
<dt>内容项1</dt>
<dd>111</dd>
<dd>222</dd>
<dd>333</dd>
<dt>内容项2</dt>
<dt>内容项3</dt>
</dl>
7，表单（控件）
用户名输入框，密码输入框，验证码输入框都是表单
<form></form>块元素，双标签，一般在<form>内部用<table>排版
属性：name，method（get，post），action（服务器接收到提交信息之后的行为），οnsubmit="JS函数"，
enctype
表单元素：<input type="text" name="username" size="20" maxlength="30" />文本输入框
<input type="password" name="pwd" size="20" maxlength="30" /> 密码输入框
<input>本身是行内元素
表单提交：<input type="submit" value="提交" name="submit" />提交按钮
<input type="reset" value="重写" />重设reset按钮
8，框架
9，其他
9-1）<marquee color="red" width="600">滚动内容</marquee> 表示横向滚动内容
属性：color；width；height；direction（right，left，up，down）；scrollamount（滚动速度）；
scrolldelay：滚动延迟（单位是ms）；behavior（scroll，slide，alternate）；
不推荐使用<marquee>标签
9-2）<bgsound src="counting star.mp3" loop="-1"/>为页面插入背景音乐（src的值为音频文件的路径）
loop="-1"代表音乐无限循环；
有些浏览器不支持，有些必须用插件才支持；
9-3）<meta>标签描述了html页面的基本信息，被包含于<head>中
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />（http：超文本传输协议）
http-equiv表示服务器通知浏览器用什么字符来显示本页面；
content="text/html"表示此文档是大类text文本文件下的html文件；
charset="utf-8"设置字符编码为utf-8；
<meta http-equiv="refresh" content="3;http://www.bing.com" />
表示本页面经过3秒后，跳转到一个新页面http://www.bing.com，一般用在公司域名变更的时候；
<meta name="author" content="giveup_skyland" />表示网页作者为givup_skyland
<meta name="copyright" content="giveup_skyland" />表示网页版权所有人为giveup_skyland
（必写）<meta name="keywords" content="csdn博客,web前端" />给出网站关键词，搜索这些词可以查到本网站
（必写）<meta name="description" content="本网站是一个.........">给出网站的描述，即搜索后显示的摘要
-------------------------------------------------------------------------------------------------------------------------
HTML字符实体：
空格 1） （别忘了分号）。2）全角输入法（中文输入法）直接敲空格，浏览器会认为是一个空白汉字。
右尖括号（大于号） >
左尖括号（小于号） <
& &
￥ ¥
版权符号 ©
注册商标 ®
注册中的上标 ™
HTML颜色表示：
http://www.runoob.com/html/html-colors.html
字符编码：
ASCII：每个字符对应一个字节（1Byte=8Bit），但只编码了英文字母和常用符号，不通用；
Unicode：每个字符对应4个字节，编码了世界上所有语言的符号，通用，但是对于纯英文文本浪费内存及带宽；
UTF-8：优化了的Unicode码，不同字符对应字节数不同，既通用，又不浪费内存和带宽，推荐使用；
GB2312：80年代专门为了简体中文而创造的编码；
ANSI：你的计算机所用操作系统的编码（不同计算机不一样）；
如何避免乱码？
要时刻注意编码的一致性：
1，HTML文档开头通过<meta charset="utf-8" />来规定文档所用编码；
2，文档编辑器（editplus、notepad++等等）设置的编码；
3，浏览器编码方式；
4，php的字符集设置；
5，MySQL数据库字符集设置；
必须保证各方面字符集设置一致
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
