1.网页的基本结构
<!-- 声明网页的版本 -->
<!doctype html>
<!-- 唯一的根元素 -->
<html>
<!-- 对网页的基本配置 -->
<head>
<!-- 声明网页的编码 -->
<meta charset="utf-8">
<!-- 声明网页的标题 -->
<title>第一个网页</title>
</head>
<!-- 写网页的具体内容 -->
<body>
HTML不错。
</body>
</html>
效果图：
2.网页中的基本语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.标题 -->
<h1><a href="#曾">曾老师</a></h1>
<h2>范传奇</h2>
<h3>王克晶</h3>
<!-- 2.段落 -->
<p>床前明月光</p>
<p>疑似地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
<!-- 3.列表 -->
<!-- 3.1有序 -->
<ol>
<li>湖南省</li>
<li>湖北省</li>
<li>河南省</li>
</ol>
<!-- 3.2无序 -->
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<!-- 3.3嵌套列表 -->
<ol>
<li>
河北省
<ul>
<li>石家庄</li>
<li>唐山</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
</ul>
</li>
</ol>
<!-- 4.行内元素 -->
<p>
北京市<i>海滨区</i>北<b>三环</b>西路甲<u>18</u>号<span style="color:red;">中鼎大厦</span>B座7层
</p>
<!-- 5.空格折叠-->
<p>
那是个 秋天！<br>
看着你 奔跑！<br>
不小心 跌倒！<br>
</p>
<!-- 6.图片（行内，左右排列） -->
<!-- 1)绝对路经
从盘符开始写出图片的完整的路径
如D:/images/1.jpg
如/home/soft01/images/1.jpg
这样写有明显的缺点：
a.路径写得很长，麻烦
b.若项目上显示，用户要求将网页和图片
存到别的盘符下，那么所有路径都错了 -->
<!-- 2)相对路经
只要写出图片和网页的相对位置；
优点：
a.简单
b.上线时无论将项目存到哪个盘符下，
网页和图片的相对位置都没有发生变化-->
<p>
<!-- 图片和网页平级 -->
<img alt="" src="01.jpg"/>
<!-- 图片在网页下级 -->
<img alt="" src="i/02.jpg"/>
<!-- 图片在网页上级 -->
<img alt="" src="../03.jpg"/>
<!-- 一般的情况 -->
<img alt="" src="../images/04.jpg"/>
</p>
<!-- 7.超链接（行内） -->
<!-- 7.1超链接的一般用法 -->
<p>
<a href="http://www.baidu.com" >百度</a>
<a href="http://hao.360.com" target="_blank">360</a>
</p>
<!-- 7.1超链接的特殊用法
将超链接链接到本网页的某个位置
1）这个位置叫做锚点
2）必须提前声明锚点-->
<p>
<a name="曾">曾老师</a>是个好人！！
</p>
<!-- 顶部默认就是锚点，没有名字 -->
<p><a href="#">回到顶部</a></p>
<!-- 8.表格 （块）-->
<!-- 8.1表格的基本结构 -->
<table border="1" cellspacing="0" width="30%">
<tr>
<td>苍老师</td>
<td>反传奇</td>
</tr>
<tr>
<td>王克晶</td>
<td>承租红</td>
</tr>
</table>
<!-- 8.2跨行 -->
<table border="1" cellspacing="0" width="30%">
<tr>
<td rowspan="2">苍老师</td>
<td>反传奇</td>
</tr>
<tr>
<!-- <td>王克晶</td>-->
<td>承租红</td>
</tr>
</table>
<!-- 8.3跨列 -->
<table border="1" cellspacing="0" width="30%">
<tr>
<td colspan="2">苍老师</td>
<!-- <td>反传奇</td> -->
</tr>
<tr>
<td>王克晶</td>
<td>承租红</td>
</tr>
</table>
<!-- 8.4行分组 -->
<table border="1" cellspacing="0" width="40%">
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>金额</td>
</tr>
</thead>
<tbody style="color:blue;">
<tr>
<td>001</td>
<td>鼠标</td>
<td>50</td>
</tr>
<tr>
<td>002</td>
<td>键盘</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">统计</td>
<td>150</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果图：
3.分区
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- logo区 -->
<div>
<p>此处应该摆放一张图片</p>
</div>
<!-- 内容区 -->
<div style = "color:red;">
<h1>宫保鸡丁的做法步骤</h1>
<p>放油</p>
<p>放鸡丁</p>
<p>放花生</p>
<p>出锅</p>
</div>
<!-- 版权区 -->
<div>
<p>版权所有，违者必究</p>
</div>
</body>
</html>
效果图：
4.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.表单元素：
用来声明数据提交的范围，只有在此元素内的数据可以提交给服务器
action:声明数据提交的目标
method/enctype：将来再讲-->
<form action="http://www.tmooc.cn">
<!-- 2.表单控件：
用来让用户输入数据。 -->
<!-- 1)input元素(9个),
他们之间用type属性区分。 -->
<!-- 文本框 -->
<p>
帐号:<input type="text"/>
</p>
<!-- 密码框 -->
<p>
密码:<input type="password"/>
</p>
<!-- 单选框
name:组名，同一组radio互斥。
checked:设置默认选中。
value:将来再讲。-->
<p>
性别：
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
</p>
<!-- 多选框
checked:设置默认选中。
name/value:将来再讲。 -->
<p>
兴趣：
<input type="checkbox" checked/>音乐
<input type="checkbox"/>看书
<input type="checkbox"/>打球
</p>
<!-- 文件框 -->
<p>
头像:<input type="file"/>
</p>
<!-- 隐藏框 -->
<p>
<input type="hidden" value="abc"/>
</p>
<!-- 按钮
submit：提交表单中的数据
reset：将表单中的数据重置为初始值
button：没有任何功能，需通过js定义功能-->
<p>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="试试"/>
</p>
<!-- 2)其他元素(3个)，
-->
<!-- label:用来管理表单中的文本
可以将文本与控件绑定在一起，从而增加控件的受力面积
id:元素的唯一标识，相当于元素的身份证号。
任何元素都可以有id，程序员有义务保障元素的id不重复 -->
<p>
<input type="checkbox" id="c1"/>
<label for="c1">我已阅读并自愿遵守此协议！</label>
</p>
<!-- select：下拉选择
selected：设置默认选择
value:将来在讲-->
<p>
城市:
<select>
<option>请选择</option>
<option>北京</option>
<option selected>上海</option>
<option>广州</option>
<option>深圳</option>
<option>杭州</option>
</select>
</p>
<!-- textarea：文本域-->
<p>
简介：
<textarea rows="5" cols="30">这是文本域的默认值</textarea>
</p>
</form>
</body>
</html>
效果图：
