<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个页面</title>
</head>
<body>hello world</body>
</html>
创建加html
标签
运用div定义结构：
div元素定义HTML文档中的一个分隔区块或者一个区域部分。犹如一个容器，可以将HTML其他元素嵌套在div元素中，从而达到结构化页面的目的。
它是双标记标签，使用id属性定义了div的唯一ID名，style属性可以定义它的行内样式。
1.标题： 标题（Heading）是通过 <h1> - <h6> 从大到小的标签进行定义的。
2.华丽分隔线：<hr> 标签创建水平线，可以用来分隔页面内容，是单标签，可以采用 size="5" color="red"属性定义水平线的粗细及颜色。
eg： <hr size="5" color="red" />
3.段落： <p> 标签定义段落，用于文章分段。
（1）不产生一个新段落的情况下进行换行，请使用 <br /> 标签，它是单标记标签，直接在换行处写<br /> 即可
（2）将某一部分内容独立出来，可以采用span标签。如图2-6为了重点显示“跨平台”，将其用span独立出来，并设置为红色，eg：<span style="color:red;" >跨平台</span>
无序列表：用<ul>标签定义列表显示的区块,列表项目标签<li>用于承载各列表的内容。
<ul >
<li>用于负责，正确归因，心存感恩。</li>
<li>主动发掘新产品、新服务。</li>
<li>坦诚沟通，活力热情，创造性的工作。</li>
</ul>
有序列表：有序列表使用 <ol> 标签定义列表显示的区块
<ol >
<li>深圳-Java工程师1名</li>
<li>广州-B2C招商经理1名</li>
<li>北京-仓库管理员5名</li>
<li>成都-消防专员1名</li>
</ol>
自定义列表：自定义列表以 <dl> 标签开始；每个自定义列表项标题以 <dt> 开始；具体列表项定义以 <dd> 开始。
<dl>
<dt>用户指南</dt>
<dd>新手指南</dd>
<dd>会员积分</dd>
<dd>常见问题</dd>
<dd>反馈调查</dd>
</dl>
. img标签插入图片:
eg:<img src="img/register2.jpg" alt="用户注册表单页面" title="用户注册2">
src：图片的URL地址。
alt：图片无法显示时，显示的提示性信息
title：鼠标悬停时显示的信息。
2.height与width属性：设置图片的大小，单位可以是像素，也可以是纯数值。
3.图片的格式：
网站页面插入的图片格式通常有gif、png、jpg，了解图片格式的特点可以帮助你正确选择图片格式。
figure标签来标记文档中的一个图像，采用figcaption标签说明图片的标题。
eg：
<figure>
<img src="img/register1.jpg" alt="用户注册按钮位置"
title="用户注册1" width="1138px" >
<figcaption>图1-用户注册按钮</figcaption>
</figure>
figure标签里包含img与figcaption标签。
figcaption标签放置图片标题。
插入表格
1. <table>、<tr>、<td>构建表格：table、tr、td标签都是双标记标签，table嵌套tr，tr嵌套td，table标签用来创建表格，tr表示表格的一行，td表示一个单元格。
2.<th>与<td>：<th>标签与<td>标签用法一样，往往<td>存数据，而<th>存数据标题的。默认情况下<th>中的内容会粗体、居中显示。
3.<caption>标签定义表格标题
4.常用属性：align（对齐方式）、bgcolor（背景色）、cellpadding（单元格与内容的边距）、
cellspacing（单元格之间的空白）、width（表格的宽度）
<thead>、<tbody>、<tfoot>表格分区
跨行合并colspan，跨列合并rowspan，都属于th、td元素的特有属性。
如图所示的表格：第2行的第4、5单元格合并，这是属于跨行，采用属性colspan=2；第3、4、5行的最后一个单元格合并，是跨列，采用属性rowspan=3。
用户登录表单
<form action="" method="post">
<fieldset >
<legend>用户登录表单</legend>
<label>
用户名： <input type="text" id="userName" placeholder="请输入用户名" >
</label> <br/> <br/>
<label>
密 码： <input type="password" id="userPassword" >
</label> <br/> <br/>
<input type="submit" value="提交" id="submitBtn">
</fieldset>
</form>
1.表单的结构
<form>标签是所有表单控件的基本容器，它的结构如下：
<form action="URL" method="get|post">
<!--表单控件-->
</form>
action属性: 他的属性值是提交数据的URL
method属性：表单数据提交的方式get或者post，默认是get方式，两种方式提交的值都是直接拼接在？号之后的，多个值用&符连接。
注意get方式的应用：
? URL中的参数是可见的，所以不要用get来传递保密数据，例如账户信息。
?那些要往数据库里面添加或者删除的数据也不适合用get来发送，例如商品添加、删除等。
?URL 的长度是有限的（大约 3000 字符），所以get方式常用于短表单的数据传递。
2. <label>标签
用于为 input 元素定义描述信息，eg:表单控件的名称等，可扩大表单控件的焦点区域。
两种方式：?label标签环绕input标签
?借助label标签的for属性将标签与表单控件相关联，属性for的值等于<input>
标签id的值
3<fieldset>与<legend>标签
<fieldset>与<legend>标签的作用是将表单控件进行分组，<fieldset>在相关表单控件周围绘制边框，而<legend>为这一组表单控件定义标题。eg：
<fieldset >
<legend>用户登录表单</legend>
<label>
用户名： <input type="text" id="userName" placeholder="请输入用户名" >
</label>
</fieldset >
4. input输入控件
<input>标签在<form>中使用，是用来声明允许用户输入数据的input输入控件，根据type属性的取值，决定输入的字段的类型。输入字段可以是按钮、复选框、文件上传等。
1.单选按钮：<input type=”radio” name=“”> 时，会创建一个单选按钮，同一组单选按钮的name属性一致，否则选择时不能具有排他性。
2.复选框：<input type="checkbox" value="">复选框1 <br/>，会创建一个复选框，通常也是成组出现，复选框不具有排他性，可以同时选中。属性checked可以预设置该复选框选中。
3.多行文本框： <textarea name="suggest" cols="50" rows="4" > </textarea>
其中cols表示文本区域内可见的列数，rows表示文本区域内可见的行数。
4.button按钮： <button type="submit">提交</button>
5.列表菜单：<select size="1">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
注：size属性的值，可以决定显示出几个菜单项。
还可以采用<optgroup>对同一个<select>里面的菜单项进行分组
eg：效果如图所示
6.上传文件:<input type="file" >会创建一个上传文件控件，例如上传图片、附件等，当有文件上传时，表单提交数据的方式选择post。