软件测试学习笔记丨Web端测试——HTML讲解

最新推荐文章于 2024-04-20 17:17:47 发布

软件测试大空翼

最新推荐文章于 2024-04-20 17:17:47 发布

阅读量912

点赞数 20

文章标签：学习笔记自动化测试软件测试测试开发

本文链接：https://blog.csdn.net/Tester_muller/article/details/136067390

版权

本文详细介绍了HTML的基本概念，发展历史，包括其基本结构、标签的使用、属性功能、窗口和表单等事件。涵盖了注释、文档标题、标题标签、段落、容器标签、图像、超链接、列表、表格、表单域和各种输入元素等内容。

摘要由CSDN通过智能技术生成

在这里插入图片描述

一、目录

HTML 基本概念
HTML 基本结构
HTML 基本标签

二、HTML基本概念

2.1、什么是 HTML

超文本标记语言（Hyper Text Markup Language）
描述网页的语言
传输最简单的文本内容
可以表达文字内容之外的语言——HTML1.0

2.2、HTML的发展

html1.0—-xhtml1.0( 过渡 )—-xhtml2.0( 放弃 )——html5

三、HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

四、HTML基本标签

4.1、标签和属性

双标签：<标签名称></标签名称>
单标签：<标签名 />

4.2、标签的属性

基本格式：<标签名属性1=“值1” 属性2=“值2”></标签名>
- 标签可以拥有多个属性
- 属性必须写在开始标签中，位于标签名后面
- 属性之间不区分顺序
- 标签与属性之间、属性与属性之间用空格隔开
- 每个属性都有默认值，省略属性则表示使用默认值

4.2、HTML全局属性

class：规定元素的类名
id：规定元素唯一的id
lang：设置元素中内容的语言代码
style：规定元素的行内样式
title：规定元素的额外信息

五、HTML事件

5.1、HTML事件—窗口事件

使用HTML事件触发浏览器中的行为，比如启动某一段JavaScript
使用于body标签中
- onblur：当窗口失去焦点时运行脚本
- onfocus：当窗口获得焦点时运行脚本
- onload：当加载文档时运行脚本

5.2、HTML事件—表单事件

form
- onblur：当窗口失去焦点时运行脚本
- onchange：当元素改变时运行脚本
- onfocus：当窗口获得焦点时运行脚本
- onreset：当表单重置时运行脚本，HTML5不支持
- onselect：当选取元素时运行脚本
- onsubmit：当提交表单时运行脚本

5.3、HTML事件—键盘事件

键盘事件
- onkeydown：当按下键时运行脚本
- onkeypress：当按下并松开键时运行脚本
- onkeyup：当松开键时运行脚本

5.4、HTML事件—鼠标事件

鼠标事件
- onclick：当单击鼠标时运行脚本
- ondblclick：当双击鼠标时运行脚本
- onmousedown：当按下鼠标时运行脚本
- onmousemove：当鼠标指针移动时运行脚本
- onmouseout：当鼠标指针移出元素时运行脚本
- onmouseover：当鼠标指针移至元素之上时运行脚本
- onmouseup：当松开鼠标按钮时运行脚本

5.5、HTML事件—多媒体事件

多媒体事件
- onabort：当发生中止事件时运行脚本

六、标签

6.1、注释标签

标签： < !-- 注释内容 -- >
作用：在源文档中插入注释。注释不会在浏览器中显示

6.2、文档标题标签

标签：
作用：
- 定义浏览器工具栏中的标题
- 提供页面被收藏时的标题
- 显示在搜索引擎中显示的页面标题

6.3、标题标签

标签：

—
作用：
- 用来定义HTML的标题
- 用例定义最高等级的标题
- 用例定义最低等级的标题
属性：全局属性、事件属性

6.4、段落标签

标签：
作用：定义段落
属性：全局属性，事件属性

6.5、容器标签1

标签：
作用：对行内元素进行组合，提供了一种将文本或文档的一部分独立出来的方式
属性：全局属性、事件属性

6.7、容器标签2

标签：
作用：
- 定义了HTML文档中一个分隔区块或一个区域部分
- 经常与CSS一起使用，用于定义网页布局
属性：全局属性、事件属性

6.8、图像标签

标签：
作用：定义HTML页面中的图像
属性：
- src：定义显示图像的URL(必选)
- alt：定义图像的替代文本(必选)
- title：鼠标悬停图像时显示的文本
- width：图像的宽度
- height：图像的高度
- border：设置图像边框的宽度

6.9、超链接标签

标签：
定义超链接，从一个页面链接到另一个页面
属性：全局属性、事件属性
- href：规定链接的目标URL

6.10、列表标签

标签：

<ul>
<li></li>
<li></li>
</ul>

作用：
- 定义无序列表
  * <ul>与<li>一起使用，创建无序列表
属性：全局属性、事件属性

6.11、列表标签 - 有序列表

标签：<ol><li>...</li><li>...</li></ol>
作用：
- 定义了一个有序列表，列表排序以数字来显示
- 使用
- 标签来定义列表选项
属性：全局属性、事件属性

5.12、表格标签

标签：
- 表格：<table></table>
- 行：<tr></tr>
- 单元格：<td></td>
作用：定义表格
属性：全局属性、事件属性
- border：定义表格是否有边框

6.13、表单域

标签：<form></form>
创建用户输入的HTML表单
属性：全局属性、事件属性
- action：指定接收并处理表单信息的服务器URL地址
- method：表单数据提交的方式
- name：指定表单的名称

6.14、表单标签

标签：
作用：定义了用户可以在其中输入的字段，输入字段可以通过多种方式改变，取决于type的属性
属性、全局属性、事件属性
- type：规定要显示input标签的元素的类型
  - text：单行文本（不可换行）
  - password：密码输入框
  - radio：单选框（配合name可以实现单选效果）
  - checkbox：复选框
  - button：普通按钮
  - submit：提交按钮
  - reset：重置按钮
  - image：图像形式的提交按钮
  - file：文件域，点击之后打开文件选择器
- name：控件名称，name相同则表示为同一组数据
- value：指定input元素的值
- size：显示大小
- checked：是否被选中
- maxlength：控制输入的最大字符长度

6.15、文本标签

标签：
定义一个多行的文本输入控件
属性：全局属性、事件属性
- cols：规定文本区域内可见的宽度
- disabled：规定禁用文本区域
- name：规定文本区域的名称
- readonly：规定文本区域为只读
- rows：规定文本区域内可见的行
- placeholder：规定一个简短的提示，描述文本区域内期望的输入值