HTML
1.什么是HTML？
- HTML(Hyper Text Markup Language 超文本标记(标签)语言)
- 本质是文本
2.HTML语法组成结构
第一步：HTML声明
第二步：HTML组成内容
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>这是第一个页面</title>
头标签：存储需要加载资源，比如配置文件等等
</HEAD>
<BODY>
体标签：存储页面组成内容
<BODY>
</HTML>
注意：
1.标签是由起始标签和结束标签来组成—< html>< /html>
2.如果标签里没有内容可以使用自闭标签来表示—< br/>
3.不区分大小写
4.当页面中出现多个空格、制表符空格以及换行在页面展示中都是一个空格
5.转义字符
| 空格 |   |
|---|---|
| " | " ; |
| ’ | &apos ; |
| & | & ; |
| < | < ; |
| > | > ; |
6.标签身上可以通过 属性名="属性值"这种形式来给标签设置属性，在页面当中可以展示标签特点
属性值的双引号和单引号都可以设置属性
3.HTML常用标签
1) 字体标签
< font>< /font>
属性
Color：字体颜色
Size：字体大小
<!--给定颜色属性的属性值（三种方式：1.颜色名称、2.十六进制值、3.三原色值）-->
<font color="red" size=5>我是一个字体标签</font>
2）标题标签
< h1>< /h1> ~ < h6>< /h6>
属性：
align:对齐方式
left：左对齐
right：右对齐
center：居中
justify：自适应
<h1 align="left">一级标题</h1>
<h2 align="right">二级标题</h2>
<h3 align="center">三级标题</h3>
<h4 align="justify">四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
3）列表标签
< ul>定义一个列表，< li>定义列表的每一项
无序列表：
< ul>
< li>< /li>
~
< li>< /li>
< /ul>
属性：
type：定义图标形式（disc:实心圆、square:实心正方形、circle:空心圆）
<ul type="square">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
有序列表：
<ol>
<li></li>
</ol>
4）图片标签
< img src="" alt="" />
属性
src：图片的路径
绝对路径：以盘符开始的路径
相对路径：以当前文件所在目录为起点的路径，…/表示上级目录，./表示当前目录
alt：图片无法显示时的代替文本
width：图片的宽度
height：图片的高度（加px表示图片大小，加%表示屏占比）
<img src="image/1.jpg" alt="这是一个帅哥" width="200px" height="200px"/>
5）超链接标签
< a>
- 跳转到其他页面
属性
href：跳转目标地址
target：打开目标页面的方式（_self:在当前页面打开、_target:在新页面打开 - 在当前页面跳转
第一步设置隐藏的书签< a name=“tag”/>，可以在a标签里给定name属性以及id属性
第二步给绑定超链接来跳转到设置书签< a href="#tag">返回顶部< /a>
注意：当href属性给定的属性值是# 后面跟上属性值就是在当前页面进行跳转
6）表格标签< table>
< table>:定义一个表格
< tr>:表格中的行标签
< td>:行中单元格标签
< th>:行中的标题单元格
table的重要属性：
border 边框宽度
cellspacing 单元格之间的空白距离
cellpadding 边框与单元格内容之间的距离
bgcolor 背景颜色
bordercolor 边框颜色
width 宽度
align 对齐方式
○ table的重要属性:
align 对齐方式
bgcolor 背景颜色
○ tr重要属性:
align 对齐方式
bgcolor 背景颜色
width 宽度
height 高度
colspan 可横跨的列数
rowspan 可竖跨的行数
○ th/td重要属性:
<caption> 定义表格的标题
7）表单标签
提交数据到服务器的方式有两种
a.超链接形式：在地址栏中来拼接参数值发送给服务器。缺点：如果要发送的数据复杂且量多，那么在拼接的时候会导致拼接效率降低，以及和服务器进行交互的效率也会降低。
b.form表单形式：把要发送给服务器的参数值放到表单里通过表单进行集中的拼接，发送给服务器，效率比较高。
-
< form>< /form>只是单独使用form表单标签没有效果需要使用input子标签来输入参数值
-
< form action=“指定数据发送的地址” method=“提交方式”>
提交方式一共有七种，常用的有get和post（默认提交方式是get） -
GET提交和POST提交的区别：
主要区别体现在数据传输方式的不相同
GET提交: 在地址栏拼接参数值 不安全 地址栏拼接参数值大小一般不要大于1KB POST提交: 在底层提交数据 相对安全 底层根据流来传输数据，不限制传输大小 -
表单中的项
表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它
< input> 输入框
重要属性:
type属性
文本框text：输入的文本信息直接显示在框中
密码框password：输入的文本以圆点或者星号的形式显示
单选框 radio：进行单项的选择 如性别选择 多个radio的name属性相同会被当作一组来使用必须用value为选项指定提交的值
复选框checkbox：进行多项选择，爱好的选择。 多个checkbox具有相同的name属性时会被当作一组来使用 必须用value为选项指定提交的值
隐藏字段hidden：如果有一些信息，不希望用户看见，又希望表单能够提交，就可以用隐藏字段隐含在表单中
提交按钮submit：实现表单提交操作的按钮 可以通过value属性指定按钮显示的文字
重置按钮reset：重置表单到初始状态
按钮button：普通按钮, 没有任何功能 需要配合JavaScript为按钮指定具体的行为。可以用value属性指定按钮显示的文字。
文件上传项file：提供选择文件进行上传的功能。
图像image：利用一张图片替代提交按钮的功能, 不常用
name属性：有name属性的input框才能被提交到服务器
value属性：可以给input输入框设置一个初始值
＜ｔｅｘｔａｒｅａ＞文本域
ｒｏｗｓ：指定文本域的行数（高度）
ｃｏｌｓ：指定文本域的列数（宽度）
readonly属性:只读
disabled属性：不可用
8）下拉框
在页面展示一个可以有多个选项来进行选择
属性
select：提供下拉选择功能
option：下拉选框中的选项可以用value属性指定提交的值,如果不指定,将会提交标签内的文本
name: 下拉列表的名称
disabled 禁用下拉选框
size: 设置下拉选项中可见选项的个数
multiple 是否支持多选
3095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
