软件测试知识_学习笔记02

最新推荐文章于 2025-12-05 17:59:21 发布

原创最新推荐文章于 2025-12-05 17:59:21 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #html #前端

本文介绍了HTML作为Web前端核心技术之一，用于构建网页结构。主要讲解了HTML的基本标签如标题、段落、超链接、图片、表单元素等，以及标签属性的使用，同时提到了CSS和JavaScript在美化和行为处理上的作用。此外，还提及了网页的骨架结构和表单提交方式。

html标签

HTML介绍

1、web前端三大核心技术：
HTML：负责网页的架构（即将内容在HTML中显示）；
CSS：负责网页的样式、美化（即文字颜色背景都可进行美化，美化页面的内容）；
JS：负责网页的行为。
2、HTML是一种用来描述网页的语言。
3、HTML标签：单标签双标签内容
4、标签属性：属性格式（属性名=“属性值”）

HTML骨架

骨架标签：

<html>
  <head>
       <meta charset="UTF-8">
       <title>我的网页</title>
   </head>
   <body>
       hello world!
   </body>
</html>

页面主题内容必须在body中编写；
html为根标签，所有的标签必须在根标签中；
html标签为头部标签，一般放title和搜索相关。
注释快捷键：ctrl+/

HTML常用标签

标题标签

html标题标签是通过

-

来进行定义；

<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
</body>

通过h的不同等级来控制字体的大小，h1最大。
h的不同等级控制字体大小

段落标签

html段落是通过

标签进行定义的。

<body>
    <p>第一个段落</p>
    <p>另一个段落</p>
</body>

p标签独占一行；做换行使用。
p标签

超链接标签

超链接标签是通过标签进行定义的。

<body>
   <a href="http://www.baidu.com" target="_blank">点我去百度</a>
</body>

属性：
href:跳转地址；
target：新窗口打开。默认为_blank;【_blank：在新窗口打开；】
**注意：**当访问的不是本地网址时，必须加上协议http://

图片标签

作用：往网页中插入图片，html中的图片是通过标签进行定义的。

<body>
   <img src="logo.jpg" title="传智博客" alt="logo" width="104" height="142"/>
</body>

img标签是单标签
img标签属性：
src：加载图片的路径；【当不在一个文件夹时，上一级：“…/”】，同级：“./”（也可以忽略这个点）。
alt：当图片加载不出来的时候，就会显示该属性；
title：图片加载可以用鼠标悬停显示；图片加载失败时，显示信息（但是优先级低于alt属性）。

换行与空格

换行：

空格：
换行与空格

布局标签

常用div（大盒子，独占一行）、span（小盒子，一行多个）
div相当于一个容器。
div标签

表单标签（输入框和按钮）

页面提交输入信息需要使用表单标签。

input标签

type属性值不同：（text）文本框、(password)密码框、（radio）单选按钮【如何做到单选？默认情况相同的一组才能单选，相同的name值为一组】、（checkbox）复选框、（button）按钮【value=“按钮名称”】
input标签
下拉框：select标签中间嵌套option标签
下拉框的实现
textarea标签：可以超出时，可以自动加滚动条。【cols：列，默认的宽度；rows：行，默认的高】

form标签

相当于一张纸，其作用就是提交页面输入数据。
属性：
action：将数据提交到那个页面；
method：
get：参数在url中显示；速度相对于post快；提交内容长度有限制；【查询使用】
post：不在url中显示；速度相对于post慢；提交内容长度无限制；【提交数据使用（登录、注册）】

列表标签li

列表标签常用li元素（有序ol和无序ul）。

<body>
  <!--1、有序列表-->
  <ol>
     <li>北京</li>
     <li>上海</li>
  </ol>
  <!--2、无序列表-->
  <ul>
     <li>测试</li>
     <li>开发</li>
  </ul>
</body>

其他常用标签

1、
2、
3、

抓包

抓客户端向服务器发送的数据包以及服务器向客户端响应的数据包。