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