自动化：web网页理解

---

一、网页成分

网页由以下三部分组成

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

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

2、只会提示，不会报错

CSS：

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

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

1、动态脚本语言

vue：前端框架

.vue:模板标记语言

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

HTML

语言需要闭合，如： 或者

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

1、可见元素

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

1）输入框：单行，可以有默认值，可以被禁用，可以只读

"默认值" readonly=true disabled=true />

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

默认值

3）超连接: 可以点击

"https://baidu.com">访问百度

4）按钮

访问谷歌 

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

 
         
        
    
列表项1
 　　
    
列表项2
 
    
列表项3
 
        

6）表格，像登录注册这些

"1"> 
    

        
姓名
        
性别
 
    
      
    

        
张三
 
        
男
 
    
 
    
    
        
王五
 
        
男
 
    
 
    

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、在网页中直接使用例子：执行某个操作后，唤起警告弹窗

2、封装在js文件中，HTML网页通过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)