HTML零基础入门教程及知识点

韦英淼

已于 2025-02-24 16:29:31 修改

阅读量1.1k

点赞数 19

分类专栏： HTML+CSS+JS 文章标签： html 前端

于 2025-02-18 09:22:42 首次发布

本文链接：https://blog.youkuaiyun.com/wym_0201/article/details/145696345

版权

HTML+CSS+JS 专栏收录该内容

2 篇文章

订阅专栏

1 什么是HTML

HTML（超文本标记语言，HyperText Markup Language）是用于创建网页的标准标记语言。它通过使用标签（tags）来定义网页的结构和内容。浏览器读取HTML文件并渲染成用户可见的网页。

HTML 的核心特点：

1.标签（Tags）：HTML 使用标签来标记内容，标签通常成对出现（如 <p> 和 </p>），用于定义元素的开始和结束。

2.元素（Elements）：标签及其内容共同构成一个元素。例如，<p>这是一个段落。</p> 是一个段落元素。

3.属性（Attributes）：标签可以包含属性，用于提供额外信息。例如，<a href="https://example.com">链接</a> 中的 href 是属性，定义了链接的目标地址。

2 基本结构举例

在vscode中，新建一个html文件后，在文件顶部输入一个！之后，按回车，就会生成html的代码框架。

一个典型的HTML文档结构如下：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>

    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    
</body>
</html>

<!DOCTYPE html> 声明文档类型为HTML5。

<html> 是根元素，包含整个网页内容。

<head> 包含元数据，如标题、字符集、样式表链接等。

<title> 定义浏览器标签页上显示的标题。

<body> 包含网页的可见内容，如文本、图片、链接等。

<h1> 元素定义一个大标题

<p> 元素定义一个段落

3 各部分详解

3.1 标签之标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

<!DOCTYPE html>
<html lang="en">
<html>

<head>
    <meta charset="utf-8">
    <title>一淼的网页</title>
</head>

<body>

    <h1 align="lift">一级标题</h1>
    <h2 align="center">二级标题</h2>
    <h3 align="right">三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>

</body>

</html>

3.2 标签之段落，换行，水平线

HTML 段落是通过标签 <p> 来定义的；

换行是通过标签<br>来定义的，用于在段落内强制换行，不会产生新的段落；

水平线是通过<hr>来定义的。

color="red"：设置分割线颜色为红色。
width="300px"：设置分割线宽度为300像素。
size="10px"：设置分割线粗细为10像素。
align="left" 或 align="right"：设置分割线的对齐方式（左对齐或右对齐）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>一淼的网页</title>
</head>

<body>

    <p>我是一个段落标签</p>
    <p>如果您希望在不产生一个<br>断段落的情况下进行换行</p>

    <hr color="red" width="300px" size="10px" align="left">
    <hr color="red" width="300px" size="10px" >
    <hr color="red" width="300px" size="10px" align="right">
</body>

</html>

3.3 标签之超文本链接

HTML 链接是通过标签 <a> 来定义的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一淼的网页</title>
</head>
<body>
    
    <a href="https://chat.deepseek.com/">你好</a>


</body>
</html>

3.4 标签之图像

HTML 图像是通过标签 <img> 来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一淼的网页</title>
</head>
<body>
    
<img src="1.jpg" alt="充满科技的一幕" width="800px" title="手指">

</body>
</html>

alt 属性：是图片无法加载时的替代文本。
图片路径：如果图片不在同一目录下，可以使用相对路径或绝对路径。例如：

1. 相对路径：src="images/1.jpg"（假设图片在 images 文件夹中）。

2. 绝对路径：src="/images/1.jpg" 或 src="https://example.com/images/1.jpg"。

你还可以为链接添加其他属性，例如：

target="_blank"：在新标签页中打开链接。
title：鼠标悬停时显示提示文本。

3.5 标签之表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一淼的网页
</title>
</head>
<body>
    <table border="1"> 
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
    
    table>tr*4>td*4{单元格大}  
    
    
    
</body>
</html>

table>tr*3>td*3{单元格} ：可以快捷生成以上表格代码。

3.6 标签之表格单元格合并

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一淼的网页</title>
</head>

<body>
    <p>合并6和7:水平合并:colspan</p>
    <p>合并15和20,垂直合并:rowspan</p>
    <p>水平合并：保留左边，删除右边</p>
    <p>垂直合并：保留上边，删除下边</p>

    <table border="1" width="600px" height="400px">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2">单元格6单元格7</td>
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td rowspan="3">单元格131823</td>
            <td>单元格14</td>
            <td rowspan="2">单元格15,20</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">单元格16,17,21,22</td>
            
            
            <td>单元格19</td>
            <!--<td>单元格20</td> -->
        </tr>
        <tr>
            
          
            <td>单元格24</td>
            <td>单元格25</td>
        </tr>
    </table>




</body>

</html>

3.6注释标签

注释是所有语言中一个必不可少的东西，在html中同样使用。

html的注释不会显示在页面上，目的就是为了提高代码的可读性。

<body>
    hello world    <!-- 我是注释 -->
</body>

按住Ctrl+/可以快速生成注释和取消注释。

4.速查知识点（全面）

4.1 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

4.2 基本标签

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

4.3 文本格式化

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

4.4 链接

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

4.5 图片

<img src="URL" alt="替换文本" height="42" width="42">

4.6 样式/区块

<style type="text/css">
    h1 {
        color: red;
    }

    p {
        color: blue;
    }
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

4.7 无序列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

4.8 有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

4.9 定义列表

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

4.10 表格

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

4.11 框架

<iframe src="demo_iframe.htm"></iframe>

4.12 form表单

表单是让用户输入信息的重要途径.分成两个部分:
1.表单域: 包含表单元素的区域. form 标签。
2.表单控件: 输入框, 提交按钮等. input 标签。

<form action="https://www.baidu.com" method="get">
        <!-- form 中的数据-->
        姓名：<input type="text"><br> <!-- 文本框-->
        密码：<input type="password"><br>  <!-- 密码框-->
        性别：<input type="radio" name="sex" value="男">男&nbsp;&nbsp;&nbsp;&nbsp;<!-- 单选框-->
        <input type="radio" name="sex" value="女">女 &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="sex" value="第三性别">第三性别<br>
 
        爱好：<input type="checkbox">听音乐&nbsp;&nbsp; <!-- 复选框-->
        <input type="checkbox">看电视&nbsp;&nbsp;
        <input type="checkbox">打羽毛球 <br>
 
        头像：<input type="file"> <br> <!-- 选择文件标签-->
        日期：<input type="date">   <!-- 日期-->
        颜色：<input type="color">  <!--颜色-->
        提交：<input type="submit">  <!-- 提交按钮-->
    </form>

运行后：

4.13 实体

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©