一.HTML和CSS的关系
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2.CSS样式是表现。就像网页的外衣，比如，标题字体、颜色变化、或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3.JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单，或鼠标滑过表格的背景颜色改变，还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
二.HTML语法
1.标签的语法
(1)标签由英文尖括号<>括起来。
(2)HTML中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/符号
(3)标签与标签之间可以是嵌套的，但是先后顺序必须保持一致。
(4)HTML标签不区分大小写，但是建议写小写，因为大部分程序员都一般以小写为标准
2.HTML文件的基本结构
<html>
<head></head>
<body></body>
</html>
(1)<html></html>是根标签，所有的网页标签都在<html></html>中。
(2)<head>标签用于定义文档的头部，它是所有头部元素的容器，头部的元素有<title><script><style><link><meta>等标签。
(3)在<body>和</body>标签之间的内容是网页的主要内容，如<h1>,<p>,<a>,<img>等网页内容标签，在这里的标签中的内容都会在浏览器中显示出来。
3.head标签
(1)作用：文档的头部表述了文档的各种属性和信息，包括文档的标题等，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
4.html代码注释
(1)语法：<!—注释文字-->
(2)作用：帮助程序员标注代码用途，过一段时间后再看该代码，就可以知道这段代码的用途，使用注释不但可以使得程序员很快回忆起自己写的代码的用途，还可以帮助其他的程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
5.语义化
(1)语义化指的是明白每个标签的用途。
(2)语义化的好处：更容易被搜索引擎收录；更容易让屏幕阅读器读出网页的内容。
6.<p>标签，添加段落
(1)语法：<p>段落文本</P>
(2)<p>标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用CSS样式来删除或者改变它。
7.<hx>标签，添加网页的标题
(1)标题的标签一共有六级，<h1><h2><h3><h4><h5><h6>,分别称作一级标题，二级标题，三级标题，四级标题，五级标题，六级标题，随着标题级数的增加，标题的字样也会越来越大，<h1>是最高的登记。
(2)语法：<hx>标题文本</hx>此处的x为1-6
8.强调语气的标签<strong>和<em>
(1)<em>表示强调，<strong>表示更强烈的强调，并且在浏览器中<em>默认用斜体表示，<strong>用粗体表示，两个标签相比的话，目前国内前端程序员更喜欢使用<strong>表示强调。
(2)语法:<em>需要强调的文本</em>,<strong>需要强调的文本</strong>
9.文字设置单独样式的标签<span>
(1)<span>标签没有语义，它的作用就是为了设置单独的样式用的。
(2)语法:<span>文本</span>
10.短文引用标签<q>
(1)语法:<q>引用文本</q>
(2)作用：来引用短文用的，用来引用别人的话。
11.长文本引用标签<blockquote>
(1)这个标签也是引用，但是它有别于<q>标签，它是对于长文本的引用，而<q>是对于短文本的引用
(2)语法:<blockqoute>引用文本</blockquote>
12.换行标签<br>
(1)作用：用来使得文本分行显示
(2)语法:</br>
13.空格标签 
(1)作用：给文本中加入空格时需要使用 而使用键盘上的空格和TAB键都是不起作用的，一个 表示一个空格。
(2)语法：
14.加分割线标签<hr>
(1)语法：html4.01版本<hr>;xhtml1.0版本<hr/>
(2)<hr/>标签和<br/>标签都是空标签，所以只有一个开始标签，没有结束标签。
(3)<hr/>标签的浏览器中默认样式的线条比较粗，颜色为灰色。
(4)现在一般使用xhtml1.0版本，这种版本比较规范
15.网页加入地址信息标签<address>
(1)作用：定义一个地址，比如邮件地址、签名或者文档的作者的身份。
(2)语法<address>联系地址信息</address>
(3)在浏览器上显示的样式为斜体，这个是默认的样式。
16.编码标签<code>
(1)语法:<code>代码语言</code>
(2)在文章中一般如果要插入多行代码时不能使用<code>标签
(3)如果是多行代码，可以使用<pre>标签
(4)多行代码标签的语法:<pre>语言代码段</pre>
(5)多行代码标签的作用：预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符。
(6)<pre>标签不只是为了显示计算机的源代码时所用的，在你需要的网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是来展示计算机的源代码。
17.序号标签<ul><ol><li>
(1)ul-li组合是没有前后顺序的信息列表
(2)语法:
<ul>
<li>信息</li>
</ul>
(2)ul-li标签组合在网页中显示的默认样式一般为:每项li前都自带一个圆点。
(3)<ol>标签在网页中显示的默认样式一般为:每项<li>前都自带一个序号，序号默认从1开始
(4)语法：
<ol>
<li>信息</li>
</ol>
18.<div>标签
(1)作用：相当于一个容器
(2)语法:<div>…</div>
(3)一般是把一些独立的逻辑部分划分出来
(4)逻辑部分是页面上相互关联的一组元素。
(5)语法:<div id=”版块名称”>…</div>
19.创建表格的标签元素
(1)<table>…</table>：整个表格以<table>标签开始，以</table>标签结束。
(2)<tbody>…</tbody>：当表格的内容非常多时，表格会下载一点显示一点，但是如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。
(3)<tr>…</tr>：表格的一行，所以有几对<tr></tr>就有几行
(4)<td>..</td>表格的一个单元格，一行中包含几对<td>…</td>，说明一个行中就有几列。
(5)<th>…</th>:表格的头部的一个单元格，表格的表头
(6)表格中列的个数，取决于一行中数据单元格的个数。
20.为表格添加标题和摘要标签caption
(1)摘要的内容是不会再浏览器中显示出来的，它的作用就是增加表格的可读性，使得搜索引擎更好的读懂表格的内容，还可以使得屏幕阅读器更好的帮助特殊用户读取表格的内容
(2)语法:<table summary=”表格简介文本”>
(3)标题：用来表述表格的内容，标题的显示位置是表格的上方
(4)一般标题处于<table>和<tr>标签之间：<caption>标题文本</caption>
21.超链接标签<a>
(1)作用：通过使用超链接标签，可以链接到下一个网页。
(2)语法:<a href=”目标网址” title=”鼠标滑过显示的文本”>链接显示的文本</a>
(3)超链接标签在默认的情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口打开，需要使用这种代码:<a href=”目标网址” target=”_blank”>click here</a>
22．使用mailto标签在网页中链接email地址
(1)<a>标签还有一个作用是可以链接email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件，我们还可以利用mailto做许多其他的事情。
| 关键字 | 功能详解 | 举例 |
| mailto: | 浏览器会自动调用默认的客户端电子邮件程序（如OutLook）,并在收件人框中自动填上收件人的地址 | <a href=”mailto:aaa@163.com”>发送</a> |
| cc= | 在收件人地址后用cc=地址，尅填写抄送地址 | <a href=”mailto:aaa@163.com?cc=yahuli@126.com”>发送</a> |
| bcc= | 在收件人地址后用bcc=地址，可以填写密件抄送地址 | <a href=”mailto:aaa@163.com?bcc=yahuli@126.com”>发送</a> |
| ; | 用分号隔开多个收件人的地址，可以实现发送给多个收件人的功能 | <a href=”a@163.com;b@126.com”>发送</a> |
| subject= | 用subject=添加邮件的主题 | <a href=”a@163.com?subject=发送电子邮件”>发送</a> |
| Body= | 用body=添加邮件的内容 | <a href=”a@163.com?body=hello”>发送</a> |
(2)如果mailto后面同时有多个参数的话，第一个参数必须以”?”开头，后面的参数每个都用&分隔。23.图片标签<img>
(1)语法:<img src=”图片的地址” alt=”下载失败时的替换文本”title=”提示文本”>
(2)src:标识图像的位置
(3)alt:指定图像的描述文本，当图像不可见时（下载不成功时），可看到该属性指定的文本;
(4)title:提供在图像可见时对图像的描述（鼠标滑过图片时显示的文本）
(5)图像可以是gif,png,jpeg格式的图像文件。
24.表单标签
(1)语法：<form method=”传送方式” action=”服务器文件”></form>
(2)<form>：该标签是成对出现的，以<form>开始，以</form>结束。
(3)action:浏览者输入的数据被传送到的地方
(4)method:数据传送方式(get/post)
(5)所有的表单控件（文本框，文本域，按钮，单选框，复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可能提交不到服务器上）
(6)method:它有两种提交方式，一种是post提交方式，一种是get提交方式，具体的区别可以查看我博客里面写的post和get提交方式的区别这个文章
25.文本输入框和密码输入框
(1)当用户要在表单中键入字母、数字等内容时，就会用到文本输入框，文本框也可以转化为密码框
(2)语法<input ty[e=”text/password”name=”名称” value=”文本”/>
(3)type:当type=”text”时，输入框为文本输入框；当type=”password”时，输入框为密码输入框
(4)name:为文本框命名，以备后台程序使用
(5)value:为文本框设置默认值，一般起到提示作用。
26.文本域标签<textarea>
(1)支持多行文本输入
(2)语法：<textarea rows=”行数” cols=”列数”>文本</textarea>
(3)<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
(4)cols:多行输入域的列数
(5)rows:多行输入域的行数。
(6)在<textarea></textarea>标签之间可以输入默认值。
(7)cols,rows这两个属性可以用css样式的width和height来代替：col用width，row用height来代替。
27.单选框和复选框
(1)单选框中的选项用户只能选择一项，复选框中用户可以任意选择多项，也可以全部选中。
(2)语法:<input type=”radio/checkbox”value=”值” name=”名称” checked=”checked”/>
(3)当type=”radio”时，控件为单选框；当type=”checkbox”时，控件为复选框
(4)value:提交到服务器的值
(5)name:为控件命名，以备后台的程序使用
(6)checked:当设置checked=”checked”时，该选项被默认选中。
(7)同一组的单选按钮，name取值一定要一致。
(8)<option value=”提交值”>选项</option>
(9)select=”selected”:设置select=”selected”属性，则该选项就被默认选中。
(10)使用下拉列表框进行多选，在<select>标签中设置<multiple=”multiple”>属性，就可以实现多选功能。
28.提交按钮
(1)表单中两种按钮可以使用，分别是提交按钮和重置按钮，当用户需要提交表单信息到服务器的时候，需要用到提交按钮；当用户需要重新填写表单的时候，需要用到提交按钮。
(2)语法:<input type=”submit”value=”提交”>
(3)只有当type值设置为submit时，按钮才有提交的作用
(4)value:按钮上显示的文字。
(5)重置按钮，只需要把type设置为reset就可以了
(6)语法:<input type=”reset”value=”重置”>
(7)只有当type值设置为reset时，按钮才有重置作用
(8)value：按钮上显示的文字。
29.form表单中的label标签
(1)label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性，如果你在label标签内点击文本，就会触发此控件，就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关联的表单控件上）。
(2)语法:<label for=”控件id名称”>
(3)标签for属性中的值应当与相关控件的id属性值一定要相同。
1201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
