简介
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
HTML 文件结构
<html>
<head>
<title>HTML文件结构</title>
<!--注释文字 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link>
<style>...</style>
<script>...</script>
</head>
<body>
</body>
</html>
-
<title>：网页的标题信息，它会出现在浏览器的标题栏中 -
<body>：在网页上要展示出来的页面内容一定要放在body标签中。 - ``：注释。
常用标签
-
<p>：段落。paragraph -
<h1>：标题。header -
<em>：斜体。emphasize -
<strong>：粗体。strong -
<span>：可以自定义 CSS 样式。span -
<q>：引用，相当于引号，只是为了避开双引号。quote -
<blockquote>：引用块，可以在文本两边留出空白。block quote -
<address>：用于写地址的字体，可自定义 CSS 样式。address -
<div>：将内容进行逻辑划分，便于区块管理样式。divide
<div id="区块名称">
</div>
区块名称必须唯一
-
<code>和<pre>：用于插入代码，可用<pre>来插入多行代码。
<code>
<pre>for(int i = 0; i < 5; i++){</pre>
<pre>print();</pre>
<pre>}</pre>
</code >
-
<ul>和<li>：小圆点列表
<ul>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
</ul>
-
<ol>和<li>：
<ol>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
</ol>
-
< br />：回车，单标签。break -
<hr />：水平线。horizon
-
：空格。non-breaking space
表格
-
<table>：表格声明。table -
<tbody>：表格主体。table body -
<tr>：行。table row -
<th>：表头。table header -
<td>：表格数据。table data
<table summary="摘要">
<caption>标题</caption>
<tbody>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>1 行 1 列</td>
<td>1 行 2 列</td>
<td>1 行 3列</td>
</tr>
<tr>
<td>2 行 1 列</td>
<td>2 行 2 列</td>
<td>2 行 3 列</td>
</tr>
<tr>
<td>3 行 1 列</td>
<td>3 行 2 列</td>
<td>3 行 3列</td>
</tr>
</tbody>
</table>
summary 属性的内容不会显示出来，
<caption>标签的内容会显示。
外部链接
超链接
<a href="http://www.google.com" title="点击进入谷歌">点击我</a>
添加 target="_blank" 属性可以使链接在新标签页中打开：
<a href="http://www.google.com" title="点击进入谷歌" target="_blank">点击我</a>
发邮件
a href="mailto:aaa@xxx.com?cc=bbb@yyy.com&bcc=ccc@zzz.com&subject=主题&body=邮件内容"
Mailto后为收件人地址，cc后为抄送地址，bcc后为密件抄送地址，subject后为邮件的主题，body后为邮件的内容，如果Mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的每一个都以“&”开头。
图片
图像可以是GIF，PNG，JPEG格式的图像文件。
表单交互
<form>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="" />
<br />
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" />
<br />
<textarea rows="2" cols="2">文本</textarea>
<br />
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" />
<br />
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<br />
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
样例
-
<form>是盛放表单的容器。-
method属性用来表示该页面与服务器之间数据传说的方式。- get。
- post。
-
action属性指定页面在服务器端的响应者。
-
-
<label>文字标签。-
for属性指定控件的名称。
-
这里
for属性的值如果与某个控件的id相同的话，可以实现当用户点击该label时，输入的焦点自动聚焦在该控件上。
-
<input>输入框。-
type属性指定输入框类型。-
text为普通的输入框。 -
password代表为密码框。 -
radio代表为单选框。 -
checkbox代表为复选框。 -
submit代表提交。 -
reset代表重置
-
-
name属性是控件名称，供服务器处理数据用。 -
value属性指定输入框的默认值 -
checked属性为checked时，代表该框被选中。
-
-
<textarea>文本域。-
cols列数。 -
rows行数。
-
-
<select>与<option>标签用来表示下拉菜单。-
<option>标签为下拉菜单的选项。-
value值为显示的值。
-
-
multiple属性设置为multiple时代表可以多选。
-
按住 ctrl 键可以进行多选
