实用篇:html

标签：ipsum consectetur sit 实用 html dolor Lorem adipisicing

前言
编程序之前
HTML必学的东西
- 框架
- 标签
如何快速打出一个网页（不加任何修饰）
修饰
如何运行
排错
最后

前言

HTML的全称为超文本标记语言，是一种标记语言。在之前在讲python爬虫的时候也提到过，爬虫数据是HTML，所以今天来讲一下HTML，废话不多说，开肝！

编程序之前

安装

HTML建议使用vscode编辑器，vscode是一个支持37种编程语言，功能强大，也是免费的，安装也十分的快。
首先，打开浏览器，找到vscode官网，这里使用的是edge浏览器.

找到vscode的官网，打开。

在这里插入图片描述
点击上方Download.
选择版本，进行下载。

更换语言

下载完成后点击图标，会发现一堆看不懂的文字，可以按照以下步骤，更换语言。
按下快捷键“Ctrl+Shift+P”。
在弹出的搜索框中输入“configure language”。
进入语言设置，选择你想要的语言。

如何打开文件编代码

这里建议使用“windows + E”打开文件资源管理器点击查看，再点击显示，最后将文件扩展名勾上
在这里插入图片描述
然后创建一个文件夹，因为在以后编程的时候有可能会用到bootstrap之类的库，而库的文件就要和代码文件放在一起，在创建一个文件，右键重命名，将后缀名修改为.html，之后返回，用鼠标点中你创建的文件夹，并将它拖到vscode桌面快捷键的上面，你会看到一段用黑边框框起来的很小的文字，如果是使用vscode运行此文件，在松掉鼠标左键，这时候你会看见vscode打开了，右边如果有你命名的文件夹和文件那就说明你成功了。

HTML必学的东西

框架

现在，打开你创建后缀名为.html的文件，并且在代码区打上一个英文的问号，摁下回车，一个html基础的框架就出现了，
就先这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

可以使用浏览器查询，这里不做讲解(因为打完上面这一段我的键盘已经快冒烟了)

标签名	用法
a	传说中的超链接，在vscode中只需要按一下键盘上的a键就会弹出`<a href=""></a>` href中该填的是url，也就是网址链接，在运行后点击标签，会弹到href中的网页地址
button	中间如果填的是abc那吗当运行代码时就会出现一个按钮，按钮上有三个字母abc
p	段落，就是一段话，没有效果，也不像`a`和`button`一样可以点击
h1、h2、h3、h4、h5、h6	表示六个不同的级别的章节标题，h1 级别最高，而 h6 级别最低。

如何快速打出一个网页（不加任何修饰）

我从bootstap截了张图，如果我们想快速做出这个网页，这么打。
在这里插入图片描述

这时候，第一步：分析
这是由三条组成的，拆开：
第一条：h3+h4+p+a我们将它们包装进一个section标签class = "map"中的div我将class等于part，
第二条：外面套一个和第一条一样的div 它的class = “part”
然后看第二条的组成，h3+h4+p+ul{li*5}
第三条:还是外面div class = "part"看里面：(h3+h4+p)*3+a
第二步：搭小框架
很简单，可以用快捷方式，这里做个小示例：如果我要做出第一条的效果，就应该在vscode中这么打：
在这里插入图片描述
这时候如果弹出像我这样的提示框后面又Emmet缩写的提示时，摁下回车，
如果出现下图，说明你成功了：

注意：建议自己打，否则会没有提示框，需要删去最后一个字母，再打回去，这时候提示框就出现了。
第三步：填充内容将文字放进div,可用html带的lorem
自动填充（或者说是瞎打字）。
反正无论如何最后除了Lorem开头的应该都一样，长这样。

在这里插入图片描述

注意这段写在body里面。

修饰

这一段如用HTML自带的语言需要在title标签下方写一个style双标签，在里面打修饰代码，如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
    <style>
</head>
<body>
    
</body>
</html>

如何修饰？第一步找到需要修饰的标签，可以使用.image找到image标签，注意h开头的h1~h6不需要点。最后没时间了，直接把代码放这里：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="css/font-awesome.css">
    <style>
        body{
            text-align: center;
        }
        h2 {
            display: inline-block;
            background: #000;
            padding: 0.5em 1.5em;
            color: #fff;
            border-right: 5px solid orangered;
            transform: skew(-15deg);
            margin: 2em;
        }
        h2>span {
            display: inline-block;
            transform: skew(15deg);
            text-transform: uppercase;
        }
        .parts{
            width: 80%;
            margin: 0 auto;
            transition: 0.5s;
        }
        .to-right{
            order: 2;
        }
        .to-left{
            order: 1;
        }
        .text{
            background: rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 1em;
        }
        .icon{
            font-family: 'tony';
            font-size: 80px;
            border: 0;
            background: transparent;
        }
        .text>a{
            /* display: inline-block; */
            transform: skew(-15deg);
            width: 150px;
            margin: 0 auto;
        }
        .text>a:hover{
            background: orangered;
        }
        @font-face {
            font-family: 'tony';
            src: url(css/fontawesome-webfont.ttf);
        }
        .h3{
            text-transform: capitalize;
            font-weight: bold;
        }
        .cards{
            margin: 0 auto;
            background: url(img/bg-3.jpg);
            /* display: flex; */
            width: 100%;
        }
        .card{
            padding: 1em;
            margin: 0 auto;
            transition: 0.5s;
            border: 0;
            background: transparent;
        }
        .inner{
            width: 80%;
            margin: 0 auto;
            display: flex;
        }
        .part{
            padding: 40px;
            border-right: 1px solid #000;
        }
        .part:last-child{
            border-right: 0px solid #000;
        }
        .map{
            display: flex;
            text-align: left;
            width: 80%;
            margin: 0 auto;
            padding: 40px 0;
        }
        .btn{
            transform: skew(-15deg);
            border: 3px solid orangered;
            color: orange;
        }
        h3{
            font-size: 1.35em;
            font-weight: bolder;
        }
        h4{
            font-size: 1.25em;
            font-weight: bolder;
        }
        li{
            color: orange;
            text-transform: uppercase;
        }
        li:before{
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #000;
            margin-right: 20px;
        }
        ul{
            list-style: none;
            color: #000;
            padding: 0;
        }
        .footer{
            background: orangered;
            color: #fff;
            padding: 40px;
        }
        .footer>h3{
            margin-bottom: 40px;
        }
        @media screen and (max-width:1024px) {
            .parts{
                width: 100%;
                }
            }
        @media screen and (max-width:768px){
            .to-right{
                order: 1;
            }
            .to-left{
                order: 2;
            }
            .map{
                display: block;
            }
            .inner{
                display: block;
            }
            .part{
                border-right: 0px solid #000;
            }
        }
    </style>
</head>
<body>
    <h2><span>about autoimage</span></h2>
    <div class="parts">
        <div class="part m-3 d-flex flex-wrap">
            <img src="img/23.jpg" alt="" class = "col-12 col-md-6">
            <div class="text col-12 col-md-6">
                <h3>the title on the article</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui esse voluptates repellendus libero, mollitia voluptas in eveniet cupiditate exercitationem? Voluptate aperiam omnis ratione quidem est aliquam aliquid magnam natus nihil!</p>
                <a href="" class = 'btn'>Read More</a>
            </div>
        </div>
        <div class="part m-3 d-flex flex-wrap">
            <img src="img/24.jpg" alt="" class="col-12 col-md-6 to-right">
            <div class="text col-12 col-md-6 to-left">
                <h3>the title on the article</h3>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum similique sapiente ab soluta dignissimos, veniam natus velit, vero, explicabo voluptas delectus laboriosam inventore sunt error. Repellat delectus harum eaque iusto?</p>
                <a href="" class = 'btn'>Read More</a>
            </div>
        </div>
    </div>
    <div>
        <div class="cards">
            <h2><span>service</span></h2>
            <div class="inner">
                <div class="card">
                    <button class="icon fa-bar-chart"></button>
                    <h3>Results Driven</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos corrupti. Tempora, quas doloribus? Ut quibusdam dolor vero, reprehenderit ex repellat laudantium ad! Tenetur in beatae voluptatem ea repellendus accusantium!</p>
                </div>
                <div class="card">
                    <button class="icon fa-road"></button>
                    <h3>Proven Technology</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vitae laboriosam veritatis minima necessitatibus eum totam error, nesciunt deleniti. Aliquid sapiente repellat voluptate accusantium minus officiis ipsum voluptatum. Sint, voluptate.</p>
                </div>
                <div class="card">
                    <button class="icon fa-flag"></button>
                    <h3>Winning Culture</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, id ex. Illum debitis magni quod excepturi! Accusamus odio nisi, molestias iure ratione eos error sed, ipsam, maiores porro at pariatur!</p>
                </div>
                <div class="card">
                    <button class="icon fa-dashboard"></button>
                    <h3>Top Performance</h3>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus inventore iusto sint commodi? Dolore expedita aspernatur distinctio fugit, enim voluptates voluptate error? Amet qui itaque ducimus perspiciatis iusto earum cum.</p>
                </div>
            </div>
        </div>
    </div>
    <section class="map">
        <div class="part">
            <h3>WELCOME To Our Site</h3>
            <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum cupiditate voluptatem saepe officia hic ipsa ipsam magnam distinctio consectetur a, veniam nostrum sapiente vitae aliquid recusandae quo placeat esse iste.</p>
            <a href="" class="btn">More</a>
        </div>
        <div class="part">
            <h3>CARE & SUPPORT</h3>
            <h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat natus perferendis voluptate unde at nesciunt blanditiis inventore nulla iure nisi. Quibusdam cum eveniet eius aliquid distinctio porro, odit omnis qui!</p>
            <ul>
                <li>content1</li>
                <li>content2</li>
                <li>content3</li>
                <li>content4</li>
                <li>content5</li>
            </ul>
        </div>
        <div class="part">
            <h3>LATEST NEWS</h3>
            <h4>Lorem ipsum dolor </h4>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto quos, animi in eaque pariatur expedita sed iure veniam beatae, debitis adipisci incidunt. Voluptatum, officiis quidem dolor nobis corrupti qui commodi.</p>
            <h3>LATEST NEWS</h3>
            <h4>Lorem ipsum dolor </h4>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto quos, animi in eaque pariatur expedita sed iure veniam beatae, debitis adipisci incidunt. Voluptatum, officiis quidem dolor nobis corrupti qui commodi.</p>
            <h3>LATEST NEWS</h3>
            <h4>Lorem ipsum dolor </h4>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto quos, animi in eaque pariatur expedita sed iure veniam beatae, debitis adipisci incidunt. Voluptatum, officiis quidem dolor nobis corrupti qui commodi.</p>
            <a href="" class="btn">More</a>
        </div>
    </section>
    <div class="footer">
        <h3>Contact</h3>
        <p>Lorem ipsum dolor </p>
        <p>Lorem ipsum dolor </p>
        <p>Lorem ipsum dolor </p>
        <p>Lorem ipsum dolor </p>
    </div>
</body>
</html>

注意这里我用了link和script标签导入了三个库，需要先下载到和文件在一起的文件夹中，否则会报错。

如何运行

先保存，在打完代码之后摁下“Ctrl + s”保存。然后，打开存放开始时创建的文件，双击，如果跳出一个网页，就说明你运行成功。

未保存
在这里插入图片描述
已保存

排错

找出问题，有时候运行达不到想要的效果，有可能报错了，先教大家用edge浏览器排错，
我在这里写了一段错误代码：
在这里插入图片描述
p是双标签，而我却漏了一个，但是程序会报错
开始排错：
第一步：用edge打开我们编的程序：

打开之后右键，检查：

按下左键：

点击控制台，一般我们报错内容都会在这里