一、网页成分

网页由以下三部分组成

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. JZOJ 4212. 【五校联考1day2】我想大声告诉你

    题目 解析 设 \(f_{i,j}\) 表示 \(i+1..n\) 个人能受到 \(j\) 次攻击的概率 因为选人出局的顺序是无所谓的,所以我们设从 \(1..n\) 依次选人出局 那么转移时需要分类 ...

  2. grafana展示的CPU利用率与实际不符的问题探究

    问题描述 最近看了一个虚机的CPU使用情况,使用mpstat -P ALL命令查看系统的CPU情况(该系统只有一个CPU core),发现该CPU的%usr长期维持在70%左右,且%sys也长期维持在 ...

  3. dom添加样式可以这样写

    1.原生 js添加样式很多时可以合并在一起写: var oPopwin = document.getElementById('vpage'); oPopwin.style.margin = 'init ...

  4. vue+mysql实现前端对接数据库

    下载引入相关依赖 1.cnpm install --save mysql 2.cnpm install --save axios 3.cnpm install --save body-parser 4 ...

  5. 慧销平台ThreadPoolExecutor内存泄漏分析

    作者:京东零售 冯晓涛 问题背景 京东生旅平台慧销系统,作为平台系统对接了多条业务线,主要进行各个业务线广告,召回等活动相关内容与能力管理. 最近根据告警发现内存持续升高,每隔2-3天会收到内存超过阈 ...

  6. JZOJ 6664. 【2020.05.28省选模拟】最优化

    \(\text{Solution}\) 原题:\(\text{Honorable Mention}\) 一个费用流做法,\(S\) 向 \(2i-1\) 连流量为 \(1\),费用为 \(0\) 的边 ...

  7. 银河麒麟服务器V10-SP2安装tomcat

    1.首先先去tomcat官网下载一个安装包 2.创建一个存放压缩包的文件夹,并考入文件 3.解压tomcat压缩包 命令: tar -xvf 压缩包名 4.启动tomcat 进入apache-tomc ...

  8. Vue框架中有关 computed的相关知识

    1,传统使用computed属性的方式如下: 注意:此时如果我们点击修改的时候会有如下警告(表示computed属性不可以修改,如果非得修改,我们应该如下下图所示操作) 2,修改computed属性的 ...

  9. KU060板卡设计资料原理图第636篇:基于FMC的KU060高性能 PCIe 载板

    基于FMC的KU060高性能 PCIe 载板 一.板卡概述 板卡主控芯片采用Xilinx 公司的 Kintex UltraScale系列FPGA XCKU060-2FFVA1156.板载 2 组 64 ...

  10. 配置hive