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

入门四认识HTML

news 2026/5/22 1:24:46

目录

一、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

Java全栈工程师面试实录：从基础到微服务的深度技术对话

Java全栈工程师面试实录&#xff1a;从基础到微服务的深度技术对话 面试官与程序员的对话 面试官&#xff08;李哥&#xff09;&#xff1a; 你好&#xff0c;欢迎来参加我们公司的面试。我是李哥&#xff0c;负责技术面试。先简单介绍一下你自己吧。 程序员&#xff08;张浩&a…...

编程新知 2026/5/21 22:24:32

Android NDK/JNI开发深度指南：从基础到实战

引言 在移动应用开发领域，Android平台以其开放性和灵活性著称。然而，当应用需要处理高性能计算、图像处理、游戏引擎或重用现有C/C++库时，纯Java实现可能面临性能瓶颈。这时，Native Development Kit（NDK）和Java Native Interface（JNI）成为关键工具。NDK允许开发者使用…...

编程新知 2026/5/21 22:16:16

VLA已死，WAM当立：机器人的GPT时刻到了吗？

就在刚刚过去的4月底&#xff0c;红杉资本举办的AI Ascent 2026大会上&#xff0c;英伟达机器人方向负责人Jim Fan抛出了一个极具争议的论断&#xff1a;“视觉语言模型VLA已死&#xff0c;世界动作模型WAM当立。”他还预测&#xff0c;未来一到两年内&#xff0c;机器人学习的…...

编程新知 2026/5/21 22:03:25

初次使用Taotoken从注册到发出第一个API请求的全流程耗时记录

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 初次使用Taotoken从注册到发出第一个API请求的全流程耗时记录 1. 流程概览与预期 对于初次接触大模型聚合平台的开发者而言&#…...

编程新知 2026/5/21 19:29:56

智慧养老平台|基于SprinBoot+vue的智慧养老平台系统(源码+数据库+文档)

智慧养老平台 目录 基于SprinBootvue的外贸平台系统 一、前言 二、系统设计 三、系统功能设计 前台 后台 管理员功能 老人功能 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码…...

编程新知 2026/5/21 18:59:44

开源数据库 TimescaleDB 2.27.1 发布：性能改进与多项错误修复，官方建议尽快升级

开源数据库 TimescaleDB 2.27.1 版本正式发布&#xff0c;较 2.27.0 版本有性能改进和错误修复&#xff0c;官方建议用户尽快升级。 TimescaleDB 简介 TimescaleDB 是基于 PostgreSQL 构建的开源数据库&#xff0c;打包为 PostgreSQL 扩展程序&#xff0c;可让 SQL 扩展到时间序…...

编程新知 2026/5/21 18:45:07

Wayback Machine 浏览器扩展：一键穿越互联网历史的终极免费工具

Wayback Machine 浏览器扩展&#xff1a;一键穿越互联网历史的终极免费工具 【免费下载链接】wayback-machine-webextension A web browser extension for Chrome, Firefox, Edge, and Safari 14. 项目地址: https://gitcode.com/gh_mirrors/wa/wayback-machine-webextension…...

编程新知 2026/5/21 18:34:44

影刀RPA 企业级专题篇：自动化系统中的日志平台与链路追踪设计实践

影刀RPA 企业级专题篇&#xff1a;自动化系统中的日志平台与链路追踪设计实践 作者&#xff1a;林焱 很多自动化系统在小规模阶段。 其实不太依赖“日志体系”。 流程跑起来。 失败了看一下控制台。 基本就够用了。 但当系统进入企业级规模以后。 日志会从“辅助功能”…...

编程新知 2026/5/21 18:22:14

极域电子教室破解终极指南：如何重获电脑控制权而不被老师发现

极域电子教室破解终极指南&#xff1a;如何重获电脑控制权而不被老师发现 【免费下载链接】JiYuTrainer 极域电子教室防控制软件, StudenMain.exe 破解 项目地址: https://gitcode.com/gh_mirrors/ji/JiYuTrainer 你是否曾在学校机房上课时&#xff0c;面对老师全屏广播…...

编程新知 2026/5/21 17:56:24

TCP 多客户端与服务器通信程序

一、项目简介 本项目是一个基于 Linux实现的 TCP 多客户端与服务器通信程序&#xff0c;主要包含&#xff1a; tcp_server&#xff1a;TCP 服务端程序&#xff0c;监听客户端连接&#xff0c;接收客户端数据&#xff0c;维护在线客户端列表。 tcp_client&#xff1a;TCP 客户…...

编程新知 2026/5/21 17:54:22