1.如何使用程序
点击桌面建立英文名称的文件夹—》将文件夹移入程序内—》文件夹下建立以.html结尾的文件-》编写代码-》运行调试-》打开在浏览器中（Ctrl+F1）
2.格式
注意缩进
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
3.文本标题
语法：<h#></h#>
其中#可以选择1-6分别1-6级标题
4.字体及字符实体
倾斜标记：<i></i> | <em></em>
加粗标记：<b></b> | <strong></strong>
下划线：<u></u>
空标记，用来设置字体换行：<br />
空标记，用来设置下划线：<hr />
段落标记，标识一个段落（段落与段落之间有段间距）：<p></p>
字符实体：
在网HTML文档中写入特殊字符如“&”、“”等使用特殊代码，浏览器会用HTML命令对这些页数代码进行翻译
往网页中输入特殊字符，需要在HTML代码中加入以&开头的字母组合或以&#开头的数字，常见的有：
不换行空格： ；
右尖括号：>；
左尖括号：<；
备案中图标：©；
注：一定需要加上分号
常用元素：
<div></ div>
需要加入样式才有明显的效果
<div>标签可以把完档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用id或class来标记<div>，那么该标签的作用会变得更加有效。
例：<div style="width: 100px; height: 100px; background: #f00; border-radius: 50%;">白茶清欢无别事</div>
<span></ span>
文本节点可以是某一段文本或者是一个字
5.列表的应用
HTML中有三种列表：
无须列表（ul）
<ul>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
.......
</ul>
有序列表（ol）
<ol>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
.......
</ol>
自定义列表（dl）
<dl>
<dt>名词</dt>
<dd>解释</dd>
.......
</dl>
6.超链接
<a href="目标文件路径及全称/链接地址" alt="替换文本" title="提示文本">链接文本/图片</a>
例：<a href="http://www.baidu.com" >百度</a>
<a href="http://www.baidu.com" title="百度一下">百度</a> 鼠标指向百度时会有文本提示
空链接：
<a href="#"> </a>
插入图像
<img src="目标文件路径及全称 " alt="图片替换文本" title="图片标题" />
例： <img src="tx.png" /> 此处路径为相对路径不建议使用绝对路径
<img src="tx.png" title="头像"/> 鼠标放到图片上时会显示标题
标签可以包含使用但不能嵌套使用
7.表格
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
一对tr表示一行，一对td表示一列（一个单元格）
相关属性
width="表格宽度"
height="表格高度"
border="表格边框"
bordercolor="边框颜色"
cellspacing="单元格与单元格之间的距离"
cellpadding="单元格内容之间的空隙"
align="表格对齐方式" 取值left/right/center
valign="垂直对齐" 取值top/bottom/middle
colspan="所要合并的单元格的列数"
rowspan="所要合并的单元格的行数"
表格需要加入样式
例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table width="300" height="300" border="1">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
表格中内容左右中对齐：
<body>
<table width="600" height="300" border="1">
<tr>
<td align="left">第一行第一列</td>
<td align="right">第一行第二列</td>
<td align="center">第一行第三列</td>
</tr>
<tr>
<td valign="top">第二行第一列</td>
<td valign="bottom">第二行第二列</td>
<td valign="middle">第二行第三列</td>
</tr>
</table>
</body>
表格行合并
<body>
<table width="600" height="300" border="1" cellspacing="0">
<tr>
<td colspan="2">1，1</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
</table>
</body>
表格列合并
<body>
<table width="600" height="300" border="1" cellspacing="0">
<tr>
<td rowspan="2">1，1</td>
<td>1，2</td>
</tr>
<tr>
<td>2,2</td>
</tr>
</table>
</body>
8.表单域
<form name="表单名" method="post/get" action=""></form>
get是从服务器上获取数据
post是向服务器上传数据
出于安全性考虑，建议使用post提交数据
9.表单控件
文本框：<input type="text" value="默认值"/> （value输入后不会消失 placeholder输入后点击后会消失）
密码框：<input type="password"/>
按钮框：<input type="submit" value="按钮内容"/>
重置框：<input type="reset" value="按钮内容"/>
单选框：<input type="radio" name=""/>
复选框：<input type="checkbox" name=""/>
disable="disable" / disable禁用
例：
<p>性别：男<input type="radio" name="sex" disabled/>女<input type="radio" name="sex"></p>
checked="checked" / checked
<p>性别：男<input type="radio" name="sex" checked/>女<input type="radio" name="sex"></p>
例：
<body>
<form name="表单名" method="post" action="">
<p>姓名：<input type="text" /></p>
<p>密码：<input type="password"/></p>
<p><input type="submit" value="登录"/> <input type="reset" value="重新输入"/></p>
<p>性别：男<input type="radio" name="sex" checked/>女<input type="radio" name="sex"></p>
<p>爱好：打游戏<input type="checkbox" name="like"/>篮球<input type="checkbox" name="like"/>乒乓球<input type="checkbox" name="like"/>音乐<input type="checkbox" name="like"/></p>
<p><input type="button" value="下一页"/></p>
</form>
</body>
10.下拉菜单
<select>
<option>下拉选项1</option>
<option>下拉选项2</option>
......
</select>
例：
<body>
<form name="f1" method="post" action="">
<p>出生年月：
<select>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
</select>年
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>月
</p>
</form>
</body>
11.多行文本框
<textarea cols="" rows=""></textarea>
rows和clos属性设置输入窗口的高度和宽度，单位是字符
例：
<body>
<form name="f2" method="POST" action="">
<p>个人简介：
<textarea cols="50" rows="10">
</textarea>
</p>
</form>
</body>
8351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
