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

点进HTML初步了解

news 2025/10/26 12:50:54

写在前边

##关于插件

①简体中文

②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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/9/11 12:55:08

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/10/25 17:33:06

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/10/20 10:43:45

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/10/24 19:25:40

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/10/15 4:05:00

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/10/24 19:16:21

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/10/24 15:38:08

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/7/20 13:23:05

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/10/25 4:50:26