1.HTML的简述
1.1 HTML是什么？有什么作用？
HTML：（Hyper TextMarkup Language）超文本标记语言
文本：相当于记事本里写的文字。展示信息
超文本：超越了文本仅仅展示信息的功能范畴。泛指：图片、有样式的文字、点击跳转页面的文字
语言：工具
标记：标签
HTML是由标签所组成的语言，能展示超文本效果
html是用来写网页的，是设计页面的基础。
1.2 HTML的入门案例
1.3 HTML的语言特征
HTML代码是由头和体组成的
<html>
<head>
<title>标题</title>
</head>
<body>内容</body>
</html>
<head>中存放的都是网页的说明性内容，例如标题
HTML文件的扩展名为html或htm。htm是老的命名规范，html是新的
html文件由浏览器直接解析执行，无需编译，直接由上到下依次解析执行。
html标签通常由开始标签和结束标签组成。例如<font> </font>
开始标签和结束标签之间的内容叫做内容体
HTML没有内容体的标签叫做空标签。仅由一个标签组成。例如<br/> 自关闭
HTML标签不区分大小写，为了方便阅读，建议使用小写
HTML标签是有属性的，格式为：属性名=“属性值”，属性值用引号引起。引号包含单引号和双引号。
HTML标签建议包裹嵌套，不建议交叉嵌套。
1.4 使用Hbuilder
2.HTML的基本标签
2.1 HTML字体标签和格式化标签
2.1.1 font
字体标签，用于展示效果中修饰文字样式
<font 属性名=" 属性值 " >文字
size：控制字体大小 最小1~最大7
color
face：控制字体类型。只能设置系统字库中有的字体类型
2.1.2 br
HTML源码中换行，浏览器解析时会自动忽略
换行标签，用于展示效果中换行
<br/>
2.1.3 <p></p>
段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空行
align：段落内容的对齐方式
默认是left，内容居左
Right 右
Center 居中
2.1.4 <h1></h1>
标题标签，用于展示效果中划分标题
其中<h1>最大，<h6>最小
2.1.5
2.1.6 HTML注释
格式：<!-- 内容 -->
2.2 图片标签
2.2.1 <img/>
用于在页面页面效果中展示一张图片。
src：指明图片的路径。（必有属性）
图片路径的写法：
① 内网路径：
绝对路径：文件在硬盘上的具体位置
相对路径：从引入者所在目录触发
…/表示上一层目录 ./表示当前目录
② 互联网路径：
例如：http://www.baidu.com/xxx.jpg
width：图片宽度
height：图片的高度
宽度和高度的设置：默认单位是px，像素。例如：width=“400” 其实设置的是width=“400px”
百分比设置。例如：width="50%“，是父标签的百分比，是动态改变的。
2.3 列表标签
2.3.1 <ul></ul>
无序列表标签，用于在效果中定义一个无序列表
2.3.2 <li></li>
列表条目项标签，用于在效果中定义一个列表的条目
2.3.3 <ol></ol>
有序列表标签，用于在效果中定义一个有序列表
2.4 超链接标签
2.4.1 <a></a>
超链接标签，用于在效果中定义一个可以点击跳转的链接
href：超链接跳转的路径（必有属性）
本机路径：相对路径和绝对路径
互联网路径：http://地址
本页：默认跳转到本页
超链接正常工作：
① a标签内必须有内容
② a标签必须有href属性
注意：
① a标签内容体，不仅仅是文字，也可以是其他内容，例如图片
② a标签的href属性，不仅可以连接到html上，也可以连接到其他文件上，例如图片
2.5 表格标签
定义一个表格：
① 定义一个表格<table></table>
② 定义表格中的一行<tr></tr>
③ 在表格一行中定义单元格<td></td>
2.5.1 <table></table>
表格标签，用于在效果中定义一个表格
border：设置表格的边框粗细
width：设置表格的宽度
2.5.2 <tr></tr>
表格的行标签，用于在效果中定义一个表格行
2.5.3 <td></td>
表格的单元格标签，用于在效果中定义一个表格行中的单元格
2.5.4 <th></rh>
表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格
<th>和<td>唯一区别：th内容 居中加粗
2.5.5 单元格合并
<th>或者<td> 都有两个单元格合并属性：
colspan：跨列合并单元格
rowspan：跨行合并单元格
合并步骤：
① 确定合并哪几个单元格，确定是跨列合并还是跨行合并
② 在第一个出现的单元格上书写合并单元格属性
③ 合并几个单元格，属性值就书写几个
④ 被合并的单元格必须删掉
2.6 块标签
2.6.1 <span></span>
行级的块标签，用于在效果中一行上定义一个块，进行内容显示。
有多少内容，就会占用多大空间。
Span不会自动换行。
适用于少量数据展示。
2.6.2 <div></div>
块级的块标签，用于在效果中定义一块，默认占满一行，进行内容的显示
会自动换行，默认占满一行，适用于大量数据展示
3.HTML的表单标签
表单作用：用来提交用户输入的数据。提交给服务器的程序相当于一个WEB程序的入口，类似于java中的scanner
3.1 表单标签
<form></form>标签
用于在效果中定义一个表单，用于提交用户填写的数据。
action：将数据提交到何处。
默认提交到本页。
本机内网路径：
相对路径：
绝对路径：
互联网路径：
http://******
method：将数据以何种方式提交
默认为：get
提交方式可定义：get或者post
Get提交方式特点：把数据拼接到地址栏上
Post提交方式特点：没有把提交数据拼接到地址栏上。而是拼接到请求体上
Get和Post提交方式区别：
① get提交的参数列表拼接到了地址栏后面
post方式不会拼接地址栏
② get方式提交的数据敏感信息不安全
post方式提交的数据相对安全
③ get方式提交的数据量有限
post方式从理论上提交的数据量是无限大的
尽量使用post方式提交表单
3.2 输入项标签
<input/>标签
表单输入项标签之一，用户可以在该标签上通过填写和选择进行数据的输入。
type：设置该标签的种类
text：文本框。默认
password：密码框。 内容为非明文
radio：单选框
checkbox：复选框
submit：提交按钮。用于控制表单提交数据
reset：重置按钮。用于将表单输入项恢复到默认状态
file：附件框。用于文件上传
hidden：隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据
button：普通按钮。需要和JS事件一起用
name：单选框、复选框进行数据的分组 / 设置该标签对应的参数名
某个表单输入项需要通过参数列表提交，就必须设置name属性
value：设置该标签对应的参数值/作为按钮的名字 / 作为按钮的名字
value属性的设置策略：
① 文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入
② 单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on
checked：设置单选框/复选框的默认选中状态
readonly：设置该标签的参数值只读，用户无法手动更改
disabled：设置该标签不可用，参数值无法更改，且参数值也无法提交。
3.3 选择框标签
<select></select> 标签 定义一个选择框
name：设置该标签对应的参数名
multiple：设置该标签选项全部显示，并且可以进行多选提交。默认为单选。
<option></option>标签
选项标签，用于为一个选择框添加一个选项
value：设置需要提及的参数值。
selected：设置选项的默认选中状态
注意事项：
Option的内容体一般是用来进行展示
参数值应该是option的value属性值
3.4 文本域标签
<textarea></textarea>标签
表单输入项标签之一，用户可以在该标签上 通过输入进行数据的输入
name：设置该标签对应的参数名
文本框和文本域区别：
① 文本框不能换行，文本域可以
② 文本框参数值是value属性，文本域参数值是标签的内容体
3.5 提交表单注意事项
3.5.1 提交中文问题
3.5.1.1 为什么要使用URL编码
倘若提交的表单数据类似这样：
?password=123&321&456&username=zhangsan
如果不适用URL编码，就会读取到错误的数据
URL编码解决方式：特殊符号，中文
例如：& -> %26
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
