HTML概述、基本语法(表格整理、标签、基本结构)

2024-01-21

一、HTML概述

  1. HTML指的是超文本标记语言
    • 超文本:是指页面内可以包含图片、链接、声音、视频等内容

    • 标记:标签(通过标记符号来告诉浏览器页面该如何显示)

    我们可以打开浏览器, 右击页面 ,点击 查看网页源代码 ,来方便了解HTML标签通过浏览器解析称为网页的这一过程。

  2. 例如Microsoft Edge

  3. HTML文档的声明

    我们会发现很多页面源代码都会出现<!DOCTYPE html>,这是HTML5文档的声明。如果不声明文档类型会产生一些不可预期的行为。 除了HTML5文档的声明:<!DOCTYPE html>还有HTML4的文档声明:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/loose.dtd ">

二、HTML基本语法

  1. 基本结构
  2. 标签

    HTML中的标记指的是标签。HTML使用标记标签来描述网页。

    • 结构 :<标签名>标签内容</标签名> 闭合标签(有标签内容)

      <标签名/> 自动闭合标签(无标签内容)

    • 标签属性 :标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如:<body text="red">

      1. 属性的格式:属性名="属性名"

      2. 属性的位置:<标签名 属性名="属性值">xxx</标签名>

      3. 添加多个属性:<标签名 属性名="属性值" 属性名="属性值">xxx</标签名>

  3. 常用标签
    • 标题标签 :<h1></h1>…..<h6></h6>

      如:

      <h1>HTML在线考试题</h1>

    • 段落标签:<p></p>

      如:

      <p align="center">静夜思是诗人李白所做的一首五言古诗</p>

    • 换行标签 :

    • 列表:无序列表<ul><li></li></ul>

      有序列表<ol><li></li></ol>

      如:

      列表
               无序列表
                <ul type="square">
                     <li>列表项1</li>
                     <li>列表项2</li>
                     <li>列表项3</li>
                     <li>列表项4</li>
                </ul>
               有序列表
                 <ol type="1">
                     <li>列表项1</li>
                     <li>列表项2</li>
                     <li>列表项3</li>
                     <li>列表项4</li>
                 </ol>

      结果:

    • 超链接 : <a></a>

      HTML 使用超级链接与网络上的另一个文档相连,通俗的说就是通过连接来访问其他网页资源。

    • 图像标签 :<img/>

      注意图片的路径最好放在HTML文档的同一路径,或者同一路径下的文件夹内。

    • 特殊符号转义

      在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。

      比如< 和 >,我们不能直接在页面中使用< 和 >号,因为浏览器会将它解析为html签。

      例如:<b> 会被解析为b标签,空格,再多的空格都会当一个空格处理。

      为了可以使用这些预留字符,我们必须在html中使用字符转义。

    • 表格 (有例子方便理解)

      1. 表格的标签

        table标签:表格的标签

        tr标签:表格中的行

        th标签:表格的表头

        td标签;表格单元格

      2. 表格的基本结构

        ​定义表格 ​
      3. 表格属性

        width设置宽

        height:设置高

        align:设置对齐位置

        cellspacing:表格单元格间距设置

        cellpadding:规定的是单元边沿与单元内容之间的空间。

        valign:规定单元格中内容的垂直排列方式。

        cospan:单元格应跨越的列数(可以理解为合并列数)。

        rowspan:单元格应跨越的行数(可以理解为合并行数)。

        bgcolor:设置单元格的背景颜色。

表格例子:

创造一个有如下效果的表格(要用到:align左对齐,中央对其。cellspacing,cellpadding,bgcolor等属性)

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        <!-- 
            table-- 表格标签
               border="1" 边框宽度
               width="400" 表格宽度
                cellspacing="0" 设置单元格与单元格之间的距离
                cellpadding="0" 设置单元格内容到边框的距离
            tr -- 表格行 
                    align="left / center / right"   水平位置
                    valign="top / middle /bottom"  垂直位置
            th -- 单元格(表头  居中 加粗)
            td -- 普通的单元格
                   align="center" 
                   valign="middle"
             表格中的内容只能放在单元格
         -->
        
        <table border="1" cellspacing="0" cellpadding="0">
            <tr bgcolor="red">
                <th width="150"  height="50" >姓名</th>
                <th width="100">语文</th>
                <th width="100">数学</th>
                <th width="100">英语</th>
            </tr>
            <tr>
                <td bgcolor="green" height="50" align="center" valign="middle">张三</td>
                <td>90</td>
                <td>80</td>
                <td>70</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>90</td>
                <td>80</td>
                <td>70</td>
            </tr>
            <tr align="center" valign="bottom"  height="50">
                <td>王五</td>
                <td>90</td>
                <td>80</td>
                <td>70</td>
            </tr>
        </table>
        
    </body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML概述、基本语法(表格整理、标签、基本结构) 的相关文章

  • 如何使

    我有一个列表 用作选项卡列表 div ul class TabControl li a href search Funds Funds 60 a li li a href search Companies Companies 4 a li
  • CSS 按钮将线性渐变背景转换为透明背景

    我有一个带有线性渐变背景 橙色边框和一些文本的按钮 当我将鼠标悬停在按钮上时 我希望背景变得透明 而不更改按钮的其他属性 我尝试将不透明度转换为 0 但显然 这会隐藏边框和文本 我也尝试过转换背景 但它不起作用 因为我没有要转换到的端点 因
  • 使用 css resize:both 调整表格单元格的大小;不使用表

    使用 css resize both 调整表格单元格大小不适用于表格 我需要调整表格及其单元格的大小 可以使用 css 调整大小 css resize both 在 div 中有效 但在表标签中无效 table border 1 tr td
  • 音频html标签无法快进或快退控制

    我正在使用音频 html 标签从我的上传服务器加载音频 但我不知道为什么我的音频无法像往常一样循环 快进或快退控制 我的音频 标题 Accenpt Ranges bytes Connection Keep Alive Content Len
  • 当 mp4 是唯一来源时,自定义 HTML5 视频控件不起作用

    问题 我只有一个视频源 mp4 因为我正在尝试向 tumblr 视频添加自定义控件 如果只有mp4作为源video duration返回为NaN 作为使用 3 个源 mp4 webm ogg 时的测试 它可以工作 所以video durat
  • HTML 嵌入对象具有灰色背景。可以透明吗?

    我使用带有开源插件的 Firefox 来播放视频 视频被 尽可能好地 缩放以适应嵌入对象的宽度和高度中定义的可用空间 但有时右侧和 或底部会有一点灰色边框 看来这不是我的父 div 的背景颜色 因为更改它根本没有效果 这是 HTML div
  • 如何防止 Safari 滚动溢出:隐藏的 iframe?

    使用 Safari 您可以通过设置 style overflow hide 来禁用大多数 iframe 滚动 在 iframe 上 但是 如果您单击 iframe 并移动鼠标 内容无论如何都会滚动 Example 滚动内容 html
  • 是否有设置可以停止在数据表中显示“表中没有可用数据”?

    最初我的表没有数据 我得到 表中没有可用数据 这是预期的功能 我不想创建任何文本或行 因为我将根据用户操作通过 Ajax 填充表 是否有设置可以停止表中该行的显示 我好像找不到一个此代码有效 但第一行显示 表中没有可用数据 这是 jQuer
  • 如何使用递归字符串连接构建带有小计的 HTML 表?

    我有接下来的两张表 CREATE TABLE SalesByStore Brand VARCHAR 10 StoreName VARCHAR 50 Sales DECIMAL 10 2 CREATE TABLE SalesByBrand B
  • 如何通过iframe从父html传递参数?

    我有一个 html 页面 在其中以编程方式设置 iframe 的 src 如何通过 iframe src 传递参数并在子 html 中获取它们 下面是我的代码 function myFunction myIframe attr src my
  • 下拉 24 小时选项值和 12 小时显示

    我需要创建一个时间数组 以便在 HTML 下拉列表中使用 数组键应采用 24 小时格式 值应采用 12 小时制 包含 am 和 pm 在数据库中我想存储 24 小时格式 有没有一种快速的方法来创建数组而不是每小时键入 example 00
  • 垂直对齐两个弹性项目[重复]

    这个问题在这里已经有答案了 我有一个弹性容器 container和两个弹性项目 item one and item two 我想将第一个项目垂直居中并将第二个项目粘在底部 我不知道如何在这种情况下垂直对齐第一项 HTML div class
  • 修复输入字段后,html5 oninvalid 不起作用

    我的表单中有这个输入代码
  • IE8 中空 div 层的 z-index 问题

    我在 IE8 中遇到 z index 问题 其他尚未测试 以下 JS 创建一些 html css document write img src border 0 document write div style background col
  • Intro.js 2页然后返回首页

    我在用intro js http introjs com 为我的网站创建一个小介绍 我希望游览从第 1 页 主页 2 另一页 然后回到第 1 页 主页 我已经成功地从第 1 2 页开始 但不确定如何让它返回到第 1 页 我对 javascr
  • 在 R Shiny 中,如何使用可排序 js 将其在列表中出现的顺序次数附加到每个列表元素?

    下面的可重现代码适用于将元素从一个面板拖动到另一个面板 并在 拖动到 面板中自动使用 HTML CSS 对拖入的每个元素进行排名顺序编号 但是 我现在尝试附加到每个 拖动到 列表元素的末尾 使用某种形式的paste0 我假设 该元素在 拖至
  • 以 HTML 格式发送电子邮件

    我想发送 HTML 格式的电子邮件 如下图所示 我怎样才能做到这一点 请帮我 提前致谢 String body new String table tr td br header td tr br br Get b Best Score b
  • 如何在html中设置按钮的文本大小

    您好 我想在我的网站上有一个按钮 并且我想调整按钮上的文本大小 我该怎么做呢 我的代码如下
  • Rails 中的 PDF 导出

    我需要将包含一些图表的 HTML 页面导出为 PDF 有哪些好的 gem 可以做到这一点 PDFKit http railscasts com episodes 220 pdfkit http railscasts com episodes
  • Onblur 事件在另一个 div 的 onclick 之前触发

    如上所述 我有一个按钮 单击该按钮将打开子菜单 对于子菜单中的每个选项 都有三个元素 我认为实际上还有更多元素 但为了简单起见 将其保留为 3 我将焦点放在子菜单的主 div 白色 框架 上 Onblur 这个 div 然后我隐藏子菜单 这

随机推荐

  • 游戏开发常见操作梳理之小地图的制作

    游戏中一般存在小地图系统 实际上就是设置一个新的摄像机放置在玩家的正上方 然后在小地图上显示新摄像机看见的东西就可以了 在小地图上一般存在放大地图和缩小地图的按钮可以方便放大和缩小地图 这些操作是如何实现的呢 接下来直接上核心代码 usin
  • 用Growly Draw for Mac,释放您的创意绘画天赋!

    在数字化时代 绘画已经不再局限于传统的纸笔之中 如今 我们可以借助强大的绘画应用软件 将创意化为独特的艺术作品 而Growly Draw for Mac就是一款让您能够快速释放创意 创作精美绘画作品的应用软件 Growly Draw for
  • 游戏开发之常见操作梳理——武器装备商店系统(NGUI版)

    游戏开发中经常出现武器商店 接下来为你们带来武器装备商店系统的具体解决办法 后续出UGUI Json版本 敬请期待 武器道具的具体逻辑 using System Collections using System Collections Ge
  • 游戏开发常见操作梳理之角色选择一

    进入游戏后 我们经常会进入角色选择的界面 通常是左右两个按钮可以更改角色供玩家选择 对于这种界面我们通常使用数据持久化将角色信息存储起来 接下来的笔记中 我将使用自带的数据持久化系统对其进行操作 实现角色的选择页面 后续会更新xml系列的文
  • Effective C++——尽可能使用const

    const允许指定一个语义约束 也就是指定一个 不该被改动 的对象 而编译器会强制实施这项约束 只要保持某个值不变是事实 就应该说出来 以获得编译器的协助 保证不被违反 const与指针 注意const的写法 const char p p可
  • 游戏开发常用实践操作之按动任意键触发

    接下来一些笔记会对于一些大大小小的实践操作进行记录 希望对你有所帮助 在游戏中 我们经常会遇到一些按动任意键触发的操作 接下来展示核心代码 以下是对于Unity中的操作 使用的UI是NGUI 对于核心操作没有影响 你可以自己置换 void
  • 游戏开发常见操作系列之敌人系统的开发一(U3D)

    在开发游戏的过程中 我们常常会出现一些敌人攻击我们玩家 并且实现掉血以及死亡的现象 敌人还会源源不断地生成 这是怎么制作的呢 接下来为大家提供方法 其中使用了NGUI 后续会更新其它方法 敬请期待 使用HUDText实现扣血时显示文本 直接
  • 【C++】static_cast和dynamic_cast使用详解

    目录 一 static cast 二 dynamic cast 三 总结 如果这篇文章对你有所帮助 渴望获得你的一个点赞 一 static cast static cast 是 C 中的一种 类型转换操作符 用于执行编译时的类型转换 它主要
  • 探索Web开发的未来——使用KendoReact服务器组件

    Kendo UI 是带有jQuery Angular React和Vue库的JavaScript UI组件的最终集合 无论选择哪种JavaScript框架 都可以快速构建高性能响应式Web应用程序 通过可自定义的UI组件 Kendo UI可
  • 数据结构——排序

    前言 哈喽小伙伴们好久不见 也是顺利的考完试迎来了寒假 众所周知 不怕同学是学霸 就怕学霸放寒假 假期身为弯道超车的最佳时间 我们定然是不能懒散的度过 今天我们就一起来学习数据结构初阶的终章 七大排序 本文所有的排序演示都为升序排序 目录
  • 「实战应用」如何用DHTMLX Gantt构建类似JIRA式的项目路线图(二)

    DHTMLX Gantt 是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表 可满足项目管理应用程序的所有需求 是最完善的甘特图图表库 在web项目中使用DHTMLX Gantt时 开发人员经常需要满足与UI外观相关的各种需求 因此他
  • 【C++】__declspec含义

    目录 一 declspec dllexport 如果这篇文章对你有所帮助 渴望获得你的一个点赞 一 declspec dllexport declspec dllexport 是 Microsoft Visual C 编译器提供的一个扩展
  • 【计算机毕业设计】北京医疗企业固定资产管理系统的设计与实现 _4c4c1

    近年来 人们的生活方式以网络为主题不断进化 北京医疗企业固定资产管理就是其中的一部分 现在 无论是大型的还是小型的网站 都随处可见 不知不觉中已经成为我们生活中不可或缺的存在 随着社会的发展 除了对系统的需求外 我们还要促进经济发展 提高工
  • DevExpress Web Report Designer中文教程 - 如何自定义控件和表达式注册?

    获取DevExpress v23 2正式版下载 Q技术交流 909157416 自定义控件集成 DevExpress Reports中的自定义报表控件注册变得更加容易 为了满足web开发人员的需求 DevExpressv23 1 包括简化的
  • 「工业遥测」图表控件LightningChart在制造加工业中的应用

    LightningChart NET 完全由GPU加速 并且性能经过优化 可用于实时显示海量数据 超过10亿个数据点 LightningChart包括广泛的2D 高级3D Polar Smith 3D饼 甜甜圈 地理地图和GIS图表以及适用
  • DevExpress WinForms导航控件 - 交付更时尚、体验更好的业务应用(一)

    DevExpress WinForms的Side Navigation 侧边导航 和Nav Panel 导航面板 可以帮助客户交付完全可模仿UI体验的业务解决方案 这些体验在当今流行的应用程序中都可找到 DevExpress WinForm
  • 红警源代码居然开源!附Githu链接

    红警 或者更准确地说 应该称为 红色警戒 是大多数80后记忆中与游戏最深刻的联系之一 几乎每位80后都有一段难以忘怀的红警时光 这款游戏几乎成为许多人青春的代名词 在2000年之后 星际和红警几乎成为了每个网吧不可或缺的游戏 这款游戏是由当
  • 基于 Blinn-Phong 的高性能 Shader,支持阴影和环境反射

    引言 社区高产大户孙二喵同学今天给大家带来了全套的传统光照模型 Shader 并集成了 Cocos Creator 的光照 阴影和环境反射能力 让你在渲染效果和性能之间自由权衡 正文开始 Cocos Creator 引擎的 3D 渲染功能
  • 界面控件DevExpress WPF属性网格 - 让应用轻松显示编辑各种属性事件

    DevExpress WPF Property Grid 属性网格 灵感来自于Visual Studio Visual Studio启发的属性窗口 对象检查器 让在WPF应用程序显示和编辑任何对象的属性和事件变得更容易 P S DevExp
  • HTML概述、基本语法(表格整理、标签、基本结构)

    一 HTML概述 HTML指的是超文本标记语言 超文本 是指页面内可以包含图片 链接 声音 视频等内容 标记 标签 通过标记符号来告诉浏览器页面该如何显示 我们可以打开浏览器 右击页面 点击 查看网页源代码 来方便了解HTML标签通过浏览器