HTML
引言
- 网页，是网站的一个页面，通常是网页构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是网页组成的，通常我们看到的网页都是以htm或html后缀结尾的文件，俗称HTML文件
HTML简介
1.1 什么是HTML
- HTML全称：Hyper Text Markup Language（超文本标记语言）
- 超文本：页面恶意包含图片，链接甚至是音乐，程序等非文字元素
- 标记：标签，不同的标签实现不同的功能
- 语言：人与计算机的交互工具
1.2 HTML能做什么
- HTML使用标记标签来描述网页，展示信息给用户
1.3 HTML书写规范
- html标签是以尖括号<>包围的关键字
- html标签通常是成对出现的，有开始就有结束
- html通常都有属性，格式：属性=‘“属性值”（多个属性之间用空格隔开）
- html标签不区分大小写，建议全小写
HTML基本标签
1.结构标签
<html>:根标签
<head>:网页头标签
<title></title>:页面的标题
</head>
<body></body>:网页正文
</html>
| 属性名 | 代码 | 描述 |
|---|---|---|
| text | < body text="#f00"></ body> | 设置网页正文中所有的文字颜色 |
| bgcolor | < body bgcolor="#00f"></ body> | 设置网页背景颜色 |
| background | < body backgroundt=“1.png”></ body> | 设置网页背景图 |
- 颜色的表示方式
- 第一种方式：用表示颜色的英文单词，例：red，green，blue
- 第二种方式：用16进制表示颜色，例：#000000，#fffff
2.排版标签
- 可用于实现简单的页面布局
- 注释标签:<!-- 注释 – >
- 换行标签：< br>
- 段落标签：< p>文本文字</ p>
- 特点：段与段之间有空行
- 属性：align对齐方式（left，center，right）
- 水平线标签：< hr>
- 属性：
- width：水平线的长度（两种：第一种:像素表示；第二种，百分比表示）
- size：水平线的粗细（像素表示，例如：10px）
- color：水平线的颜色
- align：水平线对齐方式
- 属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排版标签</title>
</head>
<body>
<!--换行-->
换<br>行
<!--段落-->
<p>段落1</p>
<p align="center">段落2</p>
<p align="left">段落3</p>
<!--水平线-->
<hr width="50%" align="center" size="7" color="#f00">
</body>
</html>
3.块标签
- 使用CSS+DIV是现下流行的一种布局方式
| 标签 | 代码 | 描述 |
|---|---|---|
| div | < div></ div> | 行级块标签，独占一行，换行 |
| span | < span></ span> | 行内块标签，所有内容都在同一行 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
</body>
</html>
4.基本文字标签
- < font></ font>,处理网页中文字的显示方式
| 属性名 | 代码 | 描述 |
|---|---|---|
| size | < font size=“7”></ font> | 用于设置字体的大小，最小1号，最大7号 |
| color | < font color="#f00">< /font> | 用于设置字体的颜色 |
| face | < font face=“宋体”>< /font> | 用于设置字体的样式 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本文字标签</title>
</head>
<body>
<font size="7" color="#f00" face="宋体">你好啊</font>
</body>
</html>
5.文本格式化标签
- 使用标签实现标签样式处理
| 标签 | 代码 | 描述 |
|---|---|---|
| b | < b></ b> | 粗体 |
| strong | … | 加粗 |
| em | … | 强调字体 |
| i | … | 斜体 |
| small | … | 小号字体 |
| big | … | 大号字体 |
| sub | … | 下标标签 |
| sup | … | 上标标签 |
| del | … | 删除线 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本格式化标签</title>
</head>
<body>
<b>粗体</b><strong>粗体</strong>
<br>
<em>斜体</em><i>斜体</i>
<br>
<big>大号</big><small>小号</small>
<br>
上标：5m<sup>2</sup> 下标:H<sub>2</sub>O
<del>删除</del>
</body>
</html>
6.标题标签
- 随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行
| 标签 | 代码 | 描述 |
|---|---|---|
| h1 | < h1></ h1> | 1号标题，最大字号 |
| h2 | … | 2号标题 |
| h3 | … | 3号标题 |
| h4 | … | 4号标题 |
| h5 | … | 5号标题 |
| h6 | … | 6号标题最小字号 |
7.列表标签（清单标签）
- 无序列表：使用一组无序的符号定义，< ul></ ul>
| 属性值 | 代码 | 描述 |
|---|---|---|
| circle | < ul type=“circle”></ ul> | 空心圆 |
| disc | … | 实心圆 |
| square | … | 黑色方块 |
- 有序列表：使用一组有序的符号定义，< ol></ ol>
属性值|代码 | 描述 |
|–|--|–|
|1 |< ol type=“1”> |数字类型
|A |… |大写字母类型
|a|… |小写字母类型
|i |…|罗马数字类型
|I|… |大写罗马数字类型
8.图形标签
- 在页面指定位置中引入一幅图片，< img/>
| 属性值 | 描述 |
|---|---|
| src | 引入图片的地址 |
| width | 图片的宽度 |
| height | 图片的高度 |
| border | 图片的边框 |
| align | 与图片对齐显示方式 |
| alt | 提示信息 |
| hspace | 在图片左右设定空白 |
| vspace | 在图片的上下设定空白 |
9.链接标签
- 在页面中用连接跳转另一页面
- 标签：< a href=" "></ a>
- 属性：href：跳转的页面的地址（跳转到外网需要添加协议）；
- 设置跳转页面时的页面打开方式，target属性
- _blank在新的窗口打开
- _self在原窗口中打开
- 指向同一页面中指定的位置
- 使用方法
- 定义位置：< a name=“名称”></ a>
- 指向：< a href="#名称"></ a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<font color="#7fffd4" size="5"><a name="top">顶部</a> </font><a href="demo.html">跳转</a>
<br>
<br>
<br>
<br>
<a href="#top">回到顶部</a>
</body>
</html>
9.表格标签
-
普通表格（table ，tr，td）
<table> <tr> <td></td> </tr> </table> -
表格的列标签（th）：内容有加粗居中效果
<table> <tr> <th></th> </tr> </table> -
表格的列合并属性（colspan）：在同一行内同时合并多个列
<table> <tr> <td colspan=" "></td> <tr> </table> -
表格的行合并属性（rowspan）：在同一列跨多行合并
<table> <tr rowspan=" "> <td ></td> <tr> </table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="2" width="400" height="400">
<tr>
<td rowspan="2">周一</td>
<td>周二</td>
<td>周三</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
HTML表单标签
- html表单用于收集不同类型的用户输入数据
1.form元素常用属性
- action表示动作，值为服务器地址，把表单的数据提交到该地址上处理
- method：请求方式 get/post
- get
1.地址栏，请求参数都在地址后拼接path?name=“张三”&password=“12346”
2.不安全
3.效率高
4.get的请求大小有限制，不同的浏览器不同，但是大约是2kb；一般情况用于查询数据 - post
1.地址栏：请求参数单独处理
2.安全可靠些
3.效率低
4.post请求大小理论上无限一般用于插入删除修改等操作
- get
- enctype:表示是表单提交类型
- 默认值：application/x.www-form-urlencoded 普通表单
- multipart/form-data 多部分表单（一般用于文件上传）
2.input元素
- 作为表单中的重要元素，可根据不同type值呈现不同的状态
| 属性值 | 描述 | 代码 |
|---|---|---|
| text | 单行文本框 | < input type=“text”/> |
| password | 密码框 | < input type=“password”/> |
| radio | 单选按钮 | < input type=“radio”/> |
| checkbox | 复选框 | … |
| date | 日期框 | … |
| time | 时间框 | … |
| datetime | 日期和时间框 | … |
| 电子邮件输入 | … | |
| number | 数值输入 | … |
| file | 文件上传 | … |
| hidden | 隐藏域 | … |
| range | 取值范围 | … |
| color | 取色按钮 | … |
| submit | 表单提交按钮 | … |
| button | 普通按钮 | … |
| reset | 重置按钮 | … |
| image | 图片提交按钮 | … |
3.select元素（下拉元素）
- 单选下拉列表：< select></ select>
- 默认选中属性：selected=“selected”
- 多选下拉列表属性：< select></ select>
- 多选列表：multiple=“multiple”
4.textarea元素（文本域）
- 多行文本框：< textarea cols=“列” rows=“行”></ textarea>
HTML框架标签
- 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份html文档称为一个框架，并且每个框架都独立于其他的框架
- 使用框架的缺点：
- 开发人员必须同时跟踪更多的html文档
- 很难打印整张页面
1.框架结构标签frameset
- 框架结构标签< frameset></ frameset>用于定义如何将窗口割为框架
- 每个frameset定义了一系列行或列
- rows/columns的值规定了每行或每列占据屏幕的面积
- < frameset rows=" “/cols=” "></ frameset>
2.框架标签frame
- 使用frame引入一个HTML页面
3.基本注意事项
- 不能将< body></ body>标签与< frameset></ frameset>标签同时使用
- 假如一个框架有可见边框，用户可以拖动边框来改变它的大小，为了避免这个情况发生，可以在< frame>标签中加入:noresize=“noresize”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<frameset cols="*,*,*" >
<frame src="demo01.html">
<frame src="demo02.html" noresize="noresize">
<frameset rows="10%,*">
<frame src="demo03.html" noresize="noresize">
<frame src="demo05.html">
</frameset>
</frameset>
</html>
1164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
