HTML基础知识详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_58361149/article/details/121436878

本文详细介绍了HTML的基础知识，包括网页概念、HTML定义、常用浏览器及内核、Web标准、基本结构标签、开发工具VSCode的使用、DOCTYPE、常用标签如标题、段落、换行、图片和链接等，以及表格、表单和标签分类等内容。

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

一、网页相关概念

1.1什么是网页?

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。

1.2什么是HTML？

1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。 2.HTML 不是一种编程语言，而是一种标记语言 (markup language)。

1.3常用浏览器

IE
火狐
谷歌
苹果
欧朋

1.4浏览器内核（渲染引擎）

浏览器内核负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360、UC、QQ、搜狗等。

1.4web标准

1.4.1 web标准概念

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。为什么需要Web标准？

浏览器不同，它们显示页面或者排版就有些许差异

遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还可以使网站更易于维护,提高页面浏览速度。

1.4.2 web标准的构成

web标准主要有三部分组成：结构(html)+表现(css)+行为(js)

1.5 基本结构标签

 每个网页都会有一个基本的结构标签（也称为骨架标签），我们在vscode中通过html:5+tab键自动生成

1.6开发工具

VSCode的使用：

 1. 双击打开软件。
 2. 新建文件（Ctrl + N ）。
 3. 保存（Ctrl + S ）, 注意移动要保存为 .html 文件
 4. Ctrl + 加号键 ，Ctrl - 减号键  可以放大缩小视图 
 5. 生成页面骨架结构。 输入html:5 按下 Tab 键。
 6. 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。

1.7 DOCTYPE

  1、<!DOCTYPE html>  文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
  2、lang 语言种类   用来定义当前文档显示的语言。
      en定义语言为英语
      zh-CN定义语言为中文
  简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页
  其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
  这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的
  3、字符集
   字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
   在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
   <meta charset=" UTF-8" />
   charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符.
   注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 "UTF-8"，不要写成  "utf8" 或 "UTF8"。

1.8 常用的标签：

1.8.1 标题标签

标题标签是h1-h6 为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即

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

1.8.2 段落标签

  <p>标签用于定义段落，它可以将整个网页分为若干个段落。 
  具体实现：<p> 我是一个段落标签 </p>

1.8.3 换行标签

如果希望某段文本强制换行显示，就需要使用换行标签

 <br />

1.8.4 特殊标签

1.8.5 容器标签

div和span标签

 <div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
  具体实现：
       <div> 这是头部 </div>    
       <span> 今日价格 </span>
  特点：
      1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
      2. <span> 标签用来布局，一行上可以多个 <span>。小盒子

1.8.6 图片标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

 <img src="图像URL" />

图像标签的其他属性：

图像标签注意点： 1.图像标签可以拥有多个属性，必须写在标签名的后面。 2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。 3.属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

1.8.7 路径分类

路径分为相对路径和绝对路径： (1) 路径之相对路径 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。 (2) 路径之绝对路径 绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”

1.8.8 链接标签

 <a href="跳转地址">链接</a>

属性： 1.href：用于指定链接目标的url地址 2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开 3.#：空链接

1.8.9 HTML注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中的注释以“”结束。具体实现：  快捷键: ctrl + /

1.9.9特殊字符：

 在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。 
     重点记住：空格 、大于号、 小于号 这三个， 其余的使用很少，如果需要回头查阅即可。

一、表格

1.1表格结构

  <table>
         <thead>
             <tr>
                 <th>编号</th>
                 <th>姓名</th>
                 <th>班级</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>单元格内的文字</td>
                 ...
             </tr>
             ...
         </tbody>      
     </table>

     1.<table> </table> 是用于定义表格的标签。
     2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
     3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
     4.字母 td 指表格数据（table data），即数据单元格的内容。

1.2 表格样式

表格属性：表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置

1.3 合并单元格

 特殊情况下,可以把多个单元格合并为一个单元格,  这里同学们会最简单的合并单元格即可.
 1.合并单元格方式
 2.目标单元格
 3.合并单元格的步骤
 如下图：

合并单元格方式：

跨行合并：rowspan="合并单元格的个数"

 最上侧单元格为目标单元格, 写合并代码

跨列合并：colspan="合并单元格的个数"

 最左侧单元格为目标单元格, 写合并代码

合并单元格三步曲：

先确定是跨行还是跨列合并。

找到目标单元格. 写上合并方式 = 合并的单元格数量。

比如：<td colspan="2"></td>。删除多余的单元格。

1.4 表格相关单词

表格的相关标签

 table   thead  body  tr  th  td

表格的相关属性

 cellspacing    cellpadding     width  height  border

合并单元格

   rowspan   collspan

1.5 列表

 表格是用来显示数据的，那么列表就是用来布局的。 
 列表可以分为三大类：无序列表、有序列表和自定义列表。

1.5.1 无序列表

作用：

给一堆数据添加列表语义，没有顺序之分

格式：

 <ul>
     <li>需要显示的条目内容</li>
 </ul>

li是list item的缩写 list：列表 item：条目结合起来就是列表条目的意思。

ul和li标签是一个整体，组合，一起出现。ul标签中只会看到li标签。

应用场景

新闻列表
商品列表
导航条

1.5.2 有序列表

说明

 ol标签——代表HTML有序列表，是ordered lists的缩写
 ol标签是成对出现的，以<ol>开始，</ol>结束，每一列使用<li></li>标签定义内容。

演示代码

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>有序列表</title>
 </head>
 <body>
       <ol>
           <li>有序列表</li>
           <li>有序列表</li>
           <li>有序列表</li>
           <li>有序列表</li>
           <li>有序列表</li>
       </ol>
 </body>
 </html>

------效果

网页效果

type属性

代码

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>有序列表</title>
 </head>
 <body>
       <ol type="A">
           <li>有序列表</li>
           <li>有序列表</li>
           <li>有序列表</li>
           <li>有序列表</li>
           <li>有序列表</li>
       </ol>
 </body>
 </html>

效果

type="A"

start属性

代码

<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>有序列表</title>
 </head>
 <body>
       <ol start="3">
           <li>有序列表</li>
           <li>有序列表</li>
           <li>有序列表</li>
           <li>有序列表</li>
           <li>有序列表</li>
       </ol>
 </body>
 </html>

效果

star属性

默认样式

<ol>

ol {
     display: block;
     list-style-type: decimal;
     margin-block-start: 1em;
     margin-block-end: 1em;
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     padding-inline-start: 40px;
 }

<li

li {
     display: list-item;
     text-align: -webkit-match-parent;
 }

清除默认样式

ol,li {
             list-style: none;
             padding: 0px;
             margin: 0px;
             margin-block-start: 0px;
             margin-block-end: 0px;
             padding-inline-start: 0px;
         }

清除完效果

1.5.3 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始

二、表单

2.1什么是表单

网页常用表单：

 使用表单目的是为了收集用户信息。  在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

2.2表单的组成：

2.2.1表单域

 在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
 
 在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。

 <form> 会把它范围内的表单元素信息提交给服务器.
     实现代码：
 <form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>

2.2.2表单控件

(1)input表单元素

在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

 <input type="属性值"  />

type 属性的属性值

属性值	描述
button	生成按钮
radio	生成单选按钮
submit	生成提交按钮
text	生成文本框
file	生成“浏览”按钮
hidden	生成隐藏的输入字段
passwrord	生成密码输入框
checkbox	生成复选框
image	生成图片形式的提交按钮
reset	生成重置按钮

2.2.3label 标签

<label> 标签为 input 元素定义标注（标签）。

<label> 标签里边是可以添加文字和图片的。

 <label for=""><img src="./images/男图标.png" alt="">文字</label>

<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

语法：

<label for="sex">男</label>
 <input type="radio" name="sex"  id="sex" />
  核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

2.2.4 select 下拉菜单

使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

语法：

 <select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
  </select>

2.2.5 textarea 表单元素（文本域）

使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。该控件常见于留言板，评论。其中的cols=“每行中的字符数” ，rows=“显示的行数”。

语法:

<textarea rows="3" cols="20">   文本内容 </textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框。

不允许拖动（CSS样式）：resize：none；

三、标签分类

3.2元素分类

标签可以分为块元素、行内元素、行内块元素三种。

块元素特点：

 块状元素代表性的就是div，其他如h1-h6、p、ol-li、ul-li、form等等，都可以用div来实现。
 
 　　块状元素特征：(1)能够识别宽高
 
 　　　　　　　　　(2)margin和padding的上下左右均对其有效
 
 　　　　　　　　　(3)可以自动换行
 
 　　　　　　　　　(4)多个块状元素标签写在一起，默认排列方式为从上至下

行内元素特点：

 行内元素最常使用的就是span、a、i、em等标签
 行内元素特征：(1)设置宽高无效
 
 　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
 
 　　　　　　　(3)不会自动进行换行

 内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。img标签和input标签。
 
 　　行内块状元素特征：(1)不自动换行
 
 　　　　　　　　　　　(2)能够识别宽高
 
 　　　　　　　　　　　(3)默认排列方式为从左到右

3.1 元素转换

　(1)display:inline;转换为行内元素

　(2)display:block;转换为块状元素

　(3)display:inline-block;转换为行内块状元素