初识HTML

peach9_6

已于 2022-04-22 10:14:57 修改

阅读量69

点赞数

文章标签： html

于 2022-04-21 19:02:23 首次发布

本文链接：https://blog.csdn.net/peach9_6/article/details/124302984

版权

本文详细介绍了HTML的基础知识，包括HTML的定义、作用、基本结构，以及常用的标签如标题、段落、区隔、图片、换行、链接等。还讲解了标签的嵌套、资源路径（相对路径与绝对路径）、列表、表格和表单的使用。HTML是开发网页的语言，其标签大多数成对出现，并通过属性设置来实现各种功能。

摘要由CSDN通过智能技术生成

HTML的定义:

1. html的定义

HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。标记：就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1> 等，标签大多数都是成对出现的。

所谓超文本，有两层含义:

因为网页中还可以图片、视频、音频等内容(超越文本限制)
它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)

2. html的作用

html是用来开发网页的，它是开发网页的语言。

3. 小结

html是开发网页的语言

html中的标签大多数都是成对出现的, 格式: <标签名></标签名>

html 的基本结构

<!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>

!+tab可以自动生成基本结构的代码

第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。

<html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到<html>结束,也就是html文档的开始和结束标签。

<head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。

<body>...</body>标签是编写网页上显示的内容。

vscode的汉化:

初始常用的 html 标签

1. 常用的 html 标签

<h1>标题标签,文字大小随标题层数越来越小

<h1>h1标题</h1>

<body>
    <h1>哈哈哈哈哈</h1>
    <h2>嘻嘻嘻嘻嘻嘻</h2>
    <h3>嘿嘿嘿</h3>
    <h4>喵喵喵</h4>
    <h5>汪汪汪</h5>
    <!-- 唧唧复唧唧 -->
    
</body>

<div>区隔标记,<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。

<p> 相当于打了个回车,换行。

<div>这是一个div标签</div>

<p>这个一个段落标签</p>

唧唧复唧唧

        <div>这是一个div标签</div>

        <p>

            这是一个p标签

        </p>

<!-- 2、单个出现的标签： -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<br> 标签--可插入一个简单的换行符。

<img>标签--添加图片

<hr>标签-- 在HTML 页面中创建一条水平线

 <body>
        <h1>哈哈哈哈哈</h1>
        <h2>嘻嘻嘻嘻嘻嘻</h2>
        <h3>嘿嘿嘿</h3>
        <h4>喵喵喵</h4>
        <br>
        <h5>汪汪汪</h5>
        唧唧复唧唧
        <div>这是一个div标签</div>
        <p>
            这是一个p标签
        </p>
        <img src="pic.webp" alt="美女">
        <hr>
    </body>

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<herf>标签--指定超链接目标的URL,跳转网页

<a href="http://www.baidu.com">百度</a>

标签的嵌套

<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

<!-- 标签的嵌套 -->
        <div>
        <img src="pic.webp" alt="美女">
        <a href="http://www.baidu.com">百度</a>
        </div>

提示:

1.标签不区分大小写，但是推荐使用小写。

2.根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
2.2 单标签是一个标签组成，没有标签内容，比如: img标签

资源路径

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

<img src="images/logo.png">

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

1. 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

 <!-- 相对路径 --> 
    <img src="pic.webp" alt="美女">

2. 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

<!--  绝对路径 -->
<img src=D:\vscode\Vscode\pic.webp alt="美女">

提示:

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

3. 小结

相对路径和绝对路径是 html 标签使用资源文件的两种方式，一般使用相对路径。

相对路径是从当前操作的 html 文档所在目录算起的路径

绝对路径是从根目录算起

列表标签

1. 列表标签的种类

无序列表标签(ul标签)

有序列表标签(ol标签)

<ul>
    <li>列表</li>
    <li>列表</li> 
    <li>列表</li>         
</ul>

<ol>
    <li>列表</li>
    <li>列表</li> 
    <li>列表</li>  
</ol>

表格标签

1. 表格的结构

表格是由行和列组成，好比一个excel文件

2. 表格标签

<table>标签：表示一个表格
- <tr>标签：表示表格中的一行
  - <td>标签：表示表格中的列
  - <th>标签：表示表格中的表头

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
    </tr>
</table>

表单标签

1. 表单的介绍

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器。

2. 表单相关标签的使用

<form>标签表示表单标签，定义整体的表单区域
<label>标签表示表单元素的文字标注标签，定义文字标注
<input>标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
- type属性
  - type="text" 定义单行文本输入框
  - type="password" 定义密码输入框
  - type="radio" 定义单选框
  - type="checkbox" 定义复选框
  - type="file" 定义上传文件
  - type="submit" 定义提交按钮
  - type="reset" 定义重置按钮
  - type="button" 定义一个普通按钮
<textarea>标签表示表单元素的多行文本输入框标签定义多行文本输入框
<select>标签表示表单元素的下拉列表标签定义下拉列表

<option>标签与<select>标签配合，定义下拉列表中的选项

<!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>表单注册</title>
</head>
<body>
    <form action="https://www.baidu.com/" method="get">
    <!-- p标签-自动换行 -->
    <p>
        <label>姓名:</label><input type="text" name="username">
    </p>
    <p>
        <label>密码</label><input type="password" name="password">
    </p>
    <p>
        <label>性别</label>
        <input type= "radio" name="gender" value="0"> 男
        <input type= "radio" name="gender" value="1"> 女
    </p>
    <p>
        <label>爱好</label>
        <input type="checkbox" name="like" value="sing">跑步
        <input type="checkbox" name="like" value="run">唱歌
        <input type="checkbox" name="like" value="dance">跳舞
    </p>
    <p>
        <label>照片:</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>个人描述</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍贯：</label>
        <select>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>
</body>
</html>