HTML新手入门（一）

最新推荐文章于 2023-09-02 10:26:22 发布

洺丶T

最新推荐文章于 2023-09-02 10:26:22 发布

阅读量1.3k

点赞数 7

文章标签： html html5 chrome

本文链接：https://blog.youkuaiyun.com/Mr_MT1998/article/details/117449361

版权

这篇博客是HTML新手入门教程，介绍了环境配置，如使用VScode，以及HTML的基本知识，包括文档简介、常用标签（如标题、段落、换行、图片、超链接）、块级元素与行内元素的区别、实体元素和路径描述。通过实例演示了HTML标签的使用，帮助读者快速掌握HTML基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

缘于小编在校参加学校的集中实训，就将学习过程中知识点进行一遍梳理，希望对大家有所帮助。

(一)环境配置

我先介绍一下我目前正在用的软件，visual studio code （简称VScode），这个软件支持扩展功能，以及能满足多种程序语言的日常工作和学习。

下载地址：

https://code.visualstudio.com

(二)创建

在VScode内打开一个文件夹（项目文件夹），新建一个后缀名为.html的文件,在HTML文件内先输入英文叹号 ! ，然后ENTER（回车）得到如下代码：

<!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>
    
</body>
</html>

文档简介

<!DOCTYPE html> 
<!-- 版本声明：表示网页遵循的语法 -->

<!-- 
    html标签表示网页，所有需要显示在网页中的内容都需要写在htnl标签内
    标签属性（名值对）：定义标签的样式以及功能，不推荐
 -->
<html lang="en">
<!-- lang 表示网页的语言 en表示属性值 -- 英文 -->

<head>
<!-- 
    head 标签为网页的头部，包含网页的元数据（标题以及字符集），不显示在浏览器中
    title 定义网页的标题即网页名。
 -->
 	 <!-- meta 定义网页元数据-->
    <meta charset="UTF-8">
    <!-- charset 为网页使用的字符集，常用utf-8 gbk -->
  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">1
    <!-- X-UA-Compatible：IE=edge
        表示默认优先使用IE8以上的浏览器引擎进行解析-->
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- name 表示网页的一些相关信息，content表示对应的值，
    例如属性 keywords：网页搜索的关键字  -->
    
    <title>Document</title>
    <!-- titile 自定义网页的标签名 -->
</head>
<body>
    <!-- 页面代码区域，放置各类视图标签 -->
</body>
</html>

body标签是我们着重关注的区域，之后的学习我们都是围绕这个区域展开的。

(三)基本知识叙述

1.常用标签

标签主要分为两个大类，分别为块级标签与行内标签，其主要区别在我们在下面再介绍

a.块级标签

标题标签 h1,h2,…,h6

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

效果如下:

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

水平线 （↑这条灰色的线）

<hr/>

段落标签

<p>段落内容1</p>
<p>段落内容2</p>

效果如下：

段落内容1

段落内容2

换行标签 br
在一段较长的文本中，通过插入br标签可实现换行的效果

<p>HTML(Hyper Text Markup Language)中文译为"超文本标签语言"，<br/>主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。</p>

效果如下

HTML(Hyper Text Markup Language)中文译为"超文本标签语言"，
主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

分区标签 div
这是我们网页布局时最常用到的标签，没有具体的定义，一般的网页布局都是通过它之间的嵌套来实现的。

<div>这里是div</div>

有序列表ol

<ol>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ol>

效果如下

无序列表ul

<ul>
    <li>li1</li>
    <li>li2

最低0.47元/天解锁文章