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

前端_001_html扫盲

news 2026/3/26 21:46:52

文章目录

  • 概念
  • 标签及属性
    • 常用全局属性
    • 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

Android音频输出流实战：从AudioFlinger到HAL层的完整调用链解析

Android音频输出流深度解析&#xff1a;从框架设计到硬件交互 1. Android音频系统架构概览 Android音频子系统采用分层设计&#xff0c;每一层都有明确的职责划分。理解这个架构是分析音频输出流的基础。 核心层级结构&#xff1a; 应用层&#xff1a;通过AudioTrack、MediaPla…...

编程新知 2026/3/26 21:23:58

5大突破！漫画阅读工具Venera重构跨平台阅读体验

5大突破&#xff01;漫画阅读工具Venera重构跨平台阅读体验 【免费下载链接】venera A comic app 项目地址: https://gitcode.com/gh_mirrors/ve/venera 副标题&#xff1a;如何在Windows、macOS和移动设备间无缝切换你的漫画库&#xff1f; 开篇痛点引入 不同设备间漫…...

编程新知 2026/3/26 20:27:45

Fira Code技术揭秘：编程字体连字引擎的深度优化与实战应用

Fira Code技术揭秘&#xff1a;编程字体连字引擎的深度优化与实战应用 【免费下载链接】FiraCode Free monospaced font with programming ligatures 项目地址: https://gitcode.com/GitHub_Trending/fi/FiraCode 在当今的代码编辑环境中&#xff0c;开发者每天需要处理…...

编程新知 2026/3/26 19:57:33

基于SpringBoot的租车系统毕设实战：从需求建模到高可用部署

最近在辅导学弟学妹做毕业设计&#xff0c;发现很多“基于SpringBoot的租车系统”项目&#xff0c;虽然功能列表很长&#xff0c;但仔细一看&#xff0c;架构松散&#xff0c;业务逻辑像面条代码&#xff0c;更别提应对真实场景下的并发问题了。今天&#xff0c;我就结合自己做…...

编程新知 2026/3/26 19:39:26

嵌入式开发调试与问题诊断实战指南

嵌入式工程师常见问题诊断与调试经验分享1. 典型开发场景分析1.1 开发环境差异问题"在我的开发环境运行正常"是嵌入式工程师最常遇到的困境之一。这种现象通常源于&#xff1a;编译器版本差异&#xff08;GCC/Keil/IAR版本不一致&#xff09;硬件平台差异&#xff08…...

编程新知 2026/3/26 18:40:38

中国举办，IEEE会议，录用率39.5%！CCF推荐学术会议（C）截稿提醒

►►►Globecom 2026IEEE Global Communications Conference (GLOBECOM), a flagship IEEE Communications Society event, gathers top experts to drive innovation and advance nearly every aspect of communications technology. Each year, thousands of the most ground…...

编程新知 2026/3/26 18:10:00

【Nano Bana】谷歌风格智能手表UI界面

谷歌风格智能手表UI提示词&#xff08;专业工程版设计/开发专用&#xff09; 在嵌入式智能手表UI设计与开发过程中&#xff0c;符合行业规范且适配开发需求的提示词&#xff0c;是高效生成可用界面、对接GUI框架的关键。本文汇总了适配Nano Banana工具的谷歌风格智能手表UI提示…...

编程新知 2026/3/26 17:51:54

C++ 无原生 JSON 支持？一文实现通用序列化与反序列化封装方案

前言 在现代软件开发中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;因其轻量级和易读性成为数据交换的主流格式。C虽无原生JSON支持&#xff0c;但通过封装第三方库&#xff08;如nlohmann/json&#xff09;&#xff0c;可高效实现序列化&#xff08;…...

编程新知 2026/3/26 17:15:31

如何用RSPrompter提升遥感图像分割效果？基于SAM的实战技巧分享

如何用RSPrompter提升遥感图像分割效果&#xff1f;基于SAM的实战技巧分享 遥感图像分割一直是计算机视觉领域的难点之一。传统方法往往需要大量标注数据&#xff0c;而标注成本高昂&#xff0c;尤其是对于高分辨率遥感影像。2023年Meta发布的Segment Anything Model(SAM)展现了…...

编程新知 2026/3/26 16:43:15

HUE Hive编辑器10个隐藏技巧：从拖拽表名到变量查询的高效玩法

HUE Hive编辑器10个隐藏技巧&#xff1a;从拖拽表名到变量查询的高效玩法 1. 拖拽表名生成查询模板的进阶用法 许多HUE用户都知道可以通过拖拽左侧表名到编辑区生成基础查询模板&#xff0c;但很少有人挖掘这个功能的完整潜力。实际上&#xff0c;拖拽操作支持多种智能交互方式…...

编程新知 2026/3/26 16:29:13