前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML详解连载(2)

HTML详解连载(2)

作者头像
学编程的小程
发布2023-10-11 15:58:45
2000
发布2023-10-11 15:58:45
举报
文章被收录于专栏:学习笔记ol
HTML详解连载(2)

下面进行专栏介绍

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

开始喽

超链接

作用

点击跳转到其他页面。

代码示例
代码语言:javascript
复制
  <a href=”https://www.baidu.com”>跳转到百度</a>
解释
代码语言:javascript
复制
href属性值是跳转地址,是超链接的必须属性。
属性加上target=”_black”新窗口打开页面
经验分享

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

音频标签

代码示例
代码语言:javascript
复制
	<audio src=”音频的URL”></audio>
注意

常见属性

作用

特殊说明

src(必须属性)

音频URL

支持格式:MP3、Ogg、Wav

controls

显示音频控制面板

loop

循环播放

autoplay

自动播放

为提升用户体验,浏览器一般会禁用自动播放功能

强调

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

视频标签

代码示例
代码语言:javascript
复制
<video src=”视频的URL”></video>
注意

常见属性

作用

特殊说明

src(必须属性)

音频URL

支持格式:MP4、Ogg、WabM

controls

显示视频控制面板

loop

循环播放

autoplay

自动播放

为提升用户体验,浏览器支持在静音状态自动播放功能

强调

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

列表

作用:布局内容排列整齐的区域。
分类:无序列表,有序列表,定义列表
无序列表
作用

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

标签

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

示例
代码语言:javascript
复制
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ul>
注意事项:

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

有序列表
作用

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

标签

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

示例:
代码语言:javascript
复制
<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ol>
注意事项:

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

定义列表
标签

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

示例
代码语言:javascript
复制
<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.删除其他单元格

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-10-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • HTML详解连载(2)
  • 下面进行专栏介绍
  • 开始喽
    • 超链接
      • 作用
      • 代码示例
      • 解释
      • 经验分享
    • 音频标签
      • 代码示例
      • 注意
      • 强调
    • 视频标签
      • 代码示例
      • 注意
      • 强调
    • 列表
      • 作用:布局内容排列整齐的区域。
      • 分类:无序列表,有序列表,定义列表
      • 无序列表
      • 有序列表
      • 定义列表
    • 表格-基本用法
      • 标签
      • 标签名及说明
      • 注意事项:
    • 表格结构标签
      • 作用
    • 合并单元格
      • 作用
      • 步骤
相关产品与服务
视频理解
视频理解是基于腾讯领先的 AI 技术和丰富的内容运营经验,对视频内容输出涵盖人物、场景、物体、事件的高精度、多维度的优质标签内容。通过对视频内容进行细粒度的结构化解析,应用于媒资系统管理、素材检索、内容运营等业务场景中。其中一款产品是媒体智能标签(Intelligent Media Label Detection)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档