HTML详解连载(2)

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.删除其他单元格

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

kafka基本概念及操作

kafka介绍 Kafka是最初由Linkedin公司开发&#xff0c;是一个分布式、支持分区的&#xff08;partition&#xff09;、多副本的 &#xff08;replica&#xff09;&#xff0c;基于zookeeper协调的分布式消息系统&#xff0c;它的最大的特性就是可以实时的处理大量数据以满足各…

uniapp安卓ios打包上线注意事项

1、安卓包注意事项 隐私政策弹框提示 登录页面隐私政策默认不勾选隐私政策同意前不能获取用户权限APP启动时&#xff0c;在用户授权同意隐私政策前&#xff0c;APP及SDK不可以提前收集和使用IME1、OAID、IMS1、MAC、应用列表等信息 ios包注意事项 需要有注销账号的功能 3、安…

PHP8的字符串操作2-PHP8知识详解

今日继续分享《php8的字符串操作》昨天一天都没有写多少&#xff0c;内容多&#xff0c;今天继续&#xff1a; 昨天分享的是1、使用trim()、rtrim()和ltrim()函数去除字符串首尾空格和特殊字符。2、使用strlen()函数和mb_strlen()函数获取字符串的长度。 3、截取字符串 PHP对…

Spring Boot(六十四):SpringBoot集成Gzip压缩数据

1 实现思路 2 实现 2.1 创建springboot项目 2.2 编写一个接口,功能很简单就是传入一个Json对象并返回 package com.example.demo.controller;import com.example.demo.entity.Advertising; import lombok.Data; import lombok.extern.slf4j.Slf4j; import org.springf…

【论文阅读】基于深度学习的时序预测——FEDformer

系列文章链接 论文一&#xff1a;2020 Informer&#xff1a;长时序数据预测 论文二&#xff1a;2021 Autoformer&#xff1a;长序列数据预测 论文三&#xff1a;2022 FEDformer&#xff1a;长序列数据预测 论文四&#xff1a;2022 Non-Stationary Transformers&#xff1a;非平…

嵌入式学习之C语言指针部分复习

今天主要把C语言的指针部分再次认真的复习了一下&#xff0c;对于指针的整体框架有了更加深刻的理解&#xff0c;特别要重点区分函数指针&#xff0c;指针函数&#xff0c;数组指针&#xff0c;指针数组部分&#xff0c;对于这部分的应用回非常的重要&#xff0c;而且C语言指针…

Unity 工具 之 Azure 微软SSML语音合成TTS流式获取音频数据的简单整理

Unity 工具 之 Azure 微软SSML语音合成TTS流式获取音频数据的简单整理 目录 Unity 工具 之 Azure 微软SSML语音合成TTS流式获取音频数据的简单整理 一、简单介绍 二、实现原理 三、实现步骤 四、关键代码 一、简单介绍 Unity 工具类&#xff0c;自己整理的一些游戏开发可…

WSL2 Ubuntu子系统安装cuda+cudnn+torch

文章目录 前言一、安装cudncudnn安装pytorch 前言 确保Windows系统版本高于windows10 21H2或Windows11&#xff0c;然后在Windows中将显卡驱动升级到最新即可&#xff0c;WSL2已支持对显卡的直接调用。 一、安装cudncudnn 配置cuda环境&#xff0c;WSL下的Ubuntu子系统的cu…

Flink 流式读写文件、文件夹

文章目录 一、flink 流式读取文件夹、文件二、flink 写入文件系统——StreamFileSink三、查看完整代码 一、flink 流式读取文件夹、文件 Apache Flink针对文件系统实现了一个可重置的source连接器&#xff0c;将文件看作流来读取数据。如下面的例子所示&#xff1a; StreamExe…

emqx-5.1.4开源版使用记录

emqx-5.1.4开源版使用记录 windows系统安装eqmx 去官网下载 emqx-5.1.4-windows-amd64.zip&#xff0c;然后找个目录解压 进入bin目录,执行命令启动emqx 执行命令 emqx.cmd start使用emqx 访问内置的web管理页面 浏览器访问地址 http://localhost:18083/#/dashboard/overv…

H3C交换机MIB库

非常齐全的官方MIB库 为Zabbix监控华三交换机提供诸多方便。 如下信息提供下载链接和下载账号: MIB清单下载:交换机-新华三集团-H3C MIB库:MIB-新华三集团-H3C

Aspera替代方案:探索这些安全且可靠的文件传输工具

科技的发展日新月异&#xff0c;文件的传输方式也在不断地更新换代。传统的邮件附件、FTP等方式已经难以满足人们对于传输速度和安全性的需求了。近年来&#xff0c;一些新兴的文件传输工具受到了人们的关注&#xff0c;其中除了知名的Aspera之外&#xff0c;还有许多可靠安全的…

梅赛德斯-奔驰将成为首家集成ChatGPT的汽车制造商

ChatGPT的受欢迎程度毋庸置疑。OpenAI这个基于人工智能的工具&#xff0c;每天能够吸引无数用户使用&#xff0c;已成为当下很受欢迎的技术热点。因此&#xff0c;有许多公司都在想方设法利用ChatGPT来提高产品吸引力&#xff0c;卖点以及性能。在汽车领域&#xff0c;梅赛德斯…

springBoot 集中配置管理

springBoot 集中配置管理 项目配置如果上线项目&#xff0c;运维或者开发者可以直接和jar包同目录下创建文件&#xff0c;然后更改属性 项目配置 创建文件&#xff0c;调整配置如果上线项目&#xff0c;运维或者开发者可以直接和jar包同目录下创建文件&#xff0c;然后更改 属…

Redis实现共享Session

Redis实现共享Session 分布式系统中&#xff0c;sessiong共享有很多的解决方案&#xff0c;其中托管到缓存中应该是最常用的方案之一。 1、引入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM…

undefined reference to `dlopen‘ ‘SSL_library_init‘ `X509_certificate_type‘

使用Crow的时候需要注意crow依赖asio依赖OpenSSL&#xff0c;asio要求1.22以上版本&#xff0c;我使用的是1.26.0&#xff1b; 这个版本的asio要求OpenSSL是1.0.2&#xff0c;其他版本我得机器上编不过&#xff0c;ubuntu上默认带的OpenSSL是1.1.1; 所以我下载了OPENSSL1.2.0重…

QT使用QML实现地图绘制虚线

QML提供了MapPolyline用于在地图上绘制线段&#xff0c;该线段是实线&#xff0c;因此我使用Canvas自定义绘制的方式在地图上绘制线段&#xff0c;如图&#xff1a; 鼠标在地图上点击后&#xff0c;在点击位置添加图标 &#xff0c;当有多个图标被添加到地图上后&#xff0c;计…

mysql-事务特性以及隔离机制

一.ACID 事务&#xff08;Transaction&#xff09;是访问和更新数据库的程序执行单元&#xff1b;事务中可能包含一个或多个sql语句&#xff0c;这些语句要么都执行&#xff0c;要么都不执行。 1.逻辑架构和存储引擎 如上图所示&#xff0c;MySQL服务器逻辑架构从上往下可以分…

对应分析介绍及SPSS案例分析

在开展统计分析的过程中&#xff0c;分类变量&#xff08;定序和定类变量&#xff09;是我们研究的一个重点。通常我们分析分类变量间关系时&#xff0c;最常用的分析方法是卡方检验&#xff0c;其次是逻辑回归和对数线性模型等。 如果类别变量的分类较少&#xff0c;我们可以…

构建 LVS-DR 群集、配置nginx负载均衡。

目录 一、基于 CentOS 7 构建 LVS-DR 群集 1、准备四台虚拟机 2、配置负载调度器&#xff08;192.168.2.130&#xff09; 3、部署共享存储&#xff08;192.168.2.133&#xff09; 4、配置两个Web服务器&#xff08;192.168.2.131、192.168.2.132&#xff09; 测试集群 二…