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

点进HTML初步了解

news 2025/9/10 23:24:02

写在前边

##关于插件

①简体中文

②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

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/7/10 6:25:54

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/9/6 10:26:09

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/9/3 19:32:54

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/7/25 23:24:13

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/7/20 9:15:14

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/9/9 23:27:37

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/9/1 12:32:50

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/9/2 18:41:56

「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

编程新知 2025/8/21 16:28:18