如何创建html文件：

使用工具：VSCode

1.双击文件名显示区，可快速新建文件。

2.保存文件，文件名.html

3.输入！（必须是英文的！），按 Tab键，可自动生成html格式的文件，如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
 
</body>
</html>
 
常见HTML元素介绍：
1.文本输入框和密码输入框（常见的登录页面，需要输入账号和密码）
<input type="text" name="loginname" value="请输入手机号"><br>
<input type="password" name="password" value="请输入密码">
其中 name是后台存储的变量名。<br>是换行
 
2.选择框
<label for="">已成年</label> <input type="checkbox" name="age" value="1">
<input type="checkbox" name="age" value="2">未成年
 
3.单选/复选按钮
name属性必须相同，才能保证是单选。该属性将单选框绑定为一组。
<input type="radio" name="option" value="1">A
<input type="radio" name="option" value="2">B
<input type="radio" name="option" value="3">C
<input type="radio" name="option" value="4">D
 
 
4.按钮
<input type="button" value="点我一下"><br>
 
5.文件上传
<!-- 该标签的value设置不生效 ，默认显示为“浏览”-->
<input type="file">
 
6.下拉框
<select name="" id="">
<option value="1">A.undefine</option>
<option value="1">B.error</option>
<option value="1">C.3</option>
</select>
 
7.超链接
<a href="http://www.baidu.com">百度链接</a>
 
8.表格
<table border="1">
<tr>
<td>111111111</td>
<td>222222222</td>
<td>3333333333</td>
</tr>
<tr>
<td>111111111</td>
<td>222222222</td>
<td>3333333333</td>
</tr>
</table>
9.图片
src中是图片的地址
<img src="https://XXXXXXX0.jpg" alt="">
 
10.有序列表
<ol>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
</ol>
11.无序列表
<ul>
<li>444444444444444</li>
<li>555555555555555</li>
</ul>
 
12.文本域
<textarea name="" id="" cols="30" rows="10">文本域，请输入您的评论</textarea>
 
13.标题标签
标题共有6个等级h1,h2-h6
<h1>biaoti标题1</h1>
<h2>标题2</h2>
14.加粗标签
<b>hello everybody</b>
15.lable标签
<label for="">已成年</label> <input type="checkbox" name="age" value="1">
16.段落
<p>段落1</p>
<p>段落2</p>
17.iframe：在一个页面内嵌套另外一个页面
<iframe src="http://www.baidu.com" frameborder="0" height="500" width="600">
<p>lalalalla</p>
</iframe>
18.div:是块级元素，可以用于组合其他HTML的容器。l常用来对页面进行布局，可通过css对其进行定位。div写在body里面。
<div class="head">
<h1>页面顶部区域</h1>
</div>
<div class="left">
<h2>页面左边区域</h1>
</div>
<div class="middle">
<h3>中部区域</h1>
</div>
<div class="bottom">
<h1>底部区域</h1>
</div>
19.css：层级样式表，通过div的class的名称来定位具体作用的对象。如果直接写在html文件中，写在head里面
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.head{
background-color: aquamarine
}
</style>
</head>

。但是一般都是保存到css文件中，在head中进行引入。

 
<!-- 引入样式 -->
<link rel="stylesheet" href="./1.css">
 
下面是引入的具体css文件内容。单独存为css文件时，不需要stytle的标签。
.head就是指明对上述div中的class=head的层进行作用：

.head{
background-color:red;
color: blue;
text-align:right;
padding: 0em;
}
 
 
 
 
 

自动化测试学习之路--HTML常见元素、属性的简单学习的更多相关文章

  1. No.10 selenium学习之路之通过元素定位获取属性

    1. implicitly_wait()隐形等待.等待页面加载完成,作用是全局的. 时间可以设置的长,短时间也没有影响.直到设置的时间耗完 时间耗完也不会报错 2.获取title值 driver.ti ...

  2. [原创]java WEB学习笔记71：Struts2 学习之路-- struts2常见的内建验证程序及注意点，短路验证，非字段验证，错误消息的重用

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. [原创]java WEB学习笔记68：Struts2 学习之路-- 类型转换与复杂属性配合使用

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. Qt 学习之路：输入元素

    前面的章节中,我们看到了作为输入元素的MouseArea,用于接收鼠标的输入.下面,我们再来介绍关于键盘输入的两个元素:TextInput和TextEdit. TextInput是单行的文本输入框,支 ...

  5. H5学习之旅-H5的元素属性（3）

    1.标签可以拥有属性,为标签提供更多的信息 2.属性以键值对的形式呈现例如:href = "www.baidu.com" 3.常用标签属性 :align对其方式 ,对齐方式,包括上 ...

  6. WPF学习之路（三） 属性与依赖

    类型是DependencyProperty的属性是依赖属性 依赖属性不同于普通的.Net属性,类似于一个计算过程,根据依赖的值得到最终值. 为什么引入依赖属性: MSDN原文 One of the p ...

  7. Python3学习之路~6.5 私有属性和私有方法

    属性分为静态属性和动态属性,静态属性就是变量,动态属性就是方法.但是一般我们说的属性就是变量,方法就是方法.私有属性/方法就是外面访问不了,只有自己能够访问的属性/方法.如何将属性和方法分别变成私有属 ...

  8. java学习之路--StringBuffer常见的功能和实例

    ---恢复内容开始--- 储存 StringBuffer append();将指定数据作为参数添加到已有数据尾处 StringBuffer insert(index,数据):可以将数据插到指定的ind ...

  9. Spark学习之路 （十八）SparkSQL简单使用

    一.SparkSQL的进化之路 1.0以前: Shark 1.1.x开始: SparkSQL(只是测试性的)  SQL 1.3.x: SparkSQL(正式版本)+Dataframe 1.5.x: S ...

随机推荐

  1. Jmeter入门5 关联 响应数据传递-正则表达式提取器

    在测试过程中,遇到一个问题:用户登录成功后服务器会返回一个登录凭证,之后所有的操作都需要带上此凭证.我们怎么获取登录凭证并传递给后续的操作? Jmeter提供了正则表达式提取器,用变量提取参数,后续通 ...

  2. 【LOJ115】无源汇有上下界可行流（模板题）

    点此看题面 大致题意: 给你每条边的流量上下界,让你判断是否存在可行流.若有,则还需输出一个合法方案. 大致思路 首先,每条边既然有一个流量下界\(lower\),我们就强制它初始流量为\(lower ...

  3. Treap 实现名次树

    在主流STL版本中,set,map,都是BST实现的,具体来说是一种称为红黑树的动态平衡BST: 但是在竞赛中并不常用,因为红黑树过于复杂,他的插入 5 种,删除 6 中,代码量极大(如果你要改板子的 ...

  4. 近期流行的JavaScript框架与主题

    [新年快乐]2017年你应该关注的JavaScript框架与主题 2017-01-01 王下邀月熊 JavaScript JavaScript的繁荣促生了很多优秀的技术.框架与工具库,这空前的繁荣也给 ...

  5. 2017.9.20 HTML学习总结----下拉列表标签

    接上: 1.下拉列表框<option>,<selcct> (1)解释:在表单中,通过option select标记可设计一个下拉式的列表或带有滚动条的列表, 用户可以在列表中选 ...

  6. redis string类型

  7. P1774 最接近神的人_NOI导刊2010提高（02）

    P1774 最接近神的人_NOI导刊2010提高(02) 关于此题为什么可以使用求逆序对的方法来做 假设一个数\(a_i\),且前\(i-1\)个数已经成为单调增的数列. 我们要从前\(a_1\)至\ ...

  8. LIS的string用法

    题目链接 使用的是string里的find函数 stl大法好 #include<iostream> #include<cstdio> #include<cstring&g ...

  9. 运行时库例程-acc_get_num_devices

    格式C 或 C++: int acc_get_num_devices( acc_device_t ); 描述例程 acc_get_num_devices 返回主机上指定类型的加速器设备数量.输入参数说 ...

  10. 动画利器animate.css

    使用过CSS3编写动画的同学一定感叹CSS3的强大,但是也会感到书写的麻烦.每次都要计算动画的各个参数,十分麻烦.有没有一个库能封装一些常用的CSS3动画效果.答案是肯定的,animate.css就是 ...