HTML基础
HTML是用来描述网页的一种语言。
•HTML指的是超文本标记语言(HyperTextMarkupLanguage)
•HTML不是一种编程语言，而是一种标记语言(markuplanguage)
•标记语言是一套标记标签(markuptag)
•HTML使用标记标签来描述网页
HTML标签
HTML标记标签通常被称为HTML标签(HTMLtag)。
•HTML标签是由尖括号包围的关键词，比如<html>
•HTML标签通常是成对出现的，比如<b>和</b>
•标签对中的第一个标签是开始标签，第二个标签是结束标签
•开始和结束标签也被称为开放标签和闭合标签
单标签：<tag/>
双标签：<tag></tag>
HTML文档(标签)=网页（视图）
•HTML文档描述网页
•HTML文档包含HTML标签和纯文本
•HTML文档也被称为网页
Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容
.htm还是.html文件后缀？
当您保存HTML文件时，既可以使用.htm也可以使用.html文件后缀。我们在实例中使用.htm。这只是长久以来形成的习惯而已，因为过去的很多软件只允许三个字母的文件后缀。
不过对于新的软件，使用.html完全没有问题。
什么是HTML标签
•HTML文档和HTML元素是通过HTML标签进行标记的
•HTML标签由开始标签和结束标签组成
•开始标签是被括号包围的元素名
•结束标签是被括号包围的斜杠和元素名
•某些HTML元素没有结束标签，比如<br/>
注释：开始标签的英文翻译是starttag或openingtag，结束标签的英文翻译是endtag或closingtag。
HTML元素
•HTML元素指的是从开始标签（starttag）到结束标签（endtag）的所有代码。
HTML元素语法
•HTML元素以开始标签起始
•HTML元素以结束标签终止
•元素的内容是开始标签与结束标签之间的内容
•某些HTML元素具有空内容（emptycontent）
•空元素在开始标签中进行关闭（以开始标签的结束而结束）
•大多数HTML元素可拥有属性
嵌套的HTML元素
•大多数HTML元素可以嵌套（可以包含其他HTML元素）。
•HTML文档由嵌套的HTML元素构成。
空的HTML元素
•没有内容的HTML内容被称为空元素。空元素是在开始标签中关闭的。
•<br/>就是没有关闭标签的空元素（<br/>标签定义换行）。
•在XHTML、XML以及未来版本的HTML中，所有元素必须被关闭。
•在开始标签中添加斜杠，比如<br/>，是关闭空元素的正确方法，HTML、XHTML和XML都接受这种方式。
•即使<br>在所有浏览器中都是有效的，但使用<br/>其实是更长远的保障。
HTML属性
•HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。
•属性总是以名称/值对的形式出现，比如：name="value"。
•属性总是在HTML元素的开始标签中规定
HTML提示：使用小写属性和标签
•属性和属性值对大小写不敏感。
•不过，万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值。
•而XHTML要求使用小写的属性/属性值。
•HTML标签对大小写不敏感：<P>等同于<p>。许多网站都使用大写的HTML标签。
•万维网联盟（W3C）在HTML4中推荐使用小写，而在未来(X)HTML版本中强制使用小写。
<tableframe="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<tableframe="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<tableframe="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<tableframe="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<tableframe="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
表格标签
<thead><tbody><tfoot>只被主流浏览器部分支持，不建议使用
<caption>我的标题</caption><!—定义表格的标题-->
<colgroupspan="2"align="left"></colgroup><!—修改两列的样式属性-->
<colgroupalign="right"style="color:#0000FF;"></colgroup><!--修改第三列的样式属性-->
<dl>
<dt>咖啡</dt>
<dd>黑色的热饮料</dd>
<dt>Milk</dt>
<dd>白色的冷饮料</dd>
</dl>
<img
src="../i/eg_planets.jpg"tppabs="http://www.w3school.com.cn/i/eg_planets.jpg"
border="0"usemap="#planetmap"
alt="Planets"/>
<mapname="planetmap"id="planetmap">
<areashape="circle"coords="180,139,14"target="_blank"alt="Venus"
href="l"tppabs=""/>
<areashape="circle"coords="129,161,10"target="_blank"alt="Mercury"
href=""tppabs=""/>
<areashape="rect"coords="0,0,110,260"target="_blank"alt="Sun"
href=""tppabs=""/>
</map>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
1.HTML文档规范：
①后缀名：可以是‘htm’也可以是‘html’
②一个html文档时由多个标签组成的，但是必须有一个根标签
<html></html>：根标签，当前html文档中的其他标签都位于这个标签的里面
③在标签<html></html>里面通常由两部分组成：<head></head>和<body></body>这两个标签是相互独立的
<head></head>:此标签中主要包含一些与页面属性相关的元信息，最常用的就是<title></title>标签
<title></title>:定义当前文档的标题，用于区分不同的页面
<body></body>:用于定义当前页面显示的所有内容，也就是说在body标签中写什么标签，在网页中就会消失什么视图
2.常用的HTML标签（标签就是对应的视图表现）
标题标签：<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
水平线标签：<hrcolor="orange"width="100px"/>
注释：<!--……….-->
段落标签+换行标签：<p></p><br/>
段落间间隔比较大，换行间隔相对来说小
文本的格式化标签：加粗，斜体，上标，下标，删除线
文本字体标签：font
<fontcolor="red"face="黑体"size="+10">
链接锚标签：<ahref=”链接地址”target=”blank”></a>
表格标签：
<html>
<head>
<title>表格</title>
</head>
<body>
<tableborder="1"bordercolor="pink">
<tr>
<tdwidth="100px">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<tdcolspan="2">2-2</td>
<td>2-3</td>
</tr>
</table>
<hr/>
<tableborder="1"bordercolor="blue">
<colalign="right"/>
<colgroupspan="2"style="color:pink"
align="center"/>
<caption>用户列表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>小皮</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>小花</td>
<td>女</td>
</tr>
</table>
</body>
列表标签：<ol></ol>有序列表----<ul></ul>无序列表<li></li>列表
<dl></dl><dt></dt><dd></dd>
3.元素：指的是当前标签，以及当前标签中属性和所包含的所有内容的整体
4.属性：每一个标签都有默认的样式，我们可以通过在标签中添加不同的属性来修改当前标签外在表现【我们可以在双标签的‘前标签’或者单标签中添加一个键对值，来修改当前标签的外在显示或者标识当前标签，我们就把这些键值对称之为当前标签的属性】
5.常用的表单输入标签：
form标签：主要用于提交页面用户输入的数据，当我们点击当前from中的submit按钮的时候，form就会将其中的所有的用户输入的数据，提交到url指定的地方---------
①Input标签：提供一个输入视图，可供用户输入数据
其中有一个属性type属性，此值有10种，每一种type都对应着一种不同的视图效果，提供的输入方式也不一样
②<inputtype="button"value="普通按钮"/>：本身不具备value属性改变按钮上的文字，可通过脚本语言赋予功能；
③<inputtype="checkbox"name="hobby"value="basketball"/><br/>
复选框：注意—如果多个选项属于同一题目，那么这多个选项的name属性值要保持一致，并且要给出对应的value属性值；
④<inputtype="file"name="myFile"id="myFile"/>：文件上传控件，提供一输入框和一个‘浏览’按钮，当用户需要上传文件的时候，点击按钮，选择相应的文件；
⑤<inputtype="image"src="image/loginan.gif"/>：图片按钮，将图片作为一个按钮，能实现一个按钮功能；
⑥<inputtype="text"id="usename"/><br/>：文本输入框；
⑦<inputtype="password"id="pass"/>：密码输入框；
⑧<inputtype="radio"name="sex"value="aaa"/>：单选框（同一个选项下name属性值要一致—同复选框一样）；
⑨<textareaname="content"rows="10"cols="5"></textarea>：文本域—可以完成文本的多行输入—name属性用于向代码中传值，通过rows和cols来改变文本域的高度与宽度；
实例：
<formname="form1"action="http://www.baidu.com/">
<inputtype="text"name="name1"id="name1"/>
<inputtype="password"name="pass1"id="pass1"/>
<inputtype="reset"value="取消"/>//重置标签按钮
<inputtype="submit"value="登陆"/>//提交按钮
</form>
<formname="form2"action="http://www.hao123.com/">
<inputtype="text"name="name2"id="name2"/>
<inputtype="password"name="pass2"id="pass2"/>
<inputtype="reset"value="取消"/>
<inputtype="submit"value="登陆"/>
</form>
⑩Img标签：<imgsrc="image/jingxuan096.jpg"id="myImg"usemap="#mymap"width="100%"alt="你点我"/>；
（11）Map标签：<mapname="mymap"id="mymap">
<areashape="rect"coords="0,0,960,1080"href="http://www.baidu.com"target="_blank"alt="map"></map>；
（12）下拉菜单标签：<selectname="province">
<option>--请选择--</option>
<optionvalue="hb">湖北</option>
<optionvalue="hn">南北</option>
<optionvalue="sh">上海</option>
</select><hr/>；
（13）文本域标签：<textareaname="content"rows="10"cols="50"></textarea><br/>；
Frameset标签：<framesetrows="100,*"border="0">
<framename="head"src="head.html"noresize="noresize"scrolling="no"/>
<framesetcols="150,*">
<framename="left"src="menu.html"noresize="noresize"/>
<framename="right"src="other.html"/>
</frameset>
</frameset><noframes></noframes>
把一个页面分成几部分页面
Div标签：固定面板在div容器中；