HTML基础01
一、初识HTML -> Hyper Text Markup Language
1. W3C标准
World Wide Web Consortium (万维网联盟)
成立于１９９４年，Ｗｅｂ技术领域最权威、最具影响力的国际“中立性”技术标准机构
http://www.w3.org //以org结尾就是开源的意思
http://www.chinaw3c.org/ //中国的
2. W3C标准包括
- 结构化标准语言 (HTML,XML)
- 表现标准语言 (CSS)
- 行为标准(DOM,ECMAScript)
整个HTML就是一颗树! 根节点 --> HTML
二、 进入HTML
<html>
<head>
<title>My first Web</title> <!-- 网页头部-->
</head>
<body>
My first Web <!--主体部分-->
</body>
</html>
单独呈现的标签(空元素),如
; 意为用/来关闭空元素
<!--DOCTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部 -->
<head>
<!--mete描述性标签，它用来描述我们网站的一些信息-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="小刘学HTML">
<meta name="description" content="自己学习HTML">
<!--title网页标题-->
<title>My first Web demo</title>
</head>
<!--body标签代表网页主体 -->
<body>
Hello World！
</body>
</html>
三 、网页基本标签
1. 标题标签
2. 段落标签
3. 换行标签
4. 水平线标签
5. 字符样式标签
6. 注释和特殊符号
<!--标题标签headline-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<!--段落标签paragraph-->
<p>再小的帆也能远航，坚持与努力</p>
<p>你，好不好？</p>
<!--换行标签Line breaks-->
<!--HTML中<>都是成对出现的，如果出现了单个的<>符号，记得加</>闭合标签-->
我喜欢你，知不知道？<br/>
我喜欢吃烤肉 <br/>
<!--水平线标签horizon-->
<hr/>
<!--字体样式标签-->
<!--粗体strong，斜体em-->
<h1>字体样式标签</h1>
<strong>粗体：我要吃烤肉</strong>
<em>斜体：我要吃烤肉</em>
<!--特殊符号-->
<!--在HTML中空格是特殊符号，使用 进行表示，否则 无论打多少空格只显示一个空格-->
空 格
<br/>
空 格
<br>
> <!--大于号-->
<br>
< <!--小于号-->
<br>
©版权所有：小刘
<!--
特殊符号记忆方式
& ;
-->
四、 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--img学习
src：图片地址
相对地址(路径) (推荐使用) 绝对地址(路径)
../ --代表上一级目录 将盘符写死称为绝对地址
alt：图片名字 (如果加载不出来)
-->
<img src="../resources/image/1.png" alt="img学习截图"title="img学习截图"width="2400"height="1080">
</body>
</html>
五、 链接标签 (重点!)
1. 超链接
1. 页面间链接
从一个页面链接到另一个页面
2. 锚链接
点击锚链接可以跳到指定位置
3. 功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--a标签学习
href：必填，表示要跳转到哪个界面
target：表示窗口在哪里打开
_blank 在新标签页中打开
_self 在自己的网页中打开
-->
<!--使用name作为标记-->
<!--使用id作为标记-->
<a name = "top_01">顶部1</a>
<br>
<a id="top_02">顶部2</a>
<br>
<a href="#down">点击我跳转到底部</a>
<br>
<a href="1.My first Web.html">点击我跳转到页面一</a>
<br>
<a href="https://www.baidu.com"target="_self">点击我跳转到百度</a>
<br>
<br>
<a href="2.基本标签.html">点击我跳转到基本标签</a>
<br>
<br>
<br>
<a href="3.图像标签.html">
<img src="../resources/image/1.png" alt="img学习截图"title="img学习截图"width="50"height="50">
</a>
<br>
<br>
<a href="1.My first Web.html"target="_blank">点击我跳转到页面一</a>
<br>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top_01">回到顶部01</a>
<br>
<a href="#top_02">回到顶部02</a>
<br>
<a id="down">down</a>
<br>
<!--功能性链接
邮件链接：mailto:
-->
<a href="mailto:631062568@qq.com">点击联系我</a>
</body>
</html>
六. 块元素与行内元素
1. 块元素
无论内容多少,该元素独占一行
2. 行内元素
内容撑开宽度,左右都是行内元素的可以排列在一行
七. 列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷、问答···
-->
<or>
<li>有序列表</li>
<li>大一：C/C++、数据结构</li>
<li>大二：JavaSE、算法分析、JavaWeb、数据库、计算机组成原理</li>
<li>学习路线：C/C++、JavaSE、Java进阶、底层、HTML、CSS、JavaScript、Mysql、JavaWeb</li>
<li>加油！再小的帆也能远航</li>
</or>
<hr/>
<!--无序列表
应用范围：导航、侧边栏···
-->
<ur>
<li>无序列表</li>
<li>- + 空格</li>
<li>显示一个小黑点表示无序列表</li>
<li>该努力了</li>
<li>加油加油加油</li>
</ur>
<hr/>
<!--自定义列表
dl：标签
dt：列表标题
dd：列表内容
应用范围：公司列表底部，进行补充内容介绍
-->
<dl>
<dt>Java学习路线</dt>
<dd>C/C++、JavaSE、Java进阶、底层、HTML、CSS、JavaScript、Mysql、JavaWeb</dd>
<dd>C/C++、JavaSE、Java进阶、底层、HTML、CSS、JavaScript、Mysql、JavaWeb</dd>
<dd>C/C++、JavaSE、Java进阶、底层、HTML、CSS、JavaScript、Mysql、JavaWeb</dd>
<dd>C/C++、JavaSE、Java进阶、底层、HTML、CSS、JavaScript、Mysql、JavaWeb</dd>
<dd>C/C++、JavaSE、Java进阶、底层、HTML、CSS、JavaScript、Mysql、JavaWeb</dd>
</dl>
</body>
</html>
八. 表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签学习</title>
</head>
<body>
<!--表格table
行：tr rows
列：td
-->
<table border="1px">
<tr>
<!--colspan 跨列-->
<td colspan="3"> 课程表 </td>
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan="2">2333 </td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
</tr>
</table>
</body>
</html>
九. 媒体元素
1. 视频元素
video
2. 音频元素
audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--音频与视频
src：资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resources/video/偷塔.mp3"controls autoplay></video>
<audio src="../resources/audio/2333.mp4" controls autoplay></audio>
</body>
</html>
十. 页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<!--
网页结构分析
-->
<header> <h2>网页头部</h2> </header>
<section> <h2>网页主体</h2> </section>
<footer > <h2>网页脚部</h2> </footer>
</body>
</html>
十一. iframe内联框架
1. iframe内联框架
<iframe src="path" name="mainFrame"></iframe>
path中放“引用页面地址” mainFrame中放“框架标识名”
2. iframe标签是什么？
iframe标签用于在当前网页中嵌入另一个网页或文档。它提供了一种将外部内容嵌入到网页中的方法，并且可以在一个页面中显示来自不同源的内容
3. iframe标签的作用是什么？
- 嵌入其他网页：通过指定
src属性，可以将其他网页嵌入到当前页面中。 - 显示多个来源：可以在一个页面中同时显示来自不同源的内容。
- 分割页面：可以将一个页面分割成多个区域，每个区域显示不同的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架学习</title>
</head>
<body>
<!--内联框架
src：地址
-->
<iframe src="../resources/audio/2333.mp4" name="hello" frameborder="0" width="1000" height="1080"></iframe>
<!--<a href="../resources/audio/2333.mp4" target="hello">点击跳转</a>-->
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构