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

前端_001_html扫盲

news 2025/6/23 5:14:26

文章目录

  • 概念
  • 标签及属性
    • 常用全局属性
    • head里常用标签
    • body里常用标签
    • 表情符号
  • url编码

概念

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

<!DOCTYPE html>

表示用的html规范

其他就是html的概念，标签和属性

标签及属性

常用全局属性

每个标签都有的属性

常用标签

属性描述
accesskey规定激活元素的快捷键。
class规定元素的一个或多个类名（引用样式表中的类）。
contenteditable规定元素内容是否可编辑。
dir规定元素中内容的文本方向。
draggable规定元素是否可拖动。
dropzone规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden规定元素仍未或不再相关。
id规定元素的唯一 id。
lang规定元素内容的语言。
popover规定弹出框元素。
spellcheck规定是否对元素进行拼写和语法检查。
style规定元素的行内 CSS 样式。
title规定有关元素的额外信息。

重点

id,class,style,title

head里常用标签

1.标题<title>2.文档字符编码  <meta charset="utf-8" />
<meta> 还能用于搜索引擎优化3.指定文档图标
<link rel="icon" href="/favicon-48x48.[some hex hash].png" />4.引入css样式
<link rel="stylesheet" href="my-css-file.css" />    5.引入js脚本
<script src="my-js-file.js" defer ></script>    //defer属性表示该脚本会在DOM加载完后执行
6.直接写css样式
<style>p {color: #26b72b;}code {font-weight: bold;}
</style>

总结head里常用标签

title
meta
link
style
script

body里常用标签

1.标题
<h1>标题</h1>
2.段落
<p>3.上标下标
<sub> <sup>    4.链接(主要是超链接和锚点作用)
<a href>  5.图片
<img> <map>   6.表格
<table>    7.列表
<ul>     <ol>8.框架  内嵌一个html
<iframe>  9.表单
<form>   <input> 10.图形
<canvas>     <svg>11.音频
<audio>    12.视频
<video>

表情符号

&# + 数字

https://www.w3ccoo.com/charsets/ref_emoji.asp

url编码

url传输只能传ASCII编码，因此需要进行编解码后再进行传输

参考：

[HTML 基础 - 学习 Web 开发 | MDN (mozilla.org)](https://www.cainiaojc.com/tags/ref-byfunc.html)

https://www.w3school.com.cn/html/index.asp

相关文章：

前端_001_html扫盲

文章目录 概念标签及属性常用全局属性head里常用标签body里常用标签表情符号 url编码 概念 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body></bod…...

编程日记 2024/10/14 10:39:37

49 | 桥接模式：如何实现支持不同类型和渠道的消息推送系统？

上一篇文章我们学习了第一种结构型模式&#xff1a;代理模式。它在不改变原始类&#xff08;或者叫被代理类&#xff09;代码的情况下&#xff0c;通过引入代理类来给原始类附加功能。代理模式在平时的开发经常被用到&#xff0c;常用在业务系统中开发一些非功能性需求&#xf…...

编程日记 2024/10/14 10:33:27

使用js和canvas实现简单的网页贪吃蛇小游戏

玩法介绍 点击开始游戏后&#xff0c;使用键盘上的↑↓←→控制移动&#xff0c;吃到食物增加长度&#xff0c;碰到墙壁或碰到自身就游戏结束 代码实现 代码比较简单&#xff0c;直接阅读注释即可&#xff0c;复制即用 <!DOCTYPE html> <html lang"en"…...

编程日记 2024/10/14 10:32:25

Kafka SASL/PLAIN认证模式

Kafka 认证模式命令使用示例 创建Topic 指定用户创建 [rootkafka01 kraft]# /usr/local/kafka3.5-sasl-data/bin/kafka-topics.sh --bootstrap-server x.x.x.11:9092 --create --topic fkaaa35 --replication-factor 3 --partitions 3 --command-config /usr/local/kafka3.…...

编程日记 2024/10/14 10:29:22

苹果AI科学家研究证明基于LLM的模型存在缺陷 因为它们无法推理

苹果公司人工智能科学家的一篇新论文发现&#xff0c;基于大型语言模型的引擎&#xff08;如 Meta 和 OpenAI 的引擎&#xff09;仍然缺乏基本的推理能力。该小组提出了一个新的基准–GSM-Symbolic&#xff0c;以帮助其他人衡量各种大型语言模型&#xff08;LLM&#xff09;的推…...

编程日记 2024/10/14 10:25:17

鸿蒙NEXT开发-页面路由（基于最新api12稳定版）

注意&#xff1a;博主有个鸿蒙专栏&#xff0c;里面从上到下有关于鸿蒙next的教学文档&#xff0c;大家感兴趣可以学习下 如果大家觉得博主文章写的好的话&#xff0c;可以点下关注&#xff0c;博主会一直更新鸿蒙next相关知识 专栏地址: https://blog.csdn.net/qq_56760790/…...

编程日记 2024/10/14 10:15:04

asp.net Core MVC 内容协商

内容协商 内容协商是Asp.Net Core 控制器的一项功能&#xff0c;而Asp.Net MVC5 控制器并不支持它。 引入内容协商是为了满足 Web API 框架的需要。 在 Asp.net Core 中&#xff0c;内容协商 被内置到引擎中&#xff0c;供开发人员使用。 顾名思义&#xff0c;内容协商指的是…...

编程日记 2024/10/14 10:14:02

智能EDA小白从0开始 —— DAY10 Yosys

Yosys 概述 工作原理 Yosys的工作原理深入来讲&#xff0c;是一个复杂但有序的硬件设计自动化流程&#xff0c;其核心在于将高级硬件描述语言&#xff08;HDL&#xff09;如Verilog或VHDL编写的代码&#xff0c;通过一系列精细的步骤转换为门级网表。这一流程首先涉及对HDL代…...

编程日记 2024/10/14 10:12:00

《OpenCV计算机视觉》—— 人脸检测

文章目录 一、人脸检测流程介绍二、用于人脸检测的关键方法1.加载分类器&#xff08;cv2.CascadeClassifier()&#xff09;2.检测图像中的人脸&#xff08;cv2.CascadeClassifier.detectMultiscale()&#xff09; 三、代码实现 一、人脸检测流程介绍 下面是一张含有多个人脸的…...

编程日记 2024/10/14 10:08:57

【unity框架开发12】从零手搓unity存档存储数据持久化系统，实现对存档的创建，获取，保存，加载，删除，缓存，加密，支持多存档

文章目录 前言一、Unity对Json数据的操作方法一、JsonUtility方法二、Newtonsoft 二、持久化的数据路径三、数据加密/解密加密方法解密方法 四、条件编译指令限制仅在编辑器模式下进行加密/解密四、数据持久化管理器1、存档工具类2、一个存档数据3、存档系统数据类4、数据存档存…...

编程日记 2024/10/14 10:04:53

YOLOv11进行图像与视频的目标检测

一、AI应用系统实战项目 项目名称项目名称1.人脸识别与管理系统2.车牌识别与管理系统...

编程日记 2024/10/14 10:01:49

SpinalHDL之错误集（一）

本文作为SpinalHDL学习笔记第七十六篇&#xff0c;作为错误集使用&#xff0c;类似高中生的错题集&#xff0c;记录使用SpinalHDL过程中遇到的问题&#xff0c;小到语法错误、版本兼容问题&#xff0c;大到SpinalHDL库函数错误等等&#xff0c;持续更新。 SpinalHDL学习笔记总…...

编程日记 2024/10/14 9:57:43

【arcgis】ArcGIS中如何避免标注压盖要素

ArcGIS中如何避免标注压盖要素 在制图工作中&#xff0c;标注&#xff08;Label&#xff09;是传达地理信息的重要方式。然而&#xff0c;在复杂的地图上&#xff0c;标注容易出现压盖要素的情况&#xff0c;影响地图的美观性和信息的准确传达。ArcGIS提供了Maplex标注引擎&am…...

编程日记 2024/10/14 9:56:42

数通--3

一、动态路由 内部 路由器之间要互联互通&#xff0c;必须遵循相同的协议 企业内部用 IGP&#xff0c;企业之间用BGP RIP&#xff08;已淘汰&#xff0c;不考&#xff09; 距离就是长短&#xff0c;矢量就是方向&#xff0c;即路由的出接口 一台路由器 A 配好RIP&#xff0c;…...

编程日记 2024/10/14 9:54:39

SpringBoot基础(五)：集成JUnit5

SpringBoot基础系列文章 SpringBoot基础(一)&#xff1a;快速入门 SpringBoot基础(二)&#xff1a;配置文件详解 SpringBoot基础(三)&#xff1a;Logback日志 SpringBoot基础(四)&#xff1a;bean的多种加载方式 SpringBoot基础(五)&#xff1a;集成JUnit5 目录 一、JUnit…...

编程日记 2024/10/14 9:52:36

正点原子学习笔记之汇编LED驱动实验

1 汇编LED原理分析 为什么要写汇编     需要用汇编初始化一些SOC外设     使用汇编初始化DDR、I.MX6U不需要     设置sp指针&#xff0c;一般指向DDR&#xff0c;设置好C语言运行环境 1.1 LED硬件分析 可以看到LED灯一端接高电平&#xff0c;一端连接了GPIO_3上面…...

编程日记 2024/10/14 9:50:35

网络学习第二篇

认识网关和路由器 这里大家先了解一下什么三层设备。 三层设备 三层设备是指在网络架构中能够工作在第三层&#xff08;网络层&#xff09;的设备&#xff0c;通常包括三层交换机和路由器。这些设备可以根据IP地址进行数据包的转发和路由选择&#xff0c;从而在不同的网络之间…...

编程日记 2024/10/14 9:48:32

一些小结汇总

1.常用浏览器及对应内核 Safari浏览器&#xff08;苹果浏览器&#xff09;:Webkit内核 Google浏览器&#xff1a;Blink内核 Firefox&#xff1a;Gecko内核 Edge浏览器&#xff1a;Chromium内核 IE浏览器&#xff1a;Trident内核 2.10个块标签和10个行标签 …...

编程日记 2024/10/14 9:42:25

20240720 科大讯飞 笔试

文章目录 1、选择题1.11.21.31.41.51.61.71.81.91.101.111.122、编程题2.12.22.33、选择题（Linux 选做）3.13.23.34、选择题（C++ 选做）4.14.24.34.44.54.64.75、选择题（数据库选做）5.15.25.3岗位：嵌入式开发工程师 题型： 必做：12 道选择题，3 道编程题 选做：Linux（3…...

编程日记 2024/10/14 9:41:24

【AIGC】寻找ChatGPT最佳推理步骤：CoT思维链技术的探索与应用

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;CoT思维链概述&#x1f4af;CoT思维链在大型语言模型中的应用&#x1f4af;CoT思维链改变对模型推理能力的理解和改进方式多样化应用场景挑战与未来发展总结 &#x1f4a…...

编程日记 2024/10/14 9:39:22

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/6/21 12:40:21

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/6/21 4:17:00

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/6/16 22:56:13

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/6/15 19:02:54

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/6/22 9:08:39

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/6/15 21:40:52

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/6/23 2:48:31

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/6/16 22:53:40

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

编程新知 2025/6/20 13:39:04

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/6/21 15:21:51