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

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

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

相关文章

商业智能BI,如何区别联机事务处理(OLTP)和联机分析处理(OLAP)

商业智能(Business Intelligence&#xff0c;简称&#xff1a;BI)&#xff0c;又称商业智慧或商务智能&#xff0c;指用现代数据仓库技术、线上分析处理技术、数据挖掘和数据展现技术进行数据分析以实现商业价值。 商业智能BI - 派可数据数据可视化分析平台 定义为下列软件工具…

Kotlin语法

整理关键语法列表如下&#xff1a; https://developer.android.com/kotlin/interop?hlzh-cn官方指导链接 语法形式 说明 println("count ${countnum}")字符串里取值运算 val count 2 var sum 0 类型自动推导 val 定义只读变量&#xff0c;优先 var定义可变变量…

小程序商城开发制作

当开发一个商城小程序时&#xff0c;费用是一个非常重要的考虑因素。然而&#xff0c;准确回答这个问题是有一定困难的&#xff0c;因为开发商城小程序的费用取决于多个因素。以下是一些可能影响价格的主要因素&#xff1a; 1. 功能需求&#xff1a;商城小程序的复杂程度和功能…

基于Spring Boot的网络在线学习网站的设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的网络在线学习网站的设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java spri…

无涯教程-Perl - opendir函数

描述 此函数使用readdir函数打开目录EXPR,并将其与DIRHANDLE关联以进行处理。 语法 以下是此函数的简单语法- opendir DIRHANDLE, EXPR返回值 如果成功,此函数将返回true。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perl -w$dirname"/tmp";opendir ( …

sentinel客户端和dashboard交互

回顾 在前面的章节中&#xff1a;通过阐述sentinel简单使用、滑动窗口、核心流程源码分析把sentinel限流、熔断等主要功能说明清楚了&#xff0c;但我们在实际使用的过程中&#xff0c;不可能通过硬编码的方式设置规则&#xff0c;且规则也没法直观的维护&#xff0c;为此肯定…

Spring-1-深入理解Spring XML中的依赖注入(DI):简化Java应用程序开发

学习目标 前两篇文章我们介绍了什么是Spring,以及Spring的一些核心概念&#xff0c;并且快速快发一个Spring项目&#xff0c;以及详细讲解IOC&#xff0c;今天详细介绍一些DI(依赖注入) 能够配置setter方式注入属性值 能够配置构造方式注入属性值 能够理解什么是自动装配 一、…

TFN 新推出信息安全产品 ,手机安全(插卡监听器)探测器 FW5 反窃听数字协议无线探测器

本产品是新研制的检测设备&#xff0c;工程师或反监测专家把它作为一个可靠的工具&#xff0c;用来 跟踪各种无线电数字传输设备&#xff0c;例如 GSM 、蓝牙等新型视听设备。随着现代科学技术 的不断发展&#xff0c;不同的数字传输方式已在我们的生活中得到了广泛的应用。例…

pytest fixture 常用参数

fixture 常用的参数 参数一&#xff1a;autouse&#xff0c;作用&#xff1a;自动运行&#xff0c;无需调用 举例一&#xff1a;我们在类中定义一个function 范围的fixture; 设置它自动执行autouseTrue&#xff0c;那么我们看下它执行结果 输出&#xff1a; 说明&#xff1a;…

EXPLAIN使用分析

系列文章目录 文章目录 系列文章目录一、type说明二、MySQL中使用Show Profile1.查看当前profiling配置2.在会话级别修改profiling配置3.查看profile记录4.要深入查看某条查询执行时间的分布 一、type说明 我们只需要注意一个最重要的type 的信息很明显的提现是否用到索引&…

3个月快速入门LoRa物联网传感器开发

在这里插入图片描述 快速入门LoRa物联网传感器开发 LoRa作为一种LPWAN(低功耗广域网络)无线通信技术,非常适合物联网传感器和行业应用。要快速掌握LoRa开发,需要系统学习理论知识,并通过实际项目积累经验。 摘要: 先学习LoRa基础知识:原理、网络架构、协议等,大概需要2周时间…

基于Flask的模型部署

基于Flask的模型部署 一、背景 Flask&#xff1a;一个使用Python编写的轻量级Web应用程序框架&#xff1b; 首先需要明确模型部署的两种方式&#xff1a;在线和离线&#xff1b; 在线&#xff1a;就是将模型部署到类似于服务器上&#xff0c;调用需要通过网络传输数据&…

YOLOv5基础知识入门(5)— 损失函数(IoU、GIoU、DIoU、CIoU和EIoU)

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。使用YOLOv5训练模型阶段&#xff0c;需要用到损失函数。损失函数是用来衡量模型预测值和真实值不一样的程度&#xff0c;极大程度上决定了模型的性能。本节就给大家介绍IoU系列损失函数&#xff0c;希望大家学习之后能够有…

数据结构刷题训练——链表篇(三)

目录 文章目录 前言 1. 题目一&#xff1a;环形链表Ⅱ 1.1 思路 1.2 分析 1.3 题解 1.4 方法二 2. 题目二&#xff1a;复制带随机指针的链表 2.1 思路 2.2 分析 2.3 题解 总结 前言 在这个专栏博客中&#xff0c;我们将提供丰富的题目资源和解题思路&#xff0c;帮助读者逐步提…

什么是React?React与VU的优缺点有哪些?

什么是React&#xff1f;什么是VUE&#xff1f; 维基百科上的概念解释&#xff0c;Vue.js是一个用于创建用户界面的开源MVVM前端JavaScript框架&#xff0c;也是一个创建单页应用的Web应用框架。Vue.js由尤雨溪&#xff08;Evan You&#xff09;创建&#xff0c;由他和其他活跃…

探究使用HTTP代理ip后无法访问网站的原因与解决方案

目录 访问网站的原理是什么 1. DNS解析 2. 建立TCP连接 3. 发送HTTP请求&#xff1a; 4. 服务器响应&#xff1a; 5. 浏览器渲染&#xff1a; 6. 页面展示&#xff1a; 使用代理IP后访问不了网站&#xff0c;有哪些方面的原因 1. 代理IP的可用性&#xff1a; 2. 代理…

在单元测试中使用Jest模拟VS Code extension API

对VS Code extension进行单元测试时通常会遇到一个问题&#xff0c;代码中所使用的VS Code编辑器的功能都依赖于vscode库&#xff0c;但是我们在单元测试中并没有添加对vscode库的依赖&#xff0c;所以导致运行单元测试时出错。由于vscode库是作为第三方依赖被引入到我们的VS C…

3.1 Spring MVC概述

1. MVC概念 MVC是一种编程思想&#xff0c;它将应用分为模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;、控制器&#xff08;Controller&#xff09;三个层次&#xff0c;这三部分以最低的耦合进行协同工作&#xff0c;从而提高应用的可扩展性及可维护…

【Archaius技术专题】「Netflix原生态」动态化配置服务之微服务配置组件变色龙

前提介绍 如果要设计开发一套微服务基础架构&#xff0c;参数化配置是一个非常重要的点&#xff0c;而Netflix也开源了一个叫变色龙Archaius的配置中心客户端&#xff0c;而且Archaius可以说是比其他客户端具备更多生产级特性&#xff0c;也更灵活。*在NetflixOSS微服务技术栈…

资源限制类题目解法,看这一篇就够了!

算法拾遗三十七资源限制类题目 资源限制技巧汇总32位无符号整数的范围是0~4,294,967,295&#xff0c;现在有一个正好包含40亿个无符号整数的文件&#xff0c;可以使用最多1GB的内存&#xff0c;怎么找到出现次数最多的数32位无符号整数的范围是0~4294967295&#xff0c;现在又一…