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

前端开发体系+html文件详解

news 2025/12/21 17:27:07

目录

html骨架

body主体内基本元素

基本元素

超文本（超链接跳转）

锚点

图片标签

 列表标签

表格标签

 框架标签（窗口标签）

音频标签

视频标签

VScode编译器

输入框

字体样式

实例展示：

 首先简要介绍前端的整体体系：

html骨架

html标签（元素）由三部分组成：标签，标签属性，标签内容。

例如：

<div style="color: red" id="zzz">1020前端体系</div>
<!DOCTYPE html>
<!-- 英文状态下！生成框架 -->
<!-- 英文状态下Ctrl+?标记为注释 -->
<html lang="en">
<head>
<!-- <head></head>标签设置页面配置信息 --><meta charset="UTF-8"><!-- 设置页面编码配置信息 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <title></title>设置页面标题 -->
</head>
<body>
<!-- <body></body>设置页面主题 --></body>
</html>

body主体内基本元素

基本元素

<h1>zzzz</h1><h2>zzzz<h2> 换行、行间空隙、加粗、分级<p>aaaa</p> 换行、行间空隙<div>dddd</div> 换行<span>qqqq</span> 无明显格式，作用：形成独立空间便于单独操作<hr> 水平线<br> 换行，可用在内容之间

超文本（超链接跳转）

<a href="https://www.bilibili.com" target="_blank">a标签跳转至b站</a>
配套属性：href：指定超文本资源路径target：指定超文本资源路径打开方式   _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口)  _top（跳出顶级窗口)

配套属性：href：指定超文本资源路径

target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)

锚点

<a name="top">指定的位置</a>
.
.
.
<a href="#top">回到指定位置</a>        #后面跟的是所要对应a标签的名字

此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径

<a href="#top" style="position:fixed;right:10px;top:10px;"></a>(将锚点固定位置，右上角)

图片标签

 列表标签

       <ul><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li><li>无序列表4</li></ul><ol type="a" start="3" >     <!-- type为序号类型，start表示从第几个开始编写 --><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li></ol>

表格标签

<table></table>标签表示建立表格
border="1"     表格边框  cellpadding="10px"  单元格的填充度cellspacing="10px"   控制单元格与单元格之间的距离，通常为0
width="30px"
height="40px"
<tr>   表示行
<td>  单元格
<th>   字体加粗并且居中
<thead></thead>    用此封装的部分永远在表格的最上方，为表头
<tbody></tbody>     永远在表格的中间位置
<tfoot></tfoot>        永远在表格的最下面
表格封装的作用：让表格的不同成分封装为独立空间互不影响
rowspan 列合并
colspan行合并

 

 显示效果如下：

 框架标签（窗口标签）

<iframe src="https://www.bilibili.com" frameborder="0" width="600px" height="400px" name="test1">这是一个窗口框架标签，默认打开bilibili</iframe>

frameborder="0"作用：去掉窗口边框

href后面也可以加自制网页的网址

name="test1"窗口名称

<a href="https://www.csdn.net/" target="test1">窗口内打开CSDN </a>
<a href="https://www.hbu.edu.cn/" target="test1">窗口内打开河北大学 </a>

利用a标签可以让窗口内跳转别的页面

音频标签

<audio src="img/bj.mp3" controls="true" >音频</audio>

controls="true"手动控制音频播放，也可换为autoplay（进入网页自动播放）或loop（循环播放）

视频标签


<video src="20220908_185521_7215.mp4" controls width="500px" height="300px"></video>

 controls 手动播放   autoplay   自动播放    loop 循环播放 
width="500px" height="300px"可改变视频窗口大小但不会改变原视频外框的形状

VScode编译器

英文状态下！生成框架

英文状态下Ctrl+/标记为注释

div+回车 自动生成div标签

h1 a img iframe 同理

div{vjygbjbghvjbh} 可生成div标签加内容

div*10 可生成10个连续的div标签

div>p>a 嵌套结构生成

div>p+a+span+h3 div结构下生成同级元素

输入框

<input type="text"> 单行文本框
<input type="password">   单行密码框
男：<input type="radio" name="sex">女：<input type="radio" name="sex">   单选择标签，name相同的只能选择一个
体育：<input type="checkbox">   复选择标签
音乐：<input type="checkbox">
学习：<input type="checkbox">
<input type="file">    文件选择器
<input type="color">    颜色选择器
<input type="date">     日期选择器
<input type="datetime_local">    日期时间选择器
<input type="week">            周选择器
<input type="range" min="0" max="100" value="50">   滑动选择器，范围从0到100，初始位置是50
<input type="number" min="0" max="100" value="50" step="5"> 步长为5<select name="" id="">   下拉选择器，默认展示第一个<option value="">A型</option><option value="">B型</option><option value="">AB型</option><option value="">O型</option></A>
</select></th><textarea name="" id="" cols="40" rows="10">宽度为40：一行40个文字，到顶后自动换行；高度为10，共有10行，超过10行后出现滚动条<input type="button" value="按钮">  普通按钮
<input type="submit" value="提交">
<input type="reset" value="重置">   要放在<form></form>中才有效果
<fieldset></fieldset> 可将输入框分类
<lengend></lengend>  可定义标题，包装为模块

字体样式

行内样式：

<div style="color:red;background:yellow;">test</div>

内部样式：

   <head><title>选择器</title><meta charset="utf8"/><style>div{color:blue;background:green;            }</style></head>

外部样式：

   <head><title>选择器</title><meta charset="utf8"/><link rel="stylesheet" href="css/index.css">  叔侄关系</head>
div{color: red;background:pink;
}

优先级：行内样式>内部样式=外部样式

内部样式和外部样式符合刷墙原理，有覆盖效果

实例展示：

<!DOCTYPE html>
<html><head><title>10.14homework</title><meta charset="utf8"/></head><body><table border="1" cellspacing="0"><tr><th>姓名</th><th><input type="text"></th><th>性别</th><th> 男：<input type="radio" name="sex">女：<input type="radio" name="sex"></th><th rowspan="3"><img src="img/666.png" alt="帝皇铠甲" height="90"></th></tr><tr><th>生日</th><th><input type="date"></th><th>血型</th><th><select name="" id=""><option value="">A型</option><option value="">B型</option><option value="">AB型</option><option value="">O型</option></A></select></th></tr><tr><th>爱好</th><th colspan="3">运动：<input type="checkbox">音乐：<input type="checkbox">学习：<input type="checkbox">其他：<input type="text"></th></tr><tr><th>住址</th><th colspan="3"><input type="text"></th><th><input type="submit" value="上传头像"></th></tr><tr><th>学历</th><th><input type="text"></th><th>手机号</th><th colspan="2"><input type="text"></th></tr><tr><th>个人简介</th><th colspan="4"><textarea name="" id="" cols="70" rows="2"></textarea></th></tr><tr><th>个性签名</th><th colspan="2"><input type="text" name="" id=""></th><th><input type="submit" value="提交"></th><th><input type="reset" value="重置"></th></tr></table></body>
</html>

相关文章：

前端开发体系+html文件详解

目录 html骨架 body主体内基本元素 基本元素 超文本&#xff08;超链接跳转&#xff09; 锚点 图片标签 列表标签 表格标签 框架标签&#xff08;窗口标签&#xff09; 音频标签 视频标签 VScode编译器 输入框 字体样式 实例展示&#xff1a; 首先简要介绍前端的整…...

编程日记 2024/7/17 14:36:41

小程序中用于跳转页面的5个api是什么和区别

在微信小程序中&#xff0c;用于页面跳转的API主要有以下几个&#xff0c;但通常不需要5个那么多&#xff0c;因为它们的功能各有侧重&#xff0c;用于不同的跳转场景。以下是这些API及其详细代码和区别&#xff1a; wx.navigateTo(OBJECT) 用于保留当前页面&#xff0c;跳转到…...

编程日记 2024/7/17 14:34:39

翁恺-C语言程序设计-10-0. 说反话

10-0. 说反话 给定一句英语&#xff0c;要求你编写程序&#xff0c;将句中所有单词的顺序颠倒输出。 输入格式&#xff1a;测试输入包含一个测试用例&#xff0c;在一行内给出总长度不超过80的字符串。字符串由若干单词和若干空格组成&#xff0c;其中单词是由英文字母&#…...

编程日记 2024/7/17 14:32:37

langchain 入门指南（二）- 如何跟大模型对话

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 本文中&#xff0c;我们会通过一个简单的例子来展示如何使用 langchain 来调用大模型的 chat API&#xff08;使用 Chat Model&#xff…...

编程日记 2024/7/17 14:29:33

[集成学习]基于python的Stacking分类模型的客户购买意愿分类预测

1 导入必要的库 import pandas as pd import numpy as np import missingno as msno import matplotlib.pyplot as plt from matplotlib import rcParams import seaborn as sns from sklearn.metrics import roc_curve, auc from sklearn.linear_model import LogisticRegres…...

编程日记 2024/7/17 14:27:30

FastApi地理坐标数据存取实践

说明&#xff1a; 应用Pydantic Model 验证/出入 数据&#xff0c; SqlAlchemy Model数据实体&#xff0c;Fastapi提供API机制支持。数据表的坐标字段采用Mysql的GEOMETRY类型目前还没成功使用Pydantic的Coordinate类型&#xff0c;待后续改良 要点&#xff1a; 输出的结果是…...

编程日记 2024/7/17 14:21:24

Docker容器——初识Docker，安装以及了解操作命令

一、Docker是什么? 是一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了apache2.0协议开源&#xff0c;用来管理容器和镜像的工具是在Linux容器里驱动运行应用的开源工具是一种轻量级的“虚拟机” 基于linux内核运行Docker的容器技术可以在一台主机上轻松为任何应用…...

编程日记 2024/7/17 14:19:21

JavaSE从零开始到精通

1.前置知识 JVM&#xff1a;java virtrual machine, java虚拟机, 专门用于执行java代码的一款软件。可以将class文件&#xff0c;转换为机器认识的机器码&#xff0c;因为我们的计算机只认识010101的二进制语言。JRE&#xff1a;java runtime enviroment, java运行时环境, jav…...

编程日记 2024/7/17 14:18:19

求解答word图标变白

把WPS卸载了之后就变成白色了&#xff0c;然后在注册表中把word的地址改成office word的地址之后图标变成这样了&#xff0c;怎么办...

编程日记 2024/7/17 14:16:17

Jenkins 离线升级

1. 环境说明 环境 A: jenkins 版本&#xff1a;2.253使用 systemctl 管理的 jenkins 服务 环境 B&#xff1a; 可以上网的机器&#xff0c;装有 docker-compose docker 和 docker-compose 安装&#xff0c;这里都略了。 2. 安装旧版本 2.1 环境 A jenkins 目录打包文件 …...

编程日记 2024/7/17 14:13:13

Unty 崩溃问题（Burst 1.8.2）

错误代码&#xff1a; Assertion failed on expression: exception SCRIPTING_NULL UnityEngine.StackTraceUtility:ExtractStackTrace () Unity.Burst.BurstCompiler:SendRawCommandToCompiler (string Unity版本&#xff1a;2021.3.17F1&#xff0c;Burst 1.8.2 表现&…...

编程日记 2024/7/17 14:07:06

【大型实战】企业网络实验(华为核心交换、ESXI7.0vmware虚拟机、DHCP中继、服务端网络及用户端网络配置)

需求 实验 vmware网络配置&#xff08;企业内部一般为ESXI&#xff09; 这样服务器虚拟机使用192.168.200.X网段才能与用户侧互通 vmware虚拟机配置&#xff08;DHCP服务器网络配置&#xff09; 打开网络管理页面 nmtui重置一下网络连接&#xff08;重启网卡&#xff09; …...

编程日记 2024/7/17 14:06:05

vue2路由跳转是异步的

在 Vue 2 中&#xff0c;如果你在路由跳转函数中通过路由路径判断路径时&#xff0c;发现路径还是上一个路径&#xff0c;这是因为路由跳转是异步的。为了确保在路由跳转完成后进行判断&#xff0c;你可以使用路由的导航守卫或者 nextTick 来确保获取到最新的路由路径。 使用 …...

编程日记 2024/7/17 14:03:00

第一阶段面试题总结

1. 线程和进程的概念&#xff0c;区别、以及什么时候用线程什么时候用进程 1.1 线程概念 线程是进程中的一个执行单元&#xff0c;一个进程可以包含多个线程 线程是一个轻量级的进程 线程是CPU任务调度的最小单元 1.2 进程概念 进程是一个程序的运行实例&#xff0c;它包含了…...

编程日记 2024/7/17 13:58:56

设计模式（工厂模式，模板方法模式，单例模式）

单例模式&#xff1a; 确保一个类只有一个实例&#xff0c;并提供全局访问点。 单例模式举例&#xff1a; 配置信息类&#xff1a;用于存储应用程序的全局配置信息&#xff0c;例如数据库连接信息、日志配置等。 日志类&#xff1a;用于记录应用程序运行时的日志信息&#x…...

编程日记 2024/7/17 13:57:55

ES6 对象的新增方法（十四）

1. Object.assign(target, …sources) 特性&#xff1a;将一个或多个源对象的所有可枚举属性复制到目标对象。 用法&#xff1a;用于对象属性的合并。 const obj1 { a: 1, b: 2 }; const obj2 { b: 3, c: 4 }; Object.assign(obj1, obj2);console.log(obj1); // 输出&#…...

编程日记 2024/7/17 13:47:44

Spring Boot 学习总结（34）—— spring-boot-starter-xxx 和 xxx-spring-boot-starter 区别？

一、Spring Starter 简介 Spring Starter 是 Spring Boot 提供的一种便捷方式，帮助开发者快速集成和配置 Spring 应用中所需的依赖。每个 Starter 都是一个预配置的依赖集，可以自动配置应用的一部分或特定功能。这些 Starter 旨在消除手动编写大量样板代码和配置的需求。 1…...

编程日记 2024/7/17 13:45:41

昇思训练营打卡第二十五天（RNN实现情感分类）

RNN&#xff0c;即循环神经网络&#xff08;Recurrent Neural Network&#xff09;&#xff0c;是一种深度学习模型&#xff0c;特别适用于处理序列数据。以下是对RNN的简要介绍&#xff1a; RNN的特点&#xff1a; 记忆性&#xff1a;与传统的前馈神经网络不同&#xff0c;R…...

编程日记 2024/7/17 13:43:39

昇思25天学习打卡营第02天|张量 Tensor

一、什么是张量 Tensor 张量是一种特殊的数据结构&#xff0c;与数组和矩阵非常相似。张量&#xff08;Tensor&#xff09;是MindSpore网络运算中的基本数据结构。 张量可以被看作是一个多维数组&#xff0c;但它比普通的数组更加灵活和强大&#xff0c;因为它支持在GPU等加速…...

编程日记 2024/7/17 13:42:38

权威认可 | 海云安开发者安全助手系统通过信通院支撑产品功能认证并荣获信通院2024年数据安全体系建设优秀案例

近日&#xff0c;2024全球数字经济大会——数字安全生态建设专题论坛&#xff08;以下简称“论坛”&#xff09;在京成功举办。由全球数字经济大会组委会主办&#xff0c;中国信息通信研究院及公安部第三研究所共同承办&#xff0c;论坛邀请多位专家和企业共同参与。 会上颁发…...

编程日记 2024/7/17 13:41:36

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/12/15 20:23:19

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/12/7 12:35:20

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/12/9 7:25:28

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2025/12/10 6:23:14

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/12/18 13:04:01

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/12/15 18:01:37

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2025/12/21 5:34:50

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

编程新知 2025/11/25 17:20:50