Web前端开发HTML

懒羊羊不懒@2026-01-29 10:28

Web标准

Web标准也称网页标准，有一系列的标准组成，大部分由W3C (World Wide Web Consortium,万维网联盟 )负责制定。

三个组成部分：

  • HTML：负责网页的结构(页面元素和内容)。
  • CSS：负责网页的表现(页面元素的外观，位置等页面样式，如：颜色、大小等)。
  • JavaScript：负责网页的行为(交互效果)。

1.HTML

学习HTML之前先了解一下什么是HTML？

HTML(Hyper Text Markup Language):超文本标记语言。

  • 超文本：超越了文本的限制，比普通文本（只能包含文字比如记事本）更加强大。除了文字信息，还可以定义图片、音频、视频等内容。
  • 标记语言：由标签"<标签名>"构成的语言。
    • HTML标签都是预定义好的。例如：使用<h1>展示标题，使用<img>展示图片等。
    • HTML 代码直接在浏览器中运行，HTML标签由浏览器解析。

HTML标记是由尖括号包裹的关键字，如<html>。标记通常是成对出现的，如<html>和</html>。标记对中的对一个标记是开始标记，第二个标记是结束标记。从开始标记到结束标记的所以内容被称为HTML元素(element)。有些标记只有开始标记如：<br>(定义换行的标记) 建议在开始标记中添加斜杠<br/>。

大对数HTML 元素可以拥有属性（attribute），属性可以为HTML元素提供更多的信息。属性是在HTML 元素的开始标记中，用名称/值对的形式定义，属性之间用空格隔开。

属性值应该包裹在引号内，双引号是最常用的，也可以使用单引号。

HTML标记和属性对大小写不敏感，建议使用小写字母。

2.CSS

CSS(Cascading Style Sheet):层叠样式表，用于控制页面的样式（表现）。

3.HTML基本文档结构标记

整个HTML 文档被分为两个部分，分别用<head>、<body>标记标识，他们分别被称为网页头和网页体。<head>标记的内容主要用来设置一些与网页相关的属性，如：网页标题、字符编码、网页描述等；<body>标记的内容是网页的主体，在浏览器窗口中显示的内容必须放在<body>标记内。<head>、<body>标记嵌套在<html>标记中。<html>标记用于表示HTML文档，是网页的标识，也是网页的顶级标记，被称为根标记。

HTML文档的基本结构：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

前面介绍了属性，这里我们这里我们先展示一下<body>标记常用的两个属性 bgcolor和background，分别用于设置页面的背景颜色和背景图像。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="fuchsia">
    
</body>
</html>

演示效果：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body background = "img/1.jpg">
    
</body>
</html>

演示效果

3.1文本格式化标记

文本是网页的重要内容，网页中的文本直接放在<body>标记内。与普通文本相比，网页中有一些特殊性。文本中的对个连续空格，浏览器只能显示其中一个，其余空格将被忽略。网页文本中的空格与一些特殊字符(如："<", ">") 也会被浏览器忽略，这些都要有专用的字符组合标识。

3.3.1标题标记

网页中的内容标题是通过<h1>~<h6> 定义的。其中该标记中常用的**属性：align,**用于设置标题的水平对齐方式、属性值可取 left、center、right,分别用于设置标题文本左对齐、居中对齐、右对齐。

html 复制代码 
<!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>
    <!-- 常用属性 align 可以取值 left canter right -->
     <h1>我是h1，我没有加属性</h1>
     <h2 align = "center">我是h2 我居中显示</h2>
     <h3>我是h3 我没有加属性</h3>
     <h4 align = "left">我是h4 我左对齐</h4>
     <h5>我是h5 我没有加属性</h5>
     <h6 align = "right">我是h6 我右对齐</h6>
</body>
</html>

演示效果

3.3.2区段标记

1、<p>、<br>标记

网络中的文本可以用<p>标记按段落排版，浏览器会自动地在段落的前后添加空行。(<p>是块级元素。以段落形式显示的元为块级元素。块级元素前后需要添加一个额外的空行。<h1>~<h6>也是块级元素。) 如果想单纯的换行可以使用<br>标记。

属性：align对齐属性。和上面介绍<h1>提到的属性相同。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标记and 换行标记</title>
</head>
<body>
    <!-- <p>标记中属性 align 可以取值 left center right-->
    <p align = "left">我是第一段~， 我左对齐</p>
    <p align = "center">我是第二段~， 我居中对齐</p>
    <p align = "right">我是第三段~， 我右对齐</p>
    <p>我是第四段，我没有加属性， <br/>但是我加了<b>br</b>标签 </p>

</body>
</html>

展示效果：

2、<div>、<span>标记

  • 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

  • 标签：<div> <span>

  • 特点：

  • <div>标签：块级元素

    • 一行只显示一个（独占一行）

    • 宽度默认是父元素的宽度，高度默认由内容撑开

    • 可以设置宽高（width、height）

  • <span>标签：行内元素

    • 一行可以显示多个

    • 宽度和高度默认由内容撑开

    • 不可以设置宽高（width、height）

以上两个标签主要与CSS结合使用。后面提到CSS展示。

3.<hr>标记

<hr>标记用于显示水平线。有属性：width、size、align 属性分别定义<hr>标记水平线的宽度、高度和对齐方式。

html 复制代码 
<!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>

    <br>
    <br>
    <hr>
    <br>
    <hr width = "500px" size = "10px" align="center" color="#000">
</body>
</html>

展示效果：

3.3.3文字格式化标记

HTML中定义了一些文字格式化标记，使用这些标记可以在网页中设置文本的各种样式。尽管大部分浏览器扔然支持格式化标记，但是不再建议使用这些标记设置网页样式，有些格式化标记在HTML 的新版本中已经不再被保留。建议使用层叠样式表CSS进行样式设置。文字格式化标记有很多，这里我们简单介绍几个常用的。

|--------------------|-----|-------------------|
| 标签 | 作用 | 属性/说明 |
| <b> / <strong> | 加粗 | <strong> 具有强调语义 |
| <u> / <ins> | 下划线 | <ins> 具有强调语义 |
| <i> / <em> | 倾斜 | <em> 具有强调语义 |
| <s> / <del> | 删除线 | <del> 具有强调语义 |

html 复制代码 
<!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>
    <!--  -->
    <b>加粗</b>
    <br>
    <strong>strong加粗</strong>
    <br>
    <u>下划线</u>
    <br>
    <ins>Ins下划线</ins>
    <br>
    <i>倾斜</i>
    <br>
    <em>em倾斜</em>
    <br>
    <s>删除线</s>
    <br>
    <del>del删除线</del>
</body>
</html>

效果展示：

3.3.4 特殊符号

在HTML页面中，我们在代码中录入空格、<、> 这些符号的时候，是没有对应的效果的，因为浏览器并不能准确的识别，此时，我们就需要通过字符实体来表示空格，<, > 。特殊符号有很多我们只学习几个常见的符号的字符实体如下：

|---------|-------|
| 字符实体 | 属性/说明 |
| &nbsp; | 空格 |
| &lt; | < |
| &gt; | > |

html 复制代码 
<!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>你好，我正在学web &nbsp; &nbsp;你好，我正在学web&lt; 
        &gt;
    </P>
</body>
</html>

3.2 超链接标记

超链接 a 标签：

标签：<a href="....." target=".....">央视网</a>

属性：

  • href: 指定资源访问的url

  • 外部链接（绝对 URL）

  • 内部页面链接（相对 URL 或根路径）

    • <a href="about.html">关于我们</a>

  • 页面内锚点链接

    • #top

    • #bottom

  • target: 指定在何处打开资源链接

    • _self: 默认值，在当前页面打开

    • _blank: 在空白页面打开

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 锚点 -->
    <a name = "top">页面顶部</a>
    <a href="https://www.baidu.com" target="_blank">访问示例网站</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#top">返回顶部</a>
    
</body>
</html>

3.3图像标记

图像是图形界面浏览器中的重要元素，网页的美化主要通过图像实现。在网页中嵌入图像，通过<img> 标记来实现。

<img>的主要属性：scr、alt、width、height、align指定图像的地址，代替文字，宽度、高度和对齐方式。

在引入图片、视频、音频、css等内容时，我们需要指定文件的路径，而在前端开发中，路径的书写形式分为两类：

  • 绝对路径:

    • 绝对磁盘路径: <img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">

    • 绝对网络路径: <img src="``https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png``">

  • 相对路径:

    • ./ : 当前目录 , ./ 可以省略的

    • ../: 上一级目录

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
    <br>

    <img src="img/1.jpg" alt="图片" width="300px" height="200px" align = "right">
</body>
</html>

效果展示：

3.4多媒体播放

|-----------|------|----------------------------------------------------------------------|
| 标签 | 作用 | 属性/说明 |
| <video> | 视频标签 | src：指定视频的url（绝对路径/相对路径） |
| <video> | 视频标签 | controls：是否显示播放控件 |
| <video> | 视频标签 | width：宽度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。 |
| <video> | 视频标签 | height：高度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。 |

html 复制代码 
<!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>
    
    <video src="video/news.mp4" controls width="800px"></video>
</body>
</html>

效果展示：

3.5列表标记

列表是常用的数据排列方式，它相关的内容以一种整齐化一的方式排列显示。HTML支持无序列表、有序列表和定义列表。列表可以嵌套，列表项内部可以使用段落、换行符、图片、连接以及其他列表等。

3.5.1 无序列表

有序列表是以无序含义的符号(如圆点，方框等)为前导符来排列的项目的列表，也可以没有前导符。创建无序列表使用两个标记，即<ul>和<li>标记。

<ul>标记有一个type 属性用来指定列表项前导符，可以值为disc、circle、square，分别表示前导符为实心圆、空心圆点、实心小方框，默认为实心圆点。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul type = "disc">
        <li>橘子</li>
        <li>西瓜</li>
        <li>香蕉</li>
    </ul>
</body>
</html>
3.5.2 有序列表

有序序列是以数字或者字母等可以表示顺序的符号为前导符来排列项目列表的。创建有序列表使用两个标记，<ol>和<li>标记。

<ol>标记有两个属性，即type 和 start 属性。type属性用来指定列表前排序序号，可以取值为1、a、i 等。如果指定默认为数字；start属性用于指定序号的开始值，默认从第一位序号开始。

html 复制代码 
<!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>
    
    <ol type="I" start="2">
        <li>橘色</li>
        <li>红色</li>
        <li>紫色</li>
    </ol>
</body>
</html>

展示效果：

3.6 表格标记

|-----------|----------------------------------------|
| 标签 | 描述 |
| <table> | 定义表格整体 |
| <thead> | 用于定义表格头部(可选) |
| <tbody> | 定义表格中的主体部分(可选) |
| <tr> | 表格的行，可以包裹多个 <td> |
| <td> | 表格单元格(普通)，可以包裹内容；如果是表头单元格，可以替换为 <th> |

表格中有很多的属性，其中大部分不提倡使用的，建议使用CSS样式代替。所以我们就不介绍了。

为了在这里展示表格标签的用法和实现的效果。还是需要介绍几个属性。在<table>标记中有一个 border属性用来设置边框的宽度，单位为像素。在默认情况下，表格的边框为0，即没有边框。

<td>标记的colspan和rowspan属性可以实现表格中跨行和跨列。colspan属性用于设置单元格在横向上跨的列数，rowspan属性用于设置单元格在纵向上跨的行数。

html 复制代码 
<!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">
    <thead>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>职位</td>
            <td>平均业绩</td>
        </tr>
    </thead>
        <tbody>
            <tr>
            <td>张三</td>
            <td>男</td>
            <td>程序员</td>     
            <td rowspan = "2"></td>     
        </tr><tr>
            <td>李四</td>
            <td>男</td>
            <td>教师</td> 
        </tr>
        </tbody>
</table>
</body>
</html>

效果展示:

3.7 表单标记

那表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如，我们经常在访问网站时，出现的登录页面、注册页面、个人信息提交页面，其实都是一个一个的表单 。 当我们在这些表单中录入数据之后，一点击 "提交"，就会将表单中我们填写的数据采集到，并提交， 那其实这个数据呢，一般会提交到服务端，最终保存在数据库中。

那其实，上述的整个窗口是一个表单，而表单是一项一项的，这个我们称为表单项 或 表单元素。

  • 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。

  • 表单标签: <form>

  • 表单属性:

    • action: 规定表单提交时，向何处发送表单数据，表单提交的URL。

    • method: 规定用于发送表单数据的方式，常见为： GET、POST。

      • GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。

      • POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。

  • 表单项标签: 不同类型的input元素、下拉列表、文本域等。

    • input: 定义表单项，通过type属性控制输入形式

    • select: 定义下拉列表

    • textarea: 定义文本域

在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

  • <input>: 表单项 , 通过type属性控制输入形式。

|--------------------------|-----------------------|
| type取值 | 描述 |
| text | 默认值，定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义文件上传按钮 |
| date/time/datetime-local | 定义日期/时间/日期时间 |
| number | 定义数字输入框 |
| email | 定义邮件输入框 |
| hidden | 定义隐藏域 |
| submit / reset / button | 定义提交按钮 / 重置按钮 / 可点击按钮 |

  • <select>: 定义下拉列表, <option> 定义列表项

  • <textarea>: 文本域

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <form action="" method="get">
        <ul>
            <li>
                <label>姓名：<input type="text" name="name" id=""></label>
            </li>
            <li>
                <label>密码：<input type="password" name="password" id=""></label>
            </li>
            <li>
                性名：
                <label> 男<input type="radio" name="age" id=""></label>
                <label>女<input type="radio" name="age" id=""></label>
            </li>
            <li>
                爱好：
                <label><input type="checkbox" name="love" id="">Java</label>
                <label><input type="checkbox" name="love" id="">game</label>
                <label><input type="checkbox" name="love" id="">sing</label>
            </li>
            <li>
                <label>生日：<input type="date" name="time" id=""></label>
            </li>
            <li>
                <label>时间：<input type="time" name="时间" id=""></label>
            </li>
            <li>
                <label>日期时间：<input type="datetime-local" name="" id=""></label>
            </li>
            <li>
                <label>学历：<select name="xl" id="">
                    <option value="">请选择</option>
                    <option value="1">本科</option>
                    <option value="1">硕士</option>
                </select></label>
            </li>
            <li>
                <label>评价：<textarea name="" id=""></textarea></label>
            </li>
            <input type="button" value="按钮">
            <input type="reset" value="重置"> 
            <input type="submit" value="提交"> 

        </ul>
    </form>
</body>
</html>

展示效果：

相关推荐
水淹萌龙2 小时前
Iconify 的离线加载
开发语言·前端·javascript
GDAL2 小时前
Electron 快速入门教程
前端·javascript·electron
外派叙利亚2 小时前
uniapp canvas 自定义仪表盘 可滑动 可点击 中间区域支持自定义
前端·javascript·uni-app·html
比特森林探险记2 小时前
React基础：语法、组件与JSX
前端·javascript·react.js
宁雨桥2 小时前
Vue项目中iframe嵌入页面实现免登录的完整指南
前端·javascript·vue.js
无法长大2 小时前
Mac M1 环境下使用 Rust Tauri 将 Vue3 项目打包成 APK 完整指南
android·前端·macos·rust·vue3·tauri·打包apk
LongJ_Sir2 小时前
Cesium--可拖拽气泡弹窗（对话框尾巴，Vue3版）
前端·javascript·vue.js
im_AMBER2 小时前
消失的最后一秒：SSE 流式联调中的“时序竞争”
前端·笔记·学习·http·sse
RFCEO2 小时前
前端编程 课程十、：CSS 系统学习学前知识/准备
前端·css·层叠样式表·动效设计·前端页面布局6大通用法则·黄金分割比例法则·设计美观的前端
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03【网络安全测试】Burp Suite工具使用说明、配置及常见问题（有关必回）04Claude Code Skills 实用使用手册05struts2 XML外部实体注入漏洞复现（CVE-2025-68493）06UV安装并设置国内源07在Trae中使用Pencil MCP08Open Code教程（四）| 高级配置与集成09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南