一、网页成分

网页由以下三部分组成

HTML: HTML 教程 (w3school.com.cn)

1、标记语言,网页的主体,不会变化

2、只会提示,不会报错

CSS:

1、标记语言,用来修饰HTML,例如颜色和字体大小

JavaScript:JavaScript 教程 (w3school.com.cn)

1、动态脚本语言

vue:前端框架

.vue:模板标记语言

二、对以上语言的简单说明

HTML

语言需要闭合,如:<tag /> 或者<tag > </tag>

可分为两种元素,以用户是否能在网页看到分类:可见元素和不可见元素

1、可见元素

如:输入框、按钮、文本内容、勾选框、下拉框这些

1)输入框:单行,可以有默认值,可以被禁用,可以只读
<input value="默认值" readonly=true disabled=true />

2)文本框:多行,和input标签闭合的方式不一样 ,可以有默认值,可以被禁用,可以只读

<textarea readonly=true disabled=true >默认值</textarea>

3)超连接: 可以点击

<a href="https://baidu.com">访问百度</a>

4)按钮

<button>访问谷歌</button> <!-- 点击按钮之后,触发回调,执行JS代码-->

5)无序和有序列表,无序列表就是每列前显示黑色圆点,,有序就是前面显示1,2,3

<ul>
<!-- ol: oder list 有序列表-->
<!-- ul: unoder list 无序列表-->
<li>列表项1</li>   <!-- list itme 列表项-->
<li>列表项2</li>
<li>列表项3</li>
</ul>

6)表格,像登录注册这些

<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
</tr> <!-- table row -->
<tr>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
</tr>
</table>

2、不可见元素

div: 不可见,用来组织元素之间的关系 title: 不可见,声明网页的标题
style: 不可见,用来申明CSS
script:不可见,用来声明动态脚本(比如JS)
 
CSS
网页中的几种用法
1、写到css样式文件,在HTML前style标签调用
2、在标签中用属性style调用
注:如果写在HTML前,需要通过css选择修饰的元素
 
这里只对css选择器做说明
1、元素选择器
input { /* 选择所有的 input标签 */
color: red;
}

2、属性选择器

input[value='默认值'] {
/* 选择属性value=默认值的 input标签 */
color: red;
}

属性id选择器带#号,属性class选择器带.号

#控制台中使用
#相当于document.querySelector(‘ ‘)使用
$('#assign-issue') #id选择器id=assign-issue
$('.trigger-label') #class选择器class=trigger-label #HTML中使用 #id{
color: red;
}
.x1{
color: red;
}
JavaScript
1、在网页中直接使用例子:执行某个操作后,唤起警告弹窗
<script type="text/Javascript">
alert("hello");
</script>

2、封装在js文件中,HTML网页通过script标签导入

<script src="aaa.js"> </script>

javascript对浏览器操作

#页面跳转
window.location.href = "https://baidu.com" #打开新窗口
window.open("https://wap.baidu.com")

以及其他前进、后退、刷新等操作

JavaScript在DOM中操作

#创建元素
var ele = document.createElement("input") document.body.appendChild(ele) #修改元素
ele.value="我也是默认值" #删除元素
document.body.removeChild(ele)
 
 

自动化:web网页理解的更多相关文章

  1. 学习笔记——Maven实战(五)自动化Web应用集成测试

    自动化集成测试的角色 本专栏的上一篇文章讲述了Maven与持续集成的一些关系及具体实践,我们都知道,自动化测试是持续集成必不可少的一部分,基本上,没有自动化测试的持续集成,都很难称之为真正的持续集成. ...

  2. TI IPNC Web网页之流程分析

    流程 Appro IPNC使用的web服务器是boa. 请仔细理解下面这段话. boa这个web服务器是GUI界面和IPNC应用程序之间的通信的桥梁.它的责任是从web GUI中接收HTTP请求,并且 ...

  3. web网页练习

    一. HTML部分 1. XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: XHTML 元素必须被正确地嵌套. XHTML 元 ...

  4. TI IPNC Web网页之网页修改教程

    web网页程序修改 打开gStudio之后,点击菜单栏中Help->Contents.先把这个诡异的编程语言看一遍吧.这里搬一些东西出来. GoDB简介 从第一副图片中,我们可以看出,从源文件到 ...

  5. 简单web网页与SSM后台交互

    简单web网页与SSM后台交互 情况说明 如今,已经搭建好SSM后台开发环境,并且可以经由postman工具测试成功.现在尝试写出web前端网页,通过实现简单的提交.注册.查询功能来加深对前后端数据传 ...

  6. Web框架理解

    目录 1.web框架理解     2.http工作原理     3.通过函数实现浏览器和服务端通信案例     4.服务器程序和引用程序理解     5.jinja2渲染模板案例     6.Djan ...

  7. WinForm嵌入Web网页的解决方案

    企业级信息化系统绝大部分采用BS架构实现,如门户网站.OA系统.电商网站等,通过浏览器输入Web网址即可访问,对于使用者来说非常便捷,对于开发维护者来说也非常方便,程序维护只需更新服务器即可,使用者无 ...

  8. .NET桌面程序集成Web网页开发的多种解决方案

    系列目录     [已更新最新开发文章,点击查看详细] B/S架构的Web程序几乎占据了应用软件的绝大多数市场,但是C/S架构的WinForm.WPF客户端程序依然具有很实用的价值,如设计类软件 Au ...

  9. web网页中使用vlc插件播放相机rtsp流视频

    可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 使用vlc进行二次开发做自己的播放器 vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放 ...

  10. WEB网页插件 如何实现 选择上传图片路径 【高级问题】

    发表于 2010-10-22 12:11 | |只看楼主       按键精灵程序里面的WEB网页插件 如何实现 选择上传图片路径 我想在上传图片的选框设置图片路径为 C:\fakepath\001. ...

随机推荐

  1. Cesium模型贴地问题(八)

    2023-01-12 1.sampleTerrainMostDetailed 根据提供的terrainPrivider和点的弧度坐标计算出当前点的高度信息. var p = new Cesium.Ca ...

  2. 常见数据库mysql、oracle和DB2中is null 和 =null 的区别

    问题背景:前段时间我在测试过程中上传一个文件,文件内容要求判断为空,结果出现了报错,跟踪原因发现是开发误将oracle中对null的判断方式写成了=null,下面梳理一下不同数据库对该问题的处理方法: ...

  3. idea代码格式xml

    <code_scheme name="Default copy" version="173"> <option name="LINE ...

  4. DOM06~

    Window 对象 BOM (浏览器对象模型) 定时器-延时函数 js 执行机制 location 对象 navigator 对象 history 对象 BOM BOM (Browser Object ...

  5. 【python学习】PyQt基础学习以及一个信息论与编码课设实例

    这学期的信息论与编码的课设需要用编程语言实现霍夫曼.费诺以及香农编码,要具备在windows下的可视化操作界面,因此就选用PyQt作为开发工具,本篇博客记录一下PyQt的基础以及课设的实例 参考: & ...

  6. 安装pytorch报错 ERROR: Could not install packages due to an OSError: [Errno 28] No space left on device

    windos安装,报错如下 看了不少回答,大概是缓存和内存满了 我的C盘只给了70G,然后意外发现只剩下3G多了,先用系统自带的清理工具清理了一下,然后腾讯电脑管家"工具箱"中的& ...

  7. 记录 mysql修改密码报错问题 (ERROR 1054 (42S22): Unknown column 'password' in 'field list')

    报错如图: 查了相关文档 MySQL官网手册表示MySQL5.7版本后,password这个字段被改成 authentication_string, 命令修改如下: update user set a ...

  8. VUE学习-列表渲染

    列表渲染 v-for <!-- v-for="(v,k,i) in arr/obj" --> <ul id="app"> <li ...

  9. 069_VisualForce Ajax 更多用法解读02

    一.同步调用的异常处理:AJAX Toolkit  try catch... <html> <head> <script src="/soap/ajax/44. ...

  10. HIVE- set

    SET hive.execution.engine = tez;SET hive.tez.auto.reducer.parallelism = true;SET hive.auto.convert.j ...