HTML详解连载(2)

简介: HTML详解连载(2)

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

相关文章
|
移动开发 HTML5
|
3天前
|
存储 移动开发 UED
HTML5 1
HTML5 是对传统 HTML 的重大升级,引入了新元素和属性,全面支持 CSS3,并增强了多媒体功能(Video 和 Audio)、图形处理(2D/3D 制图)、本地存储和应用开发能力。它简化了视频和音频的嵌入,提供了强大的图形绘制工具(如 &lt;canvas&gt; 和 SVG),并优化了 Web 应用的性能和用户体验。此外,HTML5 还引入了多种新的 CSS3 特性,如动画、转换和阴影效果等。
|
28天前
|
移动开发 前端开发 JavaScript
HTML
【10月更文挑战第14天】HTML
28 4
|
3月前
|
数据格式
什么是HTML?
【8月更文挑战第27天】什么是HTML?
38 2
|
4月前
|
移动开发 SEO HTML5
HTML4(一)
HTML4(一)
19 0
|
6月前
|
前端开发 JavaScript
什么是HTML?
HTML是超文本标记语言,用于创建网页的标准语言,专注于内容结构和含义,不涉及样式。它由标签组成,如&lt;title&gt;、&lt;p&gt;、&lt;a&gt;等,与CSS和JavaScript配合使用,分别负责样式和交互性。示例代码展示了一个基本的HTML文档结构,包括标题、段落和链接。
|
6月前
|
前端开发 程序员 开发者
8个你可能不知道的令人震惊的 HTML 技巧
8个你可能不知道的令人震惊的 HTML 技巧
|
Web App开发 前端开发 JavaScript
HTML初识
HTML初识
103 0
|
移动开发 HTML5
HTML5
HTML5
72 0
|
前端开发 程序员
HTML详解连载(5)
HTML详解连载(5)