HTML学习笔记(二)

1.HTML图像

        图像标签(<img>)和源属性(src)

        HTML中,图像由<img>标签来定义,<img>是空标签,只包含属性,没有闭合标签。在页面上显示图像需要使用源属性(src),src是指"source”。源属性的值是图像的URL地址。

定义图像的语法是:

<imag src="url" alt="some_text">

url是存储图像的位置。

        ALT属性

​​​​​​        alt属性用来定义为图像的一串可替换的文本。在浏览器无法在数图像时替换文本告诉读者所失去的信息。此时浏览器将显示这个替代文本而不是图像。

        图像高度与宽度设置

        height(高度)与width(宽度)属性用于设置图像的高度与宽度。

        属性默认单位为像素

<img src="dog.jpg" alt="dog rock" width="304" height="228">

HTML 图像标签

标签描述
<img>定义图像
<map>定义图像地图
<area>定义图像地图中的可点击区域
2.HTML表格

        HTML表格由<table>标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义),表格可以包含标题行(<th>)用于定义列的标题。

  • <thead > 用于定义表格的标题部分: 在 <thead > 中,使用 <th > 元素定义列的标题。

  • <tbody > 用于定义表格的主体部分: 在 <tbody > 中,使用 <tr > 元素定义行,并在每行中使用 <td > 元素定义单元格数据。

例如,

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML学习笔记</title> 
</head>
<body><p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p><h4>一列:</h4>
<table border="1">
<tr><td>a</td>
</tr>
</table><h4>一行三列:</h4>
<table border="1">
<tr><td>a</td><td>b</td><td>c</td>
</tr>
</table><h4>两行三列:</h4>
<table border="1">
<tr><td>a</td><td>b</td><td>c</td>
</tr>
<tr><td>A</td><td>B</td><td>C</td>
</tr>
</table></body>
</html>

输出

HTML 表格标签

标签描述
<table>定义表格
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚

(引用“菜鸟教程”)

3.HTML列表

HTML列表支持有序列表,无序列表和自定义列表。

无序列表由一个小圆点作为标记,游学列表由数字作为标记。

HTML 列表标签

标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
<dl>定义列表
<dt>自定义列表项目
<dd>定义自定列表项的描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器人系统ros2-开发实践03-监听节点的参数变化(C++)

背景&#xff1a; 通常&#xff0c;节点需要响应其自身参数或另一个节点参数的更改。 ParameterEventHandler 类可以轻松侦听参数更改&#xff0c;以便您的代码可以响应它们。本教程将向您展示如何使用 ParameterEventHandler 类的 C 版本来监视节点自身参数的更改以及另一个节…

Oracle索引详解

1.索引 1.1 索引 索引是建立在表的一列或多个列上的辅助对象&#xff0c;目的是加快访问表中的数据&#xff1b;Oracle存储索引的数据结构是 B 树&#xff0c;位图索引也是如此&#xff0c;只不过是叶子节点不同B数索引&#xff1b;索引由根节点、分支节点和叶子节点组成&…

Linux系统安全与应用【一】

目录 1.账号安全控制 1.1 系统账号清理 1.2 密码安全控制 1.3 命令历史限制 1.4 命令总结 2.系统引导和登录控制 2.1 使用su命令切换用户 2.2 限制使用su命令的用户 3.可插拔式认证模块PAM 3.1 linux中的PAM安全认证 3.2 PAM认证原理​编辑 3.3 PAM认证的构成 3.4 P…

itables, Python 大型数据集显示工具

目录 前言 安装 特性 基本功能 显示表格 排序功能 搜索功能 分页显示 高级功能 自定义列的显示格式 高级搜索功能 实现数据的动态更新 集成外部JavaScript库 总结 前言 iTables库是Python中一个强大的工具&#xff0c;专门用于在Jupyter Notebook和其他IPython环境中以交…

和泽彬一起创建的知识星球——AI交叉知识图谱领域

欢迎来到「AI星图」— 一个专注于人工智能与知识图谱交叉领域的知识社区&#xff01;在这里&#xff0c;我们汇集了来自全球的AI研究者、数据科学家以及行业实践者&#xff0c;共同探索数据的深层链接和智能的未来。 我们的特色亮点&#xff1a; 我们的亮点&#xff1a; 1 精…

All in One mini主机搭建全屋主路由方案----自己实现自己的路由器,实现路由器自由!

1 接线 首先&#xff0c;需要保证家里当前状态是有网的状态&#xff08;路由器有网并正常工作&#xff09; 将鼠标键盘接在mini主机的USB口&#xff0c;HDMP/DP/VGA等接上显示器。从路由器的lan口接一根网线出来接在mini主机的ETH0上&#xff0c;接在mini主机上保证mini主机在…

Leetcode—1329. 将矩阵按对角线排序【中等】(unordered_map、priority_queue)

2024每日刷题&#xff08;121&#xff09; Leetcode—1329. 将矩阵按对角线排序 实现代码 class Solution { public:vector<vector<int>> diagonalSort(vector<vector<int>>& mat) {const int m mat.size();const int n mat[0].size();unorder…

OceanBase 分布式数据库【信创/国产化】- OceanBase 集群配置项

本心、输入输出、结果 文章目录 OceanBase 分布式数据库【信创/国产化】- OceanBase 集群配置项前言OceanBase 数据更新架构OceanBase 集群配置项OceanBase 配置项级别配置项的生效方式查看配置项的级别和生效方式OceanBase 分布式数据库【信创/国产化】- OceanBase 集群配置项…

主流的虚拟机推荐

昨天提到微软与 IBM 合作在 MIT 许可证下发布了 MS-DOS 4.00 的源代码。此次发布的源代码包含了 MS-DOS 4.00 Beta版源码以及相关编译文档。 地址&#xff1a;https://blog.csdn.net/bugsycrack/article/details/138267118?spm1001.2014.3001.5501 感兴趣的人可以在各种虚拟…

【Spring AI】04. 转录 API-OpenAI

文章目录 OpenAI 转录功能先决条件自动装配&#xff08;Auto-configuration &#xff09;转录选项参数 运行时选项参数手动配置示例代码 OpenAI 转录功能 Spring AI 支持 OpenAI 的转录模型。 先决条件 您需要使用 OpenAI 创建一个 API 才能访问 ChatGPT 模型。在 OpenAI 注册…

【Vue】监听div宽高的变化(动态渲染echarts宽高)

一、问题 echarts 未监听到 echarts 宽高变化而动态变化 <template> <div id"echart" ref"echart" style"width: 100%; height: 300px"></div> </div> </template> <script> export default { data() {…

R语言--图形绘制

一&#xff0c;绘制简单图形 c1<- c(10,20,30,40,50) c2<-c(2,7,15,40,50) plot(c1,c2,typeb) 具体参数请参考R语言中的绘图技巧1&#xff1a;plot()函数参数汇总_r语言plot参数设置-CSDN博客 c1<- c(10,20,30,40,50) c2<-c(2,7,15,40,50) plot(c1,c2,typeb,col#…

这些小众工作软件让你事半功倍

大家好&#xff0c;我是追求高效工作的小红书种草小能手&#xff01;今天要和大家分享几款超实用的工作软件&#xff0c;它们可能不像那些大牌软件那样家喻户晓&#xff0c;但绝对能让你的工作生活焕然一新&#xff01;&#x1f31f; 1️⃣《亿可达》- &#x1f5a5;️自动化办…

中信银行深耕养老金融,构建多支柱养老金体系新格局

在应对人口老龄化这一全球性挑战的过程中&#xff0c;养老金融已成为中国金融领域的重要篇章。2024年4月25日&#xff0c;中信银行行长刘成在财新传媒主办的“2024中国养老产业论坛”上发表主旨演讲&#xff0c;深入阐述了养老金金融、养老服务金融、养老产业金融互促互进的大趋…

第8章 软件工程

一、软件工程概述 &#xff08;一&#xff09;软件危机 1、含义&#xff1a;落后的软件生产方式无法满足迅速增长的计算机软件需求&#xff0c;从而导致软件开发与维护过程中出现一系列严重问题的现象。 2、解决方案&#xff1a;引入软件工程的思想。 &#xff08;二&#x…

【Qt】无法创建或打开CMake项目

无法创建或打开CMake项目 没有CMake选项 原因 卸载重装了qt&#xff0c;安装时勾选了cmake&#xff0c;发现还是一样没有。。。 后面发现是插件里没有勾选上CMake。。。很无语 不是应该默认就有的吗 不懂了 解决 插件勾选重启就好了

加密,解密 crypto-js、 计算哈希值,js-sha3

加密&#xff0c;解密 crypto-js、 计算哈希值&#xff0c;js-sha3 文章目录 加密&#xff0c;解密 crypto-js、 计算哈希值&#xff0c;js-sha3crypto-js安装 crypto-js使用 crypto-js js-sha3安装 js-sha3使用 js-sha3 在项目中一些不能明文传输&#xff0c;就需要把明文进行…

Java List 获取部分组成new list,获取两个list相同/不同的内容

获取List中的一项 List<String> _outingCntry list.stream().map(OSzItem::getGroup). collect(Collectors.toList()); 获取List中的多项 List<vo> list new ArrayList<>(); Map<String, String> map list.stream().collect( Collectors.toMap(v…

Python 操作PDF图片 – 添加、替换、删除PDF中的图片

PDF文件中的图片可以丰富文档内容&#xff0c;提升用户的阅读体验。除了在PDF中添加图片外&#xff0c;有时也需要替换或删除其中的图片&#xff0c;以改进视觉效果或更新信息。文本将提供以下三个示例&#xff0c;介绍如何使用Python 操作PDF文件中的图片&#xff1a; 目录 …

qt学习篇---界面按键关联(信号和槽)

目录 1.qt基础 2.做一个界面 创建project UI界面设计 信号和槽 1.控件改名字 2.什么是信号和槽 3.怎么关联信号和槽 自动关联 手动关联 1.qt基础 qt可移植性强&#xff0c;不久会用到MCU。很有意义学习 2.做一个界面 创建project 不要中文路径 选择QWidget .pro文件…