测试基础4——HTML
2022/8/23 6:23:50
本文主要是介绍测试基础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
- 相对路径:相对当前路径下的位置
同级:./
上一级:../ - 绝对路径: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" />
:从某网站动态加样式
这篇关于测试基础4——HTML的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21动态面包屑教程:新手入门指南
- 2024-12-21动态主题处理教程:新手必读指南
- 2024-12-21富文本编辑器教程:新手入门指南
- 2024-12-21前端项目部署教程:从零开始的全面指南
- 2024-12-21拖拽表格教程:轻松入门指南
- 2024-12-21Element-Plus教程:新手入门与实战指南
- 2024-12-21TagsView标签栏导航教程:轻松掌握标签栏导航
- 2024-12-21动态表格实战:新手入门教程
- 2024-12-21动态菜单项实战:一步步教你实现动态菜单项
- 2024-12-21动态面包屑实战:新手教程