整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一下html中文件标签和文本标签的使用
目的是学会使用，所以借助工具可以省好多时间
1.文件标签：构成html最基本的标签
html:html文档的根标签
head：头标签。用于引入html文档的一些属性。引入外部的一些资源
title：标题标签
body：体标签
<!DOCTYPE html>:html5中定义该文档是html
2.文本标签：和文本有关的标签
注释:<!-- 注释内容 –->
<h1> 到<h6>:标题标签自带换行的效果
<p>：表示段落的标签
<br>：换行标签<br/>和<br>的写法都不会报错
<hr>：显示一条水平线（也是一个自闭和标签）水平线有一些属性我们可以控制它的样式。hr里面表示高度是size而不是height.对齐方式默认是居中的。
<b>：字体加粗
<i>：斜体
<font>:字体标签（通过属性来修改字体的字号，大小，颜色，以及字体的样式）
<center>:文本居然标签
这里讲下网页下面的版权标签是如何写出来的。
3.图片标签：用来展示图片的（图片也是一个自闭合标签）
属性:src:用来指定图片的位置
什么都不写默认就是./的形式
../表示上一级目录
4.列表标签：
有序列表:ol,li(li表示的是列表的每一项)
无序列表:ul,li
5.链接标签：
a:定义一个超链接
属性：
href:指定访问资源的URL(统一资源定位符，就是路径的表示形式)
target：（是目标的意思）指定打开资源的方式
_self:在当前页面打开
_blank:在空白页面打开
6.表格标签：在HTML中的表格只有行的概念，没有列的概念，将表格以行的形式进行分割，然后再对行进行操作。
table:定义表格
width:表格的宽度
border:边框
cellpadding:单元格内容左对齐（定义内容和单元格的距离）
cellspacing:边框合并(定义单元格之间的距离，如果指定为0，单元格的线会合为一条)
bgcolor:背景色
align:表格的对齐样式
tr:定义行
bgcolor:背景色
align:表格的对齐样式(是用来修改文本的对齐方式的)
td:定义单元格
colspan:合并列
rowspan:合并行
th:定义表头单元格
<caption>:表格标题
<thread>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分
7.块标签：div和span是结合css使用的
span:文本信息在一行显示，行内标签，内联标签(意思就是它不会换行)
div:是会换行的。每一个div占满一整行。块级别的标签
8.语义化标签：html5中为了提高程序的可读性，提高了一些标签
<header>
<footer>
这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
天不言而四时行，
地不语而百物生。
- 2024.03.11 -
在数字世界的构建中，字体不仅仅是文字的外衣，更是情感和风格的传递者。作为网页设计师和前端开发者，掌握HTML中的字体标签，能够让我们创造出更加丰富和吸引人的用户体验。
今天，就让我们一起走进HTML字体标签的世界，探索它们如何让网页变得生动有趣。
语法结构：<标签 属性=“值”> 内容 </标签>
1、标题标签< h1> - < h6>
标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行。
示例：
<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>2、字体标签<font>
在HTML中，最常用的字体标签非<font>莫属，虽然现代开发中更推荐使用CSS来控制字体样式，但了解它的历史仍然有其必要性。<font>标签允许我们通过color、size和face属性来改变字体的颜色、大小和类型。
例如，如果我们想要显示红色Arial字体的文字，我们可以这样写：
<font color="red" size="5" face="Arial">这是红色Arial字体的文字</font>这行代码的意思是：
注意：虽然标签在HTML4.01中是有效的，但在HTML5中已经被废弃，建议使用CSS来进行样式定义。
3、字号大小：<font size="n">
字号大小在网页设计中同样重要，它直接影响着阅读体验。HTML允许我们通过<font size="n">来调整字体的大小，其中“n”可以是1到7的数字。
例如：
<!DOCTYPE html>
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<p><font size="5">This is a paragraph with font size 5.</font></p>
<p><font size="10">This is a paragraph with font size 10.</font></p>
<p><font size="15">This is a paragraph with font size 15.</font></p>
</body>
</html>运行结果：
不过，现代网页设计更倾向于使用CSS来控制字号，以便更精细地调整字体大小。
4、粗体标签
<b>：这个标签用于将文本加粗显示，相当于英文中的bold。它不会改变字体，只是使文本看起来更粗体。
<p><b>这是加粗的文本</b></p><strong>：与<b>标签类似，<strong>标签也用于表示加粗的文本。
<p><strong>这是重要的文本</strong></p>但在HTML5中，<strong>标签被赋予了语义，用来表示重要的文本内容。
5、斜体字标签
<i>：这个标签用于将文本设置为斜体，相当于英文中的italic。
<p><i>这是斜体的文本</i></p><em>：与<i>标签类似，<em>标签也用于表示斜体文本。
<p><em>这是强调的文本</em></p>但在HTML5中，<em>标签被赋予了语义，用来表示强调的文本内容。
6、删除字标签
<del>：这个标签用于表示删除的文本，常用于表示不再准确或已过时的内容。比如原价与现价。
<p>原价：<del>100元</del></p>
<p>现价：80元</p>运行之后是这样子的：
在上述示例中，原价为100元，但已被删除，因此使用标签将其包围起来。这样，浏览器会显示删除线来表示该文本已被删除。
7、文本格式化标签 < div> < span>
< div> 标签用来布局，但是一行只能放一个< div> //大盒子，块元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>
<p>这是一个div</p>
</div>
<p>
<div>云端源想</div>
</p>
</body>
</html>如上图控制台所示（打开控制台的方式：F12）：<div>标签里面可以包含<p>标签，<p>标签，里面不可以放<div>标签。
< span> 标签用来布局，一行上可以多个 < span>//小盒子，行元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>1234</span>
<span>5678</span>
</body>
</html>8、其它字体标签
<mark>：这个标签用于突出显示文本，通常用于表示高亮的部分。
<small>：这个标签用于表示小号文本，通常用于表示版权声明或法律条款等次要信息。
<ins>：这个标签用于表示插入的文本，常用于表示新增的内容。
<sub> 和 <sup>：这两个标签分别用于表示下标和上标文本，常用于数学公式或化学方程式中。
尽管上述标签可以直接在HTML中使用，但现代网页设计越来越倾向于使用CSS来控制文本的样式，因为CSS提供了更多灵活性和控制能力。
使用CSS类和样式规则可以更有效地管理网站的整体样式，并且可以更容易地适应不同设备和屏幕尺寸。
因此，如果您正在学习或更新您的网页设计知识，建议学习和使用CSS来控制字体和其他文本样式，关于HTML的这些标签了解一下就可以了。
总之，字体是网页设计中不可或缺的元素，它们就像是网页的语言，传递着信息和情感。通过HTML字体标签的学习和应用，我们可以让我们的网页“字”得其乐，让每一位访问者都能享受到更加美妙的网络体验。不断探索和实践，让我们的网页在字体的世界里绽放光彩吧！
今天就先讲到这里了，
更多前端开发基础知识点击文末阅读原文查看哦！
记得关注【云端源想IT】一起学编程！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
TML（HyperText Markup Language）是一种用于创建网页的标准标记语言。在HTML中，"元素"和"标签"是构建网页的基本组成部分，它们一起定义了网页的结构和内容。HTML标签是用来定义HTML元素的开始和结束的，而HTML元素是由标签及其包含的内容组成的。
参考文档：https://www.cjavapy.com/article/3303/
HTML元素指的是从开始标签到结束标签的所有内容。它们是HTML文档的构建块，用于创建和组织网页内容。HTML元素可以包含文本、图片、链接、表格等多种类型的数据。元素可能包括一个开始标签和一个结束标签，也可能只有一个标签（在自闭合元素的情况下）。
1） <!DOCTYPE> 声明
用于定义文档类型，告诉浏览器此文档使用哪个HTML版本。
<!DOCTYPE html>2） <html>
根元素，包含整个HTML文档。
<html lang="en">
</html>3） <head>
包含文档的元数据，如标题、字符集声明和链接到样式表。
<head>
<title>页面标题</title>
<meta charset="UTF-8">
</head>4）<title>
定义文档的标题，显示在浏览器的标题栏或页面的标签页上。
<title>这是文档的标题</title>5）<body>
包含文档的所有可见内容，如文本、图片、链接和其他多媒体元素。
<body>
<h1>这是一个主标题</h1>
<p>这是一个段落。</p>
</body>6） <header>
定义一个区域或页面的头部，通常包含标题和导航链接。
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>7） <footer>
定义页面或区域的页脚部分，通常包含版权信息、联系信息等。
<footer>
<p>版权所有 © 2024</p>
</footer>8） <nav>
定义导航链接的部分，用于页面内或页面间的导航。
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
</ul>
</nav>9）<section>
定义文档中的一个独立部分，通常与标题一起使用。
<section>
<h2>章节标题</h2>
<p>这是该章节的一些内容。</p>
</section>10. <article>
定义可以独立于内容其余部分的完整自包含内容，例如博客帖子或新闻文章。
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>11. <aside>
定义与周围内容稍微分离的内容，如侧边栏或广告栏。
<aside>
<p>这是一些附加信息。</p>
</aside>12. <figure> 和 <figcaption>
<figure> 定义独立的流内容（如图表、图像、代码示例等），<figcaption> 提供该内容的标题。
<figure>
<img src="image.jpg" alt="描述性文本">
<figcaption>图像标题</figcaption>
</figure>HTML标签是HTML元素的一部分，用于从逻辑上开始或结束一个元素。标签通常成对出现，包括一个开始标签和一个对应的结束标签，结束标签的名称前会有一个斜线（/）作为区分。有些HTML标签是自闭合的，意味着它们不需要结束标签，如图像标签（<img />）和换行标签（<br />）。
标签 | 说明 |
<!DOCTYPE> | 声明文档类型和HTML版本。 |
<html> | 标识一个HTML文档的根元素。 |
<head> | 包含了文档的元数据。 |
<title> | 指定文档的标题。 |
<body> | 包含了可见的页面内容。 |
<h1> - <h6> | 定义标题，从 <h1> 到 <h6> 重要性递减。 |
<p> | 定义段落。 |
<br> | 插入一个换行符。 |
<hr> | 在页面上绘制一条水平线。 |
<b> | 定义粗体文本。 |
<i> | 定义斜体文本。 |
<u> | 定义下划线文本。 |
<strong> | 定义重要文本。 |
<em> | 定义强调文本。 |
<mark> | 定义被标记或高亮的文本。 |
<small> | 定义小号文本。 |
<sub> | 定义下标文本。 |
<sup> | 定义上标文本。 |
<a> | 定义超链接。 |
<img> | 在页面中嵌入图像。 |
<ul> | 定义无序列表。 |
<ol> | 定义有序列表。 |
<li> | 定义列表项。 |
<table> | 定义表格。 |
<th> | 定义表格的表头单元格。 |
<tr> | 定义表格的行。 |
<td> | 定义表格单元。 |
<form> | 定义HTML表单。 |
<input> | 定义输入控件。 |
<textarea> | 定义多行文本输入控件。 |
<button> | 定义按钮。 |
<select> | 定义下拉列表。 |
<option> | 定义下拉列表中的选项。 |
<article> | 定义文章。 |
<section> | 定义文档中的一个区域（或节）。 |
<header> | 定义介绍性内容或导航链接的容器。 |
<footer> | 定义注脚或文档的页脚。 |
<nav> | 定义导航链接的部分。 |
<aside> | 定义侧边栏内容。 |
使用示例：
<!DOCTYPE html>
使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML标签使用示例</title>
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
<nav>
<a href="#content">主要内容</a> |
<a href="#contact-form">联系表单</a>
</nav>
</header>
<section id="content">
<article>
<h2>HTML基础</h2>
<p>HTML是构建网页的基石。<strong>标签</strong>是它的核心组成部分。<mark>本文</mark>介绍了一些最常用的HTML标签。</p>
</article>
<aside>
<h3>注意</h3>
<p>记得检查HTML5的新特性和标签。</p>
</aside>
<ul>
<li>文本标签</li>
<li>列表</li>
<li>表格</li>
<li>表单</li>
</ul>
<ol>
<li>先介绍基础</li>
<li>然后是进阶</li>
</ol>
<table>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><p></td>
<td>段落标签</td>
</tr>
<tr>
<td><a></td>
<td>链接标签</td>
</tr>
</table>
</section>
<section id="images">
<h2>图片</h2>
<img src="example.jpg" alt="示例图片">
</section>
<footer>
<section id="contact-form">
<h2>联系我们</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
</section>
<p>© 2024 HTML标签示例</p>
</footer>
</body>
</html>参考文档：Hhttps://www.cjavapy.com/article/3303/
*请认真填写需求信息，我们会在24小时内与您取得联系。
