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

前端_001_html扫盲

news 2025/12/15 22:25:44

文章目录

  • 概念
  • 标签及属性
    • 常用全局属性
    • 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/12/10 15:30:40

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/12/15 9:14:10

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/12/8 7:56:30

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/12/10 7:43:31

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/12/11 1:32:07

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/12/5 5:11:05

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/12/7 11:23:55