一、html介绍：
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等；2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现；
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
4. HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html与CSS的关系</title> <style type="text/css"> h1{ font-size: 20px; color: #930; text-align: center; } p{ font-size: 30px; color: #000; text-align: left; } span{ color: blue; } </style> </head> <body> <h1>哈哈，这就是第一个界面了！</h1> <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的<em>问题</em>。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着：<strong>"我来，我来。"</strong>我环顾了四周，就我没有举手。</p> <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" /> </body> </html>
二、认识标签（第一部分）：
1. <body></body> : 在网页上要展示出来的页面内容一定要放在body标签中。2. <p></p> : 段落文本标签。p标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。
3. <hx></hx> ： 文章的标题标签。（六个样式）
4. <em></em> : 文本关键字强调标签（斜体）
<strong></strong> : 文本关键字强调标签（粗体）
5. <span></span> :只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到<span>标签了。
6. <q></q> : 比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），
而是它的语义：引用别人的话。（引用短的文本）
7. <blockquote> ：作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。
8. <br/> : 换行标签。
9. ： 表示空格。
10. <hr/> : 划横线标签。
11. <address></address> : 地址标签（默认是斜体。
12. <code></code> : 在文本中引入一行代码
<pre></pre> : 在文本中引入多行代码
三、认识标签（第二部分）：
1. <ul><li> : 信息列表标签（列表编号无序）。2. <ol><li> : 信息列表标签（列表编号有序）。
注意：ol与ul的具体区别：
ul是无序列表，所谓的无序列表只要举个例子，大家就会明白了。
这就是ul与ol的区别。
ul与ol前的符号是可以修改的。只需要修改它们的type值。
ul的type属性有：disc—实心圆(默认）、circle—空心圆、square—实心方块
ol的type属性有：1—数字（默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。
通过CSS也可以在将它们前的符号改为图片，这样列表显示就会更美观了
3. <div></div> : 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
为了逻辑更急清晰，可以给每个div设置一个id，如<div id = "div1"></div>
4. table、tbody、tr、th、td : 表格标签。
<table summary="这里是对这张表的描述，实际页面不会显示出来">
<caption>这里是这张表的标题</caption>
<tbody> ： 当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
<tr> :表格的一行，所以有几对tr 表格就有几行
<th>班级</th> : 表格的头部的一个单元格，表格表头
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td> : 表格的一个单元格，一行中包含几对
<td>30</td>
<td>89</td>
</tr>
四、认识标签（第三部分）：
1. <a href = "跳转到的新地址" title = "鼠标放上去后显示的文字" target="_blank"（新页面打开）>显示的文字</a> : 超链接2. 发送电子邮件：
<a href="mailto:yy@imooc.com ? subject="主题" & body="邮件内容">超链接</a>
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
3. <img src = "文件路径" alt="加载不成功显示的文字" title="鼠标放上去显示的文字"/>
五、与浏览者交互，表单标签
1. 表单标签：<form method="post/get" action="提交到哪里">
2. 输入框: <input type="text/password" name="" title="默认文字">
3. 文本域：当用户需要在表单中输入大段文字时，需要用到文本输入域
<textarea rows="行数" cols="列数">文本</textarea>
4. 单选框（同一组单选按钮，name值必须一样才能实现单选功能）：
<form action="save.php" method="post" >
<label>性别:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" />
</form>
5. 复选框： <input type="radio/checkbox" value="值" name="名称" checked="checked"/>
6. 下拉列表:
<select multiple="multiple"（这个属性可以实现多选）>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
7. 提交按钮：<input type="submit" value="提交">
8. 重置按钮：<input type="reset" value="重置">
9. lable标签： label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，
浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：<label for="控件id名称"> 。 注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
