HTML的简单上手-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_76612007/article/details/136485630

本文介绍了HTML的基础知识，包括HTML5的基本格式，常见的标签如标题、段落、图片、换行、输入、div和span，以及表格的使用。还给出了一个简单的用户注册表单案例，展示了HTML如何构建静态页面，强调了后续CSS和JavaScript在实现动态功能中的重要性。

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

HTML

1.1 HTML基础

HTML(超文本标记语言)，由各种标签构成，标签经常成对出现。

HTML的基本格式（在VSCode中，我们可以写html5找到生成基本格式的快捷键）：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面</title>
</head>
<body>
    
</body>
</html>

html标签是根标签，head标签之中写页面的属性，title标签写页面的标题，body标签中写页面的内容。

标签具有层次结构，具有父子关系和兄弟关系，例如head和body是html的子标签，head是title的父标签，而head和body是兄弟标签。

下面是VSCode生成的代码，了解即可：

<!DOCTYPE html>称为DTD (文档类型定义),描述当前的文件是一个HTML5的文件.

<html lang= "en">其中lang属性表示当前页面是一个"英语页面".这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).

<meta charset="UTF-8">描述页面的字符编码方式.没有这一行可能会导致中文乱码.

name= "vi ewport"其中viewport指的是设备的屏幕上能用来显示我们的网页的那一块区域.

content="wi dth=device-width， initial-scale=1.0"在设置可视区和设备宽度等宽,并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).

1.2 HTML 常见标签

1.2.1标题标签：h1-h6，数字越大字体越小

    <h1> 这是一个标题 </h1>
    <h2> 这是一个标题 </h2>
    <h3> 这是一个标题 </h3>
    <h4> 这是一个标题 </h4>
    <h5> 这是一个标题 </h5>
    <h6> 这是一个标题 </h6>

1.2.2 段落标签：p，会换行

## 在html中，回车空格等都会失效，只能使用代码来换行

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

1.2.3 图片标签：img

<img src = "taa.jpg">

需要在存放html程序的文件夹中存放对应图片

1.2.4 换行标签： br

<br/>的换行的间隙要比<p>的小

这是一个换行标签<br>
这是一个换行标签<br>
这是一个换行标签<br>

1.2.5 输入标签：input

input可以具有type（类型，必须有，如button），name，，value等属性。

<body>
    <input type="button" value="这是一个按钮">
</body>

1.2.6 无语义标签：div和span

div含义是分割，span含义是跨度，这两个标签用于网页布局。

区别是div独占一行而span不独占一行。

<body>
    <div>
        <span>aaa</span>
        <span>bbb</span>
        <span>ccc</span>
    </div>

    <div>
        <span>ddd</span>
        <span>eee</span>
        <span>fff</span>
    </div>
</body>

1.2.7 表格标签：table

table 标签: 表示整个表格

tr: 表示表格的一行

td: 表示⼀个单元格

thead: 表格的头部区域

tbody: 表格的主体区域

<body>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
       height="500">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>⼥</td>
        <td>11</td>
    </tr>
</table>

</body>

1.3 案例练习：实现一个用户注册的页面

<h1>用户注册</h1>
<table>
    <tr>
        <td>用户名</td>
        <td><input type="text" placeholder="请输⼊用户名"></td>
    </tr>
    <tr>
        <td>手机号</td>
        <td><input type="text" placeholder="请输⼊手机号"></td>
    </tr>
    <tr>
        <td>密码</td>
        <td><input type="text" placeholder="请输⼊密码"></td>
    </tr>
</table>
<div>
    <input type="button" value="注册">
    <span>已有账号?</span><a href="#"></a><br/>
</div>