接初识HTML中的基础知识，简单明了！！！

news2025/11/4 10:07:07

续——HTML的基础知识！！！

一、表格

关于HTML中用table表示一个表格，用tr来表示一行，用td来表示一列。

Demo：表示一个二行三列的表格

<!--根-->
<html>
    <!--头-->    
    <head>
          <title>my_website</title>
    </head>
    <!--体-->
    <body>
	     <table border = 1px width = 50%>
             <!--
               1.border = 1px 是设置表格的边框为一像素
               2.width = 50% 是占屏幕的50%宽
             -->
		        <tr>
				    <td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
				<tr>
				    <td>d</td>
					<td>e</td>
					<td>f</td>
				</tr>
		 </table>
    </body>
</html>

在这里插入图片描述

如果想设置的表格的高度和对齐方式，如下列代码：

<!--根-->
<html>
    <!--头-->    
    <head>
          <title>my_website</title>
    </head>
    <!--体-->
    <body>
	     <table align = "center" border = 1px width = 50% height = 150px>
             <!--
                align = center 是表格的对齐的方式，放在哪个地方就是对那个位置的对齐，如对表格整体的对齐，或者对行或列的                 对齐
             -->

		        <tr align = "center" >
				    <td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
				<tr align = "center">
				    <td>d</td>
					<td>e</td>
					<td>f</td>
				</tr>
		 </table>
    </body>
</html>

在这里插入图片描述

二、单元格合并

1.行单元格的合并

行单元格合并，采用rowspan来合成两个行单元格

Demo示例：

<!--根-->
<html>
    <!--头-->    
    <head>
          <title>my_website</title>
    </head>
    <!--体-->
    <body>
	     <table align = "center" border = 1px width = 50% height = 150px>
		        <tr align = "center" >
				    <td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
				<tr align = "center">
				    <td>d</td>
					<td>e</td>
					<td rowspan = "2" >f</td>
				</tr>
				<tr align = "center">
				    <td>g</td>
					<td>h</td>
					
				</tr>
		 </table>
    </body>
</html>

在这里插入图片描述

2.列单元的合并

列单元格的合并，采用colspan来合并两个列单元格

Demo：

<!--根-->
<html>
    <!--头-->    
    <head>
          <title>my_website</title>
    </head>
    <!--体-->
    <body>
	     <table align = "center" border = 1px width = 50% height = 150px>
		        <tr align = "center" >
				    <td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
				<tr align = "center">
				    <td>d</td>
					<td>e</td>
					<td>f</td>
				</tr>
				<tr align = "center">
				    <td colspan = "2" >g</td>
					<td>i</td>
				</tr>
		 </table>
    </body>
</html>

在这里插入图片描述

3.注意事项

  • 使用row合并时，删除下面那个单元格
  • 使用col合并单元格时，对删除哪一个单元格无要求
  • row表示行，col表示列

4.th标签

th标签也是单元格的标签，比td标签多的是可以将文字加粗、居中.

Demo：

<html>
    <!--头-->    
    <head>
          <title>my_website</title>
    </head>
    <!--体-->
    <body>
	     <table align = "center" border = 1px width = 50% height = 150px>
		        <tr align = "center" >
				    <td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
				<tr align = "center">
				    <td>d</td>
					<td>e</td>
					<td>f</td>
				</tr>
				<tr>
				    <th>g</th>
				    <th>h</th>
					<th>i</th>
				</tr>
		 </table>
    </body>
</html>

在这里插入图片描述

三、背景颜色

在HTML中使用bgcolor标签修改背景颜色。

Demo：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body bgcolor="blue">
    
    
    </body>
</html>

在这里插入图片描述

首先对这行代码 meta charset="UTF-8"解释：

这行代码的作用是告诉浏览器采用哪一种字符打开当前页面，并不是设置当前页面的字符编码方式。

四、背景图片

在HTML中使用background标签来插入背景图片。

Demo：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body background="QQ图片20230323164957.jpg" >


    </body>
</html>

在这里插入图片描述

五、插入图片

1.如何插入图片？

在HTML中，使用img标签插入图片。

Demo：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <img src="R-C.jpg">


    </body>
</html>

在这里插入图片描述

2.注意事项

（1）设置图片高度和宽度时，只设置宽度，高度会进行等比例的缩放。

（2）img标签就是图片标签。

（3）src属性是图片的路径。

（4）width设置宽度，height设置高度。

（5）title设置鼠标悬停时显示的信息。

<img src="R-C.jpg" title = "我是一张图片！">

（6）alt设置图片加载失败时显示的提示信息。

<img src="R-C.jpg" alt = "图片找不到！">

六、超链接

1.文字超链接

在HTML中使用a标签表示超链接。

Demo：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <a href="https://www.jd.com/">京东</a>

    </body>
</html>

在这里插入图片描述

点击就会转到京东界面！

注：（1）href：hot reference（热引用）

（2）href这个属性后面一定是资源的地址，该路径可以是绝对路径，也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。

（3）超链接的特点：

  • 有下划线
  • 鼠标悬停在超链接上有小手形状，点击后会跳转网页

2.图片超链接

1.代码显示

Demo：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <a href="https://www.jd.com/">
        <img src="R-C.png" width="5%">
    </a>

    </body>
</html>

在这里插入图片描述

2.注意事项

超链接有target属性，其取值可位：

  • -blank：打开一个新窗口，显示页面内容
  • -self：在当前窗口显示页面内容
  • -top：顶级窗口（在连续打开的多个窗口中，第一个打开的窗口就是顶级窗口）
  • -parent：父窗口（当前窗口的上一个窗口就是父窗口）

3.超链接的作用

通过超链接可以从浏览器向服务器发送请求

  • 浏览器向服务器发送数据（叫作请求：request）
  • 服务器向浏览器发送数据（叫作响应：response）
  • B/S结构的系统，每一个请求都会对应一个响应

4.超链接的方便

用户点击超链接和用户在浏览器地址栏上直接输入URL（网址），在本质上没有区别，都是向服务器发送请求，从操作上来讲，超链接的使用更加方便。

七、列表

1.无序列表

在HTML中使用ul标签表示列表。

Demo：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        <li>中国
            <ul>
                <li>四川
                    <ul>
                        <li>资阳</li>
                        <li>内江</li>
                        <li>成都</li>
                    </ul>
                </li>
                <li>湖南</li>
                <li>云南</li>
            </ul>
        </li>
        <li>美国</li>
        <li>韩国</li>
        <li>英国</li>
    </ul>
    </body>
</html>

在这里插入图片描述

2.有序列表

在HTML中，使用ol来表示有序列表。
Demo：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <Ol TYPE="I">
        <li>中国
            <Ol type="A">
                <li>四川
                    <Ol type="1">
                        <li>资阳</li>
                        <li>内江</li>
                        <li>成都</li>
                    </Ol>
                </li>
                <li>湖南</li>
                <li>云南</li>
            </Ol>
        </li>
        <li>美国</li>
        <li>韩国</li>
        <li>英国</li>
    </Ol>
    </body>
</html>

在这里插入图片描述

type属性，可以改变列表用什么符号来作序号！

以上就是本期博客的全部内容，下期博客还会继续介绍关于HTML的基础知识，请大家耐心等待博主的更新！！！

如果各位小伙伴发现本期博客中有问题或者有不懂的地方欢迎提出（后台私信）！！！

志坚者，功名之柱也。登山不以艰险而止，则必臻乎峻岭.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/542138.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

瑞吉外卖 - 文件上传与下载功能（15）

瑞吉外卖 - 文件上传与下载功能（15）

某马瑞吉外卖单体架构项目完整开发文档&#xff0c;基于 Spring Boot 2.7.11 JDK 11。预计 5 月 20 日前更新完成&#xff0c;有需要的胖友记得一键三连&#xff0c;关注主页 “瑞吉外卖” 专栏获取最新文章。 相关资料&#xff1a;https://pan.baidu.com/s/1rO1Vytcp67mcw-PD…
阅读更多...
pandas dataframe 中 explode()函数用法及效果

pandas dataframe 中 explode()函数用法及效果

最近在使用pyspark处理数据&#xff0c;需要连接各种各样的表和字段&#xff0c;因此记录相关函数的使用情况。今天介绍explode(). 1. explode()函数简介 explode 函数是 pandas.DataFrame 类的一个方法&#xff0c;能够通过pyspark间接调用。 它可以将一个包含list或者其它可…
阅读更多...
【零基础学JS - 7 】javaScript 中的8大数据类型

【零基础学JS - 7 】javaScript 中的8大数据类型

&#x1f468;‍&#x1f4bb; 作者简介&#xff1a;程序员半夏 , 一名全栈程序员&#xff0c;擅长使用各种编程语言和框架&#xff0c;如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个…
阅读更多...
Python之selenium关于Chrome驱动位置，闪退的问题和安装路径

Python之selenium关于Chrome驱动位置，闪退的问题和安装路径

目录 零、查看Python的安装路径一、Chromedriver放置的位置二、浏览器闪退 零、查看Python的安装路径 一、Chromedriver放置的位置 背景&#xff1a;之前由于Chrome浏览器自动升级后&#xff0c;导致驱动与浏览器不匹配&#xff0c;自己也不知道问题出在哪儿&#xff0c;花费了…
阅读更多...
hadoop和spark配置问题记录

hadoop和spark配置问题记录

hadoop和spark配置问题记录 Spark的WebUI访问不了 直接启动的start-all.sh是环境变量中配置的hadoop的脚本&#xff0c;不是spark的&#xff0c;因此启动spark的start-all.sh脚本即可。 Spark看不到Worker信息 启动Spark在UI界面上看不到worker节点的信息_潇洒哥WH3的博客-C…
阅读更多...
【Java|基础篇】包和访问权限修饰符

【Java|基础篇】包和访问权限修饰符

文章目录 1. 前言2. 包的概念3. 包的创建以及优点4. 访问权限修饰符5. 总结 1. 前言 包和访问权限修饰符是Java中两个常用的概念&#xff0c;它们都与访问控制有关. 2. 包的概念 在面向对象体系中&#xff0c;提出了一个软件包的概念&#xff0c;即&#xff1a;为了更好的管…
阅读更多...
代码随想录算法训练营第四十四天 | 完全背包、完全背包的遍历顺序

代码随想录算法训练营第四十四天 | 完全背包、完全背包的遍历顺序

完全背包 理论基础 文档讲解&#xff1a;代码随想录 (programmercarl.com) 视频讲解&#xff1a;带你学透完全背包问题&#xff01; 和 01背包有什么差别&#xff1f;遍历顺序上有什么讲究&#xff1f;_哔哩哔哩_bilibili 完全背包和01背包问题唯一不同的地方就是&#xff0c;每…
阅读更多...
品牌战略规划：如何让你的品牌脱颖而出

品牌战略规划：如何让你的品牌脱颖而出

虽然很多国内企业家都非常重视战略&#xff0c;什么商业战略、渠道战略之类的一通研究&#xff0c;但惟独却缺乏对品牌战略的一个正确理解。 很多时候一把手不参与&#xff0c;也不关心品牌建设&#xff0c;经常上来就让团队实操动作&#xff0c;而自己只看最终结果&#xff0…
阅读更多...
LeetCode20.有效的括号

LeetCode20.有效的括号

题目 思路 每一个右括号应该与与在它左边最近的左括号相匹配&#xff0c;所以这道题可以通过栈实现 代码 &#x1f4ac;由于博主还没有学习到C&#xff0c;能力有限&#xff0c;所以只能自己实现一个栈&#xff0c;学过C的朋友可以直接使用CSTL中的栈来实现 #define _CRT_S…
阅读更多...
深入理解事务的隔离性 —— 多版本并发控制（ MVCC ）

深入理解事务的隔离性 —— 多版本并发控制（ MVCC ）

文章目录 一、数据库并发的三种场景二、多版本并发控制&#xff08;MVCC&#xff09;的初步认识三、事务的隐藏列字段四、UNDO 日志五、Read View 读视图六、深入理解 MVCC —— 隔离级别的实现原理七、RC 与 RR 的本质区别 一、数据库并发的三种场景 数据库并发指的是多个用户…
阅读更多...
如何将Shapefile文件导入Sketch Up进行建模

如何将Shapefile文件导入Sketch Up进行建模

涉及软件&#xff1a;ArcGIS10.4.1&#xff0c;Sketch Up Pro2022 1.shapefile的属性编辑 基于我们已有的shp文件&#xff0c;打开属性表&#xff0c;添加一个高度字段用于存放平面图形高度信息&#xff0c;为后期三维拉伸做好准备&#xff08;如果已有相关信息&#xff0c;请…
阅读更多...
区间合并【pair、sort】

区间合并【pair、sort】

将有交集&#xff08;包括端点&#xff09;的区间进行合并 802. 区间和 - AcWing题库 例如&#xff0c;现在有这样一个数据 1 2 2 4 5 6 7 8 7 9最终合并的结果就是 1 —— 45 —— 67 —— 9 得到三个区间 第一步&#xff1a;按照区间左端点排序 第二步&#xff1a;扫描…
阅读更多...
【C++初阶】：模板初阶

【C++初阶】：模板初阶

模板初阶 一.函数模板1.简单使用2.模板原理3.函数模板的实例化4.模板参数的匹配原则 二.类模板1.基本格式2.类模板实例化 一.函数模板 1.简单使用 函数模板代表了一个函数家族&#xff0c;该函数模板与类型无关&#xff0c;在使用时被参数化&#xff0c;根据实参类型产生函数的…
阅读更多...
【OJ比赛日历】快周末了，不来一场比赛吗？ #05.20-05.26 #10场

【OJ比赛日历】快周末了，不来一场比赛吗？ #05.20-05.26 #10场

CompHub[1] 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号会推送最新的比赛消息&#xff0c;欢迎关注&#xff01; 以下信息仅供参考&#xff0c;以比赛官网为准 目录 2023-05-20&#xff08;周六&#xff09; #4场比赛2023-05-21…
阅读更多...
关于Compilation failed: internal java compiler error的解决方法(Idea)

关于Compilation failed: internal java compiler error的解决方法(Idea)

**idea编译项目时出现java: Compilation failed: internal java compiler error java:编译失败&#xff1a;内部java编译器错误 根本原因基本上有两个&#xff0c;一个jdk版本问题&#xff0c;一个堆栈不足问题&#xff0c;我这次就是堆栈不足导致的&#xff1b; 1、项目过大…
阅读更多...
IDOIEO盘点，包括PoseiSwap等即将面向市场的潜力打新活动

IDOIEO盘点，包括PoseiSwap等即将面向市场的潜力打新活动

本月即将推出几个值得关注的打新活动一览&#xff1a; 项目名&#xff1a;PoseiSwap 官网&#xff1a;poseiswap.xyz PoseiSwap 是 Nautilus Chain 上的首个 DEX&#xff0c; Nautilus Chain 作为目前行业内第一个并行化且运行速度最快EVM Rollup的L3扩容方案&#xff0c;其将…
阅读更多...
如何反转ggplot2中的图例键顺序

如何反转ggplot2中的图例键顺序

动动发财的小手&#xff0c;点个赞吧&#xff01; 在本教程[1]中&#xff0c;我们将学习如何反转 ggplot2 中图例键的顺序。 在 ggplot2 中&#xff0c;当我们在 aes() 中使用颜色或填充参数为变量着色时&#xff0c;我们会得到一个带有键的图例&#xff0c;显示哪些键匹配哪些…
阅读更多...
蓝奏云直链解析

蓝奏云直链解析

[玫瑰]蓝奏云直链获取在线解析网站源码 蓝奏云链接解析 本地API接口 [玫瑰]支持有无密码和短期直链和永久直链&#xff0c;同时还可以显示文件名和大小。 [玫瑰]这个解析器无需数据库即可搭建&#xff0c;API接口已经本地化&#xff0c;非常简单易用。 [玫瑰]解压密码 123321 链…
阅读更多...
zotero-style 摸索

zotero-style 摸索

打开zotero-编辑-首选项-style 可以看到图中所示的function界面 标签 刚安装好的时候原来自带的标签都不显示了&#xff0c;重启也没用&#xff0c;原来是不要勾选function下的title就好了 还有一种解决方法是&#xff0c;同时勾选title和tag&#xff0c;然后在标题栏右键&am…
阅读更多...
【数据结构】堆（Heap）

【数据结构】堆（Heap）

文章目录 前言一、堆1、 概念2、性质3、结构 二、堆的实现1、算法实现&#xff1a;向下调整算法向上调整算法(堆的创建)堆的插入堆的删除堆的排序 2、 代码实现(小堆)&#xff1a;堆的定义交换检查容量向下调整向上调整堆的初始化堆的创建销毁堆堆的插入堆的删除获取堆顶元素判…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023