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

初始web

华子目录

  • 前后端与全栈
  • BS架构
  • 网页开发原则
  • 前端三剑客
  • 初始html
  • html的基本框架
    • 如何使用vscode创建网页
    • 网页基本框架
    • html基本标签

前后端与全栈

前端:给用户看的内容 – 荧幕前(负责显示)
后端:在后台处理数据 – 荧幕后(负责处理)
全栈:前后端都会 能独立开发一个完整的网站(全能型)

BS架构

B:browser,浏览器
S:server,服务器
平时浏览页面可见到的前端部分 – 浏览器
真正实现操作 进行数据增删改查的后端部分 – 服务器

网页开发原则

1.对于设计者来说容易实现
2.对于编程者来说容易开发
3.对于管理者来说容易维护
4.对于浏览者来说容易使用

前端三剑客

  • html:是网页基本组成写给用户看的内容(图片 文字 视频)–>人类身体
  • css:负责美化网页/优化网页性能(字体大小 排版)–>人类衣服 装饰品
  • JavaScript:脚本语言 用来动态效果 前后端交互传输信息 -->人类行为/技能

初始html

html是超文本标记语言,是构成web页面的基本元素,是一种规范,一种标准
什么是超文本呢?
超文本是比普通文字的文本要强悍些,可以放图片,音乐,视频,排版,超链接等等。
注:html是标记语言不是编程语言,可以把html当做一个拼图,里面的代码称为标签,我们要做的就是把一个个正确的标签放到合适的位置上就可以了,其中html5是html的一个版本,该版本增加优化了很多内容,几乎现在市面上流行的浏览器都能很好的支持html5

html的基本框架

如何使用vscode创建网页

1.先创建一个空文件夹
2.鼠标右击,选择使用vscode打开
3.再在vscode中创建一个后缀名为html的文件
4.Ctrl+s保存文件

网页基本框架

1.标签:写在html包裹的代码

  • 单标签:一般是功能标签,有特殊的功能含义(单身狗)
  • 双标签:一般包裹内容,显示东西(情侣)
    2.生成html框架:!+ tab键或enter键/html:5
    注:注释:<!–内容-- >,快捷键:Ctrl+/
<!DOCTYPE html><!--规定了浏览器使用那种规范,其中html5规范无需额外指定-->
<html lang="en"><!--所有网页最大的结构,网页中的所有的标签都存放在html标签中,其中lang属性:主要用于决定浏览器是否自动弹出翻译框-->
<head><!--网页头部 告诉浏览器一些相关的信息--><meta charset="UTF-8">  <!--表示网页编码格式 推荐utf-8 国际编码 --><title>Document</title>  <!-- 网页标题 -->
</head>
<body><!--网页的主体 我们所看到的网页结构 都是在body中的--></body>
</html>

基本框架:
html --> 是一个网页核心 基本上所有的内容都被他包裹
head --> 头标签 里面写的内容 主要是给浏览器看网页的介绍 样式
body --> 身体标签 主要给用户看的

html基本标签

1.标题标签

<h1>内容</h1>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">  <title>练习</title>  
</head>
<body><h1>大龙虾</h1><h2>海鱼肉</h2><h3>麻辣粉</h3></body>
</html>

在这里插入图片描述
注:

  • h1-h6标签用于表示网页内容的标题 标签中的文字默认会出现不同程度的加粗与增大
  • 搜索引擎非常看重h1标签内容 重要的内容放在h1里 一般只能放置一个 否则会适得其反

2.段落标签
比例式占据网页大小

<p>内容</p>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">  <title>练习</title>  
</head>
<body><p>干啥共青团认为有阿嘎个人和狠人认规范十多个很多事跟的是跟的是规划电风扇改设定个个蛇身瓦房店市股份大使馆的双方各为</p><p>fddghdhfegfdsggfffgdfdshdsffgdfghjrtyughjhjfghjhjgh更好地复工后复工后即可的复工后即可的复工后即可的复工后即可复工后即可复工后即可的复工后即可</p>
</body>
</html>

总结:
p标签是双标签,段落标签,放一段段文字,段落之间是有间隙的因为段落自带换行

相关文章:

初始web

华子目录 前后端与全栈BS架构网页开发原则前端三剑客初始htmlhtml的基本框架如何使用vscode创建网页网页基本框架html基本标签 前后端与全栈 前端:给用户看的内容 – 荧幕前&#xff08;负责显示&#xff09; 后端:在后台处理数据 – 荧幕后&#xff08;负责处理&#xff09; …...

JVM中释放内存的三种方法

判断是否需要垃圾回收可以采用分析。 1标记--清除算法 分为两个阶段&#xff0c;标记和清除&#xff0c;先利用可达性分型标记还存活的对象&#xff0c;之后将没有被标记的对象删除&#xff0c;这样容易生成空间碎片&#xff0c;而且效率不稳定 标记阶段&#xff1a; 标记阶段…...

图床项目进度(一)——UI首页

1. 前言 前面我不是说了要做一个图床吗&#xff0c;现在在做ui。 我vue水平不够高&#xff0c;大部分参考b站项目照猫画虎。 vue实战后台 我使用ts&#xff0c;vite&#xff0c;vue3进行了重构。 当然&#xff0c;我对这些理解并不深刻&#xff0c;许多代码都是游离于表面&am…...

vue3父子组件相互调用方法详解

vue3父子组件相互调用方法详解 1、前言2、父组件调用子组件方法2.1 子组件Child.vue2.2 父组件Father.vue 3、子组件调用父组件方法3.1 父组件Father.vue3.2 子组件Child.vue 1、前言 在vue3项目开发中&#xff0c;我们常常会遇到父子组件相互调用的场景&#xff0c;下面以set…...

Java之接口

作者简介&#xff1a; zoro-1&#xff0c;目前大一&#xff0c;正在学习Java&#xff0c;数据结构等 作者主页&#xff1a; zoro-1的主页 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f496; Java之接口 接口的概念语法规则接口特性接口使用案…...

QT学习笔记-QT5.15编译及安装谷歌拼音输入法(QtInputMethod_GooglePinyin)

QT学习笔记-QT5.15编译及安装谷歌拼音输入法&#xff08;QtInputMethod_GooglePinyin&#xff09; 0、背景1、环境2、下载QtInputMethod_GooglePinyin源码3、使用MinGW64构建套件编译3.1 编译QtInputMethod_GooglePinyin源码3.2、部署tgtsmlInputContextPlugin输入法插件3.3、运…...

python 使用 pdf2image 库将PDF转换为图片

在 Ubuntu 上实现网络穿透&#xff1a;手把手教你搭建FRPS服务器 初环境步骤一&#xff1a;安装pdf2image库步骤二&#xff1a;导入必要的库步骤三&#xff1a;指定PDF文件路径步骤四&#xff1a;将PDF转换为图片步骤五&#xff1a;保存图像为图片文件完整代码运行结果 在数字化…...

kubernetes(namespace、pod、deployment、service、ingress)

NameSpace NameSpace名称空间 用来隔离资源&#xff0c;但是不隔离网络 使用命令行&#xff1a; kubectl create ns hello #创建 kubectl delete ns hello #删除 kubectl get ns #查看使用配置文件&#xff1a; vi hello.yamlapiVersion: v1 kind: Namespace metadata:name…...

深度学习loss变为nan的问题

在网上查了一些资料&#xff0c;但是这个情况和网上都不太一样。前100epoch能正常训练&#xff0c;loss缓慢下降&#xff0c;精度缓慢增大&#xff0c;但是突然loss就Nan了&#xff0c;我想应该不是样本问题也不是梯度爆炸或者loss中有除0吧&#xff0c;毕竟都训练了100epoch了…...

音视频 ffplay命令-主要选项

选项说明-x width强制显示宽带-y height强制显示高度-video_size size帧尺寸 设置显示帧存储(WxH格式)&#xff0c;仅适用于类似原始YUV等没有包含帧大小(WxH)的视频-pixel_format format格式设置像素格式-fs以全屏模式启动-an禁用音频&#xff08;不播放声音&#xff09;-vn禁…...

深入浅出Pytorch函数——torch.nn.init.dirac_

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…...

[Go版]算法通关村第十三关青铜——数字数学问题之统计问题、溢出问题、进制问题

这里写自定义目录标题 数字统计专题题目&#xff1a;数组元素积的符号思路分析&#xff1a;无需真计算&#xff0c;只需判断负数个数是奇是偶复杂度&#xff1a;时间复杂度 O ( n ) O(n) O(n)、空间复杂度 O ( 1 ) O(1) O(1)Go代码 题目&#xff1a;阶乘尾数0的个数思路分析&am…...

GPT-4一纸重洗:从97.6%降至2.4%的巨大挑战

斯坦福大学和加州大学伯克利分校合作进行的一项 “How Is ChatGPTs Behavior Changing Over Time?” 研究表明&#xff0c;随着时间的推移&#xff0c;GPT-4 的响应能力非但没有提高&#xff0c;反而随着语言模型的进一步更新而变得更糟糕。 研究小组评估了 2023 年 3 月和 20…...

大数据Flink学习圣经:一本书实现大数据Flink自由

学习目标&#xff1a;三栖合一架构师 本文是《大数据Flink学习圣经》 V1版本&#xff0c;是 《尼恩 大数据 面试宝典》姊妹篇。 这里特别说明一下&#xff1a;《尼恩 大数据 面试宝典》5个专题 PDF 自首次发布以来&#xff0c; 已经汇集了 好几百题&#xff0c;大量的大厂面试…...

什么是微服务?

2.微服务的优缺点 优点 单一职责原则每个服务足够内聚&#xff0c;足够小&#xff0c;代码容易理解&#xff0c;这样能聚焦一个指定的业务功能或业务需求&#xff1b;开发简单&#xff0c;开发效率提高&#xff0c;一个服务可能就是专一的只干一件事&#xff1b;微服务能够被小…...

【C++入门到精通】C++入门 —— 容器适配器、stack和queue(STL)

阅读导航 前言stack1. stack概念2. stack特点3. stack使用 queue1. queue概念2. queue特点3. queue使用 容器适配器1. 什么是适配器2. STL标准库中stack和queue的底层结构3. STL标准库中对于stack和queue的模拟实现⭕stack的模拟实现⭕stack的模拟实现 总结温馨提示 前言 文章…...

系统架构设计专业技能 · 软件工程之需求工程

系列文章目录 系统架构设计高级技能 软件架构概念、架构风格、ABSD、架构复用、DSSA&#xff08;一&#xff09;【系统架构设计师】 系统架构设计高级技能 系统质量属性与架构评估&#xff08;二&#xff09;【系统架构设计师】 系统架构设计高级技能 软件可靠性分析与设计…...

2023国赛数学建模E题思路模型代码 高教社杯

本次比赛我们将会全程更新思路模型及代码&#xff0c;大家查看文末名片获取 之前国赛相关的资料和助攻可以查看 2022数学建模国赛C题思路分析_2022国赛c题matlab_UST数模社_的博客-CSDN博客 2022国赛数学建模A题B题C题D题资料思路汇总 高教社杯_2022国赛c题matlab_UST数模社…...

Baumer工业相机堡盟工业相机如何通过BGAPISDK设置相机的Bufferlist序列(C++)

Baumer工业相机堡盟工业相机如何通过BGAPISDK设置相机的Bufferlist序列&#xff08;C&#xff09; Baumer工业相机Baumer工业相机的Bufferlist序列功能的技术背景CameraExplorer如何查看相机Bufferlist功能在BGAPI SDK里通过函数设置相机Bufferlist参数 Baumer工业相机通过BGAP…...

从 Ansible Galaxy 使用角色

从 Ansible Galaxy 使用角色 根据下列要求&#xff0c;创建一个名为 /home/curtis/ansible/roles.yml 的 playbook &#xff1a; playbook 中包含一个 play&#xff0c; 该 play 在 balancers 主机组中的主机上运行并将使用 balancer 角色。 此角色配置一项服务&#xff0c;以…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...