ToB企服应用市场:ToB评测及商务社交产业平台

标题: HTML零基础讲授（REAL） [打印本页]

作者: 大连全瓷种植牙齿制作中心 时间: 2024-12-13 09:51
标题: HTML零基础讲授（REAL）
什么是HTML

一种超文本标记语言: HyperText Markup Language
常见误区：HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签
HTML文档的别名web 页面
HTML 使用标记标签来形貌网页
HTML 文档包含了HTML 标签及文本内容

入门

新建一个HTML文件（这里接纳的软件是HBuilderX）

<!DOCTYPE html> // 声明文档类型为HTML5
<html> // HTML文档的根元素
<head> // 文档的头部，包含元数据
<meta charset="utf-8"> // 设置文档的字符编码为UTF-8，支持多语言字符
<title></title> // 文档的标题，此处为空，应在<title>和</title>之间添加标题文本
</head>
<body> // 文档的主体，包含实际显示的内容
<h1>我的第一个标题</h1> // 一级标题，通常用于页面或章节的主要标题
<p>我的第一个段落。</p> // 段落，用于包含文本内容
</body>
</html>

复制代码

保存并运行，运行效果：

组成

头部：（即head里的部门：<head> 内容 </head>）

可用于添加网页的干系信息，如网页名，CSS样式等（CSS先做了解）

身体：（即body里的部门：<body> 内容 </body>）

标题：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>我是标题 1</h1>
<h2>我是标题 2</h2>
<h3>我是标题 3</h3>
<h4>我是标题 4</h4>
</body>
</html>

复制代码

运行效果：

HTML 标题（Heading）是通过<h1> - <h4> 标签来界说的。而且巨细徐徐减小。

段落：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>我是一个段落。</p>
<p>我是一个段落。</p>
<p>我是一个段落。</p>
</body>
</html>

复制代码

运行效果：

HTML 段落是通过标签 <p> 来界说的。
链接：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://blog.csdn.net/MeyrlNotFound?type=blog"> 引号内是引用的网址</a>
</body>
</html>

复制代码

运行效果：

点击即可跳转到该网址。
HTML 链接是通过标签 <a> 来界说的。
图像：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="我是图片.jpg" width="480" height="480" />
</body>
</html>

复制代码

HTML 图像是通过标签 <img> 来界说的。
注意： 图像的名称和尺寸以属性的情势提供。
图像后缀.jpg要打上，而且运行时图像要与html文件在一个文件夹中。
表格：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<th>Header a</th>
<th>Header b</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>

复制代码

运行效果：

表格由 <table> 标签来界说。每个表格有多行（由 <tr> 标签界说），每行被分割多个单元格（由 <td> 标签界说）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签举行界说。如果不界说边框属性，表格将不表现边框。

使用 <table> 标签来界说表格的开始。
使用 <tr> 标签来界说表格中的行。
使用 <th> 标签来界说表头单元格。
使用 <td> 标签来界说表格中的标准单元格。
使用 <caption> 标签来为表格添加标题。
使用 <colgroup> 和 <col> 标签来为表格中的一组列界说属性。
使用 <thead>、<tbody> 和 <tfoot> 来分别界说表头、主体和脚注部门。

下面是一个更详细的HTML表格示例：

<table>
<caption>学生成绩表</caption>
<colgroup>
<col style="background-color: #ffdddd;">
<col style="background-color: #ddffdd;">
<col style="background-color: #ddddff;">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>95</td>
<td>88</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
<td>98</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>90</td>
<td>92</td>
</tr>
</tfoot>
</table>

复制代码

其他：

段落和換行

＜p>：界说一个段落。
<br>：插入一个简朴的换行符。

<p>这是一个段落。</p>
sp>这是另一个段落。＜br>这是同一段落中的新一行。≤/p>

复制代码

文本格式化标签

<b> 或 <strong>：加粗文本（ <strong> 在语义上表示紧张性）。
<i> 或 <em>：斜体文本（<em>在语义上表示强调）。
<u>：下划线文本(不推荐用于表示强调，因为与链接的下划线可能混淆）。
<s> 或 <del>：刪除袋文本（<del> 在语义上表示被刪除的文本）。
<small>：小号文本。
<mark>：高亮文本（通常力黄色背景）。

<p>这是<b>加粗</b>文本。</p>
<p>这是<em>强调</em>文本。</p>
<p>这是<u>下划线</u>文本。</p>
<p>这是<s>删除线</s>文本。</p>
<p>这是<small>小号</small>文本。</p>
<p>这是<mark>高亮</mark>文本。</p>

复制代码

文本对齐

使用CSS 样式来控制对齐，而不是HTML标签。可以在<p>、<div>等标签内使用
style 属性来没置 text-align。

<p style="text-align:left;">左对齐文本。</p>
<p style="text-align:center;">居中文本。</p>
<p style="text-align:right;">右对齐文本。</p>

复制代码

引用和预格式化文本：

<blockquote>：界说长引用。
<q>：界说短引用。
<pre>：预格式化文本，保留空格和换行。

<blockquote>
这是一个长引用的例子。它通常用于表示从其他来源引用的较大段落。
</blockquote>
<p>这是<q>一个短引用</q>的例子。</p>
<pre>
这是预格式化文本。
它会保留所有的空格和换行。
</pre>

复制代码

上标与下标：

<sup> ：上标文本（常用于表示幂或脚注）。
<sub>：下标文本(常用于表示化学式中的下标）。

<p>这是上标文本：X<sup>2</sup></p>
<p>这是下标文本：H<sub>2</sub>O</p>

复制代码

插入特别字符：

HTML 提供了ー些安体来表示特别字符，比方表示空格，＆lt;表示小于号
< ，> 表示大于号 > 等。

<p>这是一个包含特殊字符的段落：<div>Hello, World!</div></p>

复制代码

尾部：

以</html>作结，与开头的<html>形成对应。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)