自动化：web网页理解

 

 

---

 

一、网页成分

网页由以下三部分组成

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)