如何使用HTML?10-18

最新推荐文章于 2024-09-22 11:12:26 发布
最新推荐文章于 2024-09-22 11:12:26 发布
阅读量576 收藏 2
点赞数 1
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58744201/article/details/122419892
版权
本文详细介绍了HTML的基础知识，包括如何创建和操作表格，使用有序列表、无序列表和定义列表，以及创建和理解表单。此外，还探讨了HTML注释、嵌入CSS样式，以及块级元素和内联元素的概念。文章通过实例展示了如何使用HTML创建和格式化页面元素，帮助初学者掌握HTML基础。
摘要由CSDN通过智能技术生成

1.HTML表格

在 HTML 中，我们使用 <table> 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。

简单的表格创建：

<table border="1">
   <tr>
     <th>名称</th>
     <th>官网</th>
     <th>性质</th>
   </tr>
   <tr>
     <td>C语言中文网</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
   </tr>
    <tr>
     <td>百度</td>
     <td>http://www.baidu.com/</td>
     <td>搜索</td>
     </tr>
   <tr>
      <td>当当</td>
     <td>http://www.dangdang.com/</td>
      <td>图书</td>
    </tr>
</table>

结果演示：

在上述代码中，我们使用了<table>、<tr>、<td> 及 <th> 四个标签：

  • <table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间。
  • <tr> 是 table row 的简称，表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。
  • <td> 是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。
  • <th> 是 table heading 的简称，表示表格的表头。<th> 其实是 <td> 单元格的一种变体，本质上还是一种单元格。<th> 一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。

1）表格的边框合并：

border-collapse 是“边框塌陷”的意思，当属性值为 collapse 时，可以使表格的双边框变为单边框。

<table border="1" style="border-collapse: collapse;">
   <tr>
      <th>名称</th>
      <th>官网</th>
      <th>性质</th>
    </tr>
    <tr>
       <td>C语言中文网</td>
      <td>http://c.biancheng.net/</td>
      <td>教育</td>
     </tr>
    <tr>
        <td>百度</td>
      <td>http://www.baidu.com/</td>
      <td>搜索</td>
   </tr>
   <tr>
       <td>当当</td>
      <td>http://www.dangdang.com/</td>
      <td>图书</td>
   </tr>
</table>

结果如下显示：

2）表格的标题

表格的标题使用 <caption> 标签来表示。默认情况下，表格的标题位于整个表格的第一行并且居中显示。一个表格只能有一个标题，也就是说 <table> 标签中只能有一个 <caption> 标签。

<table border="1" style="border-collapse: collapse;">
  <caption>标题</caption>
  <tr>
     <th>名称</th>
     <th>官网</th>
     <th>性质</th>
  </tr>
   <tr>
     <td>C语言中文网</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
  </tr>
  <tr>
     <td></td>
     <td>http://www.baidu.com/</td>
     <td>搜索</td>
  </tr>
  <tr>
      <td>当当</td>
     <td>http://www.dangdang.com/</td>
      <td>图书</td>
  </tr>
</table>

 运行结果：

 3）单元格的合并

  • rowspan：表示跨行合并。
  • colspan：表示跨列合并。

格式如下：

<td rowspan="n">单元格内容</td>
<td colspan="n">单元格内容</td>

**n 是一个整数，表示要合并的行数或者列数。

不论是 rowspan 还是 colspan 都是 <td> 标签的属性。

<table border="1" style="border-collapse: collapse;">
    <tr>
       <th>名称</th>
     <th>官网</th>
     <th>性质</th>
    </tr>
    <tr>
      <td>C语言中文网</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
    </tr>
    <tr>
      <td rowspan="2">百度</td>
      <td>http://www.baidu.com/</td>
      <td>搜索</td>
    </tr>
    <tr>
      <td colspan="2">http://www.dangdang.com/</td>
    </tr>
</table>

运行结果如下： 

  • rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格。
  •  每次合并 n 个单元格都要少写 n-1 个<td>标签。

提示：即使一个单元格中没有任何内容，我们仍需使用 <td> 或 <th> 元素来表示一个空单元格的存在，建议在 <td> 或 <th> 中加入 &nbsp;（空格），否则低版本的 IE 可能无法显示出这个单元格的边框。

2.HTML列表

HTML 为我们提供了三种不同形式的列表：

  • 有序列表，使用 <ol> + <li> 标签
  • 无序列表，使用 <ul> + <li> 标签
  • 定义列表，使用 <dl> + <dt> + <dd> 标签

1）有序列表

在 HTML 中， <ol> 标签用来表示有序列表。有序列表之间的内容有先后顺序之分，例如菜谱中的一系列步骤，这些步骤需要按顺序完成，这时就可以使用有序列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序</title>
</head>
<body>
    <p>写大创的步骤</p>
    <ol>
        <li>拿出笔记本开机</li>
        <li>打开钉钉</li>
        <li>打开CSDN博客，打开链接</li>
        <li>写博客</li>
		<li>发博客</li>
    </ol>
</body>
</html>

运行结果如下：

注意，<ol> 一般和 <li> 配合使用，不会单独出现，而且不建议在 <ol> 中直接使用除 <li> 之外的其他标签。

2）无序列表

HTML 使用 <ul> 标签来表示无序列表。无序列表和有序列表类似，都是使用 <li> 标签来表示列表的每一项，但是无序列表之间的内容没有顺序。例如，早饭的种类不需要表明顺序，这时就可以使用无序列表。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无序</title>
</hea
最低0.47元/天 解锁文章
沐风吖~
关注
html用法
a_6701998890的博客
03-04 1105
一.html是一个描述网页的超文本标记语言，html语法规定有： 1.标签标记符号-------<>又称尖括号； 2.html语言必须写在标签符号里面 3.html的标签大多数都是成对出现的 4.关闭符号-------- / 又称反斜杠 二.HTML的基本结构 通过Hbuilder创建一个HTML文档 注解： 1.<!DOCIYPE html>描述当前文本的版本信息，如果没有详细说明4.0还是x1.0那就说明使用的是html5.0版本 2.<html&gt
html怎么用
elktime的博客
08-02 635
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、HTML是什么？二、使用步骤1.引入库2.读入数据总结 前言 html 超文本标记语言 文本： 一句话 诗篇文章… 超文本： 包含文本 文本 音频 视频超链接 页面上的元素都属于超文本。 标记语言： <strong> ddd </strong> 总结： html是一门语言 只不过带有特殊标签的一种超文本语言。 提示：以下是本篇文章正文内容，下面案例可供参考 一、HTML是什
HTML入门教程（非常详细）_html的教程
最新发布
2401_87299595的博客
09-22 2023
属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：attr 表示属性名，value 表示属性值。属性值必须使用双引号" "或者单引号' '包围。注意，虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号。一个标签可以没有属性，也可以有一个或者多个属性。
如何使用html？
dadadid的博客
05-23 637
html 1.什么是html： 超文本：超级文本，包含出了文本其他的内容（音频，视频，图片，链接）(Hyper Text Markup Language) 标签由一组尖括号组成 语言 html有独有的语言规范 2. html是运行在浏览器上的，给用户呈现视图的 3. html的基本框架 4. html的基础语法: 1.忽略大小写，对大小写不敏感 2.都是由标签组成，尖括号基本成对出现 3.标签可以嵌套使用 4.标签可以存在一个或多个属性，属性和值通过=连接 5.html就是学不同标签的不同表现形式 6.h
HTML的使用方法
weixin_58744201的博客
01-09 3128
1.HTML 标签的语法格式 一般情况下，一个 HTML 标签由开始标签、属性、内容和结束标签组成，标签的名称不区分大小写，但大多数属性的值需要区分大小写（为了规范和专业，建议在定义标签时一律采用小写），如下所示： 除了 class 属性外，开始标签中还可以包含其它属性信息，比如 id、title 等，这些我们会在后面进行讲解。 一个 HTML 文档中必须具有一些基本的标签，以便浏览器区分普通文本和 HTML 文档。您可以根据想要实现的效果使用任意数量的标签，但有以下几点需要注意： 所有 HTM
HTML的怎么使用，开发工具以及常用标签。
冰山一树Sankey的博客
03-09 8894
HTML的怎么使用，开发工具以及常用标签。 前端学习：学习地址：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动，下面这些都是一些学习笔记。临渊羡鱼，不如退而结网！！愿我自己学有所成，也愿每个前端爱好者学有所成 一. HTML语法规范 1.1 基本语法概述 HTML 标签是由尖括号包围的关键词，例如 <html> HTML 标签通常是成对出现的，例如<html>和 </html>称为双标签。标签对中的第一个标签是 开始标签，第
使用html-webpack-plugin 插件报错问题解决方案
java_vava2的博客
04-21 3840
使用webpack在构建HTML时需要安装并且使用html-webpack-plugin 插件但是在构建过程中会报错 报错信息如下： TypeError: Cannot read property ‘tap’ of undefined at HtmlWebpackPlugin.apply (D:*\node_modules\html-webpack-plugin\index.js:40:31) at webpack (D:*\node_modules\webpack\lib\webpack.js:51:.
HTML5-表单
MUYUFANSHENXUE的博客
03-13 1870
表单时网页中非常重要的元素，比如一些网站软件的注册页面，登录页面都会用到表单这个东西。 表单的初级应用： 1，表单的基本结构： <form method="post" action="result.html"> </form> method是指表单数据提交的方法，包括post和get，post相对于get安全一点，但也只是相对而言，两种方法，一般开发中通常采用post提交表单数据。action后面的表示向何处发送表单数据。 以上是一些表单元素常用的属性和属
Angular 入门教程系列：39：使用ng-alain进行开发
知行合一 止于至善
10-11 5060
在前面的文章中介绍过ng-alain，当时在使用的时候还显得不是很方便，最简单的一个demo运行的都不是非常流畅。而目前的版本已经做有较大的改进，再这个基础上进行二次开发，尤其是一些后端的平台或者监控的平台看起来都比较不错。在这篇文章中继续来确认一下使用的感受。
2021-10-30
java557的博客
10-30 5688
1、 当Leader崩溃或者Leader失去大多数的Follower，这时候ZooKeeper会进行什么操作？ A、 修复模式 B、 恢复模式 C、 停机模式 D、 重新启动下面那个不是cinder服务的组件？ 提交答案 2、 以下关于云计算安全性描述中，正确的是？ A、 云安全保障了我们不会受到来自管理员的操作失误影响 B、 尽管云计算提供各项安全服务，但是我们仍然需要注意备份 C、 无法查询云平台登陆记录 D、 无法审计云资
[Python从零到壹] 十三.机器学习之聚类算法四万字总结全网首发（K-Means、BIRCH、树状聚类、MeanShift）
热门推荐
杨秀璋的专栏
07-06 1万+
欢迎大家来到“Python从零到壹”，在这里我将分享约200篇Python系列文章，带大家一起去学习和玩耍，看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解，真心想把自己近十年的编程经验分享给大家，希望对您有所帮助，文章中不足之处也请海涵。Python系列整体框架包括基础语法10篇、网络爬虫30篇、可视化分析10篇、机器学习20篇、大数据分析20篇、图像识别30篇、人工智能40篇、Python安全20篇、其他技巧10篇。您的关注、点赞和转发就是对秀璋最大的支持，知识无价人有情，希望
HTML的使用
2301_80098154的博客
03-23 1911
HTML是一门语言，许多网页都是由HTML编写的。HTML（HyperText Markup Language）超文本标记语言：由标签构成的语言超越了文本的限制，可以定义图片，视频，音频。HTML运行在浏览器上，HTML标签由浏览器解析。例：<img>==》展示图片W3c标准：网页主要由三部分组成：结构：HTML表现：css行为：javascript。
HTML使用
小鲁蛋的博客
08-05 980
页面由三部分内容组成分别是内容（结构）、表现、行为。内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用 html 技术来展示。表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。...
HTML用法介绍
程序员小十一的博客
05-24 762
文中介绍了HTML常见标签用法
HTML的基本使用
changlinke的博客
02-25 704
HTML的基本使用HTML概述概述骨架结构标签语法标签关系常用标签标题标签段落标签盒子标签文本表现标签标签属性图片标签图片标签的使用图片路径超链接标签base标签锚点转义字符列表无序列表有序列表8.3自定义列表 HTML概述 概述 HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，是用来描述网页的一种语言。所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。 骨架结构 <!
HTML基础用法一
weixin_45846863的博客
11-25 446
HTML基础用法一 今天是我自学HTML的第一天，希望将所学到的东西发表在CSDN上，希望看到的人可以帮我指正，有什么不对的地方可以让我加以改之，希望自己能一点一点在纠正错误中进步。 什么是HTML? HTML 是用来描述网页的一种语言。 特点： 1.HTML 指的是超文本标记语言 (Hyper Text Markup Language)； 2.HTML 不是一种编程语言，而是一种标记语言 (ma...
HTML基础用法
SwitchD的博客
09-03 3697
目录 一、HTML 二、HTML、CSS、JavaScript区别 三、支持HTML的软件 四、DOM树结构 五、HTML在VSCode上相关快捷键 六、HTML常见标签 1.标题标签（h1-h6） 2.段落标签（P标签） 3.换行标签 （br标签） 4.格式化标签 5.图片标签（img） 6.超链接（a标签） 7.表格标签（table标签） 8.列表标签 9.表单标签 （1）form标签 （2）input标签 （3）label标签 （4）select标签 （5）textarea 多行编辑框 10.div
HTML详细教程
qq_40046544的博客
10-17 8672
HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。HTML 的全名是超文本标记语言（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999 年，HTML 4.0.1 发布，成为广泛接受的 HTML 标准。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值