Web的基本概念
，
特殊字符标记
HTML为类似“<”">"这样的特殊字符准备了相应的替代代码
通过菜单栏中的【插入】→【HTML】→【字符】选项直接插入相应特殊字符代码
<div>标记
div是英文division的缩写，意为“分割、区域”。<div>标签简单来说就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划个布局。<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>.
<span>
<span>在CSS定义中属于一个行内元素，<span>与</span>之间只能包含文本和行内标记。<div>为大容器，<span>为小容器，大容器内可以放置小容器。
例：
<div style="width: 500px; margin:0 auto; padding:30px; background: #ccc;">
<div style="height: 80px; background: #ff0">头部</div>
<div style="height: 300px; background: #0c0;">内容</div>
<div style="height: 60px; background: #6cf">页脚</div>
</div>
效果：
HTML图像标记
常用图像格式
- GIF格式
- PNG格式
- JPG格式
图像标记
在HTML中使用<img />标记来定义图像，其基本语法如下：
<img src = “图像URL"/>
Src属性用于指定图像文件 的路径和文件名，它是<img/>标记的必需属性。
HTML还为<img/>标记准备了很多其他属性。
标记属性
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像边框宽度
vspace 像素 设置图像顶部和底部的空白（垂直边距）
gspace 像素 设置图像左侧和右侧的空白（水平边距）
align left 将图像对齐到左边
right 将图像对齐到右边
top 将图像的顶端和文本的第一行文字对齐，其他文字局图像下方
middle 将图像的水平中线和文本的第一行文字对齐，其他文字局图片下方
bottom 将图像的底部和文本的第一行文字对齐，其他文字局图像下方
例：
<img src="img/求关注.png" alt="求关注" title="求关注" wideth="200px" hspace="50" vspace="30"/>
效果:
图像替换文本属性alt
由于一些原因图像可能无法正常显示，如网速太慢，因此为页面上加上替换文本是个很好的习惯，在图像无法显示的时候告诉用户该图片的内容。
<img src = “图像URL" alt = “图像替换内容"/>
图像提示属性title
title属性用于设置鼠标悬停时显示的提示文字。
<img src = “图像URL" alt = “图像替换内容" title = “鼠标悬停显示内容"/>
图像的宽度、高度属性width、height
width和height属性用来定义图片的宽度和高度，通常我们只设置其中一个，另一个会按原图比例显示。如果同时设置两个属性，图像的显示就可能会变形或失真。
<img src = “图像URL" alt = “图像替换内容" width = “200px"/>
图像的边框属性border
默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但是边框颜色的调整仅仅通过HTML属性是不能够实现的还需要CSS。
图像的边距属性vspace和hspace
在网页中，由于排版需要，有事还需要调整图像的边距。HTML中通过vspace和hspace属性分别调整图像的垂直边距和水平边距;相对浏览器与左边框的距离和与上边框的距离。
相对路径和绝对路径
网页中不推荐使用绝对路径，因为网页制作完成要上传服务器，并不能确定绝对的地址。
相对路径：对于当前文件的路径，相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
相对路径三种设置方式：
图像文件和HTML文件位于同一文件夹：直接输入图像的名称，如
<img src = “logo.jpg">2.图像文件位于HTML的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如
<img src = “images/logo.jpg">3.图像文件位于HTML文件的上一级文件夹：在文件夹名之前加入“../”，如果是上两级，则要使用“../../”,以此类推，如
<img src = “../logo.jpg">
站点
什么是站点？
站点就是定义一个存放网站中零散的文件的文件夹，方便网站上传维护，内容扩充，对网站移植也有重要作用。
新建站点
点击“站点”-“新建 站点 ”
HTML标签描述
<sub>下标<sbp> 上标
例：
<p>
This text contains <sub>subscript</sub>
</p>
<p>
This text contains <sup>superscript</sup>
</p>
效果：
This text contains subscript
This text contains superscript
<a>超级链接
基本语法格式：
<a href = “跳转目标" target = “目标窗口弹出方式">文本或者图像</a>
- href用于指定链接目标 的url地址。
- target用于指定链接页面的打开方式，其值有_self和_blank两种 ，其中_self为默认值，就是在原窗口打开，_blank为在新窗口中打开。
- title”鼠标经过时显示的内容”
锚点链接
相当于一个跳转，标记一个锚点后可以通过链接跳转到标记这个点，常用在一些网页的返回顶部。
暂时没有确定链接目标时，通常将<a>标记中的href属性值定义为“#”（即href = “#”），表示回到最顶上。
创建连接文本：使用相应的id名标注跳转到目标的位置。
<a href="#id名">连接文本</a>
列表标记
无序列表ul + li
无需列表与各个列表之间没有顺序级别之分，通常是并列的。
基本语法格式：
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
有序列表 ol + li
有排列顺序的列表，各个列表项按照一定的顺序排列，例如网页中常见的排行榜等。
基本语法格式：
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
自定义列表dl + dt + dd
通常用于对术语或名词进行解释和描述，
基本语法格式：
<dl>
<dt>名词1</dt>
<dd>解释1</dd>
<dd>解释2</dd>
………
<dt>名词2</dt>
<dd>解释1</dd>
<dd>解释2</dd>
</dl>**
HTML表格相关标记
创建表格
表格的开始元素是<table>,结束元素是</table>,即所有的表格内容都要位于这两个元素之间。想要创建完整的表格，除了要有表格元素外，还需要有行元素<tr>和单元格元素<td>。创建表格的语法如下:
<tabal>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</tabal>
<table></table>：用于定义一个表格<tr></tr>：用于定义表格中的一行，必须嵌套在<table></table>标记中，有几对<tr></tr>就表示有几行<td></td>：用于定义表格中的单元格，必须嵌套在<tr></tr>标记中，有几对<td></td>就表示有该行中有多少列例：
<table border="2"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table>效果：
第一行第一列 第一行第二列 第二行第一列 第二行第二列 
<table标记的属性
width/height属性
默认情况下，表格的宽度和高度都是靠自身的内容来撑开的，如果想要更改表格的尺寸就要设置宽高属性，基本语法如下：
<table width="500" heigth="300">
<tr>标记的属性
例：
<table border="2" width="500" height="100">
<tr align="center" valign="top"> <!--内容居中靠上显示-->
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
效果：
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |
<td>标记的属性
通过为单元格标记<td>定义属性，可以单独控制某一个单元格。大部分属性与<tr>标记相同，用法也类似，不同的是<td>加入了widt宽度属性，可以控制指定单元格的宽度。同时拥有colspan和rowspan属性用于合并单元格。
colspan合并列
合并列基本语法如下：
<td colspan="需要合并的列数">表格内容</td>
rowspan合并行
合并行基本语法如下：
<td rowspan="需要合并的行数">表格内容</td>
例：
<table border="2" width="500" height="100">
<tr>
<td colspan="2">第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td rowspan="2">第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
效果：
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |
| 第三行第一列 | 第三行第二列 |
<th>标记及属性
<th>是一个表头标记。<th>标记与<td>标记的区别在于：表头一般位于表格的第一行或者第一列，且<th>标记控制的文本显示默认粗体居中
例：
<table border="2" width="500" height="100">
<tr>
<th colspan="2">第一行第一列</th> <!--设置为表头-->
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td rowspan="2">第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
效果：
| 第一行第二列 | |
| 第二行第一列 | 第二行第二列 |
| 第三行第一列 | 第三行第二列 |
表单
一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域三部分组成。
创建表单
<form></form>标记被用于定义表单域，即表单开始和结束的位置，所有的表单元素都要在这对标记之间才有效。
语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件;
</form>
例：
<form action="#" method="get" name="sign">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>
效果
表单控件
表单控件为表单的核心内容，不同的表单控件具有不同的功能，如邮件输入文本框、文本域、下拉列表、复选框等4。
input控件
input控件是表单元素中用得最多的一种元素，通常网页中的单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等都是通过input控件定义的。语法格式如下：
<input type="控件类型" />
textarea控件
当定义input控件的type属性为text时，可以创建单行文本框。但是，如果需要输入大量的信息，单行文本输入框就不再适用了，为此html提供了<textararea></textarea>标记。通过textarea控件可以轻松的创建多行文本输入框，语法格式如下：
<textarea cols="每行的字符数" rows="显示的行数">
文本内容
</textarea>
cols用来定义多行文本输入框中每行的字符数，rows用来定义多恒文本输入框中显示的行数
注意：各浏览器对cols和rows属性的理解不同，当对textarea控件应用cols和rows属性时，多行文本输入框在各浏览器中的显示效果可能或有差异。所以在实际工作中，更常用的方法是使用css的width和height属性来定义多行文本框的宽高
例：
<form action="#" method="post">
<textarea cols="10" rows="10">
cols用来定义多行文本输入框中每行的字符数，rows用来定义多行文本输入框中显示的行数
</textarea>
</form>
效果：
select控件
下拉菜单控件，例如选择所在的城市，出生年月等。基本语法如下：
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
...
</select>
<select></select>标记用于在表单中添加一个下拉菜单，<option></option>标记嵌套在<select></select>标记中，每队<select></select>中至少包含一对<option></option>
例：
<select multiple="multiple">
学历：
<option selected="selected">请选择</option>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>专科</option>
</select>