HTML全面知识

进入HTML世界

什么是HTML？

HTML的全称是HyperText Markup Language，又叫超文本标记语言
。HTML是学习Web前端开发的基础，是网页的骨架(内容和结构)。
HTML特点：

它不是变成语言，而是一种标记语言，
主要作用是：描述网页的结构和内容(比如：标题、段落、表单、图片、链接等)。

网站的由来

网站是由多个网页构成的，所以要想理解网站是什么，首先就要理解网页是什么。

网页是什么？

网页就是我们电脑上或者说服务器上的一个文件，我们在浏览器浏览网页的时候，这个文件会下载到我们本地电脑，然后通过浏览器解析，在浏览器上展示出漂亮的界面，比如有：标题、段落内容、图片、表格等内容。如下图所示：
html
网页文件的后缀格式有很多，比如：.html、.jsp、.asp、.php等。上面图片就是一个.html文件。
简单来说，就是用浏览器打开我们放在服务器上的文本文件，出现这么一个内容效果。
我们使用记事本、Notepad++、Sublime Text随便哪个工具来打开这个html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试demo</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <h3>这是一个副标题</h3>
    <p>这是网页内容</p>
    <ul>
        <li>1.第一点</li>
        <li>2.第二点</li>
        <li>3.第三点</li>
    </ul>
</body>
</html>

网站=HTML+CSS+JavaScript

三者的定位：

HTML：负责网页的骨架和内容结构。
CSS：负责网页的外观和样式。
JavaScript：负责网页的动态交互和逻辑处理。

举例比喻：
如果说把一个网页的编写比作是盖房子的话。

HTML：就像房子的结构图纸，告诉你哪里是门，哪里是窗，哪里是墙，并将这些部位有序地划分出区域。
CSS：就像装修设计，根据房子的区域来规划颜色、大小、布局、风格。
JavaScript：就像房子的水路和电路以及智能家居，能够提供让门窗能自动开关，灯能闪烁，电视空调冰箱声控开关的功能。

所以，我们看到淘宝、京东那些很酷炫好看的网站页面并不是单单只靠HTML就能写出来的，需要结合HTML、CSS和JavaScript才能做出来。所以说明了：网站 = HTML + CSS + JavaScript。

为什么是HTML？

抛出一个问题，为啥是.html文件，既然在服务器上放入文件就能被浏览器翻译成页面格式，为啥这个文件不能是Word或者是其他的文件呢？
原因：
1.HTML是标准的超文本标记语言，它就是专门为浏览器“设计”的。浏览器本身就内置了HTML解释器，也就是说，浏览器一拿到 .html 文件，就能逐行解析，把标签转换成DOM 树，再结合 CSS/JS 渲染成页面。
2.另外一层意思也就是说如果浏览器内置Word/Excel的解析器话，Word/Excel也能成为浏览器的标准语言格式，也可以直接翻译成为网页。但是可以通过三方库(比如：Google Docs、OnlyOffice、WebExcel 组件)来在网页中解析。

HTML结构解析

HTML文件的最基本内容如下：

<!DOCTYPE html>     ————>   HTML版本声明
<html lang="en">    ————————————————————————————————┐
<head>              ———————————┐                    |
    <meta charset="UTF-8">     |——> HTML的头部元素    |
    <title>title</title>       |                    |
</head>             ———————————┘                    |———> 完整的HTML页面
<body>      ————┐                                   |
    ......      |——>  可见的页面内容                  |
</body>     ————┘                                   |
</html>             ————————————————————————————————┘

HTML版本和声明

HTML距离至今已经有很多个版本更迭，也可以通过声明来帮助浏览器识别自己的HTML的版本。

HTML版本

HTML的版本号和版本说明：

HTML版本	版本说明
HTML1.0	HTML 的第一个版本，发布于 1991 年。
HTML2.0	HTML 的第二个版本，发布于 1995 年，该版本中增加了表单元素以及文件上传等功能。
HTML3.2	HTML 的第三个版本由 W3C 于 1997 年初发布，该版本增加了创建表格以及表单的功能。
HTML4.01	HTML 4.01 于 1999 年 12 月发布，该版本增加了对样式表（CSS）的支持。HTML 4.01 是一个非常稳定的版本，是当前的官方标准。
HTML5	HTML5 的初稿于 2008 年 1 月发布，是公认的下一代 Web 语言，极大地提升了 Web 在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

HTML声明

在HTML文件的开头可以使用<!DOCTYPE>来声明HTML的版本。正确地声明HTML的版本，浏览器就能这个却显示页面内容。
doctype声明是不区分大小写的，如下所示：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

不同版本的声明方式：
HTML5

<!DOCTYPE html>

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML标签语法格式

标签基本格式

什么是HTML标签？
HTML标签是HTML的基本组成单位，我们也将HTML标签称为HTML元素，标签就像关键字一样，由一对尖括号< >包裹，用来告诉浏览器：这部分内容是什么、该怎么解释。
比如：

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

<p>表示段落开始，</p>表示段落结束，中间部分是内容。

HTML标签的基本结构：
大多数的标签都有开始标签和结束标签，来代表一个标签的开始和结束，如下所示：

<标签名 属性名="属性值"> 内容 </标签名>

标签嵌套使用

大多数的HTML元素都是可以嵌套使用的，也就是说一个HTML标签中可以包含其他的HTML标签，比如：

<div>
    <h1>HTML语法<font size="4" color="#666">简介</font></h1>
    <p> 
        <a>这是一个超链接</a>
        <ul>
            <li>1.第一点</li>
            <li>2.第二点</li>
            <li>3.第三点</li>
        </ul>
    </p>
</div>

HTML属性

属性的基本认识

什么是属性？
属性是HTML元素提供的附加信息，通常出现在HTML标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。

属性的特点
属性总是以name="value"的形式出现，属性值必须使用双引号" "或者单引号' '包围。
属性一般分为通用属性和专用属性两个类别。

通用属性：适用于大部分或者所有HTML标签
专用属性：只适用于一个或者几个特定的 HTML标签

通用属性

又称全局属性，是所有HTML元素都可以使用的属性。
id：为元素指定唯一的标识符。

<div id="header">header内容</div>
<div id="footer">footer内容</div>

class：为元素指定一个或多个类名，用于CSS或JavaScript选择。

<p class="highlight">这是高亮段落1。</p>
<p class="highlight">这是高亮段落2。</p>

style：用于直接在元素上应用CSS样式。

<p style="color: red; font-size: 18px;">颜色为红色，字号为18px的段落。</p>

title：为元素提供额外的提示信息，通常在鼠标悬停时显示。

<p title="这是提示信息">把鼠标移到我这里试试</p>

专用属性

某些属性仅适用于特定的HTML元素。
href：指定链接的目标 URL。用于<a>和<link>元素。

<a href="https://www.baidu.com">点击去百度</a>

src：指定外部资源的 URL。用于<img>、<script>、<iframe>等元素。

<img src="logo.png" alt="网站Logo">

自定义属性

允许开发者自定义属性来存储额外的数据。HTML5引入。
data-*：用于存储自定义数据，通常通过JavaScript访问。

<!-- 在按钮上存储一些自定义信息 -->
<button id="buyButton" data-product-id="1001" data-price="29.9">购买</button>

HTML元素清单

注释

可以在之间添加需要注释的内容，注释内容不会被浏览器解释出现到页面上。

<!-- 单行注释 -->
<!--
    多行注释
    注释内容
-->

标题

HTML中提供了从<h1>到<h6>6个级别的标题标签，<h1>的级别最高，<h6>的级别最低。

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

段落

可以使用段落标签<p>将文档中的内容分割为若干个段落。

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

文本格式化

文本格式化标签

标签	描述
`<b></b>`	给文本内容定义粗体文本
`<em></em>`	给文本内容定义着重文字
`<i></i>`	给文本内容定义斜体字
`<small></small>`	给文本内容定义小号字
`<strong></strong>`	给文本内容定义加重语气
`sub></sub>`	给文本内容定义下标字
`<sup></sup>`	给文本内容定义上标字
`<ins></ins>`	给文本内容定义插入字
`<del></del>`	给文本内容定义删除字

计算机输出类标签

标签	描述
`<code></code>`	定义计算机代码
`<kdb></kdb>`	定义计算机键盘码
`<samp></samp>`	定义计算机代码样本
`<var></var>`	定义变量
`<pre></pre>`	定义预格式文本

引文和引用及标签定义

标签	描述
`<abbr></abbr>`	定义缩写
`<address></address>`	定义地址
`<bdo></bdo>`	定义文字方向
`<blockquote></blockquote>`	定义长的引用语
`<q></q>`	定义短的引用语
`<cite></cite>`	定义一个定义项目
`<dfn></dfn>`

超链接

我们使用<a>标签来表示超链接。是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是当前网页中的其它位置，还可以是图片、文件、应用程序等。

超链接的基本使用

<a href="https://www.baidu.com" target="_blank">打开百度网页</a>

超链接的默认样式
超链接的默认样式中点击和未被点击的颜色会发生变化，如下图所示：
html

超链接属性

href属性
指定链接的目标，也就是要跳转到什么位置。

指向一个网页：href="https://www.baidu.com"
指向图片：href=/data/static/logo.png
指向压缩文件：href=..https://images.ihavecats.cn/ihavecatss/xxx.zip
指向应用程序：href=D:/app/application.exe
指向当前页面id：href=#footer

target属性
可选属性，指明新页面的打开方式。

_self：默认属性，在现有窗口中打开新页面，原窗口会被覆盖。
_blank：在新窗口中打开新页面，原窗口会保留。
_parent：在当前框架的上一层打开新页面。
_top：在顶层框架中打开新页面。

title属性
定义链接的额外信息，当鼠标悬停在链接上时显示的工具提示。

标注信息：title="访问该网站"

download属性
提示浏览器下载链接目标而不是导航到该目标。

指定这是个下载连接：download
指定下载文件名：download=file.pdf

图片

使用<img>标签插入图片，<img>是自闭合标签，只包含属性，没有文本内容和结束标签。

图片的基本使用

<img src="https://images.example.com/image/logo.png" alt="网站Logo">

src属性
必须选属性，是单词source的简称，指定图片的地址或者路径。

src="http://images.com/logo.jpg"
src="https://images.ihavecats.cn/ihavecatss/images/logo.png"

图片标签属性

alt属性
可选属性，用来定义图片的文字描述，当出现图片路径错误或者网络问题等某些原因时，就会显示alt属性的信息。

设置图片大小
使用width和height属性来指定图片的宽度和高度。默认情况下，这些属性的值都是以像素为单位的。

<!-- 使用长宽属性设置大小 -->
<img src="./logo.png" alt="网站Logo" width="150" height="100">
<!-- 使用style属性来设置大小 -->
<img src="./logo.png" alt="网站Logo" style="width: 150px; height: 100px;">

表格

使用 <table>标签来定义表格，表格中包括行、列、单元格、表头等元素。

温馨提示：HTML中的表格并没有Excel中表格很多功能，只是用来展示内容，比如：排序、求和、方差等数学计算。

表格的基本使用

<table border="1">
    <caption>常用网址清单</caption>
    <tr>
      <th>名称</th>
      <th>网址</th>
      <th>说明</th>
    </tr>
    <tr>
      <td>百度</td>
      <td>https://www.baidu.com/</td>
      <td>一个搜索网站</td>
    </tr>
    <tr>
      <td>京东</td>
      <td>https://www.jd.com/</td>
      <td>一个购物商城网站</td>
    </tr>
    <tr>
      <td>当当</td>
      <td>http://www.dangdang.com/</td>
      <td>一个图书资源网站</td>
    </tr>
</table>

表格标签解析：

<table>：表示表格，表格的所有内容需要放在<table>和</table>之间。
<caption>：设置表格标题。
<tr>：是table row的简称，表示表格的行。表格中有多少个<tr>标签就表示有多少行数据。
<th>：是table heading的简称，表示表格的表头。定义每一列的表的名称简明，
<td>：是table datacell的简称，表示表格的单元格，这才是真正存放表格数据的标签。

表格的其他设置

设置单层边框

<table border="1" style="border-collapse: collapse;">

合并单元格

rowspan：表示跨行合并，允许我们使用rowspan特性来表明单元格所要跨越的行数。
colspan：表示跨列合并，允许我们使用colspan特性来表明单元格所要跨越的列数。

<tr>
  <td rowspan="2">百度</td>
  <td>https://www.baidu.com/</td>
  <td>一个搜索网站</td>
</tr>
<tr>
  <td colspan="2">http://www.dangdang.com/</td>
</tr>

列表

列表可以让内容看起来更加有条理，列表分为有序列表、无序列表和定义列表。

有序列表：使用<ol>+<li>标签
无序列表：使用<ul>+<li>标签
定义列表：使用<dl>+<dt>+<dd>标签

有序列表

<p>有序列表示例</p>
<ol>
  <li>第一步：打开电脑</li>
  <li>第二步：打开浏览器</li>
  <li>第三步：访问网站</li>
</ol>
<!-- 展示效果如下
1. 第一步：打开电脑
2. 第二步：打开浏览器
3. 第三步：访问网站
-->

无序列表

<p>无序列表示例</p>
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>
<!-- 展示效果如下
•苹果
•香蕉
•橘子
-->

定义列表

<p>定义列表示例</p>
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于定义网页结构。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于美化网页。</dd>
  <dt>JavaScript</dt>
  <dd>一种脚本语言，用于实现网页交互效果。</dd>
</dl>
<!-- 展示效果如下
HTML
  超文本标记语言，用于定义网页结构。
CSS
  层叠样式表，用于美化网页。
JavaScript
  一种脚本语言，用于实现网页交互效果。
-->

表单

表单其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单。往往通过表单提交数据与后端程序进行交互。
创建一个表单需要用到<form>标签，里面包含表单中的其他标签内容。

<form action="请求URL" method="请求方法">
    表单中的其它标签
</form>

最常用属性说明：

action：用来指明将表单提交到哪个页面的URL。
method：使用哪个方式提交数据，包括GET和POST两种方式。

表单属性

表单属性列表：

属性	可选值	描述
action	URL	设置要将表单提交到何处（默认为当前页面）
method	get、post	设置使用哪种 HTTP 方法来提交表单数据（默认为 get）
name	text	设置表单的名称
target	`_blank`、`_self`、`_parent`、`_top`	设置在何处打开 action 属性设定的链接（默认为 _self）
accept	MIME_type	HTML5 中不再支持，设置服务器要接收的文件类型
accept-charset	character_set	设置表单数据的字符集（默认为 HTML 文档字符集）
autocomplete	on、off	设置是否启用表单的自动完成功能（默认开启）
enctype	application/x-www-form-urlencoded、 multipart/form-data、 text/plain	设置在提交表单数据之前如何对数据进行编码（适用于 method=“post” 的情况）
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证

表单控件

表单中包含的控件列表：

控件/标签	描述
`<label>`	为表单中的各个控件定义标题
`<input>`	创建文本输入框、密码框、单选按钮、复选框等。type属性定义了输入框的类型
`<textarea>`	创建文本域（一个可以输入多行文本的控件）
`<select>`	创建下拉列表
`<option>`	创建下拉列表中的选项
`<button>`	创建一个可以点击的按钮
`<fieldset>`	创建一组相关的表单元素，并使用边框包裹起来
`<legend>`	定义 `<fieldset>`元素的标题
`<optgroup>`	定义选项组
`<datalist>`	指定一个预先定义的输入控件选项列表
`<keygen>`	定义表单的密钥对生成器字段
`<output>`	定义一个计算结果

下面用一个示例来演示表单控件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Form Example</title>
</head>
<body>
    <form action="/user/api" method="POST">
    <h2>表单示例页面</h2>
        <!-- 文本输入框 -->
        <label>文本输入框 (text):</label>
        <input type="text" name="username" placeholder="请输入用户名"><br>
        <!-- 密码框 -->
        <label>密码输入框 (password):</label>
        <input type="password" name="password" placeholder="请输入密码"><br><br>
        <!-- 文本区域 -->
        <label>多行文本 (textarea):</label><br>
        <textarea name="message" rows="4" cols="50" placeholder="请输入留言内容"></textarea><br><br>
        <!-- 单选框 -->
        <label>性别选择 (radio):</label>
        <input type="radio" name="gender" value="male"> 男
        <input type="radio" name="gender" value="female"> 女<br>
        <!-- 复选框 -->
        <label>兴趣爱好 (checkbox):</label>
        <input type="checkbox" name="hobby" value="reading"> 阅读
        <input type="checkbox" name="hobby" value="music"> 音乐
        <input type="checkbox" name="hobby" value="sports"> 运动<br>
        <!-- 下拉选择 -->
        <label>下拉菜单 (select):</label><br>
        <select name="country">
            <option value="">请选择国家</option>
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="japan">日本</option>
        </select><br><br>
        <!-- 文件上传 -->
        <label>文件上传 (file):</label><br>
        <input type="file" name="fileupload"><br><br>
        <!-- 隐藏域 -->
        <input type="hidden" name="userid" value="12345">
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
        <!-- 重置按钮 -->
        <input type="reset" value="重置">
    </form>
</body>
</html>

效果如下图所示：
html

CSS样式表嵌入

如何使用CSS样式：

内联样式——在HTML元素中使用"style"属性。
内部样式表——在HTML文档头部<head>区域使用<style>元素来设置CSS样式。
外部引用——导入使用外部CSS文件。

内联样式

内联样式的方式就是通过将CSS样式直接写在内容行内的标签元素中定义"style"属性值，是最直接的一种方式，也是修改维护最不方便的一种。
【示例】如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
    <h1 style="color: green; text-align: center;">行内元素，h1 标题元素</h1>
    <h2 style="color: blue; text-align: center;">行内元素，h2 标题元素</h2>
    <p style="background-color: #999900; font-size: 18px; line-height: 1.5;">
    行内元素，这是一个段落元素1
    </p>
    <ul style="color: red; font-size: 18px;">
        <li>第一步：......</li>
        <li>第二步：......</li>
        <li>第三步：......</li>
    </ul>
</body>
</html>

页面效果，如下图所示：
html

内部样式表

内部样式表就是通过将CSS样式写在网页源文件的头部，就是<head>和</head>标签之内。使用<style>标签包含样式表内容，该方式只能在此页面使用。
【示例】如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部样式表</title>
    <style>
        .title {
            text-align: center;
            color: red;
            font-size: 22px;
            font-weight: bold;
        }
        .author {
            text-align: center;
            color: blue;
            font-size: 14px;
        }
        .content {
            text-align: center;
            color: yellow;
            font-size: 18px;
            background-color: black; /* 黑色背景，黄色文字更清晰 */
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <!-- 标题 -->
    <p class="title">静夜思</p>
    <p class="author">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;--唐·李白</p>
    <!-- 古诗内容 -->
    <p class="content">床前明月光，</p>
    <p class="content">疑是地上霜。</p>
    <p class="content">举头望明月，</p>
    <p class="content">低头思故乡。</p>
</body>
</html>

页面效果，如下图所示：
html

外部引用样式表

通过HTML的<link>标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。实现结构层和表示层的彻底分离，增强网页结构的扩展性和CSS样式的可维护性。
使用方法：

<link rel="stylesheet" href="css文件位置">

【示例】如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部引用CSS样式表</title>
    <!-- 外部引用 CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 标题 -->
    <p class="title">别董大</p>
    <p class="author">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;--唐·高适</p>
    <!-- 古诗内容 -->
    <p class="content">千里黄云白日曛，</p>
    <p class="content">北风吹雁雪纷纷。</p>
    <p class="content">莫愁前路无知己，</p>
    <p class="content">天下谁人不识君。</p>
</body>
</html>

style.css文件内容如下：

.title {
    text-align: center;
    color: red;
    font-size: 22px;
    font-weight: bold;
}
.author {
    text-align: center;
    color: blue;
    font-size: 14px;
}
.content {
    text-align: center;
    color: yellow;
    font-size: 18px;
    background-color: black;
    margin: 5px 0;
}

页面效果，如下图所示：
html

块级元素和内联元素

块级元素

常见的块级元素有：<div>、<p>、<h1>-<h6>、<ul>、<ol>、 <li>、<section>、 <article>、<header>、 <footer>。
特点：

独占一行：块级元素会在页面中单独占据一行，上面和下面都有换行效果。
可以设置宽高：可以通过CSS设置 width、height、margin、padding。
可以包含其他元素：块级元素内部可以包含块级元素和内联元素。

内联元素

常见的内联元素有：<span>、<a>、<strong>、<em>、<img>、<b>、<i>。
特点：

不独占一行：内联元素不会换行，通常和文本在同一行显示。
宽高受限：不能直接设置 width 和 height，可以上下微调padding和margin ，但不会改变元素占据的行高太多。
通常用于小范围内容：内联元素多用于文字、链接、图标等小范围样式。

对于行内元素的使用，需要注意如下几点：

设置宽度width无效；
设置高度height无效，但可以通过line-height来设置行高；
可以设置margin外边距，但只对左右外边距有效，上下无效；
设置padding内边距时，只有左右padding有效，上下则无效，需要注意的是元素范围是增大了，但是对元素周围的内容是没影响的；
可以通过display属性将元素在行内元素和块级元素之间进行切换。

重量级嘉宾(div和span)

在HTML中我们最经常使用的块级元素和内联元素就是<div>和<span>了。

<div>标签
<div>标签是非常重要的块级元素标签，在页面布局方面发挥非常重要的作用。
【示例】如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DIV效果展示</title>
    <style>
        #box {
            width: 500px;
            height: 150px;
            border: 2px solid #3498db;
            background-color: #e0f7ff;
            padding: 15px;
            margin: 15px 0;
        }
        .normal {
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <h2>没有DIV包裹的内容</h2>
    <p class="normal">这是普通的段落，没有使用DIV容器包装。</p>
    <p class="normal">可以看到它没有边框，也没有背景。</p>
    <div id="box">
        <h2>使用DIV包裹的内容</h2>
        <p>这是一个被DIV包裹的段落。</p>
        <p>DIV提供了边框和淡淡的背景，让内容更突出。</p>
    </div>
</body>
</html>

页面效果，如下所示：
html
<span>标签
<span>标签是一个内联元素，可以对内容进行修饰，此标签不会为文档内容提供任何视觉效果，但可以与CSS结合使用来美化网页。
【示例】如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网站开发技术栈</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.5;
            padding: 5px;
            font-size: 14px;
        }
        h2 {
            font-size:18px;
            color: #d6336c;
            margin: 4px 0;
        }
        h2 span {
          font-size:14px;
          color:#666;
        }
        h3 {
            font-size:14px;
            color: #0d6efd;
            margin: 4px 0;
        }
        p {
            margin: 4px 0;
            font-size: 13px;
        }
        p span {
            background-color: #ffe066;
            color: #000;
            padding: 2px 3px;
            border-radius: 4px;
            margin-right: 4px;
        }
    </style>
</head>
<body>
    <h2>网站开发技术栈<span>简介</span></h2>
    <p>网站开发所需要的技术栈有很多，比如：前端、后端、服务器等。</p>
    <h3>一、前端技术栈</h3>
    <p>编程语言：<span>HTML</span>、<span>CSS</span>、<span>JavaScript</span></p>
    <p>前端技术知识：<span>DOM树</span>、<span>jQuery</span>、<span>Ajax</span></p>
    <p>前端框架掌握：<span>Vue1</span>、<span>Vue2</span>、<span>Vue3</span>、<span>React</span>等</p>
    <p>运行环境：<span>Node.js</span></p>
    <h3>二、后端技术栈</h3>
    <p>编程语言：<span>Java</span>、<span>PHP</span>、<span>Python</span>、<span>Go</span>等</p>
    <p>后端框架掌握：<span>Spring</span>、<span>Laravel</span>、<span>FastAPI</span>、<span>Django</span>、<span>Beego</span>等</p>
    <h3>三、运维技术栈</h3>
    <p>系统知识：<span>Linux系统</span></p>
    <p>虚拟化技术：<span>Docker</span>、<span>Kubernetes</span></p>
</body>
</html>

页面效果，如下所示：
html

HTML布局

使用div来布局

div常用CSS样式属性

1.尺寸与边距

width / height：宽度、高度
margin：外边距（控制 div 与 div 之间的距离）比如：margin-top、margin-right、margin-left、margin-bottom
padding：内边距（内容与边框之间的距离）比如：padding-top、padding-right、padding-left、padding-bottom

2.边框与背景

border：边框样式（粗细、颜色、线型）
background-color：背景颜色
background-image：背景图片

3.布局和定位

display：显示类型（block、inline、flex、grid 等）
float：浮动（left、right）
position：定位方式（static、relative、absolute、fixed、sticky）
top / right / bottom / left：配合 position 定位

4.文字和内容

text-align：文字对齐（left, center, right）
font-size：字体大小
color：字体颜色

5.其他常用

overflow：内容超出时处理（hidden, scroll, auto）
z-index：层级顺序（谁在上谁在下）
opacity：透明度

常见简单布局示例

示例思路解析：

确定整体框架
- 首先要有一个总的容器（这里是#all），统一控制页面内容的宽度（700px），并让页面不会铺满整个浏览器。
- 容器相当于一个“大盒子”，所有模块都放在里面。
划分页面区域
- 一般网页都会有这几个部分：
  - header（头部/导航栏）
  - menu（侧边菜单）
  - content（主要内容区，可能还细分主内容、子内容）
  - footer（页脚）
- 所以用 div 分别定义这些区域。
给每个区域设置大小和颜色
- 每个 div 先给宽度（width）、高度（height）。
- 为了直观演示，加上不同背景色（方便看清楚布局）。
- 用 border 看边界，调试时很有用。
实现左右结构（菜单 + 内容）
- #menu：宽度 100px，高度较高，设置 float: left;，就会贴到左边。
- #content-main和#content-sub：宽度 580px，float: right;，就会紧贴在右边，并与菜单并列。
- 这里是关键点：通过 float 让左右栏并排显示。
保证上下布局自然排列
- header → menu/content → footer，本质上就是 div 按顺序写出来。
- 再加 margin-top 等间距，让不同区域之间有空隙，不至于紧贴。
让文字居中
- 用 p { text-align: center; } 控制段落文字居中。
- 再设置 font-size: 18px;，让文字大一点，看起来明显。

最后我们整体的布局结构如下：

+------------------------------------------------+
|                  Header 导航栏                  |
+-----------------+------------------------------+
|                 |       Content Main 主内容     |
|     Menu 菜单    +------------------------------+
|                 |       Content Sub 子内容      |
+------------------------------------------------+
|                  Footer 页脚                    |
+------------------------------------------------+

【示例】如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>div布局演示</title>
    <style>
        #all {
            width: 700px;
            height: 500px;
            margin-left: 80px;
        }
        #header {
            width: 700px;
            height: 55px;
            border: 1px solid #000000;
            background-color: #00FFFF;
        }
        #menu {
            width: 100px;
            height: 375px;
            border: 1px solid #000000;
            background-color: #FFA500;
            float: left;
            margin-top: 5px;
        }
        #content-main {
            width: 580px;
            height: 185px;
            border: 1px solid #000000;
            background-color: #00FF00;
            float: right;
            margin-top: 5px;
            margin-right: 5px;
        }
        #content-sub {
            width: 580px;
            height: 185px;
            border: 1px solid #000000;
            background-color: #FFFF00;
            float: right;
            margin-top: 5px;
            margin-right: 5px;
        }
        #footer {
            width: 700px;
            height: 45px;
            border: 1px solid #000000;
            background-color: #ff0033;
            float: left;
            margin-top: 5px;
        }
        p {
          font-size: 18px;
          text-align: center;
        }
    </style>
</head>
<body>
    <div id="all">
        <div id="header">
            <p>我是一个导航栏！！！</p>
        </div>
        <div id="menu">
            <p>我是一个菜单栏！！！</p>
        </div>
        <div id="content-main">
            <p>我是主要内容板块！！！</p>
        </div>
        <div id="content-sub">
            <p>我是子内容板块！！！</p>
        </div>
        <div id="footer">
            <p>我是一个页脚板块！！！</p>
        </div>
    </div>
</body>
</html>

页面效果，如下所示：
html

使用table来布局

使用<table>标签是创建布局的一种简单的方式。大多数站点可以使用<div>或者<table>元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
【示例】如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>table布局演示</title>
    <style>
        table {
            border-collapse: collapse;
            width: 700px;
            margin-left: 80px;
        }
        td {
            border: 1px solid #000000;
            text-align: center;
            font-size: 18px;
        }
        .header {
            height: 55px;
            background-color: #00FFFF;
        }
        .menu {
            width: 100px;
            background-color: #FFA500;
        }
        .content-main {
            height: 185px;
            background-color: #00FF00;
        }
        .content-sub {
            height: 185px;
            background-color: #FFFF00;
        }
        .footer {
            height: 45px;
            background-color: #ff0033;
        }
    </style>
</head>
<body>
    <table>
        <!-- header -->
        <tr>
            <td colspan="2" class="header">我是一个导航栏！！！</td>
        </tr>
        <!-- menu + content-main -->
        <tr>
            <td rowspan="2" class="menu">我是一个菜单栏！！！</td>
            <td class="content-main">我是主要内容板块！！！</td>
        </tr>
        <!-- menu + content-sub -->
        <tr>
            <td class="content-sub">我是子内容板块！！！</td>
        </tr>
        <!-- footer -->
        <tr>
            <td colspan="2" class="footer">我是一个页脚板块！！！</td>
        </tr>
    </table>
</body>
</html>

页面效果，如下所示：
html

内联框架

内联框架就是<iframe>标签，可以在一个网页中嵌入另一个独立的网页。简单理解：iframe 就像是在你的页面里开了一个“小窗口”，里面显示另一个网页。
iframe特点：

可以在当前页面中加载其他HTML页面（本地文件或者外部网站）。
内嵌的网页和外部网页相互独立，互不影响（有时受同源策略限制，不能随意操作对方内容）。
常用于广告、视频嵌入（比如YouTube视频）、第三方插件等。

iframe优缺点：

✅ 优点
- 可以嵌入独立网页（广告、视频、第三方组件）
- 与主页面相对独立，不会影响主页面样式和脚本
❌ 缺点：
- 影响 SEO（搜索引擎对 iframe 内的内容不友好）
- 会增加页面加载开销
- 跨域时无法直接操作 iframe 内的 DOM（受同源策略限制）
- 响应式布局适配较麻烦

基本语法

<iframe src="URL地址" width="宽度" height="高度"></iframe>

参数说明：

src：要嵌入的网页地址（本地或外部 URL）
width / height：宽度、高度
frameborder：是否显示边框（0 无边框，1 有边框，HTML5 已弃用）
name：给 iframe 命名，方便通过链接跳转
allowfullscreen：是否允许全屏（常见于视频）

使用示例

加载一个网页

<iframe src="https://www.example.com" width="600" height="400"></iframe>

加载本地页面

<iframe src="test.html" width="500" height="300"></iframe>

配合链接实现跳转

<a href="page1.html" target="myframe">打开页面</a>
<iframe name="myframe" width="600" height="400"></iframe>

如果觉得文章对你有用，请随意赞赏

HTML

HTML全面知识

https://www.ihavecats.cn/archives/htmlquan-mian-zhi-shi

作者

一行HelloWorld走天下

发布于

2025-08-18

更新于

2025-09-10

许可协议

CC BY 4.0

HTML全面知识

HTML全面知识

进入HTML世界

什么是HTML？

网站的由来

网页是什么？

网站=HTML+CSS+JavaScript

为什么是HTML？

HTML结构解析

HTML版本和声明

HTML版本

HTML声明

HTML标签语法格式

标签基本格式

标签嵌套使用

HTML属性

属性的基本认识

通用属性

专用属性

自定义属性

HTML元素清单

注释

标题

段落

文本格式化

文本格式化标签

计算机输出类标签

引文和引用及标签定义

超链接

超链接的基本使用

超链接属性

图片

图片的基本使用

图片标签属性

表格

表格的基本使用

表格的其他设置

列表

表单

表单属性

表单控件

CSS样式表嵌入

内联样式

内部样式表

外部引用样式表

块级元素和内联元素

块级元素

内联元素

重量级嘉宾(div和span)

HTML布局

使用div来布局

div常用CSS样式属性

常见简单布局示例

使用table来布局

内联框架

基本语法

使用示例

作者

发布于

更新于

许可协议

评论