爬虫前端基础 html、css、javascript 学习

• HTML定义了网页的内容

• CSS描述了网页的布局

• JavaScript网页的行为

一、HTML

（1）结构

• 决定了该代码是html文件，即说明各类。
• 头部。
• 即主体部分。
• 在其头部，是重要部分。即提供有关页面的元信息，搜索引擎的关键词就是元信息的内容，因此是用来概述本页面的信息的。

（2）常用标签

    1. 浏览器标题

    2. 标题与段落

    


    
一级标题h1
    
二级标题h2
    
三级标题h3
    
四级标题h4
    
五级标题h5
    
六级标题h6
    
段落标签p

    3.水平线与换行符

  水平线

  换行符

    4. 图片标签

    5. 链接标签

点击我，本窗口访问百度
点击我，新窗口访问百度

    6. 表格标签

    

        
表头th
        
表头th
    
    

        
普通列td
        
普通列td
    

    7.列表标签

    
无序列表项1
    
无序列表项2


    
有序列表项1
    
有序列表项2

    8. 常见的无意义标签

div标签
span标签

    9. 在内指定编码为 UTF - 8 ， 才能正常显示中文

    10.表单

        功能：在网页中主要负责数据采集功能。

        一个表单有三个基本组成部分：

• 表单标签：这里面包含了处理表单数据所用的CGI程序的URL以及数据提交到服务器的方法。
• 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、文件上传框等。
• 表单按钮：包含提交按钮、复位按钮和一般按钮；

表单1：




    
    


    
    


    




表单2：




    
    


    
    

        1.用户名（文本框text）:
            
        

        2.密码（密码框password）：
        

        3.性别（单选框radio）：
            男
            女
        

        4.爱好（复选框checkbox）：
            学Web
            学爬虫
        

        5.上传头像（文件框file）：
            
        

        6.按钮（button）:
            
        

        7.提交（submit）:
            
        

        8.重置（reset）:
        
        

    




表单3




    
    


    
    

        
            2019
            2019
        
        
    

 

 

---

 

二、CSS --- 美化HTML显示

使用CSS有三种用法：

1. 内联样式表

2. 嵌入式样式表

3. 外部样式表

1.内联样式表（不推荐使用）：在标签内使用style属性指定css代码。

hello CSS

2.嵌入式样式表：在head标签内定义style标签，style标签体内写css代码

    
    
    


    
hello CSS

3.外部样式表：先定义css资源文件，然后在head标签内，定义link标签，引入外部资源文件

CSS文件：

div{
    color:green;
}

HTML文件：

    
    
     
    


	
hello CSS

（1）属性介绍

1.颜色 （颜色可用英文，十六进制，RGB,RGBA）

2.字体

• font-size ： 字体大小
• font-family：字体类型
• font-weight：字体加粗。取值可为英文名称（normal、bold、boder、light）、数字

3.背景

•  background-color:背景颜色
•  background-image:背景图片
•  background-repeat:背景重复方式
•  background-position:背景位置

4.文本

•  text-align:设置文本对齐方式
•  line-height:设置文本行高
•  text-indent:首先缩进
•  letter-spacing:设置字符间距

5.列表

•  list-style-type：指明列表项的类型，属性值有none(无标记）、disc(实心圆，默认值）、circle(空心圆）、square(实心方块）、decimal(数字）、decimal-leading-zero(0开头的数字）、lower-roman(小写罗马数字）、upper-roman(大写罗马数字）、lower-alpha(小写字母）、upper-alpha(大写字母）
•  list-style-position：列表项中的位置。inside(文本内，且环绕文本根据标记对齐)；outside(与inside相反）；inherit(继承父元素list-style-position属性）。
•  list-style-image：设置图像列表。属性值包括url,inherit,none.

（2）CSS格式

选择器 {
	属性名1:属性值1;
	属性名2:属性值2;
	...
}

（3）选择器--用来筛选具有相似特征的元素

1.基础选择器：

（1）id选择器：以"#"来定义,选择具体的id属性值的元素
    建议在一个HTML页面种一个id值只能使用一次，保持唯一性

#div1{
    color: red;
}


    id选择器



（2）元素选择器：选择具有相同标签名称的元素

div{
    color:green;
}


    元素选择器



（3）类选择器：选择具有相同的class属性值的元素
    注意：与id选择器不同，多个标签可以使用同一个class属性值

.cls1{
    color: blue;
}


    类选择器

2.扩展选择器：

（1）通用选择器：选择所有的元素

*{
	
    background-color:yellow;
}

（2）并集选择器：选择所有指定的元素

div,p{
    background-color:yellow;
}

（3）子选择器：选择指定元素下的子元素（div为父标签 p为子标签）

div p{ 
    background-color:yellow;
}

（4）父选择器：选择指定元素下的子元素，且其父元素是指定元素（div为父标签 p为子标签）
注意：子选择器和父选择器的区别在于：
    子选择器中p标签在div标签中就可以生效；
    但是在父选择器中不仅要p标签在div标签中，而且p标签的父标签必须是div标签才能生效。

div>p
{ 
    background-color:yellow;
}

（5）属性选择器

input[type="text"]{
    background-color:yellow;
}

（6）伪类选择器：选择一些元素具有的状态

a:link
{ 
    background-color:yellow;
}

 

 

---

 

三、JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能

JavaScript的引入方式：

（1）内嵌式：

（2）外部式：

 

点击跳转到强大的B站配套视频讲解

---