HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Html和CSS的关系</title>
<style type="text/css">
h1{
font-size:12px;
color:#930;
text-align:center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 标签可以大写或小写，但建议为小写
<h1></h1> 标题标签
<p>段落文本</p> 段落标签 [默认样式：段前段后都会有空白]
<img src="1.jpg"> 图片img引用标签
<em></em> 斜字体，强调关键字
<strong></strong> 粗字体
<p1></p2> ... <p6></p6> 文章标题 [默认样式：加粗 1到6字体从大到小]
<span>文本</span> 为文字设置单独的样式
<br/> 换行
<hr/> 水平横线 [默认样式：加粗黑色]
<address>联系地址信息</address> 地址信息标签 [默认样式：斜体 ;可以定义一个地址，如电子邮件地址、签名、文档的作者身份]
<code>代码语言<code> 单行代码
<pre>代码语言</pre> 多行代码 [代码会保留空格和换行符]
<div></div> 可以把一些独立的逻辑部分划分出来，相当于一个容器
空格
|
1
2
3
4
5
6
7
8
9
10
11
| <head>标签的作用:
文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
|
为文字设置单独的样式
eg:
20190714A01.jpg
1
2
| <q>引用文本</q>标签
短文本引用，引用别人的话，自动为文本两边加上双引号
|
eg:
20190714A02.jpg
1
2
| <blockquote>文本引用</blockquote>标签
对长文本进行引用，引用的文本整段会缩进
|
20190714A03.jpg
1
2
| ul-li标签
列表显示标签，没有前后顺序,默认样式每项li前都会自带一个圆点
|
eg:
20190714A04.jpg
ol-li标签
列表显示标签，有前后顺序，默认样式每项前有序号，序号从1开始
eg:
20190714A05.jpg
1
2
3
| <div></div> 标签
可以为一个逻辑部分设置一个名称，唯一标识
<div id="板块名称">..</div>
|
1
2
3
4
5
6
7
8
9
| <table></table>标签
创建表格的元素有table、tbody、tr(行)、th（表格表头，默认粗体居中）、td(单元格)
<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
<table summary="表格简介文本"> 给表格添加摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
<caption>标题文本</caption> 给表格添加标题
用以描述表格内容，标题的显示位置：表格上方。
|
eg:为表格加入边框
20190714A06.jpg
eg:为表格添加摘要和标题
20190714A07.jpg
1
2
3
4
5
6
7
8
| <a>标签链接到另一个页面
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色）
设置在新的浏览器窗口中打开
<a href="目标网址" target="_blank">click here!</a>
<a>标签可以利用mailto链接邮件地址
|
mailto参数详解：
20190714A08.jpg
eg:如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
20190714A09.jpg
1
2
3
4
| <img> 插入图片的标签
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
2、图像可以是GIF，PNG，JPEG格式的图像文件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <form></form> 表单标签，与用户交互
<form method="传送方式" action="服务器文件">
action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
文本输入框、密码输入框
<form>
<input type="text/password" name="名称" value="文本" />
</form>
1、type：
当type="text"时，输入框为文本输入框
当type="password"时, 输入框为密码输入框
当type="submit"时, 确定按钮
当type="reset"时, 重置按钮
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <textaarea></textarea> 文本域，支持多行文本输入
语法：
<textarea rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。
eg:
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>
|
1
2
3
4
5
6
7
8
9
| 使用单选框、复选框，让用户选择
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
|
eg:
20190714A10.jpg
下拉框列表eg:
20190714A11.jpg
1
2
| 使用下拉列表框进行多选
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
|
eg:
20190714A12.jpg
1
2
3
4
5
6
7
| form表单中的label标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。
如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
|
eg:
20190714A13.jpg
