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

最新推荐文章于 2024-08-15 02:49:38 发布
最新推荐文章于 2024-08-15 02:49:38 发布
阅读量606 收藏 13
点赞数 15
分类专栏： My_HTML 文章标签： html 前端 javascript idea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74968164/article/details/130756523
版权

续——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的基础知识，请大家耐心等待博主的更新！！！

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

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

要努力点
关注
专栏目录
零基础入门篇④ 初识Python(注释、编码规范、关键字...)
hacker707的博客
04-09 1万+
Python从入门到精通👉零基础入门篇④
html有开始标签么,html标签
weixin_39627665的博客
07-22 451
HTML常用标签首先要知道html标签的一些特点：1.类似“”这样由尖括号包关键字组成，例如,……2.一般是成对出现的，由开始标签类似“元素内容”，左边标签一边叫开始标签，右边 >叫结束标签，有始有终，除了一些个别是单闭合标签的先记一些个别例外的单闭合标签，例如： 设置页面信息的 换行 水平线 表单元素，type不同输入字段拥有不同形式 定义frameset中的一...
【HTML表格】
qq_43760556的博客
02-24 348
1、基础标签 1、<table></table> 表示一个表格，表格里的行列用tr和td表示，tr，td需要写在table中 属性：border-表格的边框 ，默认为0； width -表格宽 ； heigth表格高 ； align-设置整个 表格相对于页面的对齐方式 2、<tr></tr> 表示一行，自身不包括单元格，单元格需要用td表示 属性 ：align-设置一行内容的对齐方式，可以取值left、r...
“从零开始的HTML 表格”——WEB开发系列09
最新发布
weixin_36840856的博客
08-15 123
HTML 表格是一种用于在网页上组织和显示信息的结构性元素，它能够将数据以行和列的形式呈现，帮助用户更清晰地理解数据关系。表格在展示统计数据、产品列表、日程安排等方面非常实用。一、HTML 表格的基本结构HTML 表格用 <table> 标签来定义，是用来展示结构化数据的一种元素。每个表格包含若干行（用 &lt...
HTML表格合并行和列
热门推荐
大河之犬的博客
09-29 2万+
在设计表格时，有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格（类似Word的表格合并），这个时候就需要用到“合并行”或“合并列”
简单好看的html表格模板,四款好看实用的css表格样式分享
weixin_32098457的博客
06-07 6661
!----=""{font-,,sans-;font-;#333333;border-width:1px;border-color:#999999;border-collapse:collapse;}table.hovertableth{background-color:#c3dde0;border-width:1px;padding:8px;border-style:solid;border-c...
HTML5中表格中的行列合并
z_625的博客
03-12 1306
HTML5中的表格的行列合并清晰解释，保证一看就懂
"初识HTML5：学习基础知识及常用标签属性，掌握应用开发技术
HTML5应用开发技术是当前互联网领域的热门话题，通过学习《HTML5应用开发技术-初识HTML5.pptx》，我们可以深入了解HTML5与传统HTML的差异与联系。HTML5作为HTML的最新版本，是HTML传承和延续的产物，经历了HTML4.0、...
初识前端开发：HTML基础入门
HTML基础概念 HTML是一种标记语言，被用来描述在网页上如何显示内容。下面将简要介绍HTML的基础概念。 ### 2.1 HTML是什么 HTML全称Hyper Text Markup Language，意为超文本标记语言，是一种用来创建网页的标准...
01. 初识web开发和HTML基础
# 1. Web 开发简介 Web 开发是指创建和维护网站的过程，涵盖了...Web 开发始于 1990 年代早期，最初的网站是由简单的 HTML 代码和静态页面组成。随着技术的发展和互联网的普及，Web 开发经历了多次革新，出现了丰富
初识HTML5(入门级的,很好的)
08-12
HTML5作为前端技术的重要组成部分，是所有Web开发人员必须掌握的基本技能之一。...通过学习，开发人员将能够更好地掌握HTML5的特性，并将这些知识应用到实际的项目开发中，以提高Web应用程序的性能和用户体验。
HTML页面table表格固定行和列
01-04
当表格的内容很多，表格很长、很高的时候，为了查阅方便，常常要有固定表的表头和左侧侧栏的需求。
html网格布局四列三行,grid网格布局基础篇：grid常用属性网格布局
weixin_32233079的博客
06-15 3248
一、Grid网格布局概述Grid网格布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid布局远比 Flex 布局强大。Grid网格布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，...
重温：html的行内元素和块级元素，简单的不能再简单了。
贝格前端工场的博客
01-20 977
行内元素（inline elements）是指在HTML中默认呈现为一行的元素，它们不会独占一行，而是根据其内容的大小进行排列。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。块级元素（block-level elements）是指在HTML中默认呈现为独占一行的元素，无论其内容是否占满一行的宽度。块级元素的宽度、高度、边距和内边距都可以通过CSS属性进行设置。块级元素可以包含其他块级元素和行内元素，可以形成复杂的布局结构。
HTML表格 关于行和列的问题
shixiaoxin1992的博客
08-23 4966
Document     1 2 3 4 1 2 3 4 1 2 3 4 //此表格能做出来超级细的边框原理如下 //个人总结：在合并列的时候（colspan='n'）就把的当前行当前列（即当前单元格）下面的列删除任意n-1列； //          在合并行的时候（rowspan='n'）就把当前行下的（n-1）行中
html5弹性布局两行三列,display:flex 多栏多列布局
weixin_33600376的博客
06-09 5145
转自：http://www.360doc.com/content/14/0811/01/2633_400926000.shtmldisplay:flex 多栏多列布局浏览器支持情况：火狐直接支持w3c无前缀写法，谷歌和opera支持-webkit- 前缀写法，比较适合移动端开发使用，display:flex 这个牛逼的css3布局属性，遗憾的是只有谷歌和火狐支持，中国人常用的手机上的浏览器几乎全军...
html form 行列,html表格和表单.ppt
weixin_33034651的博客
06-11 233
html表格和表单表单的结构 HTML页面 表单 表单子元素1 表单子元素2 表单子元素n 表单页面的基本结构 METHOD =“post或get” ACTION METHOD 指定提交后，由服务器上那个处理程序处理 指定向服务器提交的方法: 一般为post或get方法, post方法比较安全 ACTION = “URL” …… 演示示例1：使用 post提交方式 和 g...
零基础HTML教程(22)--表格:我的重要性毋庸置疑
程序员大阳
10-08 1578
本文目录1. 前言2. 表格标签3. 表格的行与列4. 页眉5. 页脚6. 小结 1. 前言 表格有多重要我就不需要赘述了吧，我们日常访问的网页处处都有表格，所以表格是非常非常重要的HTML元素。 本篇我们就来简单介绍下表格的用法。 2. 表格标签 我们可以使用<table>标签来定义一个表格，然后使用border属性来设定表格边框的宽度，如下。 注意此时表格里面还没有内容，所以网页也显示不出什么东西来。 <table border="1"> </table>
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

要努力点

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值