当前位置: 首页 > news >正文

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.lryc.cn/news/120852.html

相关文章:

  • qt事件系统源码-----定时器
  • 【Android】ViewBinding+DataBinding+MVVM新手快速上手
  • 生成式人工智能模型:提升营销分析用户体验
  • 【并发编程】无锁环形队列Disruptor并发框架使用
  • 【C语言】初阶指针详解
  • ElasticSearch:项目实战(1)
  • React 实现文件分片上传和下载
  • 2023.8.13
  • kvm not all arguments converted during string
  • JVM 基础
  • 智谷星图赵俊:让人才和区块链产业“双向奔赴”丨对话MVP
  • C# Equals()方法报错:NullReferenceException was unhandled
  • Linux下C语言调用libcurl库获取天气预报信息
  • “深入解析JVM:Java虚拟机原理和内部结构“
  • Arrays.asList() 返回的list不能add,remove
  • 命令执行漏洞
  • Hive 中 sort by 和 order by 的区别
  • 网络资源利用最大化:爬虫带宽优化解决方案
  • STDF - 基于 Svelte 和 Tailwind CSS 打造的移动 web UI 组件库,Svelte 生态里不可多得的优秀项目
  • C语言一些有趣的冷门知识
  • Oracle数据库审计
  • Node.js新手在哪儿找小项目练手?
  • 全国各城市-货物进出口总额和利用外资-外商直接投资额实际使用额(1999-2020年)
  • CentOS 7查看磁盘空间
  • 基于PHP的轻量级博客typecho
  • MySQL多表查询
  • 消息队列(12) - 定义服务器类
  • 做正确的事 VS 正确的做事,哪个更重要?
  • 每日一题——寻找旋转排序数组中的最小值(I)
  • C语言每日一题:16:数对。