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

点进HTML初步了解

news 2026/2/10 15:16:37

写在前边

##关于插件

①简体中文

②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

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2026/2/8 15:03:06

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/2/8 20:43:07

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2026/2/1 16:32:53

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2026/2/1 2:08:53