HTML基础（一）——常用的html标签

pro1822

已于 2022-03-24 22:41:10 修改

阅读量432

点赞数

分类专栏： HTML+CSS基础文章标签： html5

于 2022-03-24 21:41:13 首次发布

本文链接：https://blog.csdn.net/qq_41523175/article/details/123711926

版权

HTML+CSS基础专栏收录该内容

15 篇文章 6 订阅

订阅专栏

一、开发前准备

学习编程，最重要的是动手，光看知识点没用，能自己动手做出来才能算是你的东西。一开始就算是对着敲，也要去敲。

1、下载代码编辑器——Visual Studio Code

直接去官网下载即可。Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.https://code.visualstudio.com/Download

2、安装插件

（1）Chinese（汉化vscode）

（2）Beauty（格式化代码）

（3）open in browser（在浏览器中打开）

3、创建.html文件

使用【!+tab】，一键生成html模板。（注意：是英文的感叹号!）

生成的模板如下图：

分析：

（1）模板组成：

A、声明为HTML5文档：

<!DOCTYPE html>

B、完整的HTML页面部份：

<html>

</html>

a、头部元素：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

该标签为标题，显示在浏览器标签页处。

<title>Document</title>

b、可见的页面内容：

<body>
    
</body>

在此处写的内容，可以显示到浏览器页面上。

c、标签分为：

开始标签：<head>

结束标签：</head>

d、标签内部有属性，如：charset，用来进一步描述标签的内容。

二、常用的html标签

1、标题标签

<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>

效果如下：

可以发现，字体越变越小。

2、段落标签

    <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
    <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
    <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>

效果如下：

可以看到，一个p标签内的文本，都在一个段落内。再来一个p标签，就是再来一个段落。

3、无序列表和有序列表

无序列表：ul

有序列表：ol

（1）无序列表：

    <ul>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ul>

效果如下：

（2）有序列表：

    <ol>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ol>

效果如下：

4、超链接标签（a标签）

    <a href="https://www.baidu.com">百度一下，你就知道</a>

效果如下：

点击链接，即可跳转到百度搜索页面。

5、图片标签

    <img src="head.jpg" alt="图片加载失败">

src：图片路径。

alt：图片显示异常时，显示的文字。

6、块级标签——<div>

    <div>
        
    </div>

7、行内标签——<span>

    <span></span>

8、换行——<br>

<br>

9、分割线——<hr>

<hr>

三、代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello world</h1>
    <h2>hello world</h2>
    <h3>hello world</h3>
    <h4>hello world</h4>

    <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
    <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
    <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>

    <ul>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ul>

    <ol>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ol>

    <a href="https://www.baidu.com">百度一下，你就知道</a>

    <img src="heasd.jpg" alt="图片加载失败">

    <div>
        
    </div>

    <span></span>
</body>
</html>