测试基础4——HTML

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

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

换行和空格

换行:<br />;空格:&nbsp;

布局标签

常用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>

其他常用标签

  1. <script>:js语句
  2. <style>:css样式
  3. <link scr="link.css" />:从某网站动态加样式
posted on 2022-08-23 00:03  特困生小王  阅读(27)  评论(0编辑  收藏  举报