HTML初学入门基础1----------各种标签

最新推荐文章于 2024-01-22 16:57:25 发布

涟涟涟涟

最新推荐文章于 2024-01-22 16:57:25 发布

阅读量692

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_43784914/article/details/103441336

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、使用工具

1.谷歌浏览器（其他浏览器也可）

2.取色器（Instant Eyedropper）

3.VSCode

二、新建项目

Ctrl+S保存

保存类型选为HTML类型

在开始页面打出英文!

按回车键

接下来我们就在body标签内写代码了

写完代码之后保存，然后我们找到你保存的html，使用浏览器打开，每保存一次，可以使用刷新看最新的成果

注：

1.改变页面提示：

只需改变title中的内容即可

2.注释：

使用Ctrl+？快捷键可以快速打出。

三、初识各种标签

1. p标签

作用：段落标签，自成一个段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    siulgdd
    dbsgilu
    <p>
        dgsihfsgdyuf
    </p>
    ktudyghcvby
</body>
</html>

结果：

2.h标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <h1>
        rdcfvgbhjnk
    </h1>
    <h2>
        rdcfvgbhjnk
    </h2>
    <h3>
        rdcfvgbhjnk
    </h3>
    <h4>
        rdcfvgbhjnk
    </h4>
    <h5>
        rdcfvgbhjnk
    </h5>
    <h6>
        rdcfvgbhjnk
    </h6>
    <!-- 上面多行就是不同大小型号的标签 -->
    
</body>
</html>

结果：

3.strong标签

作用：加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    erujfd
    <strong>
        usdgibjkkkvfgr
    </strong>
</body>
</html>

结果：

4.em标签

作用：斜体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    erujfd
    <em>
        uogeiwsdxchjbyfgr
    </em>
</body>
</html>

结果：

注：既加粗又斜体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    erujfd
    <em>
        uogeiwsdxchjbyfgr
    </em>
    <strong><em>jiacuxieti</em></strong> 
</body>
</html>

结果：

5.del标签

作用：中划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <del style="color:#759A31;">
        中划线
    </del>
</body>
</html>

结果：

注：颜色可以用取色器取色。

6.div标签

将里面的内容划分为一起，成为一个块

例如：我们看见淘宝页面其中一个div就是指的上面的浅蓝色区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    aryldbivgylcddsbrehyg
    <div>
        uiwfegdBsufewiggggebdsufewg
        rxdyexx cdyc
    </div>
    szettdyhrxg vdgrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
</body>
</html>

结果：

注：

查看页面源代码只需要在任意一个页面上单击右键选中查看页面源代码即可。在谷歌浏览器上可以用fn+f12快捷键调出。

7.<ol><li></li></ol>标签

有序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <ol>
        <li>
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
    </ol>
</body>
</html>

结果：

(默认项目列表是数字)

改变项目列表：

字母类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <ol type="a";>
        <li>
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
    </ol>
</body>
</html>

结果：

类型：

罗马数字类型：

i类型

小写字母类型

大写字母类型

数字类型

注：

ol>li*3就相当于

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

start

从哪个字母/数字开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <ol type="a" start="5">
        <li>
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
    </ol>
</body>
</html>

结果：

8.<ul> <li>

无序（默认为实心圆点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <ul>
        <li>
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
    </ul>
</body>
</html>

结果：

改变类型：

空心圆：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <ul type="circle">
        <li>
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
    </ul>
</body>
</html>

方形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <ul type="square">
        <li>
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
        <li>
            aygueknrrbcgbyeus
        </li>
    </ul>
</body>
</html>

9.img标签

网上的url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <img src="https://goss4.cfp.cn/creative/vcg/800/new/VCG41N912177390.jpg?x-oss-process=image/format,jpg/interlace,1" alt="">
</body>
</html>

本地的相对路径在同一个文件夹下只需要文件的名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <img src="3.jpg" alt="">
</body>
</html>

本地的绝对路径在不同的文件夹下要加上他的位置路径

10.<button>标签

按钮

出现提示弹窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <button onclick="alert('核辐射如果')">
        安理会和仄uu福建发货
    </button>
</body>
</html>

11.u标签

下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <u>
        沙特和人工费深V
    </u>
</body>
</html>

12.br

作用：换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    54<br>5465
</body>
</html>

结果：

13.a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
     <a href="tel:13298187720">
        给我打电话
    </a>
</body>
</html>

结果：
需要相应的配件，可以给你打电话

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <a href="https://cn.bing.com/" style="color: teal; width: 5px; height: 315px; background-color: yellow ;display: block " target="_blank">
            超链接到必应页面
    </a>
</body>
</html>

结果：
点击可以将当前页面转到必应页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    <a href="mailto:13298187720@163.com">
        给我发邮件
    </a>           
    
    <a href="javascript:while（1）{alter('让你手欠')}">
        协议限定符
    </a>
</body>
</html>

<div>

尖括号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    &lt;div&gt;
</body>
</html>

空格的意思。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习12.8</title>
</head>
<body>
    aryldbivgylcddsbrehyg
    <div> 
        uiwfegdBsufewigg&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ggebdsufewg
        rxdyexx cdyc
    </div>
    szettdyhrxg vdgrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
</body>
</html>

结果：

target="_blank"

意味着新开一个页面

涟涟涟涟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML初学入门基础1----------各种标签

一、使用工具1.谷歌浏览器（其他浏览器也可）2.取色器（Instant Eyedropper）3.VSCode二、新建项目Ctrl+S保存保存类型选为HTML类型在开始页面打出英文!按回车键接下来我们就在body标签内写代码了写完代码之后保存，然后我们找到你保存的html，使用浏览器打开，每保存一次，可以使用刷新看最新的成果注：...
复制链接

扫一扫