1 HTML介绍
注：本文参考慕课网的（初识HTML+CSS）网络课程，仅学习，无商业用途
1.1 web前端基础
web前端开发基础技术有三个：HTML、CSS、JavaScript语言。
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
1.2 HTML标签
平常大家说的上网就是浏览各种各式各样的网页，这些网页都是由html标签组成的。 标签由英文尖括号< >括起来，如<html>就是一个标签，每个标签内容不同，功能也就不同。如图1-1所示，<title>是网页名字标签，<body>是网页内容标签，<h1>是标题标签，<p>是段落标签，<img>是图片标签。 html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。标签与标签之间是可以嵌套的，但先后顺序必须保持一致。标签建议小写。测试结果如图1-2所示。
图1-1
图1-2
1.3 html文件基本结构
一个HTML文件是有自己固定的结构的。如图1-3。
图1-3
<html></html>称为根标签，所有的网页标签都在中。标签用于定义文档的头部，它是所有头部元素的容器.头部元素有<title><script><style>、<link><meta>等标签。<title>和</title>标签之间的文字内容是网页的标题信息
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
1.4 代码注释
每一类语言都有注释方法，HTML的注释方法是：<!--代码注释-->
2 HTML标签
2.1 基本内容标签
<p>标签：段落标签。多个段落必须由多个段落写上。如图2-1
图2-1
<h>标签，这是标题标签，h后面加数字1-6，这是代表标题的级数。如图2-2所示。
图2-2
<em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。 <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。<span>标签可以在外单独设置样式。如图2-3.
图2-3.
<br>标签，相当于word之中的回车键，就是提行效果。而空格效果不是有尖括号的标签表示，而是 来表示的。同样<hr>标签是直接使用的，不需要成对。如图2-4所示。
图2-4
<address>标签是地址标签，一般是引用的是具体联系地址，字体为斜体。如图2-5所示：
图2-5
在网页界面中，不避免会插入一些介绍性的代码，这就可以使用<code >和<pre>，把代码插入其中。只是<code>只支持插入一行代码，<pre>可以插入一段代码。
2.2 样式标签
网页里有很多列表，HTML最原始列表设计是<ul>+<li>标签。也可以有数字排行，就使用<ol>+<li>。如图2-6所示。
图2-6
<div>是一个容器标签，可以把网页划分出独立的逻辑部分。不同部分使用的标签相互独立，不受影响。这是网页制作的重点概念，必须熟悉其的使用方法。我们可以为其命名。如图2-7所示。
图2-7
<table>是表格标签，这可以在网页制作出表格样式。但是，在没有使用CSS的情况下，表格是没有线的。创建表格的四个元素：table、tbody、tr、th、td。整个表格以<table>标记开始、</table>标记结束。<tbody>是表格加载模块，表格的加载是按照<tbody>块来加载的。<tr>是表格的一行，所以有几对tr 表格就有几行。<td>…</td>：表格的一个单元格，<th>…</th>：表格的头部的一个单元格，加粗显示。如图2-8所示。
图2-8
表格也可引用摘要标签，<caption>标题文本</caption>。但是不会显示，它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容
2.3 引用标签
<a>标签是超链接标签，超链接如：<a href = "www.baidu.com" title="点击进入百度">click here!</a>。既可单机“点击进入百度”，而链接到百度网页。如下所示：
图2-9
点击之后：
图2-10
若想要在新建窗口打开链接，则添加 target="_blank",在<a>标签中。除此之外，<a>标签还可以链接电子邮件地址。使用不多，具体不在介绍。
<img>标签，是图片的引用。例子如：<img src = "myimage.gif" alt = "My Image" title = "My Image" />，如图2-11所示。
图2-11
3 交互设计，表单标签
3.1 表单
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。语法：<form method="传送方式" action="服务器文件">。传送方式有两种，get 和 post。get是想服务器获取指定资源，而 post是提交数据给服务器。所有的表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间。如图3-1所示：
文本输入框：<input type="text/password" name="名称" value="文本" />，text是普通值；password是密码，输入为不可见。
按钮：< input type="submit"value="提交">
label：label标签不会向用户呈现任何特殊效果，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上)。一般可作为文本提示框。注意ID一定相同。
图3-1
3.2 其余表单控件
文本域：<textarea rows="行数"cols="列数">文本</textarea>
单选/复选框：<input type="radio/checkbox" value="值" name="名称" checked="checked"/>。当 type="radio" 时，控件为单选框当 type="checkbox" 时，控件为复选框。value：提交数据到服务器的值。name：为控件命名，以备后台程序使用。checked：当设置 checked="checked" 时，该选项被默认选中。当使用同一组:同一组的单选按钮，name 取值一定要一致。如图3-2所示。
图3-2
下拉选框：<select>标签中，夹着<option value="旅游" selected="selected" >旅游</option>。selected="selected"的时候，表示，默认的值。如图3-3.
图3-3
网友评论