一、html简介
1.1 什么是Html
W3C组织研发.
Html是用来描述网页的一种语言。
Html指的是超文本标记语言(HyperText Markup Language)(在html中标签都是w3c组织定义好的,定义好了许多标签,每个标签都有具体的含义,超文本是(超出了文本的范围)
Html不是一种编程语言，而是一种标记语言(markup language)
标记语言是一套标记标签(markup tag)
Html使用标记标签来描述网页
html设计的宗旨是用来展示数据的. 具体如何展示数据呢,html中定义了一些标签,这些标签都有具体的含义
搭建环境. dreamweaver(梦想的编织者) .hbuilder.(绿色版本 直接解压就可以用)
1.2 Html的作用
Web浏览器的作用是读取html文档，并以网页的形式显示它们。浏览器不会显示html标签，而是使用标签来解释页面上的内容。简单说，html就是用于展示信息的。
1.3 Html程序遵循的规范
(1) html程序以<html>开始，同时</html>结束；
(2) html程序包含两部分内容：head和body；
<html>
<head>设置页面信息</head>
<body>显示到页面上的内容</body>
</html>
(3) html的标签有开始标签，同时也要结束标签，标签通常是成对出现的，比如<b>和</b>；
(4) html的代码不区分大小写的；
(5) 有些标签没有结束标签，需要在标签内结束
，实现换行的操作，使用标签实现的
，没有</br>；
(6) 绝大多数的标签都具有属性，建议属性值使用引号引起。例如:<body text=”red”>；
(7) 大多数标签是可以嵌套的。
1.4 Html的操作思想
在网页中可能有很多的数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装），通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器内数据样式的变化。
二、Html标签
2.1. 字体标签
2.1.1. <font>文字标签font字体，大小，颜色
(1) font字体，大小，颜色
<font>标签用于规定文字的字体，大小，颜色。
<font color="设置文字颜色" size="文字的大小">要操作的文字的内容</font>
常用属性：
属性 作用
face 规定文本的字体
size 规定文本的大小，文字大小值范围：1-7，如果值超过了7，使用还是7的效果
color 规定文本的颜色
颜色有三种表示方式：
颜色由红色、绿色、蓝色混合而成
第一种：直接使用英文单词进行表示 red green yellow
第二种：使用十六进制数字进行表示 #ffffff
第三种：使用RGB颜色值配置 rgb(255,0,0)
2.1.2. <title>标题标签
<head>
<meta charset="utf-8" />
<title>html基本标签学习</title>
</head>
title 表示当前网页的标题
<h1>-<h6>标签用于定义标题。<h1>最大标题，<h6>最小标题。
标题标签可以自动换行，从h1到h6字体的大小依次变小的。
<h1>这是标题h1</h1>
<h2>这是标题h2</h2>
<h3>这是标题h3</h3>
<h4>这是标题h4</h4>
<h5>这是标题h5</h5>
<h6>这是标题h6</h6>
2.2 排版标签
2.2.1 < hr/>水平线标签
常用属性：
属性 作用
align 设置水平线对齐方式 可选值 left right center
size 设置水平线的粗细，范围1-7
width 设置水平线长度，可以是绝对值或相对值。默认为100%
color 设置水平线颜色，默认为黑色
2.2.2 <!- - 注释的内容 -->注释标签
在Java里面有三类注释：单行注释，多行注释，文档注释。
在html中注释 <! -- 注释的内容 -->，使内容不在html页面中进行显示。
2.2.3. <p>段落标签
<p>标签是段落标签，可以将html文档分割为若干段落。浏览器会自动在段落前后添加空格。
<p>标签常用属性：
align：用于设定对齐方式，可选值 left right center，默认值是left。
2.2.4. < br/>换行标签
< br/>标签是换行标签。
因为浏览器会自动忽略空白和换行，因此
标签成为了我们最常用的标签之一。
2.2.5.  特殊字符标签(空格)
 
实现空格的操作
2.2.6. pre，s，u，b，i标签(斜体,加粗,下划线,删除线)
标签 作用
pre 原样输出
s 删除线
u 下划线
b 加粗
i 斜体
2.2.7. div和span
div：展示数据会自动换行,+CSS
span：在一行进行显示(组合后也不会换行)
2.3 列表标签
2.3.1. <dl><dt><dd>自定义列表标签
首先需要使用 <dl></dl>: 定义列表的范围
之后在dl标签里面 <dt></dt>: 定义上层内容
在dl标签里面 <dd></dd>: 定义下层内容
<dl>
<dt>技术部</dt>
<dd>Java</dd>
<dd>Android</dd>
<dd>ios</dd>
</dl>
2.3.2. <ol><li>有序列表标签
使用 <ol></ol>: 定义有序列表的范围
ol标签上面有属性 type：排序的方式，type属性里面的值 1 a i
之后在ol标签里面：<li></li>: 封装具体的内容。
<ol type=”a”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ol>
<ol type=”i”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ol>
2.3.3. <ul><li>无序列表标签
首先使用标签 <ul></ul>: 定义无序列表的范围
ul标签上面有属性 type：设置特殊符号
type属性里面的值 disc circle square
之后在ul标签里面： <li></li>: 封装具体的内容
<ul >
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ul >
<ul type =”square”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ul >
<ul type =”circle”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ul >
2.4 <img>图形标签
<img>是一个图片标签，用于在页面上引入图片。
常用属性：
属性 作用
src 用于设定要引入的图片的url
alt 用于设定图像的替代文字
*鼠标移动到图片上面，稍等片刻出现文字
*如果图片找不到，显示alt的内容
*这个属性在某些浏览器不能显示的
width 用于设定图片的宽度
height 用于设定图片的高度
border 图片边框厚度
align 用于设定图片的对齐方式
2.4 <a>超链接标签
<a>标签用于定义超连接，用于从一个页面链接到另一个页面。
<a href="链接到的地址">显示在页面上的内容</a>
常用属性：
属性 作用
href 用于设定链接指向页面的url
name 用于设定锚的名称
target 用于设定在何处打开链接页面。在默认的情况下，打开方式在当前的页面打开。
target里面的值：
_self，当前页面打开；
_blank，在新标签页打开。
想要一个超链接没有效果，在href属性值写成#
2.5 <table><tr>th或td表格标签
操作技巧：
首先数表格里面有多少行，数每行里面有多少个单元格。
首先定义表格的范围：<table></table>
<table>中的属性：
属性 作用
border 设置表格线
bordercolor 设置表格线的颜色
cellspacing 设置单元格之间的距离
cellpadding 设置文字和单元格之间的距离
width 设置表格的宽度
height 设置表格的高度
align 设置表格的对齐方式
bgcolor 设置表格的背景颜色
在table标签里面表示行： <tr></tr> 包含一个或多个th或td元素
属性 作用
align 设置对齐方式：left center right
bgcolor 设置表格中行的背景颜色
在tr标签里面表示列： <td></td> 定义表格单元
属性 作用
align 用于设定单元格内容的对齐方式
bgcolor 用于设定单元格背景颜色
height 用于设定单元格的高度
width 用于设定单元格的宽度
colspan 用于设定列合并
rowspan 用于设定行合并
在tr标签里面也可以表示单元格：<th></th>用于定义表格的表头
- 实现居中和加粗的效果
合并单元格
是在td标签上面进行的操作，使用两个属性。
rowspan：跨行
代码 <th rowspan="4">人员信息3人</th>
colspan：跨列
代码 <td colspan="3">统计信息3人</td>
标题标签 用于定义表格标题
<caption>标题内容</caption>
<caption>标签必须紧随<table>标签之后，一个表格只能有一个标题。通常这个标题会被居中于表格之上。
2.6 <form>表单标签
<form>标签代表一个表单，表单用于向服务器传输数据。
<form>标签能够包含<input>，可以是文本字段，复选框，单选框或提交按钮等。还可以包含<textarea> <select>等。(大多数由input构成)
<form>常用属性:
属性 作用
name 用于定义表单的名称
action 用于规定提交表单时向何处发送表单数据
method：用于规定提交的方式。一般取值 POST或GET，在默认情况下，提交方式是get提交。
get提交方式会在地址栏携带数据，安全性很差
post提交方式地址栏不会携带数据，安全性比较高，数据在请求体里面
2.6.1 输入项<input>
可以输入内容或者选择内容的地方。
要求1：输入项里面必须要有name属性
要求2：在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value，设置的值。
输入项需要写到form标签里面
text普通输入项 <input type="text"/>
password密码输入项 <input type="password"/>
radio单选输入项 <input type="radio"/>
要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
设置默认选中，使用属性 checked="checked"
checkbox复选输入项
<input type="checkbox"/>
要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
设置默认选中，使用属性 checked="checked"
file文件输入项
上传文件的。<input type="file"/>
hidden隐藏项
，这个值不会显示在页面上，但是提交表单也可以提交到服务器上
<input type="hidden"/>
普通按钮 <input type="button"/>
<submit>提交
<input type=”submit”> 定义提交按钮。提交按钮会把表单数据发送到服务器。
常用属性：
name：定义标签名称
value：按钮显示名称1
若要提交到百度,在form上加入action=”http://www.baidu.com”
<reset>重置
<input type=”reset”> 定义重置按钮。当点击表单的重置按钮不是清空数据,是恢复到默认状态
常用属性：
name：定义标签名称
value：按钮显示名称
服务器会根据name属性来获取我们提交的值,所以我们在写Input标签的时候都要加上一个name属性,这样才可以把数据提交到服务器
提交数据的2种方式 默认get提交 和post提交
<image>定义图像形式的提交按钮
<input type=”image”> 定义图像形式的提交按钮。这个标签主要是用了替换 submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定 的图片做为提交按钮。
常用属性：
name：定义标签名称
src：定义作为提交按钮显示的图像的url
alt：定义作用图像的替代文本
下面两个输入项不是用2标签进行封装的
2.6.2. <select><option>下拉选择输入项
<select >
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>
使用属性 selected="selected" 默认选中
2.6.3. </textarea>文本域
<textarea cols="10" rows="5"></textarea>
