HTML详解连载(2)

news2024/11/23 3:25:22

HTML详解连载(2)

  • 专栏链接 [link](http://t.csdn.cn/xF0H3)
    • 下面进行专栏介绍
  • 开始喽
    • 超链接
      • 作用
      • 代码示例
      • 解释
      • 经验分享
    • 音频标签
      • 代码示例
      • 注意
      • 强调
    • 视频标签
      • 代码示例
      • 注意
      • 强调
    • 列表
      • 作用:布局内容排列整齐的区域。
      • 分类:无序列表,有序列表,定义列表
      • 无序列表
        • 作用
        • 标签
        • 示例
        • 注意事项:
      • 有序列表
        • 作用
        • 标签
        • 示例:
        • 注意事项:
      • 定义列表
        • 标签
        • 示例
        • 注意事项:
    • 表格-基本用法
      • 标签
      • 标签名及说明
      • 注意事项:
    • 表格结构标签
      • 作用
    • 合并单元格
      • 作用
      • 步骤

专栏链接 link

下面进行专栏介绍

本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记
进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。

开始喽

在这里插入图片描述

超链接

作用

点击跳转到其他页面。

代码示例

  <a href=”https://www.baidu.com”>跳转到百度</a>

解释

href属性值是跳转地址,是超链接的必须属性。
属性加上target=”_black”新窗口打开页面

经验分享

开发初期,不知道超链接的跳转地址。href属性写#,表示空链接,不会跳转。

音频标签

代码示例

	<audio src=”音频的URL”></audio>

注意

常见属性作用特殊说明
src(必须属性)音频URL支持格式:MP3、Ogg、Wav
controls显示音频控制面板
loop循环播放
autoplay自动播放为提升用户体验,浏览器一般会禁用自动播放功能

强调

在HTML5中,如果属性名和属性值完全一样,可以简写为一个单词

在这里插入图片描述

视频标签

代码示例

<video src=”视频的URL”></video>

注意

常见属性作用特殊说明
src(必须属性)音频URL支持格式:MP4、Ogg、WabM
controls显示视频控制面板
loop循环播放
autoplay自动播放为提升用户体验,浏览器支持在静音状态自动播放功能

强调

在浏览器中,想要自动播放,必须有muted属性

列表

作用:布局内容排列整齐的区域。

分类:无序列表,有序列表,定义列表

无序列表

作用

布局排列整齐的不需要规定顺序的区域

标签

ul嵌套li,ul是无序列表,li是列表条目

示例

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ul>

在这里插入图片描述

注意事项:

ul标签里面只能包裹li标签
li标签里面可以包裹任何内容

有序列表

作用

布局排列整齐的需要规定顺序的区域

标签

ol嵌套li,ol是有序列表,li是列表条目

示例:

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ol>

注意事项:

ol标签里面只能包裹li标签
li标签里面可以包裹任何内容

定义列表

标签

dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,
dd是定义列表的描述 /详情

示例

<dl>
  <dt>列表标题</dt>
  <dd>列表描述 / 详情</dd>
   ……
</dl>

注意事项:

dl里面只能包含dt和dd
dt和dd里面可以包含任意内容

表格-基本用法

网页中的表格与Excel表格类似,用来展示数据。

标签

table嵌套tr,tr嵌套td/th

标签名及说明

标签名说明
table表格
tr
th表头单元格
td内容单元格

注意事项:

在网页中,表格默认没有边框线,使用border属性可以为表格添加边框线

表格结构标签

作用

用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰

标签名含义特殊说明
thead表格头部表格头部内容
tbody表格主体主要内容区域
tfoot表格底部汇总信息区域

合并单元格

作用

将多个 单元格合并成一个单元格,以合并同类信息

步骤

1.明确合并目标
2.保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
跨行合并,保留最上的单元格,添加属性rowspan
跨列合并,保留最左单元格,添加属性colspan
3.删除其他单元格

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

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

相关文章

基于Googlenet深度学习网络的人员行为动作识别matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 1. 原理 1.1 深度学习与卷积神经网络&#xff08;CNN&#xff09; 1.2 GoogLeNet 2. 实现过程 2.1 数据预处理 2.2 构建网络模型 2.3 数据输入与训练 2.4 模型评估与调优 3. 应用领域…

Eclipse(STS)Enum 格式化配置

需求 枚举类 的字段&#xff0c;一般长度较小&#xff0c;格式化后&#xff0c;多个字段会变为一行。 需求&#xff1a;希望每个字段独立一行。 格式化后的样式&#xff0c;如下图所示&#xff1a; 配置 1. Windows - Preferences 2. Java-Formatter 如果没有自定义的格…

C++ 循环

有的时候&#xff0c;可能需要多次执行同一块代码。一般情况下&#xff0c;语句是顺序执行的&#xff1a;函数中的第一个语句先执行&#xff0c;接着是第二个语句&#xff0c;依此类推。 编程语言提供了允许更为复杂的执行路径的多种控制结构。 循环语句允许我们多次执行一个…

DVWA暴力破解高级模式宏爆破

先将安全等级调至高级&#xff0c;点击submit提交 浏览器开启bp代理 kali开启bp 工具&#xff0c;开启Proxy 点击Brute Force这个选项卡 bp拦截到请求的数据包 宏设置 如果是有的bp版本比较旧&#xff0c;在旧版本的上面菜单栏有一个Project options点击去选择Session&#xff…

Android系统-进程-Binder1-概述

目录 引言&#xff1a; 一次拷贝 Binder一次通信过程 应用启动中的binder交互 C/S模式&#xff1a; Binder COMMAND BWR数据结构&#xff1a; 引言&#xff1a; Android的binder是从openbinder发展过来的。包括了binder驱动&#xff0c;Native层&#xff0c;Java层。用…

【Matlab智能算法】RBF神经网络-遗传算法(RBF-GA)函数极值寻优——非线性函数求极值

上一篇博客介绍了GRNN-GA&#xff1a;GRNN神经网络遗传算法(GRNN-GA)函数极值寻优——非线性函数求极值&#xff0c;神经网络用的是GRNN神经网络&#xff0c;RBF神经网络&#xff08;径向基函数神经网络&#xff09;和GRNN神经网络有相似之处。本篇博客将GRNN神经网络替换成RBF…

安装istio和部署实例以及仪表盘

安装Istio 接下来我们将介绍如何在 Kubernetes 集群中安装 Istio&#xff0c;这里我们使用的是最新的 1.10.3 版本。 下面的命令可以下载指定的 1.10.3 版本的 Istio: ➜ ~ curl -L https://istio.io/downloadIstio | ISTIO_VERSION1.10.3 sh -如果安装失败&#xff0c;可以…

SolidWorks不能使用选择如允许此选择将生成有冲突的前后关系

SolidWorks不能使用选择如允许此选择将生成有冲突的前后关系 1 SolidWorks不能使用选择如允许此选择将生成有冲突的前后关系 1 SolidWorks不能使用选择如允许此选择将生成有冲突的前后关系 https://www.swrjzxw.com/1556.html SolidWorks装配体时 显示 不能使用选择如允许此选…

Linux 使用gdb调试C程序

一、gdb的一些基础命令 l&#xff1a;显示代码 l n&#xff1a;跳转到当前代码页的第n行的代码 l filename.c &#xff1a;n&#xff1a;跳转到filename.c文件的第n行代码 b 行号&#xff1a;加断点 info break&#xff1a;查看断点信息 delete 断点编号&#xff1a;删除断点 …

力扣 518. 零钱兑换 II

题目来源&#xff1a;https://leetcode.cn/problems/coin-change-ii/description/ C题解&#xff08;来源代码随想录&#xff09;&#xff1a; 这是一道典型的背包问题&#xff0c;一看到钱币数量不限&#xff0c;就知道这是一个完全背包。但本题和纯完全背包不一样&#xff0c…

天津大数据培训机构哪家好?大数据必备知识

随着我国互联网IT行业的发展&#xff0c;我们步入了大数据时代&#xff0c;现在市场上急需大量的大数据专业人才&#xff0c;发展空间大&#xff0c;从业范围广&#xff0c;学习大数据专业对未来还是很有帮助的。今天小编来带大家了解一下大数据的知识和学习方式&#xff0c;作…

Pygame 入门教程

1. Pygame简介 Pygame是一个基于Python的游戏开发库&#xff0c;它提供了一系列的工具和接口&#xff0c;使开发人员能够轻松地创建各种类型的游戏&#xff0c;包括2D游戏和简单的3D游戏。 在开始学习Pygame之前&#xff0c;您需要先安装Pygame库。您可以通过以下命令在命令行…

分布式定时任务系列5:XXL-job中blockingQueue的应用

传送门 分布式定时任务系列1&#xff1a;XXL-job安装 分布式定时任务系列2&#xff1a;XXL-job使用 分布式定时任务系列3&#xff1a;任务执行引擎设计 分布式定时任务系列4&#xff1a;任务执行引擎设计续 Java并发编程实战1&#xff1a;java中的阻塞队列 引子 这篇文章的…

linux下查看谁在用显卡

一般查看显卡的使用情况使用的命令为 nvidia-smi但是这个只能输出显卡的占用及进程&#xff0c;看不到谁在用 信息如下 但是可以借助上面的PID信息&#xff0c;查看对应的进程是谁调用的&#xff0c; 命令为&#xff1a; ps -f -p 4417其中4417就是上图中的其中一个PID 输出…

snapshotter not loaded: overlayfs: invalid argument

测试containerd是否能创建和启动成功 执行如下命令拉取镜像并创建容器&#xff1a; 拉取容器 ctr i pull docker.io/library/nginx:alpine 创建容器 ctr c create --net-host docker.io/library/nginx:alpine nginx ctr task start -d nginx查看Containerd服务启动信息&…

【Freertos基础教程】任务管理之基本使用

文章目录 前言一、freertos任务管理是什么&#xff1f;二、任务管理涉及到的一些概念1.任务状态2.优先级3.栈(Stack)4.事件驱动5.协助式调度(Co-operative Scheduling) 二、任务的基本操作1.创建任务什么是任务 2.创建任务3.任务的删除4.任务的调度3.简单示例 总结 前言 本fre…

2023.8.12号论文阅读

文章目录 TriFormer: A Multi-modal Transformer Framework For Mild Cognitive Impairment Conversion Prediction摘要本文方法实验结果 SwIPE: Efficient and Robust Medical Image Segmentation with Implicit Patch Embeddings摘要本文方法实验结果 TriFormer: A Multi-mod…

【杨氏矩阵——(详细解法)】

杨氏矩阵&#x1f495; 题目&#x1f575;️ 思路展示&#x1f92f; 假设在二维数组arr中查找某个数input&#xff1a; 查找思路&#x1f9d0; 利用杨氏矩阵&#xff08;矩阵的每行从左到右是递增的&#xff0c;矩阵从上到下是递增的&#xff09;的特性&#xff0c;我们可以&a…

CentOS7连接网络

1.下载centos7镜像文件 2.安装centos7 3.修改网卡,ens33. 注意: 这里使用的是dhcp,设置IPADDR192.168.31.64一方面是为了后面使用crt或者MobaXterm连接,另一方面它和windows电脑的网卡要一致.这样才可以连接到网络.win r,输入cmd,打开命令窗口输入ipconfig.可以看到IPv4: 102…

Pytorch深度学习-----完整神经网络模型训练套路

系列文章目录 PyTorch深度学习——Anaconda和PyTorch安装 Pytorch深度学习-----数据模块Dataset类 Pytorch深度学习------TensorBoard的使用 Pytorch深度学习------Torchvision中Transforms的使用&#xff08;ToTensor&#xff0c;Normalize&#xff0c;Resize &#xff0c;Co…