本文介绍了HTML的基础概念，包括全局框架标签（如html、head、title和body）、注释、元素与属性，重点讲解了文本标签（如标题、段落、字体样式）、列表、表格、图片链接和基本样式设置。适合初学者快速掌握网页制作基础。
🏆今日学习目标：
🍀学习HTML基础
✅创作者：贤鱼
⏰预计时间：30分钟
🎉个人主页：贤鱼的个人主页
🔥专栏系列：网络安全
🍁贤鱼的个人社区，欢迎你的加入 贤鱼摆烂团
HTML基础
🍀概念
HTML是超文本标记语言（Hyper Text Markup Language）的缩写。它是一种描述文档结构的语言，使用描述性的标记符来指明文档的不同内容，这些标记用尖括号括起来，使用特定的字符表示特定的含义。可以满足跨平台的需要，使Web页面在各种系统上都能浏览。HTML语言是整个Web技术的基础，网页上的音像、图文，后台程序等都要通过HTML连接起来。
Web浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是显示其解析后的结果。
🍀基础语法
🍁全局框架标签
全局框架标签是html的重点，构成了整个网页的主题部分
具体的全局框架标签有以下几种
html 标签容器
head （）这个容器标签中包含了头文件的一系列标签
title （）标题标签种的内容会在浏览器标题栏中显示，是head唯一必须元素
body（） 主体标签，其中的内容会显示在页面上
<html></html>
<head></head>
<title></title>
<body></body>
<html>
<head>
<title>贤鱼第一个网页</title>
</head>
<body>
<h1>贤鱼第一个标题</h1>
<p>贤鱼第一个段落</p>
</body>
</html>
对应着图可以看到不同内容对应的东西
想必对于这个部分大家已经掌握
🍁注释
<!--这是单行注释-->
<!--
这是多行注释
这是多行注释
这是多行注释
-->
🍁元素
定义：
指的是从开始标签到结束标签的所有代码
空元素在开始标签中进行关闭（开始标签结束就结束）
元素可以拥有属性（大部分）
🍁属性
属性在html元素开始标签中规定
属性总是以名称/值对形式出现
属性名称小写，值加引号
| 属性 | 作用 |
|---|---|
| style | 设置标签样式 |
| src | 表示外部资源地址 |
| href | 标签< a >的指定地址 |
🍀标签
🍁文本标签
🎉标题
<html>
<head>
<title>贤鱼第一个网页</title>
</head>
<body>
<h1 align="right">一级标题</h1>
<h2 align="left">二级标题</h2>
<h3 align="center">三级标题</h3>
</html>
align用法
| 名字 | 作用 |
|---|---|
| right | 向右对齐 |
| center | 居中对齐 |
| left | 向左对齐 |
🎉段落
p标签中的内容就是段落
<html>
<head>
<title>贤鱼第一个网页</title>
</head>
<body>
<h1 align="right">一级标题</h1>
<h2 align="left">二级标题</h2>
<h3 align="center">三级标题</h3>
<p style="font-size: 40px;color: rgb(255, 0, 140);"align="right" >段落</p>
<p style="font-size: 40px;color: rgb(208, 255, 0);"align="left" >段落</p>
<p style="font-size: 40px;color: rgb(0, 26, 255);"align="center">段落</p>
</body>
</html>
align用法同上
font用法
size 设置体积
color设置颜色
🎉特殊字体
<b>粗体</b>
<i>斜体</i>
<u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>
🍁列表
🎉无序/有序列表
有序列表
<html>
<head>
<title>贤鱼第一个网页</title>
</head>
<body>
<ul>
<li type="none">1</li>
<li type="disk">2</li>
<li type="circle">3</li>
<li type="square">4</li>
</ul>
</body>
</html>
ul部分内就是无序列表，type是列表前图标
有序列表
<html>
<head>
<title>贤鱼第一个网页</title>
</head>
<body>
<ol start=1>
<li type="a">1</li>
<li type="c">2</li>
</ol>
</body>
</html>
type表示列表前方序号
🍁表格
🎉使用
<table border="1" cellpadding="10" cellspacing="10">
<caption>表格标题</caption>
<tr>
<th>表头1</th>
<th>表头2</th>
<th> </th>
</tr>
<tr>
<td >row 1, cell 1</td>
<td align="center">row 1, cell 2</td>
<td rowspan="2">row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td colspan="2">row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>
具体讲解一下每个部分的内容
<table> 标签用来定义表格
<caption> 标签用来定义表格的标题
<tr> 标签用来定义表格的行
<td> 标签用来定义表格的单元格
> 显示的就是表头2右边的空格
🎉边框
如果不定义边框，默认是不显示的
🎉跨行/列单元格
colspan 后面跟的值代码其横跨2列
rowspan 后面跟的值代表其横跨2行
🎉单元格内填充和外间距
cellpadding 指定单元格边框到文本内容之间的空白填充距离
cellspacing 指定两个单元格之间的距离
🎉单元格内排序内容
align={left,center,right} 指定了单元格内文本的对齐方式
🍁图片
<img src="URL" alt="替换文本" width="n" height="n" />
只能写致谢
🎉URL
统一资源定位器，用于定位照片地址
可以写互联网上的网址，也可以是自己电脑中的地址
🔥绝对路径/相对路径
绝对路径从当前文件所在盘符为起点到目标图片为终点的路径
相对路径相对路径：是以操作的文件所在的目录为起点的路径
🎉超链接
<a href="URL">这是一个超链接</a>
<html>
<head>
<title>我的第一个网页。</title>
</head>
<body>
<a href="https://www.baidu.com/?tn=02003390_19_hao_pg">这是一个超链接</a>
</body>
</html>
点击即可跳转到百度，url的部分就是网址
🍁标签样式
🎉设置背景颜色
<html>
<head>
<title>我的第一个网页。</title>
</head>
<body>
<xx style="background-color: red;">hahahah</xx>
</body>
</html>
1178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
