web前端重点知识（web 前端基础HTML知识点）

时间2025-05-05 12:23:54分类IT科技浏览3634

导读：web系统架构体系 B/S（Browser/Server）：浏览器实现优点：规范、使用方便、本身实现成本低容易升级、便于维护缺点：没有网络，无法使用保存数据量有限，和服务器交互频率高、耗费流量...

web系统架构体系

B/S（Browser/Server）：浏览器实现 优点：规范、使用方便、本身实现成本低容易升级、便于维护缺点：没有网络，无法使用保存数据量有限，和服务器交互频率高、耗费流量安全性差一点 C/S（Client/Server）：客户端实现 优点：可以在无网络环境下使用和服务器交互相对频率低、省流量安全性高一点缺点：需要安装客户端升级麻烦，维护成本高开发成本高

什么是HTML

html是超文本标记语言（Hyper Text Markup Language），是一种使用标记标签来描述网页的语言。

超文本

用超链接的方法将各种不同空间的文字信息组织在一起的网状文本。可以用来链接图片，音频，视频，动态图片等

W3C标准

结构化标准语言（XHTML 、XML）

表现标准语言（CSS）

行为标准（DOM 、ECMAScript）

HTML标签

标签一般成对存在，如<html></html>

结构体标签

<!DOCTYPE html>

说明html5中文档的类型是html文档

html标签

<html></html>

title标签

<title>我的网页</title>

meta标签

<meta charset="utf-8"> <meta name="keywords" content="关键字"> <meta name="description" content="描述">

body标签

<body>内容</body>

文本标签

注释

标题

<h数字>标题<h数字>

字体

<font color=red>HelloWorld</font>

换行

<br/>

水平分割线

<hr width="80%" aligin=left>

加粗

<b></b>

倾斜

<i></i>

下划线

段落

<p></p>

居中

下标

上标

图片标签

相对路径："../"代表上一层目录，同一层目录可以直接访问

绝对路径：1 、网络图片，直接写图片地址；2 、本机磁盘地址"盘符:/图片名"

超链接

<a href="https://www.cnblogs.com/am0304/p/%E5%9C%B0%E5%9D%80%E6%88%96#+%E9%94%9A%E9%93%BE%E6%8E%A5%E5%90%8D" target="打开新窗口的位置">链接名或图片</a>

target = "_self"：当前窗口打开

target = "_blank"：新窗口打开

target = "_top"：在顶层页面所在位置打开

target = "_parent"：在父页面的窗口位置打开

target = "_iframeName"：在iframe位置打开

使用锚链接需要给目标标签加属性id ，唯一的标记

发送邮件

<a herf="mailto:邮箱地址">连接名或图片</a>

下载

<a herf="只可以是zip文件">连接名或图片</a>

表格标签

<table> <tr> <td>编号</td> <td>名称</td> <td>价格</td> </tr> <tr> <td>001</td> <td>苹果</td> <td>12</td> </tr> <tr> <td>002</td> <td>香蕉</td> <td>18</td> </tr> </table>

属性

表格的属性（table）

border = "边框线条粗细"

cellspacing = "单元格间隙的值"

align = "表格水平对齐方式"

width = "表格的宽度"

height = "表格的高度"

bgcolor = "表格的背景色"

background = "背景图片地址"

行的属性（tr）

height = "行高"

align = "水平对齐方式"

valign = "垂直对齐方式"middle 、top、bottom

bgcolor = "行的背景色"

background = "行背景图片地址"

单元格的属性（td）

width = "宽度"会影响整个列

align = "水平对齐方式"

valign = "垂直对齐方式"middle 、top 、bottom

bgcolor = "单元格的背景色"

合并单元格

1、找到要合并单元格的开始位置

2 、清除合并的是行还是列

3 、合并几行或几列

4、除开始位置的单元格外，被合并的单元格进行删除

<td colspan\rowspan="合并的列（横向）、行数">除开始的单元格、其余删除</td>

表单标签

form标签的属性

method = "get\post提交方式"

默认的提交方式是get,地址栏可以看到的，post方式地址栏不可见 get方式相对post不安全 get方式提交的数据量有限制的，而post理论上没有限制

action = "表单提交的目标地址"

文本框标签（<input> </input>）属性

name = "提交参数名称"

type = "input标签样式"

type="text" 普通文本框 maxlength = "最大字符个数" type="password" 密码框 type="radio" 单选框 value = "值" checked = "checked"默认选择 type="date" 日期框 type="email" 邮箱文本框(自带针对邮箱的校验) type="file" 文件文本框(可以选择各种文件，比如说图片，文件) type="checkbox" 多选框 value = "值" checked = "checked"默认选择 type="hidden" 隐藏文本框 type="color" 颜色选择框 type="number" 数字选择框 type="button\submit\reset" 按钮 type="image" 图形化按钮，功能相当于submit

placeholde = "提示文字"

按钮标签（<button></button>）属性

type = "按钮功能"

type="submit" 按钮（自带提交功能） type="button" 按钮（不带提交功能，就是一个最普通的按钮） type="reset"按钮（重置功能）

下拉框标签

<select> <option>下拉框列表标签</option> <option selected="selected">默认选中</option> </select>

文本域标签

列表标签

有序列表

<ol type="1"> <li></li> <li></li> <li></li> </ol> type：序号类型 1：数字（默认） A：大写字母 I：大写罗马数字 a：小写字母 i：小写罗马数字

无序列表

有符号无序列表 <ul type="circle"> <li></li> <li></li> <li></li> </ul>

type：符号类型

circle：空心圆 discs：实心圆（默认） quare：实心方形

无符号无序列表

多媒体标签：

视频

<video controls>  <source src="https://www.cnblogs.com/am0304/p/%E8%A7%86%E9%A2%91%E5%9C%B0%E5%9D%80" type="video/文件格式"> 您的浏览器不支持 HTML5 video 标签。 </video>

音频

<audio controls> <source src="https://www.cnblogs.com/am0304/p/%E9%9F%B3%E9%A2%91%E5%9C%B0%E5%9D%80" type="audio/文件格式"> Your browser does not support this audio format. </audio>

iframe框架标签

属性

width：宽度

height：高度

frameborder：边框粗细

scrolling：滚动条 yes 、no 、auto

新页面

web前端重点知识（web 前端 基础HTML知识点）