web自动化：前端页面组成
一.web页面的组成
1. 常用：HTML + CSS + Javascript
2. HTML：定义页面的呈现内容
3. CSS：Cascading Style Sheets，层叠样式表
控制你的网页如何呈现，即布局设置。比如字体颜色、字体大小、在页面呈现的大小等
4. Javascript：如果你希望你的网页依据不同的情形做不同的事情呢？需要一门编程语言，javascript就是其中一种
二. HTML
1. 什么是HTML？
HTML是用来描述网页的一种语言
HTML指的是超文本标记语言(HyperText Markup Language)
HTML不是一种编程语言，而是一种标记语言(markup language)
标记语言包含一套标记标标签(markup tag)，HTML使用标记标签描述网页
HTML文档后缀名为.html或.htm
2. HTML标签
HTML标记标签通常被称为HTML标签(HTML tag)
HTML标签是由尖括号包围的关键词，比如<html>
HTML标签通常是成对出现的，不如<b>和</b>
标签对中第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签
3. 常用标签对
| 标签 | 描述 |
| <html> | 定义HTML文档 |
| <body> | 定义文档的主体 |
| <head> | 定义文档的信息 |
| <title> | 定义文档的标题 |
| <meta> | 定义文档中的元数据 |
| <link> | 定义一个文档和外部资源之间的关系(引用) |
| <body> | 定义文档的主体 |
| <p> | 定义一个段落 |
| <h1>-<h6> | 定义标题 |
| <a> | 定义一个超链接 |
| <img> | 定义图像 |
| <div> | 定义文档的区域，块级 |
| <table> tr td | <table>：定义表格，tr：定义表格的行，td：定义表格的单元 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <form> | 定义供用户输入的表单 |
| <input type="text"/"password"/"radio"/"checkbox"/"submit"/"file"/"button"> | 定义输入框 |
| <select>/<option> |
<select>：定义下拉列表 <option>：定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
4. HTML属性
HTML标签可以拥有属性，属性提供了有关HTML元素的更多的信息
属性总是以名称/值对的形式出现，比如：name="value"
属性总是在HTML元素的开始标签中规定
下面列出了适用于大多数HTML元素的属性：
| 属性 | 描述 |
| class | 规定了元素的类名(类名可以重复) |
| id | 规定了元素的唯一id |
| style | 规定了元素的行内样式(inline style) |
| title | 描述了元素的额外信息(可在工具提示中显示) |
5. 实例1：表格
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>表格</title> </head> <body> <table border="1"> <tr> <th>内容1</th> <th>内容2</th> </tr> <tr> <td>第一行单元格1</td> <td>第一行单元格2</td> </tr> <tr> <td>第二行单元格1</td> <td>第二行单元格2</td> </tr> </table> </body></html>
结果：
实例2： 输入框
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>输入框</title> </head> <body> <form> First name: <input type="text" name="firstname" /> <br> Last name: <input type="text" name="lastname" /> </form> </body> </html>
结果：
实例3：下拉列表
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>下拉列表</title> </head> <body> <select> <option>--请选择一个城市---</option> <option>---北京---</option> <option>---上海---</option> <option>---广州---</option> <option>---深圳---</option> </select> </body> </html>
结果：
实例4：有序列表和无序列表
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>有序列表和无序列表</title> </head> <body> <ol> <li>Coffee</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Milk</li> </ul> </body> </html>
结果：
三. CSS的三种引入方式
1. CSS的三种引入方式：内联样式(行内样式)、内部样式、外部样式
2. 样式优先级：内联样式(行内样式)>内部样式>外部样式
3. 实例1——内联样式：直接在标签内部通过使用style属性添加CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>内联样式(行内样式)</title>
</head>
<body>
<!--使用内联样式引入CSS-->
<h1 style="color:blue;">这是一级标题</h1>
<p style="color:yellow; font-size:30px;">这是段落</p>
</body>
</html>
结果：
实例2——内部样式：在<head>标签里面通过使用<style>标签来引进CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>内部样式</title>
<!--使用内部样式引入CSS-->
<style type="text/css">
h1{
color:blue;
}
p{
color:yellow;
font-size:30px;
}
</style>
</head>
<body>
<h1>这是一级标题</h1>
<p>这是段落</p>
</body>
</html>
结果：
实例3——外部样式：先在外部新建一个外部样式表，然后在<head>标签里面通过<link>标签或通过导入进行关联
1)、链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2)、导入式
<style type="text/css">
@import url("css文件路径");
</style>
样式1：同级目录下的color1.css文件
h1{
color:blue;
}
样式2：同级目录下的color2.css文件
p{
color:yellow;
font-size:30px;
}
html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>外部样式</title>
<!--使用链接式引入CSS-->
<link rel="stylesheet" type="text/css" href="color1.css">
<!--使用导入式引入CSS-->
<style type="text/css">
@import url("color2.css");
</style>
</head>
<body>
<h1>这是一级标题</h1>
<p>这是段落</p>
</body>
</html>
结果：
web自动化：前端页面组成的更多相关文章
- web移动前端页面，jquery判断页面滑动方向
/*判断上下滑动:*/ $('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].page ...
- web前端页面性能优化
影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
- web前端页面项目经验总结
项目时间:2016年4月5日--4月9日项目名称:阿七果子园web前端页面项目内容: 1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_bann ...
- web前端页面性能优化小结
影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
- 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
2017春 前端自动化(二) 页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言: 此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...
- 基于.net EF6 MVC5+WEB Api 的Web系统框架总结（1）-Web前端页面
本 Web 系统框架基于C# EF6+MVC+WebApi的快速应用开发平台.本节主要介绍Web前端页面设计与实现.Web前端页面主要分为普通列表页面.树状导航列表页面.普通编辑页面.数据导入页面.向 ...
- Web前端页面的浏览器兼容性测试心得（二）搭建原汁原味的IE8测试环境
如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...
- web前端页面优化——个人见解
web前端页面优化,我们从JavaScript.css.html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨. 一. 有关javascript方面 优化见解. 1. 首先举个例子: ...
- Web 前端页面性能监控指标
Web 前端页面性能监控指标 性能监控 / 性能指标 / 性能优化 白屏时间计算 FCP 白屏时间:从浏览器输入地址并回车后到页面开始有内容的时间: 首屏时间计算 FMP 首屏时间:从浏览器输入地址并 ...
- Web自动化---解决登录页面随机验证码问题
一.抛出问题 在日常的测试工作中,遇到了这样一个登录页面,如下图: 像我们之前做过UI自动化的同学就知道,自动输入账号和密码,这个简单,但是怎么样来识别验证码呢?验证码的形式有多种,有纯数字的,纯字母 ...
随机推荐
- Mysql存储引擎的选择
Mysql存储引擎概述 mysql的存储引擎是插件式的,用户可以根据需求选择如何存储和索引数据是否使用事务等. Mysql支持多种存储引擎,用户可以选择不同的引擎来提高应用的效率,灵活的存储方案,存储 ...
- Python3.6全栈开发实例[013]
13.用户输入的信息,如果出现了列表中的敏感词汇,请用*替代. li = ["苍老师","东京热","武藤兰","波多野结衣&qu ...
- android自定义控件（三）ProgressBar
1.ProgressBar有两个进度,一个是android:progress,另一个是android:secondaryProgress.比如视频的缓存进度以及播放进度. 在这里缓存的进度就可以是a ...
- 深入struts2.0(六)--ActionProxy类
1.1 ActionProxy接口以及实现 ActionProxy在struts框架中发挥着很关键的数据. 通过webwork和xwork交互关系图能够看出.它是action和xwork中间的 ...
- KGX滚动分页源码
源码描述: 本工具采用Jquery框架,通过jquery调用ashx获取并输出数据,示例中采用测试数据,可以自行扩展为图片等等 当下流行的分页方式,鼠标滚动下拉条会自动展示下一页信息,类似瀑布流的效果 ...
- MySQL数据库（8）_MySQL数据库总结
sql语句规范 sql是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集,是一种功能齐全的数据库语言. 在使用它时,只需要发出“做什么” ...
- linux 网卡buffer大小
参考截取一部分:https://blog.csdn.net/ysu108/article/details/7764461 在linux下可以修改协议栈改变tcp缓冲相关参数: 修改系统套接字缓冲区 e ...
- java经典30笔试题
1. 下面哪些是Thread类的方法() A start() B run() C exit() D getPriority() 答案:ABD 解析:看Java AP ...
- Kubernetes lxcfs
容器实现的基础是NameSpace和Cgroups. NameSpace实现了对容器(进程)的隔离,NameSpace技术实际上修改了应用进程看待整个计算机“视图”,也就是作用域,即它的“视线”被操作 ...
- Go Log模块生成日志文件
使用log模块示例代码: package main import ( "fmt" "time" "log" "os" ) ...