网站首页 > 技术文章 正文
每天进步一点点,关注我们哦,每天分享测试技术文章
本文章出自【码同学软件测试】
码同学公众号:自动化软件测试
码同学抖音号:小码哥聊软件测试
学习web自动化的前提条件:手工测试(了解各种测试的知识)、学习编程语言、学习Web基础、学习自动化测试工具 、学习自动化测试框架 、需要掌握前端的一些知识,无论学习语言还是前端知识,都是为了接下来的脚本和框架做铺垫,本篇文章介绍下前端基础知识
网页基础(HTML、CSS),web前端三大核心技术
- HTML:负责网页架构
- CSS:负责网页的样式,美化
- JS:负责网页行为
01
常见的HTML标签
HTML是描述网页的一种语言HTML指的是超文本语言,不是编程语言,是一种标记语言HTM使用标签来描述网页
案例:txt文本转html格式
<h1>这是第一个段落文件</h1>
<h2>这是第二个段落文件</h2><img src= "C:\Users\ThinkPad\Documents\HBuilderProjects\web前置\l.png">
HTML标签
标签是有尖角号包裹的关键词,通常成对出现
第一个标签开始标签,最后一个标签结束标签例:<p> </p>
HTML单标签和双标签单标签书写:<br/>双标签书写:<html></html>
HTML属性
HTML属性指的是标签属性
HTML的标签可以拥有多个属性属性是以属性名称=属性值的格式出现
<input id="kw" name="wd" >
1、HTML骨架
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>码同学教育</title> </head> <body> 码同学教育 </body></html>
- <!DOCTYPE html>用来声明当前的文档类型是html
- html:是网页当中最大的标签,我们称之为根标签
- head:称之为网页的头部,它里面的内容主要用来定义网页标签及给浏览器查看的一些信息
- UTF-8:用来定义网页的编码标准 ,国际编码
- title:称之为网页标题标签,它里的内容会显示在浏览器的标签页上
- body:称之为网页主体标签,它里面的内容都会显示在浏览器的白色窗口区域
2、基本HTML标签
HTML标题
<h1>一号标题</h1><h2>二号标题</h2><h6>六号标题</h6>
HTML段落
<p>这是一个段落 </p><p>这是另一个段落</p>
HTML超链接
<a href="https://kaiwu.lagou.com/"> 码同学</a>
HTML图片
<img src="lagou.png" title="码同学教育" alt='logo' with='110' height='150' />
HTML空格和回车
<div> 我是一个块元素 </div><br /><span>我是一个内联元素,存放文本容器</span>
3、HTML表单
web网页手机用户输入数据,包含不同类型:文本输入框、单选框、复选框、下拉框、提交按钮
文本输入框
<body>
<form> firstname: <input type="text" name="fristname"> <br> lastname: <input type="text" name="lastname"></form>
密码输入框
<form>
Password: <input type="password" name="pwd"></form>
单选按钮
<!--单选按钮 -->
<form><input type='radio' name="sex" value="male" "/>男<input type="radio" name='sex' value='female' />女</form>
复选框
<!---- 复选框-->
<form><input type="checkbox" name="hobby">读书<input type="checkbox" name="hobby">听音乐<input type="checkbox" name="hobby">看电影</form>
下拉框
<!-- 下拉框 --> <select name="city" id="city"><option value="bj">北京</option><option value="sh">上海</option><option value="gz">广州</option><option value="sz" selected="selected">深圳</option></select>
提交按钮
提交按钮:<input type="submit" value="提交按钮" />
免费领取 码同学软件测试 课程笔记+超多学习资料+完整视频+最新面试题,可以转发文章 + 私信「码同学666」获取资料哦
02
熟悉CSS常见选择器
CSS:指层叠样式表
作用:
- 用来定义如何显示HTML元素(定义HTML元素的样式),就像 HTML 中的字体标签和颜色属性所起的作用那样
- .css 文件中,我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观
- 选择器:是用来指定要改变样式的HTML元素,每条声明由一个属性和一个值组成
- 属性:代表要设置的样式属性,每个属性有一个值,属性和值被冒号分开
- CSS:声明总是以分号(;)结束,声明以大括号({})括起来在HTML文档中,可以把样式定义在 标签中
在CSS中,选择器是一种模式,用于选择需要添加样式的元素
常用的CSS选择器有:id选择器、class选择器标签选择器、属性选择器 、后代选择器、元素选择器
1、ID选择器
id选择器是通过元素的id属性来选择元素
CSS中id选择器以 "#" 来定义,比如: #test
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS</title> <style> /*这是一个关于样式注释*/ #test {color:blueviolet; text-align:center;} </style> </head> <body> <p id = 'test'>Hello World!</p> </body></html>
在整个HTML文档中id属性必须是唯一的
注意:HTML文档不会严格校验id属性是否唯一,在不规范的HTML文档中会出现id重复的情况!
2、Class选择器
class选择器是通过元素的class属性来选择元素,又称类选择器,使用class选择器时,要求元素必须有class属性
class选择器用于描述一组元素的样式,class选择器有别于id选择器,class可以在多个元素中使用CSS中class选择器以 "." 来定义,比如: .center
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .center {text-align: center;} .center {color: #8A2BE2;} </style> </head> <body> <p>居中</p> </body></html>
3、标签选择器
标签选择器是通过元素的标签名称来选择元素,又称元素选择器
CSS中标签选择器直接使用标签名称来定义,比如: h 、 input
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <style> h3 {text-align: center;} p {color:#8A2BE2 </style> </head> <body> <h3>标题居中</h3> <p>第二个段落</p> </body></html>
免费领取码同学软件测试课程笔记+超多学习资料+学习完整视频,可以关注我们公众号哦:自动化软件测试
本文著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
- 上一篇: 现代前端开发者的自我迷失,你还会前端基础知识吗?
- 下一篇: 2万字 | 前端基础拾遗90问
猜你喜欢
- 2024-11-23 Web前端就业有哪些必备的技能和知识点?
- 2024-11-23 零基础新手学习Web前端应该掌握哪些知识?
- 2024-11-23 2万字 | 前端基础拾遗90问
- 2024-11-23 现代前端开发者的自我迷失,你还会前端基础知识吗?
- 2024-11-23 程序员都必掌握的前端教程之HTML基础教程(上)
- 2024-11-23 web前端基础知识
- 2024-11-23 我们忘记了前端基础知识
- 2024-11-23 前端面试,这些基础知识你都会吗?
- 2024-11-23 想学前端,应该如何入门?
- 2024-11-23 Web前端工程师进阶:需要掌握的6个基础知识和技能
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 602℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 582℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 574℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)