HTML4（二）

文章目录

  • 1 开发者文档
  • 2 基本标签
    • 2.1 排版标签
    • 2.2 语义化标签
    • 2.3 行内元素与块级元素
    • 2.4 文本标签
    • 2.5 常用标签补充
  • 3 图片标签
  • 4 超链接标签
    • 4.1 跳转页面
    • 4.2 跳转文件
    • 4.3 跳转锚点
    • 4.4 唤起指定应用
  • 5 列表
    • 5.1 有序列表
    • 5.2 无序列表
    • 5.3 自定义列表
  • 6 表格
    • 6.1 基本结构
    • 6.2 表格标签
    • 6.3 表格属性
    • 6.4 跨行跨列

1 开发者文档

  • W3C官网： www.w3c.org
  • W3School： www.w3school.com.cn
  • MDN： developer.mozilla.org —— 平时用的最多。

2 基本标签

2.1 排版标签

在这里插入图片描述
例：标题标签

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>学习标题标签</title></head><body><!--标题标签--><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6></body>
</html>

例： 段落标签

<p>这是，第一段
</p>
<p>这是，第二段
</p>

例：div标签

     <div><p>置身移动互联时代，人们在享受智能设备带来便利的同时，也在一些场景中面临个人信息泄露风险。随着时间推移，这样的风险日益呈现出新的表现形式。</p><p>一些APP声称看视频、玩游戏甚至走路都能赚钱，但用户想提现却难上加难，还容易泄露个人信息；新型不法软件图标透明、没有名称，在手机屏幕上十分隐蔽，不仅不停推送广告，还会收集并转卖用户隐私信息；个人信息安全和隐私保护话题引发关注，正说明其涉及群众切身利益，问题不容小视。</p></div>

2.2 语义化标签

  • 概念：用特定的标签，去表达特定的含义。
  • 原则：标签的默认效果不重要（后期可以通过CSS 随便控制效果），语义最重要！
  • 举例：对于h1标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。
  • 优势：
    • 代码结构清晰可读性强。
    • 有利于 SEO（搜索引擎优化）。
    • 方便设备解析（如屏幕阅读器、盲人阅读器等）。

2.3 行内元素与块级元素

在这里插入图片描述

2.4 文本标签

1、 用于包裹：词汇、短语等。
2、 通常写在排版标签里面。
3、 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
4、 文本标签通常都是行内元素。
在这里插入图片描述
例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>HTML_常用的文本标签</title><style>span{color: red;}</style>
</head>
<body><p>预防电信诈骗，请安装：<em>国家反诈中心app</em>。</p><p>当我们出门的时候，一定要<strong>关好门窗</strong>！</p><p>前端三个框架为：<span>Angular、React、Vue</span>。</p>
</body>
</html>

在这里插入图片描述

2.5 常用标签补充

在这里插入图片描述

3 图片标签

在这里插入图片描述

在这里插入图片描述
例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>HTML_图片标签</title>
</head>
<body><img width="200" src="奥特曼.jpg" alt="奥特曼，你相信光吗？"><img width="200" src="奥特曼.jpg" alt="奥特曼，你相信光吗？">
</body>
</html>

在这里插入图片描述

4 超链接标签

在这里插入图片描述

4.1 跳转页面

<!--跳转其他网页-->
<a href="https://www.jd.com" target="_black">去京东</a><!--跳转本地网页-->
<a href="./10_HTML排版标签.html" target="_black">去本地页面</a>

例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>超链接_跳转页面</title>
</head>
<body><a href="https://miaosha.jd.com/" target="_self">去秒杀</a><a href="https://www.baidu.com/" target="_blank">去百度</a><a href="./10_HTML排版标签.html">去排版标签</a><a href="./10_HTML排版标签.html"><img width="50" src="./奥特曼.jpg" alt="奥特曼"></a>
</body>
</html>

在这里插入图片描述

4.2 跳转文件

注意1：若浏览器无法打开文件，则会引导用户下载
注意2：若想强制触发下载，请使用download属性，属性值即为下载文件的名称

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>超链接_跳转文件</title>
</head>
<body><!-- 都是浏览器可以直接打开的文件 --><a href="./resource/我的自拍.jpg">看自拍</a><a href="./resource/小电影.mp4">看小电影</a><a href="./resource/小姐姐.gif">看小姐姐</a><a href="./resource/如何一夜暴富.pdf">如何一夜暴富</a><!-- 浏览器不可以直接打开的文件 --><a href="./resource/内部资源.zip">内部资源</a><!-- 浏览器可以打开，但要强制触发下载 --><a href="./resource/小电影.mp4" download="好看">下载小电影</a><a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">点我看百度logo</a>
</body>
</html>

在这里插入图片描述

4.3 跳转锚点

锚点：网页中的一个标记点

第一步：设置锚点

<!--第一种方式：a标签配合name属性-->
<a name="test1"></a><!--第二种方式：其他标签配合id属性-->
<h2 id="test2">我是一个位置</h2>

注意1：具有href属性的a标签是超链接；具有name属性的a标签是锚点
注意2：name和id都是区分大小写的，且id最好别是数字开头

第二步：跳转锚点

<!-- 跳转到test1锚点--><a href="#test1">去test1锚点</a><!-- 跳到本页面顶部 --><a href="#">回到顶部</a><!-- 跳转到其他页面锚点 --><a href="demo.html#test1">去demo.html页面的test1锚点</a><!-- 刷新本页面 --><a href="">刷新本页面</a><!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; --><a href="javascript:alert(1);">点我弹窗</a>

例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>超链接_跳转锚点</title>
</head>
<body><a href="#htl">看灰太狼</a><a href="#atm">看奥特曼</a><p>我是一只羊，一只很肥美的羊</p><img src="./path_test/a/喜羊羊.jpg" alt="喜羊羊"><a name="htl"></a><p>我是一只狼，一只很邪恶的狼</p><img src="./path_test/a/b/灰太狼.jpg" alt="灰太狼"><p id="atm">我是一只奥特曼，一只很能打的奥特曼</p><img src="./奥特曼.jpg" alt="奥特曼"><p>我是一只怪兽，一只很丑的怪兽</p><img src="./path_test/怪兽.jpg" alt="怪兽"><p>整体的介绍完毕了</p><a href="#">回到顶部</a><a href="">刷新页面</a><a href="javascript:;">点我弹窗</a>
</body>
</html>

4.4 唤起指定应用

通过a标签，可以唤起设备应用程序

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a><!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

5 列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

  • 列表的分类：无序列表、有序列表、定义列表

5.1 有序列表

<!--有序列表
应用范围：试卷、问答
-->
<ol><li>Java</li><li>Python</li><li>C++</li>
</ol>

5.2 无序列表

<!--无序列表
应用范围：导航、侧边栏
-->
<ul><li>Java</li><li>Python</li><li>C++</li>
</ul>

5.3 自定义列表

<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容应用范围：公司网站底部
-->
<dl><dt>学科</dt><dd>Java</dd><dd>Python</dd><dd>C++</dd><dt>位置</dt><dd>江西</dd><dd>湖北</dd><dd>湖南</dd>
</dl>

在这里插入图片描述

6 表格

6.1 基本结构

一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成
在这里插入图片描述

6.2 表格标签

  • table：表格
  • caption：表格标题
  • thead：表格头部
  • tbody：表格主体
  • tfoot：表格注脚
  • tr：每一行
  • th、td：每个单元格（备注：表格头部中用th，表格主体、表格注脚中用td）

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表格_整体结构</title>
</head>
<body><table border="1"><!-- 表格标题 --><caption>学生信息</caption><!-- 表格头部 --><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>民族</th><th>政治面貌</th></tr></thead><!-- 表格主体 --><tbody><tr><td>张三</td><td>男</td><td>18</td><td>汉族</td><td>团员</td></tr><tr><td>李四</td><td>女</td><td>20</td><td>满族</td><td>群众</td></tr><tr><td>王五</td><td>男</td><td>19</td><td>回族</td><td>党员</td></tr><tr><td>赵六</td><td>女</td><td>21</td><td>壮族</td><td>团员</td></tr></tbody><!-- 表格脚注 --><tfoot><tr><td></td><td></td><td></td><td></td><td>共计：4人</td></tr></tfoot></table>
</body>
</html>

在这里插入图片描述

6.3 表格属性

在这里插入图片描述
注意：
在这里插入图片描述
例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表格_常用属性</title>
</head>
<body><table border="1" width="500" height="500" cellspacing="0"><!-- 表格标题 --><caption>学生信息</caption><!-- 表格头部 --><thead height="50" align="center" valign="middle"><tr><th width="50" height="50" align="right" valign="bottom">姓名</th><th>性别</th><th>年龄</th><th>民族</th><th>政治面貌</th></tr></thead><!-- 表格主体 --><tbody height="520" align="center" valign="middle"><tr height="50" align="center" valign="middle"><td>张三</td><td>男</td><td>18</td><td>汉族</td><td>团员</td></tr><tr><td>李四</td><td>女</td><td>20</td><td>满族</td><td>群众</td></tr><tr><td>王五</td><td>男</td><td>19</td><td>回族</td><td>党员</td></tr><tr><td align="right" valign="top">赵六</td><td>女</td><td>21</td><td>壮族</td><td>团员</td></tr></tbody><!-- 表格脚注 --><tfoot height="50" align="center" valign="middle"><tr><td></td><td></td><td></td><td></td><td>共计：4人</td></tr></tfoot></table>
</body>
</html>

在这里插入图片描述

6.4 跨行跨列

  • rowspan：指定要跨的行数
  • colspan：指定要跨的列数
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表格_跨行与跨列</title>
</head>
<body><table border="1" cellspacing="0"><caption>课程表</caption><thead><tr><th>项目</th><th colspan="5">上课</th><th colspan="2">活动与休息</th></tr></thead><tbody><tr><td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr><tr><td rowspan="4">上午</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td><td>3-6</td><td>3-7</td><td rowspan="4">休息</td></tr><tr><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td><td>4-6</td><td>4-7</td></tr><tr><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td><td>5-6</td><td>5-7</td></tr><tr><td>6-2</td><td>6-3</td><td>6-4</td><td>6-5</td><td>6-6</td><td>6-7</td></tr><tr><td rowspan="2">下午</td><td>7-2</td><td>7-3</td><td>7-4</td><td>7-5</td><td>7-6</td><td>7-7</td><td rowspan="2">休息</td></tr><tr><td>8-2</td><td>8-3</td><td>8-4</td><td>8-5</td><td>8-6</td><td>8-7</td></tr></tbody></table>
</body>
</html>

在这里插入图片描述

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

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

相关文章

【Android】Kotlin学习之数据容器(数组创建)

【Android】Kotlin学习之数据容器(数组创建)

kotlin数组 数组是一种初始化时指定容器大小, 不可以动态调整其大小的容器 数组创建
阅读更多...
WPF之改变任务栏图标及预览

WPF之改变任务栏图标及预览

1&#xff0c;略缩图添加略缩按钮。 <Window.TaskbarItemInfo><TaskbarItemInfo x:Name"taskInfo" ProgressState"None" ProgressValue"0.6" ><TaskbarItemInfo.ThumbButtonInfos><ThumbButtonInfo x:Name"btiPlay&q…
阅读更多...
雷伴品鉴【神农式】倪琴 倪诗韵古琴

雷伴品鉴【神农式】倪琴 倪诗韵古琴

雷伴品鉴【神农式】倪琴 倪诗韵古琴 此琴材质为老杉木音色细腻&#xff0c;下指按弹舒适&#xff0c;手感极好漆面精美&#xff0c;线条流畅。
阅读更多...
OpenCV4.8 VS2019 MFC编程出现的诡异现象

OpenCV4.8 VS2019 MFC编程出现的诡异现象

OpenCV4.8及OpenCV4.4 VS2019MFC编程在调用imred&#xff08;&#xff09;函数时&#xff0c;debug X64试运行没问题。 release X64试运行时出现下面错误。 void CEasyPictureDlg::OnBnClickedOpen() {CFileDialog fdlg(TRUE, NULL, 0, OFN_HIDEREADONLY | OFN_OVERWRITEPROMP…
阅读更多...
私人健身教练预约管理小程序开发源码现成案例（小程序+APP+H5 源码部署）

私人健身教练预约管理小程序开发源码现成案例（小程序+APP+H5 源码部署）

一、私人健身教练预约管理系统-环境介绍 1.1 私人健身教练预约管理系统-运行环境 开发语言&#xff1a;PHP 数据库&#xff1a;MySQL 系统架构&#xff1a;TP 后端&#xff1a;SpringBoot 前端&#xff1a;Vue 2. 私人健身教练预约管理系统-系统介绍。 2.1私人健身教练预约管…
阅读更多...
EasyExcel导出带自定义下拉框数据的Excel模板

EasyExcel导出带自定义下拉框数据的Excel模板

文章目录 前言&#x1f4dd;一、导入依赖二、创建导出工具1.创建模板实体类2.创建自定义注解3.添加动态选择接口4.EasyExcelUtil工具类 三、导出、导入Excel接口1.导出接口2.导入接口3.导出结果 总结 前言&#x1f4dd; 在项目中导入excel时需要通过下拉框选择值传入&#xff…
阅读更多...
【websocket-客户端可视化工具】

【websocket-客户端可视化工具】

postman 新版postman (版本v11以上) &#xff0c;除了http协议&#xff0c;还支持了Websocket&#xff0c;MQTT&#xff0c;gRPC等多种连接协议&#xff0c;可以作为多种协议的客户端&#xff0c;使用起来非常方便。 使用 服务端代码 这里以websocket协议举例&#xff0c;代…
阅读更多...
基于51单片机的八路抢答器—加随机抽选功能

基于51单片机的八路抢答器—加随机抽选功能

基于51单片机的八路抢答器 &#xff08;仿真&#xff0b;程序原理图&#xff0b;设计报告&#xff09; 功能介绍 具体功能&#xff1a; 1.主持人按键控制开始抢答&#xff1b; 2.开始抢答按下&#xff0c;数码管20秒倒计时&#xff1b; 3.8个按键代表八位选手&#xff0c;谁…
阅读更多...
视频降噪算法 hqdn3d 原理分析

视频降噪算法 hqdn3d 原理分析

视频降噪 视频降噪是一种处理技术&#xff0c;旨在减少视频中的噪声&#xff0c;提高画面质量。噪声可能来自多种源头&#xff0c;包括摄像机的传感器、压缩算法、传输过程中的干扰等。降噪处理对于视频监控、视频会议、电影后期制作以及任何需要高画质输出的应用场景都非常重…
阅读更多...
今天又发现一个有意思的问题：SQL Server安装过程中下载报错，证明GPT是可以解决问题的

今天又发现一个有意思的问题：SQL Server安装过程中下载报错，证明GPT是可以解决问题的

我们在安装数据库的时候&#xff0c;都会有报错问题&#xff0c;无论是Oracle、SQL Server、还是MySQL&#xff0c;都会遇到各种各样的报错&#xff0c;这归根到底还是因为电脑环境的不同&#xff0c;和用户安装的时候&#xff0c;操作习惯的不一样导致的问题。今天的问题是&am…
阅读更多...
SwiftUI 5.0（iOS 17.0，macOS 14.0+）新 Inspector 辅助视图之趣味漫谈

SwiftUI 5.0（iOS 17.0，macOS 14.0+）新 Inspector 辅助视图之趣味漫谈

概览 在 SwiftUI 开发中，苹果为我们提供了多种辅助视图用来显示额外信息从而极大丰富了应用的表现力，比如：Alert、Sheet、ContextMenu 等等。 从 SwiftUI 5.0（iOS 17+）开始， 又增加了一种全新的辅助视图：Inspector。 在本篇博文中，您将学到如下内容： 概览1. Inspe…
阅读更多...
哈迪斯2发售时间 哈迪斯游戏攻略 苹果电脑怎么玩《哈迪斯2》

哈迪斯2发售时间 哈迪斯游戏攻略 苹果电脑怎么玩《哈迪斯2》

这两年肉鸽游戏大爆发&#xff0c;只要不是美女抽卡养成那基本上就是肉鸽了&#xff0c;但是真正让玩家口服心服的肉鸽游戏不多&#xff0c;《哈迪斯》绝对算是其中一款。 近日让玩家期待已久的肉鸽大作&#xff0c;晶体管工作室制作的《哈迪斯》正统续作《哈迪斯2》终于开卖了…
阅读更多...
网络编程基础回顾

网络编程基础回顾

计算机网络&#xff08;5&#xff09;&#xff1a;运输层 OSI 模型与 TCP/IP 协议 OSI七层协议模型 (open system interconnection) 应用层&#xff1a;为应用数据提供服务表示层&#xff1a;数据格式转化&#xff0c;数据加密会话层&#xff1a;建立、维护和管理会话传输层&…
阅读更多...
2-6 任务 猜数小游戏（单次版）

2-6 任务 猜数小游戏（单次版）

本任务要求编写一个猜数小游戏&#xff08;单次版&#xff09;&#xff0c;游戏规则是计算机产生一个0到100之间的随机整数&#xff0c;用户通过输入猜测的数字进行猜测&#xff0c;根据猜测情况给出提示&#xff0c;直到猜对为止。编程思路是利用while循环和多分支结构实现永真…
阅读更多...
美特CRM upload.jsp 文件上传致RCE漏洞复现(CNVD-2023-06971)

美特CRM upload.jsp 文件上传致RCE漏洞复现(CNVD-2023-06971)

0x01 产品简介 MetaCRM是一款智能平台化CRM软件,通过提升企业管理和协同办公,全面提高企业管理水平和运营效率,帮助企业实现卓越管理。美特软件开创性地在CRM领域中引入用户级产品平台MetaCRM V5/V6，多年来一直在持续地为客户创造价值，大幅提升了用户需求满足度与使用的满意…
阅读更多...
静态分配IP，解决本地连接不上Linux虚拟机的问题

静态分配IP，解决本地连接不上Linux虚拟机的问题

在Window环境下&#xff0c;使用远程终端工具连接不了VMware搭建的Linux虚拟机&#xff08;CentOS 7&#xff09;&#xff0c;并且在命令行ping不通该Linux虚拟机的IP地址。下面通过配置网关解决本地与Linux虚拟机连接问题&#xff1a; 1 查看虚拟机网关地址 在VMware虚拟机上…
阅读更多...
快速掌握Element-Ul，构建高效网页应用【AI写作】

快速掌握Element-Ul，构建高效网页应用【AI写作】

首先&#xff0c;这篇文章是基于笔尖AI写作进行文章创作的&#xff0c;喜欢的宝子&#xff0c;也可以去体验下&#xff0c;解放双手&#xff0c;上班直接摸鱼~ 按照惯例&#xff0c;先介绍下这款笔尖AI写作&#xff0c;宝子也可以直接下滑跳过看正文~ 笔尖Ai写作&#xff1a;…
阅读更多...
竞赛课第十周（巴什游戏，尼姆博弈）

竞赛课第十周（巴什游戏，尼姆博弈）

目录 目的: 实验内容: 第一题 思路&#xff1a; 【参考代码】 【运行结果】 第二题 输入&#xff1a; 输出&#xff1a; 【参考代码】 【运行结果】 目的: 熟悉并掌握公平组合游戏 &#xff08;1&#xff09;巴什游戏、尼姆游戏 &#xff08;2&#xff09;图游戏…
阅读更多...
【源码+文档+调试教程】基于微信小程序的电子购物系统的设计与实现

【源码+文档+调试教程】基于微信小程序的电子购物系统的设计与实现

摘 要 由于APP软件在开发以及运营上面所需成本较高&#xff0c;而用户手机需要安装各种APP软件&#xff0c;因此占用用户过多的手机存储空间&#xff0c;导致用户手机运行缓慢&#xff0c;体验度比较差&#xff0c;进而导致用户会卸载非必要的APP&#xff0c;倒逼管理者必须改…
阅读更多...
【数据结构与算法】力扣 226. 翻转二叉树

【数据结构与算法】力扣 226. 翻转二叉树

题目描述 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a; root [4,2,7,1,3,6,9] 输出&#xff1a; [4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a; root [2,1,3] 输出&#xff1a; [2,3,1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023