一篇详解常用HTML标签

^～^前行者～～～

已于 2024-04-11 02:45:37 修改

阅读量196

点赞数

文章标签：前端 html

于 2023-08-21 00:17:02 首次发布

本文链接：https://blog.csdn.net/huaz_md/article/details/132397464

版权

华子目录

前后端与全栈
BS架构
网页开发原则
前端三剑客
初始html
html的基本框架
多媒体标签
HTML5提供的新标签
表格标签`table`
- 合并单元格
表单标签`form`
- 表单元素`input,textarea,select,button,label`
作业

前后端与全栈

前端:给用户看的内容 – 荧幕前（负责显示）
后端:在后台处理数据 – 荧幕后（负责处理）
全栈:前后端都会能独立开发一个完整的网站(全能型)

BS架构

B：browser，浏览器
S：server，服务器
平时浏览页面可见到的前端部分 – 浏览器
真正实现操作进行数据增删改查的后端部分 – 服务器

网页开发原则

1.对于设计者来说容易实现
2.对于编程者来说容易开发
3.对于管理者来说容易维护
4.对于浏览者来说容易使用

前端三剑客

html:是网页基本组成写给用户看的内容(图片文字视频)–>人类身体
css:负责美化网页/优化网页性能(字体大小排版)–>人类衣服装饰品
JavaScript:脚本语言用来动态效果前后端交互传输信息 -->人类行为/技能

初始html

html是超文本标记语言，是构成web页面的基本元素，是一种规范，一种标准
什么是超文本呢？
超文本是比普通文字的文本要强悍些，可以放图片，音乐，视频，排版，超链接等等。
注：html是标记语言不是编程语言，可以把html当做一个拼图，里面的代码称为标签，我们要做的就是把一个个正确的标签放到合适的位置上就可以了，其中html5是html的一个版本，该版本增加优化了很多内容，几乎现在市面上流行的浏览器都能很好的支持html5

html的基本框架

如何使用vscode创建网页

1.先创建一个空文件夹
2.鼠标右击，选择使用vscode打开
3.再在vscode中创建一个后缀名为html的文件
4.Ctrl+s保存文件

网页基本框架

1.标签：写在html包裹的代码

单标签：一般是功能标签，有特殊的功能含义（单身狗）
双标签：一般包裹内容，显示东西（情侣）
2.生成html框架：！+ tab键或enter键/html:5
注：注释：<!–内容-- >，快捷键：Ctrl+/

<!DOCTYPE html><!--规定了浏览器使用那种规范，其中html5规范无需额外指定-->
<html lang="en"><!--所有网页最大的结构，网页中的所有的标签都存放在html标签中，其中lang属性：主要用于决定浏览器是否自动弹出翻译框-->
<head><!--网页头部 告诉浏览器一些相关的信息-->
    <meta charset="UTF-8">  <!--表示网页编码格式 推荐utf-8 国际编码 -->
    <title>Document</title>  <!-- 网页标题 -->
</head>
<body><!--网页的主体 我们所看到的网页结构 都是在body中的-->
    
</body>
</html>

基本框架:

html --> 是一个网页核心，基本上所有的内容都被他包裹
head --> 头标签里面写的内容主要是给浏览器看网页的介绍样式
写在head标签里面的内容
- meta：元标签，主要写网页的说明信息，设置信息，方便搜索引擎来搜索到你这个页面的信息
- link：链接标签，用来链接外部的文件（css）
- title：标题标签，标题的内容都是放在这里得
- style：标签用于定于元素的css样式
body --> 身体标签主要给用户看的

html基本标签

1.标题标签h

<h1>内容</h1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
</head>
<body>
    <h1>大龙虾</h1>
    <h2>海鱼肉</h2>
    <h3>麻辣粉</h3>

</body>
</html>

在这里插入图片描述
注：

h1-h6标签用于表示网页内容的标题标签中的文字默认会出现不同程度的加粗与增大
搜索引擎非常看重h1标签内容重要的内容放在h1里一般只能放置一个，否则会适得其反

2.段落标签p

比例式占据网页大小

<p>内容</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
</head>
<body>
    <p>干啥共青团认为有阿嘎个人和狠人认规范十多个很多事跟的是跟的是规划电风扇改设定个个蛇身瓦房店市股份大使馆的双方各为</p>
    <p>fddghdhfegfdsggfffgdfdshdsffgdfghjrtyughjhjfghjhjgh更好地复工后复工后即可的复工后即可的复工后即可的复工后即可复工后即可复工后即可的复工后即可</p>
</body>
</html>

总结：
p标签是双标签，段落标签，放一段段文字，段落之间是有间隙的因为段落自带换行

3.常用标签

标签	说明
strong/b标签	加粗
ins/u标签	下划线
em/i标签	倾斜
del标签	删除线
br标签	换行
p标签	段落标签
sup标签	上标
sub标签	下标
font标签	规定字体属性size和color
pre标签	原样输出
hr标签	水平分割线
div标签	盒子标签
span标签	标准化行内标签，一般用于修饰文本
img标签	图片标签
audio标签	音频标签
video标签	视频标签

注：一般情况下b和strong标签都是可以让文本进行加粗但是strong标签的语义是内容具有强调的作用
- b表现效果加粗
- strong 除了文本加粗并且还有强调文字的作用让浏览器觉得这里的文字很重要

4.换行

br（换行，单标签）

5.分割线

hr（分割线，单标签）

6.特殊字符

除了标签外，HTML中的特殊字符也有重要的作用，例如：要求再浏览器中显示br标签，如果将br标签直接写在源代码中，浏览器会将其解释成换行，而不会显示。
特殊字符以&开始，以;结束

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
</head>
<body>
    <p>大于号：&gt;,小于号：&lt;空格：&nbsp;人民币：&yen;&nbsp;&nbsp;&nbsp;版权符号：&copy;</p>
</body>
</html>

span标签（双标签）

也是文本标签，不会自动换行
视觉上不会产生什么变化，但是我们可以配合css添加特殊样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
</head>
<body>
    <p>我爱吃<span style="color:brown">螺蛳粉</span></p>
</body>
</html>

语义化与SEO

SEO：搜索引擎优化
			优化网页内容，让网站在搜索引擎中的排名更靠前
语义化：合理的运用标签

语义化的好处：

1.对于开发者来说,有语义化的标签更加清晰方便编写代码
2.对于浏览器的爬虫,有利于SEO更方便解析
3.对于团队来说,方便团队的开发和维护

创建项目文件夹

在正式开发项目时 需要有三个文件夹
	js-->把JavaScript代码放在里面
	css-->把css代码放里面
	img-->把图片放在里面

网站是由很多的网页组成
网站的主页一般命名为index.html
网页文件的名字要做到见名知意

绝对路径与相对路径

绝对路径：从盘符出发完整的具体位置
相对路径：简单位置，有一个参考的坐标

相对路径:
./ 可以不写 表示从当前文件夹出发 可以直接输入图片名
../ 返回上一个文件夹
绝对路径:
一般不使用 如果换了环境就没有了

标签属性

标签：由标签名，标签属性，文本内容三部分组成
标签属性：是对标签的一种描述方式（颜色，大小，描述）

注意:

1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.属性之间没有顺序之分

<标签名  属性1='值'  属性2='值'>内容</标签名>

标签通用属性

id: 用来给标签取一个唯一的名称，重复的话就是先来的为准
style: 用来设置该标签的行内样式
title: 鼠标放上时，所显示内容

超链接标签a（不换行）

跳转到指定网页
跳转到指定图片
跳转到html作品集里面

常用属性：

href='链接的路径'
target 表示以什么方式打开网页
- _blank 新窗口，原来的不变
- _self 默认，覆盖原来的
title 鼠标放上去时，显示内容
download：指示浏览器下载URL而不是导航到它。

<a>标签在HTML中用于创建超链接，它可以链接到其他网页、文件、电子邮件地址或网页中的特定部分。<a>标签通常与href属性一起使用，以指定链接的目标地址。

以下是<a>标签的基本语法：

<a href="URL">链接文本</a>

例如：

<a href="https://www.example.com">访问示例网站</a>
<a href="mailto:example@example.com">发送电子邮件</a>
<a href="https://www.example.com" target="_blank">在新窗口打开示例网站</a>

图片超链接

当点击图片时，会跳转到相应链接中

<!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>
    <div>
        <a href="./video/VideoAudio.mp4">
            <img src="./img/picture1.jpeg" alt="图片" title="第一张图片" height="500px">
        </a>
    </div>
</body>
</html>

热区超链接

有些时候希望将一个图片能添加多个链接，这时要将图片分割出多个链接区域，每一个区域叫一个热区，每一个热区都可以实现一个链接。

锚点

页面中添加锚点功能跳转到页面特定的位置
- 先给元素设置id名
- 再使用a标签设置href=#id名，然后点击a标签就可以跳转所需位置

总结：
1.跳转到一个指定的网站
2.跳转到网页里的一个指定位置
3.跳转到一个指定文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
</head>
<body>
   <img id="第一张" src="../img/山海.jpg" alt="李信山海" height="100" width="100" title="山海">
   <img id="第二张" src="../img/qq糖.jpg" alt="">
   <a href="https://uland.taobao.com/sem/tbsearch" target="_self" title="转到淘宝">点我到淘宝</a>
   <a href="../img/微胖美女.jpg">带你看美女</a>
   <a href="#第一张">点我到第一张</a>
   <a href="#第二张">点我到第二张</a>
</body>
</html>

多媒体标签

图片标签img

向当前网页引入一张图片（本地图片，网络图片）

<img src="图片路径" alt="图片描述"  height="高度"
width="宽度"  title="图片标题">

img是image图片缩写

src是source的缩写 src='图片路径'
height width 高度宽度可以不用px单位，默认px
alt 图片描述
- 当图片加载失败，显示的文字或者视力不好的可以知道这种图片显示的什么，让搜索引擎知道你这个图片是个啥东西
title 鼠标放上去时，显示的内容

注意:

如果只设置width或height中的一个另一个没设置的会自动等比例缩放
一般情况下直接有一个src就可以了，最好写一个alt
更推荐使用相对路径

如果你想让用户能够下载网页上的图像，通常需要通过其他方式来实现。一种常见的方法是在图像上添加一个链接，当用户点击这个链接时，浏览器会开始下载图像。这可以通过将图像包裹在一个 <a> 标签中，并给 <a> 标签添加 download 属性来实现。例如：

<a href="image.jpg" download>点击下载图像</a>

在这个例子中，href 属性指定了要下载的图像的URL，而 download 属性则告诉浏览器当用户点击链接时应该下载文件而不是尝试打开它。download 属性还可以接受一个值，这个值将被用作下载文件的默认名称。例如：

<a href="image.jpg" download="my_image.jpg">点击下载图像</a>

在这个例子中，下载的文件将默认被命名为 “my_image.jpg”。

audio标签

<audio>标签在HTML中用于向网页添加音频内容，如音乐或其他音频流。它是一个独立的标签，没有结束标记，通过设置多种属性可以控制音频播放器的行为和外观。
<audio>标签的基本语法是：<audio src="url"></audio>，其中src属性指定要播放的音频文件的URL地址。

audio主要属性

src: 指定音频文件的 URL。当使用单个音频文件时，可以直接在 <audio> 标签上使用此属性。
controls: 添加播放、暂停和音量控制。
autoplay: 页面加载后自动播放音频。
loop: 音频播放结束后自动重复播放。
muted: 音频默认静音。
preload: 预加载音频。可以是 none、metadata 或 auto。

事件

<audio> 标签也支持一系列事件，允许你在音频播放的不同阶段执行 JavaScript 代码。例如：

play: 当音频开始播放时触发。
pause: 当音频播放暂停时触发。
ended: 当音频播放结束时触发。
erro: 当音频播放出错时触发。

你可以通过 JavaScript 为这些事件添加监听器：

<audio id="myAudio" src="audiofile.mp3" controls></audio>

<script>
var audio = document.getElementById('myAudio');

audio.addEventListener('play', function() {
  console.log('音频开始播放');
});

audio.addEventListener('ended', function() {
  console.log('音频播放结束');
});
</script>

video标签

<video>标签在HTML中用于向网页添加视频内容。它是一个独立的标签，没有结束标记，通过设置多种属性可以控制视频播放器的行为和外观。
<video>标签的基本语法是：<video src="url"></video>，其中src属性指定要播放的视频文件的URL地址。

<video src="movie.mp4" controls></video>

属性

除了src属性外，<video>标签还支持其他多个属性，以便对视频播放器进行更精细的控制。例如：

controls：显示默认的视频播放控制条，包括播放/暂停按钮、音量控制等。
width和height：用于设置视频的宽度和高度，可以使用像素值或百分比。
autoplay：表示视频在页面加载完成后自动播放。
loop：使视频循环播放。
poster：设置视频的封面图，该图片将在视频数据无效或加载时显示。
preload: 预加载视频的策略，可以是 none、metadata 或 auto。
muted：规定视频的音频输出应该被静音。

子元素

<video> 标签可以包含 <source> 子元素来指定多个视频文件，浏览器将选择它支持的第一个文件来播放。这与 <audio> 标签中的用法类似。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 元素。
</video>

如果浏览器不支持 <video> 标签，它会显示标签内的文本内容。

事件

<video> 标签支持一系列事件，允许你在视频播放的不同阶段执行 JavaScript 代码。例如：

play: 当视频开始播放时触发。
pause: 当视频播放暂停时触发。
ended: 当视频播放结束时触发。
loadedmetadata: 当视频的元数据（如时长、尺寸等）加载完成时触发。
loadeddata: 当当前帧的数据已加载，但可能还不足以开始播放时触发。
canplay: 当浏览器预计能够开始播放视频时触发，但并不意味着之后的播放不会缓冲。

你可以通过 JavaScript 为这些事件添加监听器，以便在特定情况下执行相应的操作。

source标签

<source> 标签是 HTML5 中 <audio> 和 <video> 元素的子元素，用于指定媒体资源。对于 <audio> 元素，<source> 标签允许你提供多个音频文件，浏览器将选择它能够播放的第一个文件。对于 <video> 元素，它允许你提供多个视频文件或字幕文件。

基本语法

<audio>
  <source src="audio1.mp3" type="audio/mpeg">
  <source src="audio2.ogg" type="audio/ogg">
  您的浏览器不支持 audio 元素。
</audio>

<video>
  <source src="video1.mp4" type="video/mp4">
  <source src="video2.webm" type="video/webm">
  您的浏览器不支持 video 元素。
</video>

主要属性

src: 指定媒体文件的 URL。
type: 指定媒体资源的 MIME 类型。这有助于浏览器快速确定它是否能播放该资源，而不必先下载整个文件。

如何工作

浏览器会按照 <source> 标签在 <audio> 或 <video> 元素中出现的顺序尝试加载每个资源。一旦找到它能播放的文件，它就会停止查找并播放该文件。如果所有指定的资源都不能播放，浏览器通常会显示 <audio> 或 <video> 元素内的文本内容（如果有的话）。

注意事项

格式兼容性：不同的浏览器支持不同的媒体格式。提供多种格式的媒体文件可以提高跨浏览器兼容性。
错误处理：如果浏览器无法播放任何提供的资源，它通常会回退到显示 <audio> 或 <video> 元素内的文本内容。你也可以使用 JavaScript 来监听 error 事件并进行相应的处理。
MIME 类型：虽然有时可以省略 type 属性，但提供它可以帮助浏览器更快地确定它是否能播放特定的资源。

示例：使用 `<source>` 标签提供字幕

对于 <video> 元素，<source> 标签也可以用于指定视频字幕（通过 kind="subtitles" 属性）。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="subtitles.vtt" type="text/vtt" kind="subtitles" srclang="en" label="English">
  您的浏览器不支持 video 元素。
</video>

在这个例子中，除了视频文件外，还提供了一个 WebVTT 格式的字幕文件。如果浏览器支持字幕，并且用户选择显示字幕，那么这些字幕将与视频同步显示。

案例

video

<!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>
    <video src="./video/VideoAudio.mp4" controls width="1000px" height="800px" autoplay loop muted></video>
</body>
</html>

在这里插入图片描述

audio

<!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>
    <audio src="./audio/audio.mp3" controls autoplay loop muted preload="auto"></audio>
</body>
</html>

在这里插入图片描述

img

<!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>
    <div>
        <img src="./img/picture1.jpeg" alt="图片" title="第一张图片" height="500px">
        <br>
        <a href="./img/picture1.jpeg" download="my-pic1">download</a>
    </div>
</body>
</html>

在这里插入图片描述

HTML5提供的新标签

HTML5是HTML从传统的web端开始兼容移动互联网的重要标志，HTML5为HTML提供了大量好用的标签，如布局使用的三个标签header，section，footer标签；用来播放视频和音频的多媒体标签video，audio标签等

标签	作用
header	定义页面的顶部（页眉）内容
main	页面的主要内容
article	表示文章内容
section	用于对网页内容进行分块
footer	批注
aside	页面内容的附属信息
nav	页面导航链接

案例

header

<header> 标签在 HTML5 中被引入，用于表示页面或页面部分（如区域或节）的介绍性内容。这个标签通常包含页面的标题、logo、导航栏等元素。<header> 元素应当被用作介绍性的内容或导航链接的容器，而不是用于样式或布局。

例如，一个基本的页面布局可能如下：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <header>
        <h1>我的网页标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- 主要的页面内容 -->
    </main>

    <footer>
        <!-- 页脚信息 -->
    </footer>
</body>
</html>

在上面的例子中，<header> 标签包含了页面的标题（<h1>）和导航菜单（<nav>）。<main> 标签用于包含页面的主要内容，而 <footer> 标签用于包含页脚信息。这些都是 HTML5 引入的语义化标签，它们有助于搜索引擎和辅助技术（如屏幕阅读器）更好地理解页面的结构和内容。

注意，<header> 标签并不应该被用于表示页面整体的布局或样式，它仅仅是一个语义化的标签，用于标识页面或页面部分的介绍性内容。页面的布局和样式应该通过 CSS 来实现。

main

在HTML中，<main> 标签用于包含页面的主要内容。这个标签对于辅助技术（如屏幕阅读器）以及搜索引擎优化（SEO）非常重要，因为它有助于标识和突出显示页面的主体内容。
<main> 元素应该包含页面中唯一的内容，这部分内容对页面的整体目的有直接贡献。它不应该包含页面的脚注、版权信息、站点导航链接、侧边栏、广告或者其他非主要内容。这些内容应该放在页面的其他部分，如 <header>、<footer>、<aside> 或 <nav> 等标签内。
每个页面只能有一个 <main> 元素，并且它必须是一个块级元素，通常直接作为 <body> 的子元素。

以下是一个使用 <main> 标签的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <style>
        main {
            margin: 15px;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>

<header>
    <h1>我的网站标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>文章标题：HTML和CSS入门</h2>
        <p>这是关于HTML和CSS入门的一篇文章。在这篇文章中，我们将介绍HTML和CSS的基本概念，并帮助你开始构建基本的网页。</p>
        <section>
            <h3>HTML基础</h3>
            <p>HTML是网页的骨架，用于定义网页的结构和内容。</p>
            <!-- 这里可以添加更多关于HTML基础的内容 -->
        </section>
        <section>
            <h3>CSS样式</h3>
            <p>CSS用于描述网页的样式，包括颜色、字体、布局等。</p>
            <!-- 这里可以添加更多关于CSS样式的内容 -->
        </section>
    </article>
</main>

<aside>
    <h3>侧边栏</h3>
    <p>这里是一些额外的信息或者广告。</p>
</aside>

<footer>
    <p>版权信息 &copy; 2023 我的网站</p>
</footer>

</body>
</html>

在这个示例中，<main> 标签包含了页面的主要内容，即一篇关于HTML和CSS入门的文章。而侧边栏（<aside>）和页脚（<footer>）则分别放在了 <main> 标签之外的其他位置。

通过使用 <main> 标签，我们可以清晰地定义页面的主要内容区域，这有助于提高页面的可访问性和搜索引擎对页面内容的理解。

section

<section> 标签在 HTML5 中被引入，用于表示页面中的一个独立区域或节（对网页内容进行分块），通常包含与该区域相关的标题和内容。<section> 元素应该被用于将页面上的内容分成逻辑上相关的区域，每个区域可以有自己的标题和内容。
<section> 元素并不是用于表示通用的容器或布局元素，而是用于对页面的内容进行语义化的划分。它通常包含标题（例如 <h1>-<h6>）和其他相关的内容，这些内容一起构成了页面的一个主题或应用。

下面是一个使用 <section> 标签的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
    <style>
        /* 简单的样式 */
        section {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        section h2 {
            color: #333;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的网页标题</h1>
    </header>

    <main>
        <section>
            <h2>关于我们</h2>
            <p>这里是关于我们公司的介绍...</p>
        </section>

        <section>
            <h2>我们的服务</h2>
            <ul>
                <li>服务1</li>
                <li>服务2</li>
                <li>服务3</li>
            </ul>
        </section>

        <section>
            <h2>联系我们</h2>
            <p>您可以通过以下方式联系我们...</p>
        </section>
    </main>

    <footer>
        <p>版权信息 &copy; 2023 我的网页</p>
    </footer>
</body>
</html>

在这个示例中，<main> 元素包含了三个 <section> 元素，每个 <section> 元素代表一个独立的区域：关于我们、我们的服务和联系我们。每个 <section> 元素都有一个标题（<h2>）和相关的内容。

article

<article> 标签是 HTML5 中新增的一个元素，用于表示页面中独立的、完整的文章或内容块。这个标签通常用于包含博客文章、新闻故事、论坛帖子或其他独立的信息块。<article> 标签表示的内容应该是有意义的，且应该有可能独立于站点的其余部分进行分发。

<article> 标签的基本语法如下：

<article>
  <!-- 在这里放置您的内容 -->
</article>

请注意，<article> 标签必须闭合，并且任何文本都应该放置在起始和结束标记之间。

除了内容部分，一个 <article> 元素通常也包含其自身的标题，有时还有脚注。这个标签的语法和基本功能与前些版本的 HTML 中的 div、p、span 等标签相似，可以直接使用 style 属性在标签内设置 CSS，或者使用 class 或 id 引入外部的 CSS 样式。

<article> 标签也支持 HTML 的全局属性和事件属性，这提供了更多的灵活性和交互性。

下面是一个使用 <article> 标签的 HTML 案例，这个案例展示了一个简单的博客文章页面，其中包含了文章的标题、发布日期、正文内容以及评论区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客文章</title>
    <style>
        /* 简单的样式 */
        article {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        article header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        article header h1 {
            margin: 0;
        }
        article footer {
            font-size: 0.8em;
            color: #666;
        }
        .comments {
            margin-top: 20px;
            padding: 10px;
            border-top: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的博客</h1>
    </header>

    <main>
        <article>
            <header>
                <h1>文章标题</h1>
                <p>发布日期: 2023-04-01</p>
            </header>
            <p>这是文章的正文内容，包含了详细的介绍和分析。</p>
            <p>文章内容可以分成多个段落，并可以使用列表、图片等元素丰富内容。</p>
            <footer>
                <p>作者: 张三</p>
            </footer>
        </article>

        <div class="comments">
            <h2>评论</h2>
            <form>
                <!-- 评论表单可以放在这里 -->
            </form>
            <ul>
                <!-- 评论列表可以放在这里 -->
            </ul>
        </div>
    </main>

    <footer>
        <p>版权信息 &copy; 2023 我的博客</p>
    </footer>
</body>
</html>

在这个案例中，<article> 标签用于包裹博客文章的内容，包括标题、发布日期、正文和页脚。<header> 元素用于包含文章的标题和发布日期，这些信息被放置在一个 flex 容器中，以便在标题和日期之间创建一些空间。

正文内容通过多个 <p> 元素表示，并可以使用其他 HTML 元素来进一步丰富内容。

<footer> 元素用于包含与文章相关的附加信息，例如作者姓名。

评论区域通过一个单独的 <div> 元素表示，它有一个类名 comments，以便通过 CSS 进行样式化。评论表单和评论列表可以放在这个 <div> 内部。

footer

<footer> 标签在 HTML 中用于表示页面或页面区域（如 <section> 或 <article>）的底部内容。这通常包含版权信息、联系信息、链接到网站地图或隐私政策等。<footer> 元素的内容通常位于页面的最下方，且不是页面的主要内容。

<footer> 标签的基本用法如下：

<footer>
  <!-- 在这里放置您的底部内容 -->
</footer>

它应该直接包含页面底部的内容，而不需要额外的包装元素（除非有特殊的布局需求）。例如，你可以在 <footer> 中放置一个包含版权信息的段落、一些导航链接或者社交媒体的图标链接等。

下面是一个包含 <footer> 标签的简单 HTML 页面示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
    <style>
        /* 简单的样式 */
        footer {
            background-color: #f8f9fa;
            padding: 20px;
            text-align: center;
            font-size: 0.8em;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的网页标题</h1>
    </header>

    <main>
        <p>这里是页面的主要内容...</p>
    </main>

    <footer>
        <p>版权信息 &copy; 2023 我的网页</p>
        <p>联系我们：<a href="mailto:info@example.com">info@example.com</a></p>
    </footer>
</body>
</html>

在这个示例中，<footer> 标签包含了版权信息和联系我们的链接。<footer> 元素通常位于 <body> 标签的底部，紧随 <main> 或其他主要内容之后。
<footer> 元素是语义化的，意味着它提供了关于页面底部内容区域的额外信息给浏览器、搜索引擎以及使用屏幕阅读器等辅助技术的用户。这有助于提升页面的可访问性和搜索引擎优化（SEO）。
需要注意的是，<footer> 元素并不限于页面的最底部。在复杂的页面中，每个 <section> 或 <article> 元素内部也可以有自己的 <footer> 来表示该部分的底部内容。然而，每个 <footer> 元素都应该只包含与其直接父元素相关的内容。

nav

<nav> 标签在 HTML5 中被引入，用于表示页面中的导航链接部分。这个标签是对页面导航区域的一种语义化标识，它告诉浏览器和辅助技术（如屏幕阅读器）这部分内容主要用于导航。
<nav> 元素通常包含页面的主要导航链接，如链接到页面上的其他部分或链接到网站的其他页面。这可以包括主页链接、站点地图链接、搜索表单等。

<nav> 标签的基本语法如下：

<nav>
  <!-- 在这里放置您的导航链接 -->
</nav>

在 <nav> 元素内部，您通常会使用无序列表 (<ul>) 和列表项 (<li>) 来组织导航链接，并且每个列表项会包含一个锚元素 (<a>)，指向相应的页面或页面部分。

下面是一个包含 <nav> 标签的简单 HTML 页面示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
    <style>
        /* 简单的样式 */
        nav {
            background-color: #f8f9fa;
            padding: 10px;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
        }
        nav ul li {
            display: inline-block;
            margin-right: 10px;
        }
        nav ul li a {
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的网页标题</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>

    <main>
        <p>这里是页面的主要内容...</p>
    </main>

    <footer>
        <p>版权信息 &copy; 2023 我的网页</p>
    </footer>
</body>
</html>

在这个示例中，<nav> 标签包含了一个无序列表，列表中的每个项都是一个导航链接。通过使用 CSS，我们可以对这些链接进行样式化，使其以水平方式显示，并添加一些间距和背景色。
使用 <nav> 标签不仅有助于提升页面的语义化，还能帮助搜索引擎更好地理解页面的结构和内容，从而对页面进行更好的索引和排名。同时，对于使用辅助技术的用户来说，这种语义化的标记也能提供更清晰的导航体验。

在这里插入图片描述

列表

无序列表`ul`

展示无序列表的内容， ul li 必须组合出现代表无序列表（只有在li里面，就会进行缩进）

li不能单独使用，只能放在ol和ul作为他们的子标签
规范上，子标签只能是li
li里可以存放任何标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
</head>
<body>
    <p>王者荣耀</p>
   <ul type="square">
    <li>李白
        <p>刺客</p>
    </li>
    <li>韩信
        <p>刺客</p>
    </li>
    <li>赵云
        <p>战士+刺客</p>
    </li>
   </ul>
</body>
</html>

disc 实心圆点
circle 空心圆点
square 实心放块
none 不显示符号

列表嵌套(里面会是白的小圆点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
</head>
<body>
    <p>王者荣耀</p>
    <ul>
        <li>
            <p>刺客</p>
            <ul>
                <li>李白</li>
                <li>韩信</li>
            </ul>
        </li>
        <li>
            <p>战士</p>
            <ul>
                <li>亚瑟</li>
                <li>赵云</li>
            </ul>
        </li>
    </ul>
</body>
</html>

在这里插入图片描述
在HTML中，<ul> 标签代表无序列表（Unordered List）。无序列表是一个项目的集合，列表项以标记（通常是圆点）进行标记。这与有序列表（<ol> 标签）不同，有序列表的列表项是以数字或字母顺序标记的。

<ul> 标签内通常包含一系列的 <li> 标签，代表列表项（List Item）。每个 <li> 标签表示列表中的一个项目。

下面是一个简单的无序列表的HTML代码示例：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>草莓</li>
</ul>

在浏览器中渲染时，这个无序列表通常会显示为：

苹果
香蕉
橙子
草莓

每个列表项前都有一个圆点标记。

无序列表的样式可以通过CSS进行修改。例如，你可以改变列表项的标记类型、颜色、间距等。下面是一个简单的CSS样式示例，用于改变无序列表的样式：

<style>
  ul {
    list-style-type: square; /* 改变标记类型为方块 */
    color: blue; /* 改变文本颜色为蓝色 */
  }
</style>

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>草莓</li>
</ul>

在这个例子中，<ul> 的 list-style-type 属性被设置为 square，这会使每个列表项前的标记变为方块形状，同时 color 属性设置为 blue 使得列表项文本变为蓝色。

无序列表在网页设计中非常常见，用于显示一系列没有特定顺序的项目，如导航菜单、产品列表、相关链接等。

有序列表`ol`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
</head>
<body>
    <p>王者荣耀</p>
    <ol type="A">
        <li>韩信</li>
        <li>猴子</li>
        <li>狂铁</li>
    </ol>
</body>
</html>

a 表示小写英文字母
A 表示大写英文字母
i 表示小写罗马数字编号
-I 表示大写罗马数字编号
1 表示数字编号 (默认)
reversed属性 倒序排列不需要值
start属性值必须是一个整数指定了列表编号的起始值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
</head>
<body>
    <p>王者荣耀</p>
    <ol type="A" reversed>
        <li>韩信</li>
        <li>猴子</li>
        <li>狂铁</li>
    </ol>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
</head>
<body>
    <p>王者荣耀</p>
    <ol type="I" start="3">
        <li>韩信</li>
        <li>猴子</li>
        <li>狂铁</li>
    </ol>
</body>
</html>

在这里插入图片描述

自定义列表`dl dt dd`

结合dl标签去使用dd,dt标签，dd,dt标签同级，不能相互嵌套
dd内容是用来描述dt dd，可以有多个
dl的子标签只能是dt dd，他们也不能单独出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
</head>
<body>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>厚渡之网</dd>
        <dd>欢迎光临</dd>
    </dl>
</body>
</html>

在这里插入图片描述

表格标签`table`

<table> 标签在 HTML 中用于创建表格，而表格的结构由一系列子标签来定义。这些子标签包括：

<thead>：定义表格的头部区域，通常包含一行或多行表头单元格。
<tbody>：定义表格的主体区域，包含表格的数据行。
<tfoot>：定义表格的尾部区域，通常包含一行或多行对表格的注释或总计信息。
<caption>：用于定义表格的标题，内容处于居中位置

在这些区域内部，会使用以下标签来定义行和单元格：

<tr>：定义表格的一行。
<th>：定义表头单元格，通常用于包含列标题。这些单元格默认会加粗居中显示。
<td>：定义数据单元格，用于包含表格的实际数据。

除此之外，还有一些其他的子标签和属性，但上述标签是最基础和最常用的。

合并单元格

将水平或者垂直多个单元格合并成一个单元格
给保留的单元格设置:跨行合并(rowspan)或者垮列合并(colspan)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;  /*把表格变成单边边框线*/
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<table>
    <caption>员工表</caption>    <!--表格标题-->
    <thead>    <!--第一行-->
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职位</th>
            <th>部门</th>
        </tr>
    </thead>
    <tbody>     <!--第二行至倒数第二行-->
        <tr>
            <td>张三</td>
            <td>28</td>
            <td>软件工程师</td>
            <td>技术部</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>32</td>
            <td>产品经理</td>
            <td>产品部</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>25</td>
            <td>UI设计师</td>
            <td>设计部</td>
        </tr>
    </tbody>
    <tfoot>      <!--最后一行-->
       <tr>
            <td colspan="4">   <!--跨列合并4个单元格-->>
                总员工数：3人
            </td>
       </tr>
    </tfoot>
</table>

</body>
</html>

在这里插入图片描述

表单标签`form`

之前学习的所有标签都是用来展示数据的，但是我们页面有时候也需要和后端程序进行交互，这样就需要一些能够交互的标签，常见可以交互的标签有我们之前学习的a标签，当然最主要的交互标签则是表单标签。表单是网页制作中非常重要的内容，用户通过表单可以在网页中录入数据，例如登录，注册用户等。
表单是用form标签来定义的

<form action="处理表单的文件" method="表单提交方式" name="表单名称"></form>

form标签类似于一个容器标签，有3个重要属性

属性名称	属性值说明	属性作用
action	文件路径	数据提交到后台的路径位置
method	请求方式	method属性明确表单的提交方式get和post
name	字符串	表单的名称

注：method属性值设置为get时，传递的数据量受到浏览器种类和版本的限制

表单元素`input,textarea,select,button,label`

表单的元素（如文本框、密码框等）由三种标签构成，input、 textarea、 select、label，它们都要包含在form标签中才有效 (当然HTML5扩展了一个button标签)。

input标签

<input type="元素类型" name="元素名称" value="元素值" id="id名" placeholder="文本框提示语" checked size="" maxlength="">

input表示表单元素，type是非常重要的属性，type不同的值表现为不同的元素类型

type类型	作用
type=“text”	单行文本框
type=“password”	密码框
type=“radio”	单选框，基于name属性进行判断
type=“checkbox”	多选框
type=“submit”	提交按钮
type=“reset”	重置按钮
type=“button”	按钮
type=“url”	网址框
type=“file”	文件上传框
type=“hidden”	隐藏框
type=“image”	图像按钮
type=“email”
type=“color”
type=“time”

属性成名	属性值	功能
name	字符串	元素的名称
value	字符串	元素的值
id	字符串	id名
size	数字	以字符个数设定的元素宽度
maxlength	数字	元素接收字符数的上限
checked		元素是否杯选中
placeholder	字符串	文本框提示语

select标签（搭配option标签使用）

select元素主要是表单的下拉选择框

<select name="元素名称" id="id名">
        <option value="">选项1</option>
        <option value="">选项2</option>
        <option value="">选项3</option>
        <option value="">选项4</option>
</select>

在这里插入图片描述

h5的标准下，如果没有value则，默认就是内容的值

属性名称	属性值	属性作用
option	子标签	下拉框中的选项
value	字符串	option标签中选项的值
name	字符串	下拉框的名称
multiple	“multiple”	以列表形式显示

注意：当select标签设置 multiple属性时，select以列表形式显示，当select标签不设置 multiple属性时，以下拉框形式显示。列表框在选择时按住键盘的ctrl或shix 键可以实现多选，而下拉框只能单选

textarea标签

textarea 表示也是表单标签的三大核心元素之一。

<textarea name="元素名称" id="id名" cols="文本框宽度" rows="文本框高度">文本框中的起始内容</textarea>

<textarea name="元素名称" id="id名" cols="100px" rows="30px">请输入</textarea>

属性名称	属性值	属性作用
name	字符串	文本框名称
cols	px像素	文本框宽度
rows	px像素	文本框高度

button标签

<button> 标签在HTML中用于创建可点击的按钮。它允许你收集用户的点击操作并执行相应的动作。<button> 标签非常灵活，你可以通过不同的属性和事件来定制它的外观和行为。

基本语法

<button type="reset">点击我</button>

在这个基本示例中，<button> 标签内的文本是按钮上显示的文本内容，type 属性指定了按钮的类型。对于普通的按钮，通常使用 type="button"。

主要属性

type：定义按钮的类型。常见的类型有：
- submit：用于提交表单数据到服务器。
- reset：用于重置表单中的所有输入字段到初始值。
- button：普通按钮，点击时不会自动提交表单或重置表单。
value：对于提交按钮，value 属性定义了当提交表单时发送的数据。对于重置按钮和普通按钮，这个属性通常不使用。
autofocus：指定页面加载时自动聚焦到此按钮。如果有多个按钮设置 autofocus，通常只有第一个会获得焦点。
disabled：将按钮设置为不可用状态，用户无法点击它。
form：指定按钮所属的表单。这样，即使按钮不在表单内部，它也可以与表单关联并触发相应的动作。
name：定义按钮的名称，当按钮是提交类型时，这个名称和值会随表单数据一起发送到服务器。

<body>
    <button type="submit">提交</button>
    <br>
    <input type="submit" value="提交">
</body>

在这里插入图片描述

<button type="button" disabled>不可点击的按钮</button>

在这里插入图片描述

事件

<button> 标签支持各种JavaScript事件，如 onclick、onfocus、onblur 等。这些事件允许你在用户与按钮交互时执行特定的JavaScript代码。

label标签

在HTML中，label的作用是定义一个描述性标签，它通常与表单控件（如输入框、复选框、单选按钮等）相关联。for属性指定了元素与哪个表单控件相关联，其值应与相关联的表单控件的id属性值相匹配。

基本语法

第一种写法

<label for="inputId">描述文本</label>
<input type="text" id="inputId" name="name">

第二种写法 (隐式关联)

<label for="">
	姓名
	<input type="text">
</label>

在这个例子中，<label> 标签通过 for 属性与 <input> 元素相关联。for 属性的值应该与相应表单控件的 id 属性值匹配。这样，当用户点击 <label> 中的文本时，浏览器会自动将焦点移到相关联的表单控件上。

主要属性

for：指定 <label> 与哪个表单控件相关联。它的值应该与表单控件的 id 属性值相匹配。

示例

<!-- 使用 for 属性将 label 与 input 元素关联 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 将 label 直接包裹在 input 元素周围，隐式关联 -->
<label>
  邮箱地址：
  <input type="email" name="email">
</label>

在第二个示例中，<label> 标签直接包裹了 <input> 元素，这样也可以建立它们之间的关联，而无需使用 for 和 id 属性。这是隐式关联的方式，也是完全有效的。

示例

<!-- 普通按钮 -->
<button type="button" onclick="alert('你点击了按钮！')">点击我</button>

<!-- 提交按钮 -->
<form action="/submit" method="post">
  <button type="submit" name="submitBtn">提交表单</button>
</form>

<!-- 重置按钮 -->
<form>
  <input type="text" name="username">
  <button type="reset">重置</button>
</form>

<!-- 禁用按钮 -->
<button type="button" disabled>不可点击的按钮</button>

作业

<!DOCTYPE html>
<html>
    <title>作业表格一</title>
    <body>
      <h1><b>工商银行电子汇款单</b></h1>
      <p>
        <table border="1" cellspacing="0">
            <tr>
                <td colspan="2"><b>回单类型</b></td>
                <td>网上转账汇款</td>
                <td colspan="2"><b>指令序号</b></td>
                <td>HQH00000000000000013878172</td>
            </tr>
            <tr>
                <td rowspan="4" width="20"><b>收款人</b></td>
                <td>户名</td>
                <td>老牟</td>
                <td rowspan="4" width="20"><b>付款人</b></td>
                <td>户名</td>
                <td>老刘</td>
            </tr>
            <tr>
                <td><b>卡号</b></td>
                <td>000000000001</td>
                <td><b>卡号</b></td>
                <td>000000000002</td>
            </tr>
            <tr>
                <td>地区</td>
                <td>南京</td>
                <td>地区</td>
                <td>杭州</td>
            </tr>
            <tr>
                <td><b>网点</b></td>
                <td>工商江苏南京业务处理中心</td>
                <td><b>网点</b></td>
                <td>江苏徐州业务中心</td>
            </tr>
            <tr>
                <td colspan="2"><b>币种</b></td>
                <td>人民币</td>
                <td colspan="2"><b>钞汇标志</b></td>
                <td><u>钞票</u></td>
            </tr>
            <tr>
                <td colspan="2"><b>金额</b></td>
                <td>1.00元</td>
                <td colspan="2"><b>手续费</b></td>
                <td>0.57元</td>
            </tr>
            <tr>
                <td colspan="2"><b>合计</b></td>
                <td colspan="6">人民币（大写）：壹圆整</td>
            </tr>
            <tr>
                <td colspan="2"><b>交易时间</b></td>
                <td>2017年6月1日</td>
                <td colspan="2"><b>时间戳</b></td>
                <td>2017-06-01-13.00.00。00000</td>
            </tr>
        </table>
      </p> 
      <p>票据打印时间：2017-06-01 15:00:12</p>
      <p>
        <del>票据打印单位：江苏徐州业务中心</del>
      </p>
      <p>操作员：大曾</p>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
    <title>李白诗词</title>
<table>
    <tr>
        <td><h1>将进酒</h1></td>
        <td><h2><b>君不见黄河之水天上来</b></h2></td>
    </tr>
</table>
<body>
    <table>
        <tr>
            <td>
                <img src="./img/李白.jpg" width="300" height="480">
            </td>
            <td>
                <p>君不见黄河之水天上来，奔流到海不复回。</p>
                <p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
                <p>人生得意须尽欢，莫使金樽空对月。</p>
                <p>天生我材必有用，千金散尽还复来。</p>
                <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
                <p>岑夫子，丹丘生，将进酒，杯莫停。</p>
                <p>与君歌一曲，请君为我倾耳听。</p>
                <p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
                <p>古来圣贤皆寂寞，惟有饮者留其名。</p>
                <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
                <p>主人何为言少钱，径须沽取对君酌。</p>
                <p>五花马，千金裘，</p>
                <p>呼儿将出换美酒，与尔同销万古愁。</p>
            </td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
    <title>电影推荐</title>
    <table>
        <tr><h1>热门电影板块</h1></tr>
    </table><hr>
    <table>
        <tr>
            <td width="150"><h3>最近热门电影</h3></td>
            <td width="50">热门</td>
            <td width="50">最新</td>
            <td width="80">豆瓣高分</td>
            <td width="80">冷门佳片</td>
            <td width="50">华语</td>
            <td width="50">欧美</td>
            <td width="50">韩国</td>
            <td width="150">日本</td>
            <td width="100">更多>></td>
        </tr>
    </table><hr>
    <table>
        <tr>
            <td><img src="./img/1917.png" width="200" height="320"></td>
            <td><img src="./img/伸冤人.png" width="200" height="320"></td>
            <td><img src="./img/超人：钢铁之躯.png" width="200" height="320"></td>
            <td><img src="./img/老无所依.png" width="200" height="320"></td>
        </tr>
        <tr>
            <td width="200">19178.5</td>
            <td width="200">伸冤人7.8</td>
            <td width="200">超人：钢铁之躯7.3</td>
            <td width="200">老无所依8.3</td>
        </tr>
        <tr>
            <td><img src="./img/风中有朵雨做的云.png" width="200" height="320"></td>
            <td><img src="./img/新蝙蝠侠.png" width="200" height="320"></td>
            <td><img src="./img/法兰西特派.png" width="200" height="320"></td>
            <td><img src="./img/信条.png" width="200" height="320"></td>
        </tr>
        <tr><td width="200">风中有朵雨做的云</td>
            <td width="200">新蝙蝠侠</td>
            <td width="200">法兰西特派</td>
            <td width="200">信条</td>
        </tr>
    </table>
</html>

^～^前行者～～～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
一篇详解常用HTML标签

前端:给用户看的内容 – 荧幕前（负责显示）后端:在后台处理数据 – 荧幕后（负责处理）全栈:前后端都会能独立开发一个完整的网站(全能型)B：browser，浏览器S：server，服务器平时浏览页面可见到的前端部分 – 浏览器真正实现操作进行数据增删改查的后端部分 – 服务器1.对于设计者来说容易实现2.对于编程者来说容易开发3.对于管理者来说容易维护4.对于浏览者来说容易使用html是超文本标记语言，是构成web页面的基本元素，是一种规范，一种标准什么是超文本呢？超文本是比普通文
复制链接

扫一扫