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

点进HTML初步了解

news 文章来源：https://blog.csdn.net/weixin_73223235/article/details/142392141 2025/5/16 15:25:49

写在前边

##关于插件

①简体中文

②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

js进阶——深入解析JavaScript中的URLSearchParams

深入解析 JavaScript 中的 URLSearchParams 在现代Web开发中&#xff0c;我们经常需要处理URL中的查询参数&#xff0c;尤其是在构建动态Web应用时。这些查询参数&#xff08;query parameters&#xff09;通常以 ?keyvalue&key2value2 的形式存在。JavaScript 提供了一个…...

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

如何利用wsl-Ubuntu里conda用来给Windows的PyCharm开发

前提&#xff1a;咱们在wsl-Ubuntu上&#xff0c;有conda的虚拟环境 咱们直接打开PyCharm,打开Settings 更换Python Interpreter即可 当然一开始可能没有下面的选项&#xff0c;需要我们点击右边的Add Interpreter 这里选择wsl 点击next 将这两步进行修改 可以看出来&#xff0…...

编程日记 2024/10/11 10:57:08

操作系统的了解及安装

一、linux系统认识 linux是指操作系统的内核&#xff0c;ubuntu是指基于这种内核的操作系统&#xff0c;Ubuntu属于Linux的一个发行版本&#xff0c;有简易的用户界面&#xff0c;完善的包管理系统&#xff0c;Ubuntu还对大多数硬件有着良好的兼容性&#xff0c;包含最新的图形…...

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

【C++篇】虚境探微：多态的流动诗篇，解锁动态的艺术密码

文章目录 C 多态详解&#xff08;进阶篇&#xff09;前言第一章&#xff1a;多态的原理1.1 虚函数表的概念1.1.1 虚函数表的生成过程 1.2 虚表的存储位置 第二章&#xff1a;动态绑定与静态绑定2.1 静态绑定2.1.1 静态绑定的实现机制&#xff1a;2.1.2 示例代码&#xff1a; 2.…...

编程日记 2024/10/11 10:48:57

uniapp的相关知识（1）

1、hover-class&#xff1a;当有鼠标按下时&#xff0c;会切换对应的样式&#xff1b;也可以设置对应的变色时间。 2、selectable&#xff1a;设置text组件的文本是否可以进行复制。 3、with&#xff1a;当设置为80%时&#xff0c;表示宽占整个屏幕的80%。 4、border&#x…...

编程日记 2024/10/11 10:47:56

uniapp生成随机数

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…...

编程日记 2024/10/11 10:46:54

使用jenkins将airflow-dbt部署到服务器上

系列文章目录 文章目录 系列文章目录课程地址YT一、jenkins服务器的初始化配置1.1 运行第一个jenkins pipeline二、编写本地dbt项目2.1 克隆git上的初始文件到本地2.2 本地创建虚拟环境2.3 创建airflow的Dockerfile2.4 安装dbt2.5 创建dbt所需要的snowflake数据库2.6 配置docke…...

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

初学java练习题【1】

import java.util.Scanner;public class HelloWorld{public static void main(String[] args){Scanner scannernew Scanner(System.in);//输入工资System.out.println("请输入您的工资&#xff1a;");double d1scanner.nextDouble();System.out.println("请输入…...

编程日记 2024/10/11 10:44:51

大模型应用探讨，免费AI写作、一键PPT、免费PDF百种应用、与AI对话

大模型应用平台知识普及, 应用可见评论区 我们生活在一个充满无限可能的数字时代&#xff0c;人工智能技术正在推动着各种创新的边界。大模型应用平台一般包含以下功能。 ## 1. 一键生成论文 写作是学生、研究人员和职场人士都无法避免的任务。大模型应用平台拥有强大的文本生…...

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

计算机视觉之OpenCV vs YOLO

好多开发者希望搞明白OpenCV 和YOLO区别&#xff0c;实际上&#xff0c;二者在计算机视觉领域都有广泛应用&#xff0c;但它们有很大的不同。 一、OpenCV 概述 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库。它…...

编程日记 2024/10/11 10:41:47