前段时间学习了HTML和一些简单的CSS样式，自己也简单做了尝试，下面是我对HTML+CSS+Javascript的一些总结。
一.写网页的基本格式
1.下面是写一张html文件的基本格式：
...
...
2.在head的标签里，也可以添加其他的一些标签，而绝大部分这些标签是不会作为内容显示在网页给读者看的，下面是可以用在head标签里的一些常用标签：
...
（1）
标签很显眼，它会显示在浏览器的标题栏中，以此来告诉浏览者这个网页的主要内容。
</div>
<div>
<a href="http://img.e-com-net.com/image/info8/1c73667f40fe476fbc40ca853cf1ce6e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1c73667f40fe476fbc40ca853cf1ce6e.jpg" alt="" width="650" height="53"></a>
<br>
</div>
<div>
就像我截的图一样“我的CSDN”这几个字就是写在<title>里的。
</div>
<div>
（2）<style>标签就是我们要在里面写的一些css样式，例如改变网页的字体啊字体颜色啊插入一些图片啊等等。
</div>
<div>
3.代码注释：
</div>
<div>
<pre><code class="language-html"><!--注释部分--></code></pre>
<h2>二.认识标签</h2>
<div>
接下来我把一些常用标签整理出来，列在下面。
</div>
<div>
1.
<pre><code class="language-html"><p>段落</p></code></pre>
<br>
</div>
<div>
2.
<pre><code class="language-html"><hx>文章标题，其中的x分为1~6，写的时候讲x改为1~6，并且从1开始字体逐级变小</hx></code></pre>3.
<pre><code class="language-html"><em>该部分变为斜体</em></code></pre>4.
<pre><code class="language-html"><strong>该部分变为粗体</strong></code></pre>5.
<pre><code class="language-html"><span>只是为了能够设置css样式，没有任何其他意义</span></code></pre>6.
<pre><code class="language-html"><q>引用别人的话，注意不能加“”因为它自动会帮你添加</q></code></pre>
</div>
<div>
<pre><code class="language-html"><blockquote>刚刚的标签适合短文本，这个适合长文本的引</blockquote></code></pre>
</div>
<div>
7.在网页添加空格， 一个这个符号就是一个空格。
</div>
<div>
8.<hr/>水平横线 <br/>转行符
<div>
9.
<pre><code class="language-html"><address>添加地址</address></code></pre>10.
<pre><code class="language-html"><code>代码语言</code></code></pre>
<pre><code class="language-html"><pre>大段代码</pre></code></pre>11.新闻新列表，在<li>中显示的内容前面会出现一个这样的“
<strong>·”</strong>小点点
<pre><code class="language-html"><ul>
<li>...</li>
<li>...</li>
</ul></code></pre>如果将<ul>改成<ol>，那么前面的小点点就会变成：“1.”，“2.”.......
</div>
<div>
12.有一个经常会用到的标签<div>，这个标签可以将一个网页划成一块一块的小块，下面的内容会介绍到盒子模型。
</div>
<div>
13.在网页上制作一个表格。
</div>
<div>
<span></span>
<pre><code class="language-html"><table summary="简介表格内容"><!--该部分是不会在网页中显示的，table是一定要出现的可以不出现summary-->
<caption>...</caption><!--这里填的是表格的标题，会显示-->
<tbody><!--这个的作用是等表格全部加载出来了一起显示在网页上，如果没有这个，那么加载一点，表格显示一点-->
<tr><!--表格的一行-->
<th>...</th><!--表格的表头内容，这里有三个<th>表示有一行有三个表头-->
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td><!--这表示表格的列数-->
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table></code></pre>两点注意点：（1）不设置css样式时，表格是没有线的。
</div>
<div>
（2）表头在默认情况下显示的是粗体居中。
</div>
<div>
14.加上链接。
</div>
<div>
例如：
<pre><code class="language-html"><a href="http://www.csdn.net" title="博客频道” target="_blank">博客</a></code></pre>博客是在网页上显示的内容，当点击博客两个字是会连接到csdn这个网站上去，当鼠标滑过博客两个字时会出现"博客频道“这四个字。
</div>
<div>
我特意截了一下效果图：
<a href="http://img.e-com-net.com/image/info8/8f2ff72c17884f91a0bc7b563afa05d2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8f2ff72c17884f91a0bc7b563afa05d2.jpg" alt="" width="98" height="56"></a>
</div>
<div>
下一张是鼠标滑过时的效果图：
<a href="http://img.e-com-net.com/image/info8/9a2c21610585498282ad9d7a6278daab.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9a2c21610585498282ad9d7a6278daab.jpg" alt="制作一张简单的网页（HTML+CSS+JS）【1】_第1张图片" width="170" height="112" style="border:1px solid black;"></a>
<br> 15.插入图片。
</div>
<div>
<pre><code class="language-html"><img src="图片的地址” alt="图片下载失败后显示的内容" title="鼠标滑过该图片是显示的提示文本"></code></pre>
<h2>三.认识表单</h2>
<div>
在实际生活中，我们常常会看到一个页面让用户填写并提交，同样，我把一些常用的表单标签列出来。
</div>
<div>
1.所有我们要写的单选框、复选框、文本域等等，全部要写在<form>里面。
<pre><code class="language-html"><form method="传送方式" action="服务器文件">...</form>
</code></pre>2.当type="text"时，为文本输入框；当type="password"时，为密码输入框。
<pre><code class="language-html"><input type="text/password" name="名称" value="文本" /></code></pre>3.这是文本域。
<pre><code class="language-html"><textarea rows="行数" cols="列数">会出现在文本域的提示文字</textarea></code></pre>4.当type="radio"时，为单选框；当type="checkbox"时，为复选框。要注意一点，单选框的name一定要相同才能起到单选的作用。
<pre><code class="language-html"><input type="radio/checkbox" value="值" name="名称" checked="checked"/></code></pre>5.这是下拉列表框。
<pre><code class="language-html"><select multiple="multiple">
<option value="向服务器提交的值” selected="selected">选项</option>
....
</select></code></pre>注意点：（1）multiple该部分可以不写，写了有什么作用呢，可以进行多选，本来下拉框你只能选一个，加了这个之后，在Windows操作系统中，按住control键可以进行多选；在 mac中，按住command键可以进行多选。
</div>
<div>
（2）select该部分是指，在没有选择的情况下，系统默认选择的选项。
</div>
<div>
6.这是提交键。
<pre><code class="language-html"><input type="submit" value="提交"></code></pre>7.这是重置键。
<pre><code class="language-html"><input type="reset" value="重置"></code></pre>8.这是<label>标签，它本身不会呈现效果，但是有了该标签，如果你在label标签内点击了该文本，会自动对焦到相应的表单控件，所以可以直接<label>...</label>用也可以但是没有此效果了。
<pre><code class="language-html"><label for="控件id名称"></code></pre>
</div>
<h2> 四 .实例介绍 </h2>
<div>
我现在准备做一个表格，让客户填写，在没有css样式的情况下，那么这是一张毫无美感的网页，但是已经具备了基本的功能。
</div>
<div>
<br>
</div> 代码如下：
<pre><code class="language-html"><html>
<head>
<title>TODO supply a title
Sigh Up
Your basic info
