HTML回顾

news2025/5/25 19:44:18

html全称：HyperText Markup Language（超文本标记语言）

注重标签语义，而不是默认效果

规则

块级元素包括: marquee、div等

行内元素包括: span、input等

规则1：块级元素中能写：行内元素、块级元素（几乎什么都能写）

规则2：行级元素中能写：行内元素，但不能写：块级元素

规则3：标签内编写多个同名属性，后面的会失效，也就是说只有第一个生效

特殊规则：h1~h6不能互相嵌套

特殊规则：p标签中不能写块元素（未过时的）

特殊规则：a标签中不能写a标签

文本标签

在这里插入图片描述

在这里插入图片描述

图片标签与常见的图片格式

在这里插入图片描述

  1. jpg 格式
    一种有损的压缩格式
    支持的颜色丰富、占用空间小、不支持透明背景、不支持动态图

  2. png 格式
    一种无损的压缩格式
    支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图

  3. bmp 格式
    一种不进行压缩的格式
    支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图

  4. gif 格式
    仅支持256种颜色，色彩呈现不是很完整
    支持的颜色较少、支持简单透明背景、支持动态图

  5. webp 格式
    谷歌推出的一种格式
    具备以上几种格式的优点，但兼容性不太好。

  6. base64 格式

    1. 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开
    2. 原理：把图片进行 base64 编码，形成一串文本
    3. 如何生成：靠一些工具或网站
    4. 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
    5. 使用场景：一些较小的图片，或者需要和网页一起加载的图片。

超链接

  1. 在html代码里敲的多个回车或多个空格，只会被浏览器解析为一个空格
  2. 虽然 a 是行内元素，但 a 元素可以包裹除它自身以外的任何元素
  3. 跳转浏览器无法打开的文件，则会引导用户下载
  4. 若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称

跳转锚点

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接_跳转锚点</title>
</head>
<body>

    <a href="#xyy">找喜羊羊</a>
    <a href="#htl">找灰太狼</a>
    <a href="#wk">找悟空</a>
    <a href="#atm">找奥特曼</a>
    <a href="#gs">找怪兽</a>
  
    <a name="xyy"></a>
    <p>我是喜羊羊</p>

    <img src="./images/喜羊羊.jpg" />
    <a name="htl"></a>

    <p>我是灰太狼</p>
    <img src="./images/灰太狼.jpg" />

    <p id="wk">我是悟空</p>
    <img src="./images/悟空.jpg" />

    <p id="atm">我是奥特曼</p>
    <img src="./images/奥特曼.jpg" />

    <p id="gs">我是怪兽</p>
    <img src="./images/怪兽.jpg" />
    
    <p>整体介绍完毕了</p>
    <a href="#">回到顶部</a>
    <a href="">刷新页面</a>
    <a href="javascript:alert(666);">点我弹窗</a>
</body>
</html>

两种跳转锚点的办法（推荐使用第二种）

  1. a 标签的name属性标记锚点，利用顶部 a 标签的 href 属性跳转
  2. 直接使用id属性标记锚点，利用顶部 a 标签的 href 属性跳转

超链接唤醒应用
代码

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接_唤醒其他应用程序</title>
</head>
<body>
    <a href="tel:10086">电话联系</a>
    <a href="sms:10086">短信联系</a>
    <a href="mailto:10086@qq.com">邮件联系</a>
</body>
</html>

列表

  1. 有序列表（Ordered List） <ol>
  2. 无序列表（Unordered List） <ul>
  3. 自定义列表（Definition List） <dl>
  4. 列表项（List items） <li>
  5. 定义标题（Definition Title） <dt>
  6. 定义描述（Definition Description）<dd>

代码

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <h2>把大象放进冰箱分几步？</h2>
    <ol>
        <li>打开冰箱</li>
        <li>把大象放进去</li>
        <li>关上冰箱</li>
    </ol>
    
    <h2>我的爱好</h2>
    <ul>
        <li>看电影</li>
        <li>打游戏</li>
        <li>学习</li>
    </ul>
    
    <h2>我的好友</h2>
    <dl>
        <dt>张三</dt>
        <dd>喜欢打游戏</dd>
        <dt>李四</dt>
        <dd>喜欢看电影</dd>
        <dt>王五</dt>
        <dd>喜欢学习</dd>
    </dl>
</body>
</html>

表格

基本结构

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

在这里插入图片描述

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>表格</title>

</head>

<body>

    <table border="1">

        <!-- 表格标题 -->
        <caption>学生信息表</caption>
        
        <!-- 表格头 -->
        <thead>
            <tr>
                <th>姓名</th>

                <th>年龄</th>

                <th>性别</th>
            </tr>
        </thead>
        
        <!-- 表格内容 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>女</td>
            </tr>
        </tbody>
        
        <!-- 表格尾部 -->
        <tfoot>
            <tr>
                <td colspan="3">版权所有</td>
            </tr>
        </tfoot>
    </table>
    
</body>

</html>

几个常用的标签

代码

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>补充几个常用的标签</title>
</head>

<body>
    <!-- 换行标签 -->
    <a href="https://www.baidu.com/">百度一下</a>
    <br>
    <a href="https://www.jd.com/">去京东</a>

    <!-- 分割线标签 -->
    <div>第一章</div>
    <p>xxxxxxx, 就这样最后王子和公主就在一起了</p>
    <hr>
    <div>第二章</div>
    <p>一个月黑风高的晚上,xxxxxxx</p>

    <!-- 预格式化标签 -->
    <pre>
        I       Love        You

            I   Love    You

                Love
    </pre>
</body>

</html>

表单

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单常用控件</title>
</head>

<body>
    <form action="https://search.jd.com/search">
        <label for="zhanghu">账户：</label>
        <input id="zhanghu" type="text" name="account" placeholder="请输入账户">
        <br>
        <label for="mima">密码：</label>
        <input id="mima" type="password" name="password" placeholder="请输入密码">
        <br>
        <!-- 单选框 -->
        <label>性别：</label>
        <input id="nan" type="radio" name="sex" value="男" checked><label for="nan">男</label>
        <input id="nv" type="radio" name="sex" value="女"><label for="nv">女</label>
        <br>
        <!-- 多选框 -->
        <label>爱好：</label>
        <label><input type="checkbox" name="hobby" value="吃饭">吃饭</label>
        <label><input type="checkbox" name="hobby" value="睡觉">睡觉</label>
        <label><input type="checkbox" name="hobby" value="打游戏">打游戏</label>
        <br>
        <label>其他
            <textarea name="other" cols="30" rows="10"></textarea>
        </label>
        <br>
        <!-- 隐藏域 -->
        <input type="hidden" name="tag" value="123">
        <!-- 下拉框 -->
        <label>籍贯：</label>
        <select name="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
        </select>
        <br>
        <!--
            <button type="submit">确认</button>
            <button type="reset">重置</button>
            <button type="button">按钮</button>
        -->
        <input type="submit" value="确认">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
    </form>
</body>
</html>

注意:

  • button按钮的默认type值为submit，会引起表单的提交
  • 普通按钮的type值需写为button
  • 两种与label关联方式
    • 让 label 标签的 for 属性的值等于表单控件的 id
    • 把表单控件套在 label 标签的里面

fieldset 与 legend 控件
代码

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单控件fieldset与legend</title>
</head>

<body>
    <form action="https://search.jd.com/search">
        <fieldset>
            <legend>主要信息</legend>
            <label for="zhanghu">账户：</label>
            <input id="zhanghu" type="text" name="account" placeholder="请输入账户">
            <br>
            <label for="mima">密码：</label>
            <input id="mima" type="password" name="password" placeholder="请输入密码">
            <br>
            <!-- 单选框 -->
            <label>性别：</label>
            <input id="nan" type="radio" name="sex" value="男" checked><label for="nan">男</label>
            <input id="nv" type="radio" name="sex" value="女"><label for="nv">女</label>
        </fieldset>
        <br>
        <fieldset>
            <legend>附加信息</legend>
            <!-- 多选框 -->
            <label>爱好：</label>
            <label><input type="checkbox" name="hobby" value="吃饭">吃饭</label>
            <label><input type="checkbox" name="hobby" value="睡觉">睡觉</label>
            <label><input type="checkbox" name="hobby" value="打游戏">打游戏</label>
            <br>
            <label>其他
                <textarea name="other" cols="30" rows="10"></textarea>
            </label>
            <br>
            <!-- 下拉框 -->
            <label>籍贯：</label>
            <select name="city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
            </select>
        </fieldset>
        <!-- 隐藏域 -->
        <input type="hidden" name="tag" value="123">
        <br>
        <!--
            <button type="submit">确认</button>
            <button type="reset">重置</button>
            <button type="button">按钮</button>
        -->
        <input type="submit" value="确认">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
    </form>
</body>

</html>

框架标签

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>框架标签</title>
</head>

<body>
    <!-- 利用iframe标签实现网页嵌套 -->
    <!-- <iframe src="https://www.4399.com" frameborder="1" width="1000" height="500"></iframe>
    <iframe src="https://www.taobao.com" frameborder="1" width="500" height="500"></iframe> -->
    <!-- 利用与超链接的target属性配合使用 -->
    <a href="https://www.4399.com" target="container">去4399</a>
    <a href="https://www.taobao.com" target="container">去淘宝</a>
    <!-- 与表单的target属性配合使用 -->
    <form action="https://so.toutiao.com/search" target="container">
        <input type="text" name="keyword">
        <input type="submit" value="搜索">
    </form>
    <iframe frameborder="0" width="500" height="500" name="container"></iframe>
</body>

</html>

字符实体

在这里插入图片描述

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符实体</title>
</head>

<body>
    <!-- 空格 -->
    <p>加油&nbsp;加油&nbsp;加油</p>
    <!-- < 和 > -->
    <p>我们学习过很多的标题标签，其中&lt;h1&gt;是最厉害的一个！</p>

    <p>我们今天学习了一个可以表示空格的字符实体，它是：&amp;nbsp;</p>

    <p>我们今天学习了一个可以表示 & 的字符实体，它是：&amp;amp;</p>

    <p>当前商品的价格是: &yen;199</p>

    <p>&copy;版权所有</p>

    <p>2 &times; 2 = 4</p>

    <p>2 &divide; 2 = 1</p>
</body>

</html>

全局属性

在这里插入图片描述

meta元信息

在这里插入图片描述

代码

<!DOCTYPE html>

<html lang="en">

<head>
    <!-- 配置字符编码格式 -->
    <meta charset="UTF-8">
    <!-- 针对IE浏览器的一个兼容设置 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对移动端的设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 配置网页关键字，针对搜索引擎 -->
    <meta name="keywords" content="HTML,CSS,JavaScript">
    <!-- 配置网页描述 -->
    <meta name="description" content="网页描述">
    <!-- 配置网页作者 -->
    <meta name="author" content="linux-hzh">
    <!-- 配置网页版权 -->
    <meta name="copyright" content="linux-hzh">
    <!-- 配置网页搜索引擎索引 -->
    <meta name="robots" content="index,follow">
    <!-- 配置网页自动刷新 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">

    <title>meta元信息</title>
</head>

<body>
    <h1>你好呀</h1>
</body>

</html>

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

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

相关文章

机器视觉6-halcon高级教程

机器视觉6-halcon高级教程

机器视觉6-halcon高级教程 双目立体视觉原理视差外极线几何双目标定 双目立体视觉之Halcon标定一&#xff0e;标定结果二.Halcon标定过程1.获取左右相机图像中标定板的区域;2.提取左右相机图像中标定板的MARK点坐标和摄像机外部参数;3.执行双目标定;4.获取非标准外极线几何到标…
阅读更多...
YOLOv8 的双 Backbone 架构：解锁目标检测新性能

YOLOv8 的双 Backbone 架构：解锁目标检测新性能

一、开篇&#xff1a;为何踏上双 Backbone 探索之路 在目标检测的领域中&#xff0c;YOLOv8 凭借其高效与精准脱颖而出&#xff0c;成为众多开发者和研究者的得力工具。然而&#xff0c;传统的单 Backbone 架构&#xff0c;尽管已经在诸多场景中表现出色&#xff0c;但仍存在一…
阅读更多...
1.4 TypeScript 编译是如何工作的？

1.4 TypeScript 编译是如何工作的？

TypeScript 是 JavaScript 的超集&#xff0c;最显著的优势是引入了静态类型检查。它能帮助开发者在编写代码阶段捕获错误&#xff0c;从而提升代码的健壮性和可维护性。虽然 TypeScript 本身不能直接在浏览器或 Node.js 中运行&#xff0c;但它可以被编译成标准的 JavaScript&…
阅读更多...
Web 服务、 Nfs 服务器以及 Dns 服务器综合实验

Web 服务、 Nfs 服务器以及 Dns 服务器综合实验

要求&#xff1a; 1.web 服务的资源文件通过 nfs 服务器共享 www.luntan.com 2.确保所有主机时间同步 3.定义本地 dns 服务器解析 web 主机域名 实验&#xff1a; 主机服务程序192.168.96.142dns、nfs192.168.96.132web 服务器说明&#xff1a; 设备 IP服务端 192…
阅读更多...
汇编语言的子程序魔法：解锁四则运算的奥秘

汇编语言的子程序魔法：解锁四则运算的奥秘

在嵌入式系统的世界里&#xff0c;汇编语言就像是魔法师手中的魔杖&#xff0c;能够直接操控硬件&#xff0c;实现各种神奇的功能。今天&#xff0c;我将带你走进一场充满乐趣的实验&#xff1a;如何用汇编语言实现四则运算&#xff0c;并将它们封装成子程序。这不仅是一次技术…
阅读更多...
快速解决Linux 中yum镜像拉取失败问题

快速解决Linux 中yum镜像拉取失败问题

在linux中使用yum命令拉取镜像的时候&#xff0c;如果出现如下类似报错&#xff1a; 我这里是安装Erlang环境也是同样报错&#xff1a; 其实就是网络环境的问题&#xff0c;更换为国内的镜像源就行了&#xff0c;可以选择cmd的ssh连接方式(命令&#xff1a;ssh root192.168.xxx…
阅读更多...
HarmonyOS基础组件:Button三种类型的使用

HarmonyOS基础组件:Button三种类型的使用

简介 HarmonyOS在明年将正式不再兼容Android原生功能&#xff0c;这意味着对于客户端的小伙伴不得不开始学习HarmonyOS开发语言。本篇文章主要介绍鸿蒙中的Button使用。 HarmonyOS中的Button相较于Android原生来说&#xff0c;功能比较丰富&#xff0c;扩展性高&#xff0c;减…
阅读更多...
产业互联网+三融战略：重构企业增长密码

产业互联网+三融战略：重构企业增长密码

产业互联网时代&#xff1a;用"三融"重构企业增长飞轮 在产业互联网浪潮下&#xff0c;企业面临资源分散、资金短缺、人才难聚的三重挑战。本文提出的"融人、融资、融资源"顶层设计&#xff0c;正为新时代企业构建增长新引擎。 一、三级合伙人体系&#x…
阅读更多...
Centos系统资源镜像配置

Centos系统资源镜像配置

主要体现 yum 命令执行报错&#xff0c;排除网络连接问题 解决步骤&#xff1a; 下载安装工具 # 安装 wget curl vim yum install -y wget curl vim 原有repo文件备份 # 进入配置文件所在文件夹 cd /etc/yum.repos.d# 创建 backup 文件夹 mkdir backup# 备份文件放置文件夹 m…
阅读更多...
【Linux网络篇】：Socket网络套接字以及简单的UDP网络程序编写

【Linux网络篇】：Socket网络套接字以及简单的UDP网络程序编写

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;Linux篇–CSDN博客 文章目录 网络编程套接字一.预备知识1.理解源IP地址和目的IP地址2.认识端…
阅读更多...
学习路之uniapp--unipush2.0推送功能--给自己发通知

学习路之uniapp--unipush2.0推送功能--给自己发通知

学习路之uniapp--unipush2.0推送功能--给自己发通知 一、绑定云空间及创建云函数二、编写发送界面三、效果后期展望&#xff1a; 一、绑定云空间及创建云函数 package.json {"name": "server-push","dependencies": {},"main": "…
阅读更多...
leetcode hot100刷题日记——12.反转链表

leetcode hot100刷题日记——12.反转链表

解答&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode *next) : val(x), next(n…
阅读更多...
《Python语言程序设计》第4章第8题3个个位数之间比大小。‘a小于b而b大于c’这是最有漏洞的一个对比，请问我如何判断a和c

《Python语言程序设计》第4章第8题3个个位数之间比大小。‘a小于b而b大于c’这是最有漏洞的一个对比，请问我如何判断a和c

升序来做这个题 比如123就变成321 需要比对3个数 这不是比对2个数。a和b比对 我们可以直接写 if a>b: print(ab) else print(ba) 但是现在是3个数abc 如果进行if比对呢 if a > b >c: print(a,b,c) elif a < b >c: print(bca) … 简洁的代码变成了复杂的代码段。…
阅读更多...
Selenium 测试框架 - Python

Selenium 测试框架 - Python

🚀Selenium Python 实战指南：从入门到进阶 Selenium 是 Web 自动化测试中最受欢迎的工具之一，支持多种浏览器和语言。本文将从环境搭建到多浏览器兼容、测试框架集成、元素定位方式、常用操作、浏览器配置等多个方面进行详细讲解，并分享常见的最佳实践建议。 📦一、环境…
阅读更多...
RNN GRU LSTM 模型理解

RNN GRU LSTM 模型理解

一、RNN 1. 在RNN中&#xff0c; 二、GRU 1. GRU是为了解决RNN 梯度消失引入的改良模型&#xff0c; 2. GRU 通过门控 Gamma_r Gamma_u 两个变量&#xff0c;实现了对于过往记忆的筛选&#xff1a;这种机制使得GRU能够灵活地决定何时“忘记”过去的信息以及何时“记住”新的…
阅读更多...
【MC】红石比较器

【MC】红石比较器

在《我的世界》&#xff08;Minecraft&#xff09;中&#xff0c;红石比较器&#xff08;Redstone Comparator&#xff09; 是一种高级红石元件&#xff0c;主要用于 检测、比较或处理信号强度&#xff0c;同时还能与容器、特定方块互动。 红石比较器有两种模式&#xff1a; 比…
阅读更多...
红黑树简单模拟实现

红黑树简单模拟实现

定义成员变量旋转insert以234树的角度来待插入操作具体代码 完整代码 我们前面实现了 二叉搜索树和 AVL树。 其中AVL树是二叉搜索树的改进&#xff0c;但是有些人觉得二叉树搜索的插入调整太频繁了&#xff0c;或者说平衡条件过于苛刻。 于是人们放松了左右子树高度差的限制&…
阅读更多...
豪越科技：消防应急装备智能仓储管理新变革

豪越科技：消防应急装备智能仓储管理新变革

在消防救援工作中&#xff0c;消防装备无疑是消防员们与火灾等灾害顽强对抗的关键“武器”。然而&#xff0c;传统的消防装备管理模式长期以来饱受诸多痛点的困扰&#xff0c;严重影响着消防工作的高效开展和救援效果。 在过去&#xff0c;装备丢失的情况时有发生。由于缺乏有效…
阅读更多...
如何设计Agent的记忆系统

如何设计Agent的记忆系统

最近看了一张画Agent记忆分类的图 我觉得分类分的还可以&#xff0c;但是太浅了&#xff0c;于是就着它的逻辑&#xff0c;仔细得写了一下在不同的记忆层&#xff0c;该如何设计和选型 先从流程&#xff0c;作用&#xff0c;实力和持续时间的这4个维度来解释一下这几种记忆&am…
阅读更多...
毕业论文格式（Word）

毕业论文格式（Word）

目录 Word目录怎么自动生成&#xff1f;快速生成试试这3个方法&#xff01; - 知乎https://zhuanlan.zhihu.com/p/692056836目录生成需要先设置标题样式&#xff0c;这个不仅是目录生成需要&#xff0c;和后续的图表也有关系。 最好不要自己创建新的样式&#xff0c;而是在现有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023