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

前端_001_html扫盲

news 2026/5/16 7:37:28

文章目录

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

国货视光标杆｜欧普康视企业实力与DreamVision SL巩膜镜产品详解

一、企业简介欧普康视科技股份有限公司成立于2000年&#xff0c;由留美工程博士陶悦群创立&#xff0c;是国内深耕眼视光医疗器械领域的高新技术企业。企业专注于眼视光产品的自主研发、智能化生产与合规销售&#xff0c;同时配套全周期专业化眼健康服务&#xff0c;业务覆盖屈…...

编程新知 2026/5/16 7:31:50

基于Slack与AI的IDE智能助手：架构设计与实战部署

1. 项目概述&#xff1a;当你的IDE拥有了“光标智能体” 如果你是一名开发者&#xff0c;每天在IDE&#xff08;集成开发环境&#xff09;里敲代码的时间超过8小时&#xff0c;那你一定对这样的场景不陌生&#xff1a;光标在代码行间跳跃&#xff0c;你正试图理解一个复杂的函…...

编程新知 2026/5/16 6:46:04

别再手动输数据了！手把手教你用Fluent的Profile功能导入实验数据（附CSV文件模板）

别再手动输数据了&#xff01;手把手教你用Fluent的Profile功能导入实验数据&#xff08;附CSV文件模板&#xff09; 在计算流体力学&#xff08;CFD&#xff09;分析中&#xff0c;准确导入实验数据或第三方软件的计算结果作为边界条件&#xff0c;往往是确保仿真可靠性的关键…...

编程新知 2026/5/16 6:39:25

北京明光云振铎数据科技Java面经

Nacos、OpenFeign、Gateway 三个组件的作用及协作流程首先&#xff1a;Nacos 主要负责服务注册发现和配置中心Gateway 作为统一网关入口&#xff0c;负责路由、鉴权、限流OpenFeign 负责服务之间的远程调用用户请求先进入 GatewayGateway 会先做 JWT 鉴权&#xff0c;比如校验 …...

编程新知 2026/5/16 6:31:00

深入聊聊Zynq RFSoC里那些容易搞混的时钟：从外部输入到片内PLL再到AXI-Stream接口时钟

深入解析Zynq RFSoC时钟架构&#xff1a;从外部输入到AXI-Stream接口的完整路径 在Zynq UltraScale RFSoC的设计中&#xff0c;时钟系统堪称整个架构的"心脏"。尤其当涉及多通道同步、跨时钟域数据传输等高阶应用时&#xff0c;时钟配置的细微差别往往会导致性能差异…...

编程新知 2026/5/16 5:44:33

从社交情绪预测到论文分类：DHGNN动态超图模型在两大真实场景下的性能实测与调优心得

动态超图神经网络实战&#xff1a;从社交情绪分析到学术论文分类的双场景深度解析 当面对微博海量用户情绪的实时波动&#xff0c;或是学术文献间错综复杂的引用关系时&#xff0c;传统图神经网络常显捉襟见肘。动态超图神经网络&#xff08;DHGNN&#xff09;通过独特的层级动…...

编程新知 2026/5/16 4:59:05

ClawPowers-Skills：开发者实战技能库与个人工具箱构建指南

1. 项目概述与核心价值最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“ClawPowers-Skills”&#xff0c;作者是up2itnow0822。乍一看这个标题&#xff0c;你可能会有点摸不着头脑——“ClawPowers”是什么&#xff1f;“Skills”又具体指什么&#xff1f;这其实是一个典…...

编程新知 2026/5/16 3:36:12

量子启发式算法优化车联网通信与交通控制

1. 量子启发式算法在车联网中的创新应用在智慧城市建设的浪潮中&#xff0c;交通拥堵已成为困扰现代都市的顽疾。传统交通管理系统往往采用固定配时方案或简单的自适应控制&#xff0c;难以应对城市路网中瞬息万变的交通流变化。与此同时&#xff0c;随着车联网(V2X)技术的普及…...

编程新知 2026/5/16 3:21:40

PIM-LLM：1-bit量化大语言模型的混合内存计算架构

1. 项目概述PIM-LLM是一种创新的混合内存计算架构&#xff0c;专门为1-bit量化的大语言模型&#xff08;LLM&#xff09;设计。这个架构通过结合模拟内存计算&#xff08;PIM&#xff09;和数字脉动阵列&#xff0c;实现了对低精度和高精度矩阵乘法运算的高效加速。在边缘AI加速…...

编程新知 2026/5/16 2:48:41

合肥工业大学LaTeX论文模板：5分钟解决格式难题的专业方案

合肥工业大学LaTeX论文模板&#xff1a;5分钟解决格式难题的专业方案 【免费下载链接】HFUT_Thesis LaTeX Thesis Template for Hefei University of Technology 项目地址: https://gitcode.com/gh_mirrors/hf/HFUT_Thesis 还在为论文格式调整而烦恼吗&#xff1f;合肥工…...

编程新知 2026/5/16 1:56:40