HTML零基础教学(REAL)

ops/2024/12/17 18:07:02/
htmledit_views">

什么是HTML

一种超文本标记语言: HyperText Markup Language

常见误区:HTML 不是一种编程语言,而是一种标记语言


标记语言是一套标记标签 

HTML文档的别名web 页面

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容
 

入门

新建一个HTML文件(这里采用的软件是HBuilderX)

html"><!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>)

标题:

html"><!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> 标签来定义的。并且大小逐渐减小。

段落:

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

运行结果:

HTML 段落是通过标签 <p> 来定义的。

链接:

html"><!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> 来定义的。

图像:

html"><!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文件在一个文件夹中。 

表格:

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> 标签进行定义。如果不定义边框属性,表格将不显示边框。

  1. 使用 <table> 标签来定义表格的开始。

  2. 使用 <tr> 标签来定义表格中的行。

  3. 使用 <th> 标签来定义表头单元格。

  4. 使用 <td> 标签来定义表格中的标准单元格。

  5. 使用 <caption> 标签来为表格添加标题。

  6. 使用 <colgroup> 和 <col> 标签来为表格中的一组列定义属性。

  7. 使用 <thead><tbody> 和 <tfoot> 来分别定义表头、主体和脚注部分。

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

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>: 插入一个简单的换行符。
html"><p>这是一个段落。</p>sp>这是另一个段落。<br>这是同一段落中的新一行。≤/p>
文本格式化标签
  • <b> 或 <strong>: 加粗文本( <strong> 在语义上表示重要性)。
  • <i> 或 <em>:斜体文本(<em>在语义上表示强调)。
  • <u>:下划线文本(不推荐用于表示强调,因为与链接的下划线可能混淆)。
  • <s> 或 <del>: 刪除袋文本(<del> 在语义上表示被刪除的文本)。
  • <small>: 小号文本。
  • <mark>:高亮文本(通常力黄色背景)。
html"><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。

html"><p style="text-align:left;">左对齐文本。</p>
<p style="text-align:center;">居中文本。</p>
<p style="text-align:right;">右对齐文本。</p>
引用和预格式化文本:

<blockquote>:定义长引用。

<q>:定义短引用。

<pre>:预格式化文本,保留空格和换行。

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

<sup> : 上标文本(常用于表示幂或脚注)。

<sub>:下标文本(常用于表示化学式中的下标)。

html"><p>这是上标文本:X<sup>2</sup></p>
<p>这是下标文本:H<sub>2</sub>O</p>
插入特殊字符:

HTML 提供了ー些安体来表示特殊字符,例如 &nbsp; 表示空格, &lt;表示小于号

< ,&gt; 表示大于号 >  等。

html"><p>这是一个包含特殊字符的段落:&lt;div&gt;Hello, World!&lt;/div&gt;</p>

尾部:

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


http://www.ppmy.cn/ops/142702.html

相关文章

2.Linux - 基础结构及命令

Linux - 基础结构及命令 文章目录 Linux - 基础结构及命令一、目录二、基础命令2.1 ls2.2.1 选项使用2.2.2 参数使用 2.2 目录切换 cd/pwd2.3 路径2.4 创建目录 mkdir2.5 文件操作命令2.5.1 创建文件 touch2.5.2 查看文件内容 cat/more2.5.3 复制文件/文件夹 cp2.5.4 移动文件/…

Leetcode1847:最近的房间

题目描述&#xff1a; 一个酒店里有 n 个房间&#xff0c;这些房间用二维整数数组 rooms 表示&#xff0c;其中 rooms[i] [roomIdi, sizei] 表示有一个房间号为 roomIdi 的房间且它的面积为 sizei 。每一个房间号 roomIdi 保证是 独一无二 的。 同时给你 k 个查询&#xff…

22. 正则表达式

一、概述 正则表达式&#xff08;regular expression&#xff09;又称 规则表达式&#xff0c;是一种文本模式&#xff08;pattern&#xff09;。正则表达式使用一个字符串来描述、匹配具有相同规格的字符串&#xff0c;通常被用来检索、替换那些符合某个模式&#xff08;规则&…

基于SpringBoot的“商务安全邮箱”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“商务安全邮箱”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构 收件箱效果图 草稿箱效果图 已发送效…

Facebook如何避免因IP变动而封号?实用指南

随着Facebook在个人社交与商业推广中的广泛应用&#xff0c;越来越多的用户面临因“IP变动”而被封号的问题。尤其是跨境电商、广告运营者和多账号管理用户&#xff0c;这种情况可能严重影响正常使用和业务发展。那么&#xff0c;如何避免因IP变动导致的封号问题&#xff1f;本…

Elasticsearch8.17.0在mac上的安装

1、下载并安装 下载8.17版本es(目前最新版本)&#xff1a;Download Elasticsearch | Elastic 也可以通过历史版本列表页下载&#xff1a;Past Releases of Elastic Stack Software | Elastic 当然也可以指定具体版本号进行下载&#xff1a;Elasticsearch 8.17.0 | Elastic …

前端-自定义Ant Design 表格(可编辑表格)

选取的的是&#xff1a;表格 Table - Ant Design 其实ant design本身就有增加和删除单列数据的封装好的表格&#xff0c;但是个人觉得那个功能繁多&#xff0c;自己实现封装也便于之后理解和二次使用。 初步效果&#xff08;舍去切换样式的功能&#xff09;&#xff1a; 突破的…

RabbitMQ:windows系统安装

一、安装erlang 1、我i们先安装erlangOtp 25.3.2.16 - Erlang/OTP 2、安装右键&#xff0c;选择以管理员身份运 点击next; 3、配置环境变量 4、验证是否安装成功 直接 win cmd 命令&#xff1a;erl 出现以下版本号则配置成功 二、安装RabbitMQ 1、官网下载RabbitMQ 在Inst…