草庐IT

【中兴】web训练营~一文带你走进前端 | 百图制作

挨踢程序员 2023-09-13 原文

📢作者简介：物联网领域创作者，🏅阿里云专家博主🏅 🏅华为云享专家🏅
✒️个人主页：Choice~
🌐格言：可正因为难，才有价值！🔶

🏫系列专栏：
1️⃣ C/C++
2️⃣ C和指针
3️⃣ Linux
4️⃣ 数据结构与算法
5️⃣ JavaScript从入门到精通
6️⃣ 101算法JavaScript描述💰

文章目录


1.介绍

实训的项目为博雅互动企业网站，教程的方式也是以实战而编写的，也是一些常用到的，完成项目足矣~现在我们来选择吃饭的家伙：

  • 浏览器：我推荐这两个：chrome和edge,这两个浏览器大致相同，也是社会主流，而我这里是edge

  • 开发工具：Vscode和Hbuilder我用Hbuilder，为什么呢？因为Vscode后面也是需要Hbuilder的插件，我这里很干脆利落。

  • 开发语言：制作这个项目只需用到HTML，CSS，JavaScript。

    1.1 开发语言

    • 我们前面介绍的HTML必备

    • CSS:网页中样式/外观/美化jua

      我们看看小米网站，给人一种舒服的感觉

      删掉CSS之后，没有了上面好看

      我们发现网络不流畅也会出现这种情况，没加载出CSS的原因

    • JavaScript:网页中行为/交互/动效：可以点击下一张，进行人点击下一个机器执行下一个的交互行为

      右下禁用JS后，怎么点击也不管用了

      再看一组，没有勾选禁用JavaScript

      禁用后的

    JS和CSS他们之间的关系缺一都可以，没js我可以纯静态展示，缺CSS 美观也够看，但是缺HTML，JS和CSS就没用了。例如：房子，地基最重要，没了地基上面的都是摆设。

    1.2为什么选择这些？

    拿HTML来说，大家可能会有疑虑，我来一一解决；

  1. 单词恐惧：HTML英文单词也就七八个，很多都是文档格式，比如：

    是标题，

    段落，图片 ,音频，英文意思是身体，它在里面，等等…有很多都是见名知意的存在。

  2. 要不要背：完全不需要，看上图，这是默认的HTML最初语法，仔细看，很多都是有闭合标签像：,"/"表示闭合标签，后面还会详细讲到，不懂完全🆗。

  3. 难不难：我们看一个百度百科页面，我们看到有上千行代码，仔细看看，其实他们都有很多重复的，都是不断的以重载方式编写，所以，很简单！

1.3为什么学？

所以的企业招聘web开发工程师都是从下面所选择的

  • 前端开发岗位必备能力 ：可以看到下面这张应聘广告，取自boos直聘一家华为技术有限公式对前端的要求；还有很多，可以自己去网上看看。

  • 从事互联网行业都需要懂：拿网络来讲，下图1看到有个IP地址【112.80.248.76】，有人会问，这是什么？

    我们拿IP 112.80.248.76到网站上在域名那里输入就会发现可以直达百度百科页面，这是IP

    这是https://www.baidu.com域名《—而你也可以点击这里直达到百度

    然后又会说，这个这个有什么关系呢？我们再来看，我的只有域名（可以改，可永久使用），没有单独的IP（不能手动改，连接网络产生新的IP），是不是发现IP搜索起来很麻烦，不易记，而你看上面一张图域名 https:// 可以，但为什么?学了前端就知道了。

  • 职业发展，职业晋级

  • 了解产品开发原理：和移动开发做app，比如安卓应用和苹果应用，产品原理都是一样的，当你学了HTML后，了解到了互联网底层怎么做到的事情，其实你也知道了前面百度IP和域名讲了一些原理，后面会慢慢知晓。

1.4是什么？

我们把它一一分解：

  1. 超文本标记语言：（Hyper Text Markup Language）简写HTML

  2. 超：图片、音频、视频、链接（淘宝网页无非就是这些）

  3. 文本：文本

  4. 标记：单词、描述东西

  5. 语言：一门语言

  6. 网页中的结构：知道网页上的结构，你就可以随心所欲的修改任何数据了，不需要通过PS篡改内容

所以HTNML当中它是带有图片，音频，视频，链接文本的一门描述性的语言

2.HTML

复制的时候，有的复制还收费，随便一篇电子书，我们是复制不了的

我们试着使用再域名前面加 read：意思是进入到阅读模式

回车，然后可以复制和朗读了

[还可以下载音乐]((11条消息) 利用浏览器开发者工具下载歌曲_吃饭了～的博客-CSDN博客_网页f12下载歌曲)我的用QQ音乐来实验，首先F12，打开开发者，在网页菜单栏选择网络，然后子菜单就选择媒体（这种操作主要是在元素查找.mp3查询不到的另一种方法）

2.1.创建项目文件

我们创建一个项目，

创建成功

然后在test项目右击 新建-》选8.html文件

我的HTML名为test.html，模板选择默认的-》创建

创建好了之后，就是下图，因为我们选择模块的时候是默认的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
</html>

所以它会给我们写好的html结构，如果想自己敲可以在上图的时候选择空白文件。

2.2.我的第一个网页

紧接上面的操作，我们在写一个hello world 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        
		hello world!
        
	</body>
</html>

这个*提示没有保存，Ctrl+s或者点击左上角菜单文件保存，看效果

如果你的预览会出错，应该是没网络的原因，没有安装相应的插件，有个临时的方法，就是在项目test右击

看结果

3.HTML

3.1.语法

开始和结束

打招呼第一句:<吃了吗?> 以 </吃了吗?>结束（有个/）

<吃了吗？>
	<找女朋友吗？></找女朋友了吗？>
		<你也没人要吗?></你也没人要吗?>
</吃了吗？>

这就是HTML的一个对话，有开始就要有结束；以成对方式出现

闭合标签

但是有几个是没有结束标签，比如和，有的人看到了可能会觉得，啊~这有的要，有的不要，好乱呐；放心，像下面这些，很少标签是不用加的。

<!DOCTYPE html><!-- 声明一个HTML5的文件 -->

注释

行注释：<!-- 声明一个HTML5的文件 -->
多行注释：<!-- 	
		注释内容
		-->

注释在网页里面是看不到的，所以😏；下图是百度的网页，它也有注释需要打开源代码检查控制台才能看到

框架

我们来实验一下，看看title的效果

源代码及注释：

<!-- 注释内容 快捷键Ctr+/ -->
<!DOCTYPE html><!-- 声明一个HTML5的文件 -->
<html>	<!-- 开始html -->
	<head>	<!-- 网页头部 -->
		<meta charset="utf-8">  <!--翻译官-->
		<title>百度两下</title><!-- 名字 -->
	</head>	<!-- 结束头部 -->
	<body>
		hello world
	<!-- Ctrl+s 保存 -->
	</body>
</html><!-- 结束html -->

3.2.文字

思维导图：

标题

h1一级标题

<h1 >古诗</h1>

效果：

段落

<p>
		锄禾日当午，汗滴禾下土
		谁之盘中餐，粒粒皆辛苦
</p>

文字加粗倾斜效果，作用都一样，建议使用加粗和倾斜，而&nbsp；是空格的含义

3.3.图片

思维导图

<img src"图片路径">

我们可以用tab补全，或者选择下面的预选

我们看到图片太大，都看不到了

加入参数修改图片参数大小【宽weight】，【高height】，😃可以看个够了

还有一些很好的提示参数：alt，图片出错，有是网络慢，还有就是图片路径不正确（这里就是路径问题）

还有一个不常用的属性，title，查看更多

路径

HTML有2种路径的写法：相对路径和绝对路径。

如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片？…

如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。

  • 相对路径：是从当前路径开始的路径，假如当前路径为E:\Html\test\img要描述上述路径，只需输入xjj.webp

  • 绝对路径：是从盘符开始的路径，形如

    E:\Html\test\img

    HTML的绝对路径指带域名的文件的完整路径。表示源文件所在目录的上上级目录，以此类推。正确地引用文件，我们需要学习一下HTML路径。[详细点解这](相对路径_百度百科 (baidu.com))

    有时候我们是会把它们放到文件里

    我们看下图，我需要查看图片，我要点开img，我要在代码中怎么表示呢

    看图，在图形化界面中的步骤是：上一步->进入到img文件，命令行就是…/img，如果在很多文件夹的下面，可以使用多个…/形式进行上一步操作

    还有一种情况，相当简单，直接进入到img文件就行

3.4.音频

<audio src="音频地址"  controls="controls"></audio>

音频名字用英文，虽然在本机上不会出现问题，但是在服务器上却会出错。音频它播放需要一个控件【controls=“controls”】,看图

3.5.视频

视频的语法和音频一样，可以给它们加入宽高属性

<video src="an.mp4" ></video>

3.6.链接

链接就是从一个网页跳转到另一个网页，或者从开头直达结尾这么一个跳转效果

语法：
<a href="链接地址"></a>

外链

没显示原因是因为没有给个提示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>这是A页面</h1>
		
		<a href="https://www.baidu.com">点我去百度</a>
	</body>
</html>

发现只要写其它网页的链接地址就（我这里是baidu，也可以是京东…）可以访问到其它服务器上的网页，

内链

然后我们再试试访问本机服务器的内容：

如果我需要让它们相互跳转可以在B.html中写入A.html的链接：

既然可以放网页链接，那可不可以放图片或者视频链接？答案是：可以。

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>这是B页面</h1>
		<img src="图片地址" width="100px">
		<br>
		<a href="链接地址">链接</a>
	</body>
</html>

如果我想要多个链接怎么办？我们可以把需要链接的放入到链接结束之前：

看鼠标由箭头变成一个手指，说明链接的区域可以点解的。还有就是打开链接是新窗口打开

还是自身的一个打开方式，默认的是自身打开target=“__self”

<a href="B.html" target="_blank">去B</a>

锚点

目录为什么可以这样跳呢，原理就是锚点

我直接拿网页源代码看看，第一步：设置锚点，链接写入ID

语法：
<a href="#1"> 跳转到结尾</a>

第二步：元素加上对应ID名字

p是个段落，加上ID名字
<p id="1">我是结尾</p>

然后看看结果

我们也可以自己在结尾加个链接跳转到目录，顺序相反；我这里是

段落，也可以在或。

想要源代码自己试一下，这些内容都是为了制造滚动条，不然看不到效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="#1"> 跳转到结尾</a>
		<p>我是p6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？
6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？
<img src="../img/xjj.webp">
6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？l
</p>
		<br><br>
		<br>
		<audio src="../mp3/yy.mp3" controls="controls"></audio>>

		
		<p id="1">我是结尾</p>
	</body>
</html>

我的网页设计

图制一文spanclasstoken前端vscodeide

有关【中兴】web训练营~一文带你走进前端 | 百图制作的更多相关文章

  1. ruby - 如何配置 Ruby Mechanize 代理以通过 Charles Web 代理工作？ - 2

    我正在使用Ruby/Mechanize编写一个“自动填写表格”应用程序。它几乎可以工作。我可以使用精彩CharlesWeb代理以查看服务器和我的Firefox浏览器之间的交换。现在我想使用Charles查看服务器和我的应用程序之间的交换。Charles在端口8888上代理。假设服务器位于https://my.host.com。.一件不起作用的事情是:@agent||=Mechanize.newdo|agent|agent.set_proxy("my.host.com",8888)end这会导致Net::HTTP::Persistent::Error:...lib/net/http/pe

  2. 适用于Web开发的Python还是Ruby？ - 2

    Asitcurrentlystands,thisquestionisnotagoodfitforourQ&Aformat.Weexpectanswerstobesupportedbyfacts,references,orexpertise,butthisquestionwilllikelysolicitdebate,arguments,polling,orextendeddiscussion.Ifyoufeelthatthisquestioncanbeimprovedandpossiblyreopened,visitthehelpcenter提供指导。11年前关闭。我是一位精通HTML

  3. ruby - 在 Ruby 中训练神经网络 - 2

    在神经网络方面，我完全是个初学者。我整天都在与ruby​​-fann和ai4r搏斗，不幸的是我没有任何东西可以展示，所以我想我会来到StackOverflow并询问这里的知识渊博的人。我有一组样本——每天都有一个数据点，但它们不符合我能够找出的任何明确模式(我尝试了几次回归)。不过，我认为看看是否有任何方法可以仅从日期预测future的数据会很好，而且我认为神经网络将是生成希望表达这种关系的函数的好方法.日期是DateTime对象，数据点是十进制数，例如7.68。我一直在将DateTime对象转换为float，然后除以10,000,000,000得到一个介于0和1之间的数字，我一直在将

  4. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  5. ruby - 如何在转换器插件中访问页面属性(YAML 前端) - 2

    我正在为Jekyll编写一个转换器插件，需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法，似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗？ 最佳答案 基于Jekyll源代码，无法在转换器中检索YAML前端内容。根据您的情况，我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性，以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项，您可以更改Convert

  6. ruby-on-rails - Web 应用程序中的 API 版本控制 - 2

    我目前正在为一个新网站设计版本化的API。我了解如何为路由命名空间，但我一直坚持在模型中实现版本化方法的最佳方式。下面的代码示例使用的是rails框架，但是事情的原理在大多数web框架之间应该是一致的。目前的路线看起来像这样:MyApp::Application.routes.drawdonamespace:apidonamespace:v1doresources:products,:only=>[:index,:show]endendend和Controller:classApi::V1::ProductsController很明显，我们只是在此处公开Product上可用的属性，如果

  7. ruby-on-rails - Ruby/Rails 和 Sharepoint Web 服务 - 2

    我正在尝试使用ruby​​来使用Sharepoint网络服务。我基本上已经放弃尝试使用NTLM进行身份验证，并暂时将Sharepoint服务器更改为使用基本身份验证。我已成功使用soap4r获得WSDL，但在尝试使用实际Web服务调用时仍然无法进行身份验证。有没有人有过让ruby​​和Sharepoint对话的经验？ 最佳答案 我是个新手。但经过很多时间并在更多经验编码人员的帮助下，我能够让ruby​​与Sharepoint2010一起工作。下面的代码需要“ntlm/mechanize”gem。我已经能够使用列表GUID和ListV

  8. ruby - 在 Ruby 中为 XOR 训练神经网络 - 2

    我正在尝试训练一个前馈网络来使用Ruby库AI4R执行异或运算。然而，当我在训练后评估XOR时。我没有得到正确的输出。有没有人以前使用过这个库并得到它来学习异或运算。我使用了两个输入神经元，一个隐藏层中的三个神经元，一个输出层，正如我看到的预计算XOR前馈神经网络就像这样。require"rubygems"require"ai4r"#Createthenetworkwith:#2inputs#1hiddenlayerwith3neurons#1outputsnet=Ai4r::NeuralNetwork::Backpropagation.new([2,3,1])example=[[0,

  9. 一文解决关于VLAN所有的疑惑 - 2

    一文解决关于VLAN所有的疑惑VLAN基本概念为什么需要VLAN？怎么在交换机上划分VLAN，VLAN的工作原理有了子网，已经隔离了广播，还需要VLAN干啥？只进行子网划分，不进行VLAN划分VLAN划分与子网划分附加VLAN信息的方法VLAN划分交换机的端口类型（Access和Trunk）一、访问链接二、汇聚链接汇聚链接VLAN间通信为什么要进行VLAN间通信？路由器实现VLAN间通信路由器和交换机的连接方式通信细节三层交换机实现VLAN间通信加速VLAN间通信三层交换机与路由器三层交换机路由器路由器和交换机配合构建LAN的实例使用VLAN设计局域网的特点VLAN增加网络的灵活性不使用VLA

  10. 酷早报：10月21日全球Web3加密行业重大资讯大汇总 - 2

    2022年10月21日星期五【数据指标】加密货币总市值：$0.95万亿BTC市值占比：38.51%恐慌贪婪指数：23极度恐慌 【今日快讯】1、【政讯】1.1.1、美联储布拉德：市场预期美联储11月会加息75个基点1.1.2、美联储哈克：将维持加息一段时间1.2、美国10年期国债收益率触及4.197%，为2008年6月以来最高1.3、法国数字转型部长：政府将专注于DeFi和Web31.4、巴西ATM机将于11月3日起支持USDT1.5、美众议院副议长将于11月初加入a16zCrypto担任政府事务主管1.6、香港数字资产托管机构FirstDigitalTrust首席执行官：香港仍是安全

随机推荐