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

点进HTML初步了解

news 2025/7/5 12:32:17

写在前边

##关于插件

①简体中文

②open-in-browser：自动在浏览器生成html页面；

③Auto Rename Tag：自动匹配标签；

④Live server：实现页面的实时刷新；

##关于快捷键：

Ctrl + '/'  用来注释一个代码段；

注释性质的语言可以用 <!-- 和 --> 框住；

##HTML文件结构：

html页面的固定结构在VS code中输入！+ TAB或者! + 回车 就可以得到。

①<!DOCTYPE html>表示文档类型，浏览器将按照html5来解析网页文件。 

②<html lang="en"> </html>表示HTML的文档起止位置，浏览器与搜索引擎解析将按照lang属性

声明的语言来解析。

③meta标签的charset属性用于声明网页字符集的编码方式。  <meta charset="UTF-8">

##HTML语法

标记是HTML文档中一些有特定意义的符号，这些符号指明内容的含义或结构；

元素：HTML中标记和标记之间的内容组合；

元素有行内元素、块状元素、行内块元素三种；【利用CSS中的display属性可以相互转换】

行内元素：不可设置行高、上下内外边距；

块级元素：独占一行，可以设置宽高、内外边距；

行内块元素：可以设置宽高、内外边距；可以与其他行内元素、内联元素共处一行；

常见标记

结构标记：html、head、body、section、article、aside、hgroup、header、footer、nav;

【section元素表示页面的一个内容区块，比如章节、页眉页脚、或页面其他部分】

【article元素表示页面一块和上下文不相关的独立文章，例如本博客文章】

【aside元素表示article元素的内容以外的】

【header元素表示页面中的一个内容区域或整个页面的标题】

【hgroup元素表示整个页面或页面中一个内容区块的标题进行组合】

【footer元素表示整个页面或页面中一个内容区块的脚注】

【nav元素表示页面中导航链接的部分】

头部标记：title、meta、link、stytle

文本标记：strong、em

段落及标题标记：p、h1-h6、br

列表标记：ul、ol、li、dl、dt、dd

超链接标记：a、map、area

图像及媒体元素标记：img、embed、object

表格标记：table、tr、td、thead、tbody、tfoot

表单标记：form、input、textarea、select、option、label

容器标记：div、span

video：定义视频

autio：定义音频

文本格式标记

常用的字符实体：

空格--&nbsp;        全角空格--&emsp;        <小于号--&lt        >大于号--gt        “引号--quot

&符号--&amp

<pre>：预格式标记 

列表标记

无序列表<ul>   其列表项<li>    列表项可以是图片or文字；

有序列表<ol>   其列表项<li>

自定义列表<dl>  列表项<dt>  列表项的描述<dd>

超链接标记【行内元素】

<a>标签定义超链接；

href 属性： 规定链接的目的地；

<a href="跳转的目标位置">文字或者图片</a>

跳转的目的地有：

①外部网站，即，<a href="http://www/w3school.com.cn/">学习网站</a>

②本网站的另外一个页面，同一📂下有front.html和rear.html网页，在front.html点击文字"前端与后端"，跳转到rear.html，即，

<a href="rear.html">前端与后端</a>

③跳转特定位置，即

<article id="top">...</article>

<p><a href="#top">返回顶部</a></p>

④虚拟超链接，即，

<a href="#">学习网站</a>

学习网站字样下会有下划线，但是点击无跳转；

超链接属性target
  • _self：当前浏览上下文。（默认）
  • _blank：通常是一个新选项卡，但用户可以将浏览器配置为打开新窗口。
  • _parent：当前浏览上下文的父浏览上下文。如果没有父级，则行为为 _self
  • _top：最顶层的浏览上下文（作为当前上下文的祖先的“最高”上下文）。如果没有上级，则行为为_self
超链接属性title

title属性是全局属性，鼠标移在超链接上的时候显示的一段文字提示。

图像 

<img src="图片位置+文件名+扩展名" alt="替换文字"/>

 //替换文字是图片无法显示的时候显示的文字

title属性是全局属性，鼠标移在图像上显示的一段文字提示；

align属性是对齐属性；

width、height是宽和高属性；

表格

表格table由标题caption、表头thead、表体tbody、表尾tfoot构成；

表格按照行 tr 存储； 表格单元格分为表头单元格 th 和数据单元格 td;   

默认表头单元格加粗显示；

border属性

表格默认无边框，若显示边框，可用border;

colspan属性和rowspan属性 

colspan合并列，横向合并；

rowspan合并行，纵向合并；

表单

<form name="表单名称" method="get|post" action="后续处理页面">

        表单元素

</form>

 method属性：发送表单数据的方法，取值get用于安全性要求较低，传输数据较少的情况；

取值post用于安全要求较高，传输数据较多的情况；

action属性：向何处发送表单，处理表单数据的后端页面；

表单元素
文本框&密码框

<input type="text|password" name="名称" value="内容" placeholder="输入提示"/>

//type属性：取值是“text”时为文本框，取值是“password”是密码框；

//value属性：文本框中的文本；

//placeholder属性：用于显示在文本框中的输入提示；

提交按钮&重置按钮

<input type="submit|reset" name= "名称" value="内部文本"/>

//sunmit-提交按钮；reset-重置按钮；

value属性：按钮中的文字；

单选框& 复选框

<input type="radio|checkbox" name="名称" value="值" checked="checked"/>

//radio-单选框 checkbox-复选框

//name：一组单选框的name属性需要取值相同；

//value：按钮内的文字；

//checked：当设置为“chec

ked”时，该选项默认为选中状态；

标签

标签 label 通常包裹 input 元素，当用户在 label 元素内单击文本，被包裹的表单 元素会被触发单击事件。设置 label 的 for 属性为对应单选框的 id 属性，不仅可以单击单选框标识选择该选项，还可以单击文字“男/女”来选择单选框；

<form>
性别:
<label for="boy">男<input type="radio" id="boy" name="gender" checked="checked"/>
</label>
<label for="girl">女<input type="radio" id="girl" name="gender"/> 
</label>
</form>
下拉列表 

select标签用于生成下拉列表，option标签用于生成列表项；

<form>    <select><option>北京</option><option selected="selected">上海</option></select>
</form>
 按钮 

可以用button标签生成一个按钮，其内容可以是文本或图像，而 input 元素创建的按钮内容只能是文本。

<button><img src="baidu.png"></button>

文本域

<textarea cols="50" rows="10">文本域中的内容</textarea>

相关文章：

点进HTML初步了解

写在前边 ##关于插件 ①简体中文 ②open-in-browser&#xff1a;自动在浏览器生成html页面&#xff1b; ③Auto Rename Tag&#xff1a;自动匹配标签&#xff1b; ④Live server&#xff1a;实现页面的实时刷新&#xff1b; ##关于快捷键&#xff1a; Ctrl / 用来注释…...

编程日记 2024/10/11 11:40:00

幸运的沈抖，进击的百度智能云

文&#xff5c;白 鸽 编&#xff5c;王一粟 AI对百度智能云的意义&#xff0c;可能远大于任何一家云计算厂商。 2022年5月&#xff0c;分管百度移动生态事业群组&#xff08;MEG&#xff09;的集团执行副总裁沈抖&#xff0c;转而担任百度智能云事业群组&#xff08;ACG&…...

编程日记 2024/10/11 11:37:58

android广播实现PIN码设置

摘要&#xff1a;本文通过广播的方式调用系统设置PIN码的流程实现类似锁机的功能&#xff0c;可供开发人员在联网状态下后台推送消息进行锁机/解锁。有需要的同学可以参考PIN码的流程改为密码等其他形式。 1 定义一个广播接收器 广播action&#xff1a;android.intent.action…...

编程日记 2024/10/11 11:35:55

Mac 需要杀毒软件？

大部分 mac用户普遍认为 Apple mac 不受病毒和恶意软件的影响。这导致许多 Mac 用户误以为无需为 Mac 安装防病毒软件&#xff0c;但事实并非如此。 在这篇文章中&#xff0c;将深入探讨 Mac 安全性的细节&#xff0c;探索针对 Apple 设备的恶意软件类型&#xff0c;并为您…...

编程日记 2024/10/11 11:34:53

Java | Leetcode Java题解之第472题连接词

题目&#xff1a; 题解&#xff1a; class Solution {Trie trie new Trie();public List<String> findAllConcatenatedWordsInADict(String[] words) {List<String> ans new ArrayList<String>();Arrays.sort(words, (a, b) -> a.length() - b.length(…...

编程日记 2024/10/11 11:26:45

CUDA Graphs学习与实验

CUDA Graphs学习与实验 一.参考链接二.测试方案三.测试代码 CUDA图&#xff08;CUDA Graphs&#xff09;为CUDA引入了一种全新的工作提交模型。它允许将一系列操作&#xff08;如内核启动&#xff09;以图的形式表示&#xff0c;并通过依赖关系将这些操作连接起来。这种图的定义…...

编程日记 2024/10/11 11:25:43

【自注意力与Transformer架构在自然语言处理中的演变与应用】

背景介绍 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;序列到序列&#xff08;seq2seq&#xff09;模型和Transformer架构的出现&#xff0c;极大地推动了机器翻译、文本生成和其他语言任务的进展。传统的seq2seq模型通常依赖于循环神经网络&#xff08;RNN&…...

编程日记 2024/10/11 11:24:42

LabVIEW交直流接触器动态检测系统

LabVIEW软件与霍尔传感器技术结合的交直流接触器动态检测系统通过实时数据采集和处理技术&#xff0c;有效地测量并分析交直流接触器在吸合及吸持阶段的电流和电压变化&#xff0c;以及相应的功率消耗&#xff0c;从而优化电力和配电系统的性能和可靠性。 项目背景 交直流接触…...

编程日记 2024/10/11 11:21:37

Unity3D中基于四叉树的范围检测算法详解

在游戏开发中&#xff0c;碰撞检测和范围检测是常见的需求&#xff0c;尤其是在处理大量物体时&#xff0c;传统的暴力检测法&#xff08;即每个物体与其他所有物体进行碰撞检测&#xff09;会消耗大量的计算资源&#xff0c;导致性能下降。为了优化这一过程&#xff0c;四叉树…...

编程日记 2024/10/11 11:20:36

k8s网络通信

k8s通信整体架构 k8s通过CNI接口接入其他插件来实现网络通讯。目前比较流行的插件有flannel&#xff0c;calico等 CNI插件存放位置&#xff1a;# cat /etc/cni/net.d/10-flannel.conflist 插件使用的解决方案如下 虚拟网桥&#xff0c;虚拟网卡&#xff0c;多个容器共用一个虚…...

编程日记 2024/10/11 11:18:34

07 欢乐的跳

题目&#xff1a; 代码&#xff1a; #include<bits/stdc.h> using namespace std; #define M 1000005int main() {int n;cin>>n;int a[M]{0};for(int i0;i<n;i){cin>>a[i];}int c[M]{0};for(int i1;i<n;i){c[i]abs(a[i]a[i1]);}sort(c1,cn); // 注意f…...

编程日记 2024/10/11 11:17:33

【韩顺平Java笔记】第8章：面向对象编程（中级部分）【262-271】

文章目录 262. 回顾上一章内容263. IDEA介绍263.1 IDEA 介绍263.2 Eclipse 介绍 264. IDEA下载265. IDEA使用1257. IDEA使用2268. IDEA使用3268. 269. 270. IDEA快捷键1,2,3271. IDEA模板 262. 回顾上一章内容 看视频 263. IDEA介绍 263.1 IDEA 介绍 IDEA 全称 IntelliJ ID…...

编程日记 2024/10/11 11:16:31

GNU链接器（LD）：输入分区的垃圾回收及保护处理（KEEP命令）介绍

0 参考资料 GNU-LD-v2.30-中文手册.pdf GNU linker.pdf1 前言 一个完整的编译工具链应该包含以下4个部分&#xff1a; &#xff08;1&#xff09;编译器 &#xff08;2&#xff09;汇编器 &#xff08;3&#xff09;链接器 &#xff08;4&#xff09;lib库 在GNU工具链中&…...

编程日记 2024/10/11 11:12:27

论文翻译 | Fairness-guided Few-shot Prompting for LargeLanguage Models

摘要 大型语言模型已经显示出令人惊讶的执行上下文学习的能力&#xff0c;也就是说&#xff0c;这些模型可以通过对由几个输入输出示例构建的提示进行条件反射&#xff0c;直接应用于解决大量下游任务。然而&#xff0c;先前的研究表明&#xff0c;由于训练示例、示例顺序和提示…...

编程日记 2024/10/11 11:11:26

【分布式微服务云原生】战胜Redis脑裂：深入解析与解决方案

战胜Redis脑裂&#xff1a;深入解析与解决方案 摘要&#xff1a; Redis脑裂问题&#xff08;Split Brain Syndrome&#xff09;是分布式系统中的一个常见且复杂的问题&#xff0c;通常发生在网络分区或主节点出现问题时。本文将详细探讨脑裂的主要原因、导致的问题以及有效的解…...

编程日记 2024/10/11 11:09:23

数据治理与可持续发展：开启企业价值新模式——The Open Group 2024生态系统架构·可持续发展年度大会邀您共襄盛举

在当今数字化转型的浪潮中&#xff0c;企业正面临着前所未有的机遇和挑战。当数据治理遇上可持续发展&#xff0c;企业价值的新模式应运而生。那么&#xff0c;如何在数字化时代实现数据治理与可持续发展的融合&#xff0c;推动企业价值的飞跃&#xff1f; The Open Group 202…...

编程日记 2024/10/11 11:06:19

数据库的分类及主流数据库

一、数据库的分类 &#xff08;一&#xff09;关系型数据库&#xff08;RDBMS&#xff09; 定义与原理 关系型数据库是基于关系模型建立的数据库。它以表格&#xff08;关系&#xff09;的形式组织数据&#xff0c;每个表格包含行&#xff08;记录&#xff09;和列&#xff0…...

编程日记 2024/10/11 11:05:18

Qt C++设计模式-＞备忘录模式

备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为型设计模式&#xff0c;用于在不破坏封装性的前提下&#xff0c;捕获并保存对象的内部状态&#xff0c;以便在将来的某个时刻可以恢复到之前的状态。备忘录模式的核心是状态的保存和恢复&#xff0c;常用于实现撤销…...

编程日记 2024/10/11 11:04:16

Vue使用@别名替换后端ip地址

1. 安装 types/node types/node 包允许您在TypeScript项目中使用Node.js的核心模块和API&#xff0c;并提供了对它们的类型检查和智能提示的支持。 npm install types/node --save-dev 比如安装之后&#xff0c;就可以导入nodejs的 path模块&#xff0c;在下面代码 import path…...

编程日记 2024/10/11 11:03:14

强大的PDF到Word转换工具

Solid Converter&#xff1a;强大的PDF到Word转换工具推荐 在日常工作和学习中&#xff0c;PDF是最常用的文件格式之一。然而&#xff0c;编辑PDF文档并不总是那么方便&#xff0c;尤其是当你需要将PDF文件转换为Word文档时。Solid Converter 是一款强大的工具&#xff0c;专为…...

编程日记 2024/10/11 11:02:13

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

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

编程新知 2025/7/4 22:42:39

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/7/4 9:40:28

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2025/7/5 11:56:12

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/6/25 7:35:04

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/7/5 8:29:39

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/6/21 14:21:20

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/6/21 15:09:46

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/7/5 9:13:41

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2025/7/5 10:34:47

React从基础入门到高级实战：React 实战项目 - 项目五：微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

编程新知 2025/6/21 16:23:33