1 HTML的简述
1.1 概述
HTML：（Hyper Text Markup Language）超文本标记语言
文本：相当于记事本里写的文字。 展示信息
超文本：超越了文本仅仅展示信息的功能范畴。泛指：图片、有样式的文字、点击跳转页面的文字。
HTML是由标签所组成的语言，能展示超文本效果，是用来写网页的，是设计页面的基础。
1.2 语言特征
HTML代码是由头和体组成。
<html>
<head>
<title> 标题</title>
</head>
<body>需要展示给用户看的信息内容</body>
</html>
标签就相当于 java类 大括号
- HTML文件的扩展名为html或者htm。Htm是老的命名规范，html的新的。
- HTML文件由浏览器直接解析执行，无需编译，直接由上到下依次解析执行。
- HTML标签通常由开始标签和结束标签组成。内容体开始标签和结束标签之间的内容叫做内容体
- HTML没有内容体的标签叫做空标签。仅由一个标签组成。
- HTML标签不区分大小写，为了方便阅读，建议使用小写。
- HTML标签是有属性的，格式为：
属性名=”属性值”，属性值用引号引起。引号包含单引号和双引号。 - HTML标签建议包裹嵌套，不建议交叉嵌套。
2 HTML的基本标签
2.1 字体标签和格式化标签
-
<font 属性名=”属性值”>文字</font>字体标签，用于展示效果中修饰文字样式
- size:控制字体大小.最小1 ~ 最大7。 如果设置范围不在1~7之间，设置无效。
- color：控制字体颜色. 使用英文设置（例如：red,blue…）
- face：控制字体类型，只能设置系统字库中存在的字体类型。
-
<br/>HTML源码中换行，浏览器解析时会自动忽略，展示效果中换行要用到此换行标签，
-
<p 属性名=”属性值”>文字</p>段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行
- align:段落内容的对齐方式，默认是left，可选Right、Center
-
<h1>文字</h1>- 标题标签，用于展示效果中划分标题，其中 h1 最大， h6 最小
-
- HTML源码中的多个空格，效果中最终会合并成一个。此空格符号用于展示效果中显示一个空白的位置。
2.2 图片标签
<img src="../img.jpg" width="400" height="400"/>
用于在页面效果中展示一张图片。
-
src：指明图片的路径。（必有属性）可写上内网路径（绝对路径、相对路径）或互联网路径
-
alt属性用于指定图片的替换文字
-
title属性用于设置当前对象的说明信息
-
width：图片宽度
-
height：图片的高度
宽度和高度的设置两种方式
width=”400” 等同于 width=”400px”。默认单位是px（像素）
width=”50%”，百分比设置，是父标签的百分比，是动态改变的。
2.3 列表标签
-
<ol></ol>有序列表标签，用于在效果中定义一个有序列表
-
<ul></ul>无序列表标签，用于在效果中定义一个无序列表
-
<li></li>列表条目项标签，用于在效果中定义一个列表的条目
2.4 超链接标签
<a href="http://www.baidu.com">百度</a>
? 超链接标签，用于在效果中定义一个可以点击跳转的链接
- href：超链接跳转的路径 (必有属性)
- a标签内容体，不仅仅是文字，也可以是其他内容，例如图片
- a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，例如图片
2.5 表格标签
-
<table></table>表格标签，用于在效果中定义一个表格
- border：设置表格的边框粗细
- width：设置表格的宽度
-
<tr></tr>表格的行标签，用于在效果中定义一个表格行
-
<td></td>表格的单元格标签，用于在效果中定义一个表格行中的单元格
-
<th></th>表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格
<th>和<td>唯一区别：<th>内容 居中加粗
示例
| 姓名 | 生日 | 身高 |
|---|---|---|
| 黑岛正义 | 3.29 | 171 |
| 泷本日富美 | 1.23 | 162 |
-
单元格合并
<td>或者<th>都有两个单元格合并属性：- colspan：跨列合并单元格
- rowspan：跨行合并单元格
示例
| 8 | 8 | |
| 8 | 8 | |
2.6 块标签
-
<span></span>行级的块标签，用于在效果中 一行上定义一个块，进行内容显示。
- span有多少内容，就会占用多大空间。
- Span不会自动换行
- 适用于少量数据展示
-
<div></div>块级的块标签，用于在效果中 定义一块，默认占满一行，进行内容的显示
- 默认占满一行
- 会自动换行
- 适用于大量数据展示
3 HTML的表单标签
3.1 输入项标签
<input/>
表单输入项标签之一，用户可以在该标签上 通过填写和选择 进行数据的输入。
-
type:设置该标签的种类
- text:文本框。 默认
- password:密码框。 内容为非明文
- radio:单选框。 在同一组内有单选效果
- checkbox:复选框。 在同一组内有复选效果
- submit:提交按钮。用于控制表单提交数据
- reset:重置按钮。 用于将表单输入项恢复到默认状态
- file:附件框。用于文件上传。
- hidden:隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据。
- button:普通按钮。需要和JS事件一起用
-
name: 单选框、复选框进行数据的分组。/ 设置该标签对应的参数名
某个表单输入项需要通过参数列表提交，就必须设置name属性
-
value:设置该标签对应的参数值。 / 作为按钮的名字
value属性的设置策略：- 文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以*输入
- 单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on
-
checked:设置单选框/复选框的默认选中状态
-
readonly:设置该标签的参数值只读，用户无法手动更改。数据是可以正常提交
-
disabled:设置该标签不可用，参数值无法更改，且参数值也无法提交
示例：
3.2 选择标签框
<select></select>
定义一个选择框
- name: 设置该标签对应的参数名
- multiple：设置该标签选项全部显示，并且可以进行多选提交。默认为单选。
<option></option>
选项标签，用于为一个选择框添加一个选项
- value:设置需要提交的参数值。
- selected:设置选项的默认选中状态
示例
3.3 文本域标签
<textarea></textarea>
表单输入项标签之一，用户可以在该标签上 通过输入进行数据的输入。
- name: 设置该标签对应的参数名
文本域和文本框区别：
- 文本框不能换行，文本域可以
- 文本框参数值是value属性，文本域参数值是标签的内容体
3.4 表单标签
<form></form>
用于在效果中定义一个表单，用于提交用户填写的数据。
-
action:将数据提交到何处。
-
method:将数据以何种方式提交
- Get提交：把数据拼接到地址栏上（默认）
- Post提交方式特点：没有把提交数据拼接到地址栏上。请求体
Get和post提交方式区别：
- Post方式提交的数据较Get方式相对安全
- Post方式从理论上提交的数据量无限大，Get方式有限
尽量使用post方式提交表单
3.5 绑定标签
<label></label>
常用于绑定内容与表单标签的关系
-
方法一
- 使用label标签把内容包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
-
方法二
直接用label标签吧内容和表单一起包裹起来