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

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

news 2025/7/8 3:21:26

目录

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

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/7/5 22:29:13

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/7/6 17:08:17

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/7/7 21:53:35

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/7/5 8:54:59

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/7/7 4:36:35

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/6/20 16:41:45

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/7/5 5:14:22

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/6/16 14:09:54

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/6/16 12:37:53

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

编程新知 2025/6/22 5:40:16