【JS逆向基础】前端基础-HTML与CSS

1，flask框架

以下是一个使用flask框架写成的serve程序

# noinspection PyUnresolvedReferences
#Flash框架的基本内容

from flask import Flask
app = Flask(__name__)

@app.route('/index')
def index():
    return "hello index"

@app.route('/login')
def login():
    return "hello login"

@app.route('/logout')
def logout():
    return "hello logout"

app.run()    #使用默认的端口号

2，HTML

html的基本结构

（1）HTML

了解了web相关基本概念以后，我们开始正式接触网页开发，网页开发的基础是HTML，所以，本章内容主要分两部分，一是介绍HTML的相关概念、发展历史，二是创建HTML网页文档和认识HTML的基本结构。我们学会如何新建一个 HTML 页面和熟记HTML文档的基本结构和主要标签。

（2）HTML概述

HTML，即超文本标记语言(HyperText Markup Language])，由SGML(标准通用标记语言)发展而来，也叫web页面。扩展名是 .html 或是 .htm 。
HTML，是一种用来制作网页的标准标记语言。超文本，指的就是超出普通文本范畴的文档，可以包含文本、图片、视频、音频、链接等元素。
HTML 不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言

自1990年以来HTML就一直被用作WWW(Worid Wide Web的缩写，也可简写WEB，中文叫做万维网)的信息表示语言，使用HTML语言描述的文件，需要通过网页浏览器显示出效果。用户在访问网页时，是把服务器的HTML文档下载到本地客户设备中然后通过本地客户设备的浏览器将文档按顺序解释渲染成对应的网页效果。

网页本身是一种文本文件，通过在文本文件中添加各种各样的标记标签，可以告诉浏览器如何显示标记中的代表的内容，如:HTML中有的标签可以告诉浏览器要把字体放大，就像word一样，也有的标签可以告诉浏览器显示指定的图片，还有的标签可以告诉浏览器把内容居中或者倾斜等等，

每一个HTML标签代表的意义都不一样。同样，他们在浏览器中表现出来的外观也是不一样的。

<!DOCTYPE html>    //需要引用的标准
<html lang="en">   
<head>             //解释型标签
    <meta charset="UTF-8">  //编码的格式
    <title>Title</title>    //浏览器打开的标签名字
</head>    
<body>             //展示型的标签

</body>
</html>

1、<!D0CTYPE html> 告诉浏览器使用什么样的 html或者xhtml来解析html 文档

2、<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
3、<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

4、<title></title>定义网页标题，在浏览器标题栏显示

5、<meta charset="UTF-8"> 声明编码方式用utf8

6、<body></body>之间的文本是可见的网页主体内容

（3）标签的语法

<标签名属性1=“属性值1”属性2=“属性值2"...>内容部分</标签名>
<标签名属性1=“属性值1”属性2=“属性值2”…. />

1、HTML标签是由尖括号包围的特定关键词

2、标签分为闭合和自闭合两种标签

3、HTML不区分大小写

4、标签可以有若干个属性,也可以不带属性,比如

就不带任何属性

5、XHTML是实现 HTML 到 XML的过渡。

6、标签可以嵌套,但是不可以交叉嵌套

标签的分类：

1，块级标签 2，内联标签 3，段落标签

2.3.1，标题标签

<h5>标题5</h5>
<h6>标题6</h6>

2.3.2，换行标签

悟道休言天命<br>
修行勿取真经<br>
一悲一喜一枯荣<br>

2.3.3，段落标签

<p>菩提本无树，</p>
<p>明镜亦非台。</p>
<p>本来无一物，</p>
<p>何处惹尘埃。</p>

2.3.4，文本格式化标签

HTML提供了一系列的用于格式化文本的标签，可以让我们输出不同外观的元素，比如粗体和斜体字。如果需要在网页中，需要让某些文本内容展示的效果丰富点，可以使用以下的标签来进行格式化。

<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<de1>定义删除文本</de1><br />

2.3.5，特殊符号

如下图所示：

2.3.6 超链接标签

超链接是浏览者和服务器的交互的主要手段，也叫超级链接或始十立口网石山长向早标的连接关系，这个目标可以是网页正在讲话:Bazingi;网页中的具体位置、图片、邮件地址、文件、应用程序等。

超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的，用户通过点击超链接可以从一个网页跳转到另一个网页。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。例如,在阅读某个网站时，遇到一个不认识的英文，你只要在这个单词上单击一下，即可跳转到它的翻译页面中，看完单词的解释后点一下返回按钮，又可继续阅读，这就是超链接的常见用途。还有经常到购物网站中去，我们都是在百度搜索，然后点击对应的搜索项进入到对应的购物网站的，这也是超链接的作用。

超链接的属性:

1、href是超链接最重要的属性，规定了用户点击链接以后的跳转目标，这个目标可以是网络连接，也可以是本地连接。

2、网络链接指的是依靠网络来进行关联的地址，一般在地址前面是以 htp:/或者htps:/这样开头的，如果没有网络，则用户点击了超链接也无法访问对应的目标。

3、本地链接跳转指的是本地计算机的地址，一般在地址前面是以 file:/开头或直接以 C:1、D:、E:/开头的，不需要经过网络。

4、如果href的值留空，则默认跳转到当前界面，也就是刷新当前界面

2.3.7 image标签

在HTML中，图像由标签定义的，它可以用来加载图片到html网页中显示。网页开发过程中，有三种图片格式被广泛应用到

web里，分别是jpg、png、gif。

img标签的属性:

src属性:指定图像的URL地址，是英文source的简写，表示引入资源。
src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。
a1t属性:指定图像无法显示时的替换文本。当图像显示错误时，在图像位置上显示a1t的值。如上所示，就是谷歌浏览器中，引入图像失败后，显示了替换文本。a1t属性一般作为SEO优化的手段之一，所以，使用了img标签就需要加上alt属性。
width属性:指定引入图片的显示宽度。
height属性:指定引入图片的显示高度，
border属性:指定引入图片的边框宽度，默认为0。
tit1e属性:悬浮图片上的提示文字

点击图片跳转可以配合a标签进行使用
<a><img src="" alt=""></a>

2.3.8 列表标签

ml</li>
    <li>item2</li>
    <li>item3</li>
</ul>
<ol start="100">
    <li>iteml</li>
    <li>item2</li>
    <li>item3</1i>
</o1>

2.3.9 表格标签

在HTML中使用table来定义表格。网页的表格和办公软件里面的xis一样，都是有行有列的。HTML使用tr标签定义行，使用td标签定义列

<table border="1">
    <tr>
        <td>yuankai</td>
        <td>23</td>
        <td>销售</td>
        <td>187</td>
    </tr>
    <tr>
        <td>fangkai</td>
        <td>34</td>
        <td>研发</td>
        <td>178</td>
    </tr>

2.3.10 form表单标签

表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.

表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后，就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分:

表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。
表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件,·
表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性:

3，CSS

CSS的功能：渲染与布局

div与span标签
CSS文件的引用方式
div标签的区分

为每一个ID标签加上id的方式进行区分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            font-size: 100px;
            font-weight: 200;
            font-style: italic;
            margin: 10px 0;
        }
        #i2{
            font-size: 100px;
            font-weight: 200;
            font-style: italic;
            margin: 10px 0;
        }
    </style>
    <link rel="stylesheet" href="index.css">   html文件引用css文件
</head>
<body>
<div id="i1">yuan alex</div>
<div id="i2">yuan alex</div>
</body>
</html>

div{
            font-size: 100px;
            font-weight: 200;
            font-style: italic;
            margin: 10px 0;
}

选择器

基本选择器：标签选择器

id选择器: #id值

class选择器: .class值

组合选择器: 后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            font-size: 10px;
            font-weight: 200;
            font-style: italic;
            margin: 10px 0;
        }
        #i2{
            font-size: 10px;
            font-weight: 200;
            font-style: italic;
            margin: 10px 0;
        }
        li{
            font-size: 20px;
            font-weight: 200;
        }
        .c1{
            color:red;
            background: black;
        }
        .c2{
            color: blanchedalmond;
        }
        .c3{
            color: darkkhaki;
        }
        .c4 .c5{
            color: darkkhaki;
        }


        .c6 .c7 .c8{
            color: saddlebrown;
        }

    </style>
    <link rel="stylesheet" href="index.css">
</head>
<body>

<div id="i1">yuan alex</div>
<div id="i2">yuan alex</div>

<ul>
    <li>张三</li>
    <li class="c1">赵四</li>
    <li class="c1">王五</li>
    <li class="c1">李六</li>
</ul>
<div class="c1 c2">AAAAAA</div>
<div class="c3 c2">DDDDDD</div>


<div class="c4">
    <div class="c5">XXXXXXXXXXXXX</div>
</div>

<div class="c6">
    <div class="c7">
        <div class="c8">YYYYYYYYYYYYYYYYYYYYY</div>
    </div>
</div>

</body>
</html>

CSS样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            font-size: 10px;
            font-weight: 200;
            background: #ff3243;
            width: max-content;
        }
        .btn{
            text-align:center;
            font-size:30px;
            width:120px;
            height: 70px;
            background-color:lightcyan;
            line-height: 70px;
            border-top-right-radius:80%;
            border-bottom-right-radius:80%;
        }
        .c2{
            width: 300px;
            height: 200px;
            border: 10px dashed green;
            border-radius: 10px;
            text-align: center;
            line-height: 200px;
            float: right;
        }
        .c3{
            width: 300px;
            height: 200px;
            background-color:lightblue;
            padding: 50px;
            border:10px solid red;
            float: left;
        }
    </style>

</head>
<body>
<div class="c1">QQQQQQQQQQQQQ</div>

<div class="btn">按钮</div>

<div class="c2">边框</div>

<div class="c3">c4..</div>

</body>
</html>