首页 > 其他分享> > 测试基础4——HTML

测试基础4——HTML

2022-08-23 00:32:41 作者：互联网

html介绍

前端三大核心技术

HTML：网页的架构，用来描述网页的一种语言
CSS：美化页面
JS：网页的行为（可控制HTML和CSS）

HTML标签

单标签<h>
双标签<b>内容</b>

标签属性

属性格式：属性名 = “属性值” e.g. <a href='xyz'>content</a>

HTML骨架

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>xxx</title>
  </head>
  <body>
      content
  </body>
</html>

常用标签

注释

  <！--
    快捷键：ctrl+/
    扩展测试点：前端页面注释，上线前必须检查或删除。
  -->

标题标签

通过<h1>-<h6>进行定义，其中<h1>最大

<body>
  <h1>h1</h1>
</body>

段落标签

特点：1. 段落标签独占一行；2. 当换行符使用；3. 语义化（让浏览器明白此处为段落）

<p>段落</p>

超链接标签

通过<a>定义，href：点击文本跳转；target：值为_blank时，在新窗口打开（当值非target中定义的，则默认为_blank）

<body>
  <a href="hrrps://link" target="_blank">显示文本内容</a>
</body>

图片标签

通过<img>定义；属性：src：图片路径；titl：光标悬停显示文字,必备，无alt时显示title；alt：图片未加载时显示文字；width：宽；height：高

<body>
  <img src="路径（相对路径下的）" />
</body>

tips

相对路径：相对当前路径下的位置
同级：./
上一级：../
绝对路径：D:\文档\text\1.txt

换行和空格

换行：<br />；空格： 

布局标签

常用div和span。div：默认独占一行；span：默认一行多个。

<body>
  <div>
    div
  </div>
  <span>
    span
  </span>
</body>

form标签和input标签

表单标签通过<form>表示，提交用户输入的数据。
属性：1. action：将数据提交到哪个页面；2. method="get/post"（get：参数在url中显示，速度比post快，提交内容有长度限制，一般查询使用；post：反之，一般提交数据使用）

<form action="">
  文本：<input type="text" />
  密码：<input type="password" />
  单选：<input type="radio" name="a" /> ，其中name相同的选项互斥
  复选：<input type="checkbox" />多选
  按钮：<input type="button" value="按钮名" />，其中type="submit"为提交，type="reset"为重置
  下拉框：
  <select>
    <option>opt1</option>
    <option>opt2</option>
  </select>
  文本框：（cols：默认宽，rows：默认高）
  <textarea cols="23" rows="23"></textarea>
</form>

列表标签

通过<li>表示，分为有序、无序

<ol>
  <li>有序</li>
</ol>
<ul>
  <li>无序</li>
</ul>

其他常用标签

<script>：js语句
<style>：css样式
<link scr="link.css" />：从某网站动态加样式

标签：段落,提交,标签,基础,默认,HTML,测试,属性
来源： https://www.cnblogs.com/qlzf/p/16597306.html