H5+CSS3+JS逆向前置——HTML2、table表格标签

简介: H5+CSS3+JS逆向前置——HTML2、table表格标签

H5+CSS3+JS逆向前置——HTML2、table表格标签


HTML概述

HTML,全称超文本标记语言(Hypertext Markup Language),是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式,使得浏览器可以正确地解析和显示网页内容。

HTML的主要元素包括:

元素:包括段落、标题、链接、图像、列表等等。HTML为这些元素提供了特定的标签,如<p>、<a>、<img>、<ul>、<li>等。

属性:这些是HTML元素中可以包含的额外信息,如链接的href属性,图像的src和alt属性等。

样式CSS:HTML5引入了内联样式(通过HTML元素直接包含的样式)和外部样式表(通过CSS文件定义的样式)两种方式来控制网页的外观和格式。

脚本JavaScript:HTML5支持通过JavaScript嵌入到网页中,使得网页可以具有交互性。

HTML文档的基本结构通常包括一个<!DOCTYPE html>声明,一个<html>元素,以及若干个<head>和<body>元素。其中,<body>元素包含了网页的所有内容,如文本、图片、视频、音频、链接等等。

HTML是一种基础且重要的技术,它为创建网页提供了基础结构和框架,使得我们可以添加样式、脚本和内容。然而,仅仅使用HTML可能无法创建出具有复杂交互性和动态内容的网站,因此通常还需要配合CSS(用于样式设计)和JavaScript(用于添加交互性)的使用。

开发工具:Visual Studio Code

运行插件:Preview on Web Server

正文——table标签

这个示例中,<table>标签用于创建一个表格。border="1"属性用于添加表格边框。<thead>和<tbody>标签分别表示表格的表头和表格内容部分。<tr>标签表示表格行,<th>标签用于定义表头单元格,其中th是"table header"的缩写。<td>标签用于定义表格数据单元格。在示例中,我们创建了三行数据,每行包含姓名、年龄和性别三个字段。

你可以根据需要修改这个示例,添加更多的行和字段,或者使用CSS样式来美化表格。希望这个示例对你有所帮助!

示例1:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table示例</title>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>28</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

示例2:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简历</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>联系方式</th>
                <th>教育背景</th>
                <th>工作经验</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>电话: 12345678901, 邮箱: zhangsan@example.com</td>
                <td>本科,计算机科学专业,2023年毕业</td>
                <td>
                    在某公司担任软件开发工程师,负责多个项目的开发工作,熟悉Java、Python等编程语言,具备良好的团队协作能力。
                </td>
            </tr>
            <tr>
                <td>李四</td>
                <td>电话: 0987654321, 邮箱: lisi@example.com</td>
                <td>硕士,计算机科学与技术专业,2023年毕业</td>
                <td>
                    在某公司担任软件工程师,负责多个软件项目的开发工作,熟悉C++、JavaScript等编程语言,具备良好的团队协作能力和沟通能力。
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

<table> 标签在 Web 前端中主要用于创建 HTML 表格。表格是一种常用的数据展示方式,它们通常用于展示结构化数据,如销售数据、统计数据等。

<table> 标签的一些主要作用:

数据展示:表格是最基本的、最直观的数据展示方式之一。它们可以帮助用户理解数据的结构和关系。

表格布局:<table> 标签允许你创建二维表格,即行和列。这使得你可以精确地控制表格的布局和样式。

表格排序:某些浏览器允许你通过点击表头来对表格进行排序。这使得表格非常适合用于显示具有排序需求的数据。

交互性:一些现代的 Web 开发框架(如 React 或 Vue)提供了对表格的更高级别的控制,包括添加交互性(如点击单元格以展开/折叠内容)和动态更新表格内容。

数据统计和可视化:表格经常被用于数据统计和可视化,尤其是在数据分析和科学研究中。

然而,需要注意的是,虽然 <table> 标签在某些情况下仍然有用,但它们在现代 Web 开发中已经不再被视为最佳实践。这是因为它们在响应式设计和移动设备上的显示效果不佳,而且使用 CSS 和 JavaScript 可以更容易地创建更复杂的数据展示和交互效果。因此,许多现代 Web 开发人员现在更倾向于使用更灵活的布局技术(如 Flexbox 或 Grid)和数据可视化库(如 D3.js 或 Chart.js)来替代传统的 <table> 表格。

相关文章
|
10天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
16天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
7天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
7天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
43 1
|
12天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
24 3
|
16天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
17天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
17天前
|
存储 移动开发 前端开发
|
JavaScript 前端开发 索引
|
Web App开发 JavaScript 前端开发
javascript: 带分组数据的Table表头排序
如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份 1 DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.
1162 0