习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的， 有交互的一般都是用JavaScript来实现的。
一、html标签：
标签的语法：1. 标签由英文尖括号 "<" 和 ">" 括起来，如<html>就是一个标签。
2. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。
3. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。
4. HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。
html注释的语法：<!--注释文字 -->
学习html标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。
语义化的优点：1. 更容易被搜索引擎收录。2. 更容易让屏幕阅读器读出网页内容。
空标签有<br />、<hr />和<img />。
一个HTML文件有自己固定的结构
<html> //<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head>...</head> //<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。
<body>...</body> //在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
</html>
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。
<body>
<hx>...</hx> //标题标签 x为1~6 重要性递减 h1为最高等级；标题标签字体都加粗，字号递减；
<p>...</p> //段落标签
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
//src：标识图像的位置； //title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
//alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；图像可以是GIF，PNG，JPEG格式的图像文件;
<i> //标签显示斜体文本效果;与<em>的区别：<em>表示强调；
<em>...</em> //表示强调；用斜体表示；
<strong>...</strong> //表示更强烈的强调；用粗体表示；常用
<span>...</span> //没有语义，它的作用就是为了设置单独的样式用的,不是强调； span{字体样式}
<q>...<q> //简短文本的引用；要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。
//用<q>标签的真正关键点不是它的默认样式双引号而是它的语义：引用别人的话。
<blockquote>...</blockquote> //长文本的引用；浏览器对<blockquote>标签的解析是缩进样式。
<br/> //换行；需要加回车换行的地方加入<br />；空标签(没有HTML内容的标签);html 中是忽略回车和空格的；段落最后一行不用换行
 ； //空格
<hr/> //添加水平横线；默认样式线条比较粗，颜色为灰色；
<address>...</address> //地址信息，签名或者文档的作者身份；默认斜体
<code>...</code> //代码语言（不能是多行）；
<pre>...</pre> //多行代码;保留预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
<ul>
<li>...</li>
<li>...</li>
</ul> //无序的列表信息；显示时每项li前都自带一个圆点
<ol><li>...</li></ol> //有序的列表信息；默认为每项li前面都有序号且从1开始；
<div id="版块名称">...</div> //相当于一个容器把独立的逻辑部分放在里面；为网页划分独立的版块
<dl>...</dl> // 定义列表（definition list）。
<table>…</table> //表格信息；table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> //title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。当前浏览器打开；
<a href="目标网址" title="鼠标滑过显示的文本" target="_blank" >链接显示的文本/a> //在新标签内打开
</body>
1.<table>
<tbody>
<table summary="表格简介文本"> //摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化).
<caption>...</caption> //标题文本;标题的显示位置：表格上方。
<tr> //表格的一行;有几对tr就有几行；row行
<th> //表格的头部的一个单元格，表格表头。一行中包含几个<th>...</th>就包含几列；粗体且居中；
</tr>
<tr>
<td> //表格的一个单元格；一行中包含几个<td>...</td>就包含几列
</tr>
</tbody>
</table>
<thead><tbody><tfooter>可以使table 可以按结构一块块的显示，不在等整个表格加载完后显示。
2.<dl>
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
例：
<dl><dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd></dl>
3.<a>标签可以链接e-mail地址
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
例:<a href="mailto:yy@qq.com?subject=邮件主题&body=邮件内容">链接显示的文本</a>
二、与浏览者的交互：
网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
- 表单
语法：<form method="传送方式" action="服务器文件">
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 如何发送表单数据（get/post）。表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。
POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
//get是用来从服务器上获得数据，而post是用来向服务器上传递数据。get提交的时候，它的变量和值都会在地址栏里显示出来，它的安全性有一定的影响。从一个页面到另一个页面传参的时候，可以使用get方法，速度更快些。
- 文本输入框：
语法：<form>
<input type="text/password" name="名称" value="文本" />
</form>
1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
- 文本域支持多行文本输入：
语法：<textarea rows="行数" cols="列数">文本
</textarea>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、在<textarea></textarea>标签之间可以输入默认值。
3、可用css样式的width和height来代替。col用width、row用height来代替。
- html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
语法：<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
注意：同一组的单选按钮，name 取值一定要一致
- 下拉列表框
单选语法：<select>
<option value="向服务器提交的值" selected="selected" >选项(显示的值）</option>
</select>
// selected="selected"选项被默认选中
多选语法：<select multiple="multiple">
//在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击
- 按钮
提交按钮语法：
<input type="submit" value="提交" name="返回服务器的名称 "/>
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
name可省略
重置按钮语法：
<input type="reset" value="重置" name="返回服务器的名称 "/>
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
- lable标签
语法：
<label for="控件id名称">显示的名称</lable>
<input type="radio" name="gender" id="male" />
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
- 另
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
效果：
