一：html文档
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>网页的标题</title> </head> <body> <h1>网页的内容</h1> </body> </html>
文档结构说明：
1.文档中第一行声明的了该文档是一个html文档，
2.文档中的第二行与最后一行为一对htm标签。是html文档必不可少的元素，后面的'lang="en"',表示的该文档的语言为英文，如果是中文则改为'lang="zh"'.
3.<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
4.body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）我们所能在页面上看到的内容，都是放在这个body 元素内部的。
二：html标签,元素,属性
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html文档标题</title> </head> <body> <h1>html内容标题</h1> <P>这是一段html内容的说明</P> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
标签,元素,属性的说明：
1.html标签是由一对单尖括号包起来的关键字构成，例入<head>；
2.html标签通常是成对使用的，如表示标题的<h1> 和 </h1>，表示段落的<p>和</P>；
3.html标签中也有不需要成对使用的，如<img />、<input />、<hr />等；
4.html标签对不需要区分大小写；
5.html元素是描述网页的构成，包含内容的标签即构成元素，一个网页是由若干的元素构成的；
6.html元素除了内容以外,还有很多与之相对应的属性,比如<img />标签加上src属性<img src="" />，用来表明图片的地址，比如给<a>标签加上href属性<a href=""></a>可以表明要跳转的地址。再如<input />标签的"type"属性，对应不同的属性值，即表示该表单为不同的内容，如'type="text"'表示输入框,'type="password"'则表示输入为不显示实际内容的密码字符,元素中的属性有一部分是带有默认值的。这类属性你不需要标明。系统会默认调用该属性，如<a>标签的'target'这个属性，未标明时调用默认值，在当前窗口跳转，如果需要在新的窗口打开跳转后的页面，则需要标明'target="_blank"',还有一部分是属性是必须要标准的,如<input />的'type'的这个属性就是必须要指定属性值;
元素的标签及属性的具体用法可以查询手册，这里只是举了一两个例子。
三：列表
1.列表有三种，分别为无序列表<ul>，有序列表<ol>，<dl>定义列表；
A. <ul>无序列表的代码示例：
<ul> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul>
备注：无序列表一般用于展示多条没有先后主次排序需求的列表内容；
B.<ol>有序列表的代码示例：
<ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol>
备注：有序列表一般用于展示多条有先后主次排序需求的列表内容；
C.<dl>定义列表的代码示例：
<dl> <dt>1标题</dt> <dd>1内容</dd> <dt>2标题</dt> <dd>2内容</dd> </dl>
备注：定义列表一般用于展示多条带有标题的列表内容；
四.工作计划案例(运用列表知识)
实例
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>我的学习计划</title> </head> <body> <h1>9月学习计划</h1> <p> <h3>本月目标</h3> <ul> <li>学习并掌握html</li> <li>学习并掌握CSS</li> <li>学习并掌握javascript</li> </ul> </p> <p> <h3>具体计划</h3> <Ol> <li>先学习html相关知识</li> <li>再学习CSS相关知识</li> <li>然后学习javascript相关知识</li> <li>将上面所学的知识进行运用在具体案例上加以练习</li> </Ol> </p> <p> <h3>实施期限</h3> <dl> <dt>学习html</dt> <dd>2019-9-1至2019-9-3</dd> <dt>学习CSS</dt> <dd>2019-9-3至2019-9-5</dd> <dt>学习javascript</dt> <dd>2019-9-6至2019-9-10</dd> <dt>综合练习</dt> <dd>2019-9-11至2019-9-14</dd> </dl> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五：列表与表格的区别和联系
列表是对信息的逐条展示,表格是对每条信息进行归类整理再逐条展示,表格是在列表基础上进行逐条信息的提取归类整理划分.当展示某类的信息的单一属性比如只展示所有文章的标题这一属性,就可以用列表,是对单一属性展示不需要区分。而当要展示出某类信息的所有属性比如所有文章的标题、描述、写作时间等.这时用表格,因为需要在每条信息中对属性区分.简单来说就是需要展示的信息属性超过一项以上,则使用表格;反之则使用列表;
六.商品清单案例(运用表格知识)
实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>商品清单案例</title>
<style>
tr {
text-align: center;
}
</style>
</head>
<body>
<table border="1" width="600" cellspacing="0" cellpadding="5">
<caption><!-- 这是头部，一般为表格名称 -->
<h3>购物清单</h3>
</caption>
<thead><!-- 这是表格标题 -->
<th>类别</th>
<th>品名</th>
<th>商品代码</th>
<th>价格</th>
<th>数量</th>
<th>金额</th>
</thead>
<tr><!-- 这是表格的主体内容 -->
<td rowspan="2">文具</td>
<td>圆珠笔</td>
<td>A443</td>
<td>3.5</td>
<td>40</td>
<td>140</td>
</tr>
<tr>
<td>圆规</td>
<td>A458</td>
<td>5</td>
<td>40</td>
<td>200</td>
</tr>
<tr>
<td rowspan="2">书籍</td>
<td>PHP从入门到放弃</td>
<td>B584</td>
<td>85</td>
<td>40</td>
<td>3400</td>
</tr>
<tr>
<td>HTML从入门到精通</td>
<td>B885</td>
<td>60</td>
<td>40</td>
<td>2400</td>
</tr>
<tr><!-- 这是底部 -->
<td colspan="4">总计：</td>
<td>160</td>
<td>6340</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七.学生注册页面案例(运用表单知识)
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>学生注册</title>
</head>
<body>
<h3>学生注册</h3>
<form action="login.php" method="POST">
<p>
<label for="username">姓名：</label>
<input type="text" id="username" name="username" placeholder="请填入你的真实姓名">
</p>
<p>
<label for="password ">密码：</label>
<input type="password" id="password" name="password" placeholder="密码不能超过8个字符">
</p>
<p>
<label for="address">地址：</label>
<input type="text" id="address" name="address" placeholder="请填入你的家庭住址">
</p>
<p>
<label for="pid">学号：</label>
<input type="text" id="pid" name="pid" placeholder="请填入你的学号" pattern="/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/">
<!-- 这里本来想验证***的。但好像失效了 -->
</p>
<p>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入你的邮箱地址">
</p>
<p>
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="4" max="25" placeholder="4">
</p>
<p>
<label for="class">班级：</label>
<select name="class" id="class">
<optgroup label="一年级">
<option value="一年级(1)班">一年级(1)班</option>
<option value="一年级(2)班">一年级(2)班</option>
<option value="一年级(3)班">一年级(3)班</option>
</optgroup>
<optgroup label="二年级">
<option value="二年级(1)班">二年级(1)班</option>
<option value="二年级(2)班">二年级(2)班</option>
<option value="二年级(3)班">二年级(3)班</option>
</optgroup>
<optgroup label="三年级">
<option value="三年级(1)班">三年级(1)班</option>
<option value="三年级(2)班">三年级(2)班</option>
<option value="三年级(3)班">三年级(3)班</option>
</optgroup>
<optgroup label="四年级">
<option value="四年级(1)班">四年级(1)班</option>
<option value="四年级(2)班">四年级(2)班</option>
<option value="四年级(3)班">四年级(3)班</option>
</optgroup>
<optgroup label="五年级">
<option value="五年级(1)班">五年级(1)班</option>
<option value="五年级(2)班">五年级(2)班</option>
<option value="五年级(3)班">五年级(3)班</option>
</optgroup>
<optgroup label="六年级">
<option value="六年级(1)班">六年级(1)班</option>
<option value="六年级(2)班">六年级(2)班</option>
<option value="六年级(3)班">六年级(3)班</option>
</optgroup>
</select>
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" id="girl">女生</label>
<input type="radio" name="sex" id="boy">男生</label>
<input type="radio" name="sex" id="secrecy" checked>保密</label>
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="hobby[]" id="motion">运动</label>
<input type="checkbox" name="hobby[]" id="Read" checked>阅读</label>
<input type="checkbox" name="hobby[]" id="Music">音乐</label>
<input type="checkbox" name="hobby[]" id="Tourism">旅游</label>
</p>
<p>
<label for="synopsis">个人简介</label>
<br>
<textarea mame="synopsis" id="synopsis" cols="50" rows="20">请在此介绍一下你自己！</textarea>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重填">
</p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
八.总结
