??作者简介：物联网创作者，阿里云专家博主 ??华为云享专家 个人主页：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
让我们看看小米网站，给人一种舒适的感觉！[image-20220626072254216](https://img-blog.csdnimg.cn/img_convert/4747b370c5d2267a7dccc2d110a0574a.png) 删掉CSS之后，没有了上面好看 我们发现网络不流畅也会发生这种情况，没有加载CSS的原因- JavaScript:行为/的行为/交互/动态效果：点击下一个，点击下一个机器执行下一个交互行为
 右下禁用JS之后，怎么点击也不管用。  再看一组，禁用没有勾选。JavaScript  禁用后的 JS和CSS他们之间的关系缺一不可，没有js我可以纯静态显示，缺失CSS 美也够看，但缺少HTML，JS和CSS没用。例如：房子，地基是最重要的，没有地基上的装饰。
1.为什么择这些？
拿HTML大家可能都有疑惑，我一一解决；
-
单词恐惧：HTML英语单词只有七八个，很多都是文档格式，比如:
是标题，
段落，图片 ,音频，英语意味着身体，它在里面，等等…很多都是知名的。
-
要不要背:完全不需要，看上图，这是默认的HTML最初的语法，仔细看，很多都有闭合标签，"/"表示封闭标签，后面会详细说明，不完全理解。
-
困难：我们看百度百科全书页面，我们看到成千上万的行代码，仔细看，事实上，他们有很多重复，不断重写，所以，非常简单！
1.3为什么学？
因此，企业招聘web开发工程师都是从下面所选择的
-
前端开发岗位必备能力 ：可以看到以下申请广告，取自boos直接聘请华为技术有限公式对前端的要求；还有很多，你可以上网。
-
从事互联网行业需要了解：以网络为例，下图1显示了一个IP地址【112.80.248.有人会问，这是什么？
我们拿IP 112.80.248.如果你在网站上输入域名，你会发现你可以直接到达百度百科全书页面。IP
这是https://www.baidu.com域名-你也可以点击到百度
然后我会说，这有什么关系？我们再来看看。我的域名(可以改，可以永久使用)不是单独的。IP(不能手动更改，连接网络产生新的IP），是不是发现IP搜索起来很麻烦，不容易记住，你看上面的域名 https:// 是的，但是为什么学前端就知道了。
-
职业发展，职业晋升
-
了解产品开发原理：移动开发app，例如，当你学习安卓应用程序和苹果应用程序时，产品原理是相同的。HTML之后，我了解了互联网底层是怎么做到的。其实你也知道百度在前面。IP告诉域名一些原理，然后慢慢知道。
1.4是什么？
我们一一分解：
超文本标记语言：（Hyper Text Markup Language）简写HTML
超:图片、音频、视频、链接(淘宝网页就是这些)
文本：文本
标记:单词，描述事物
语言：一种语言
网页中的结构：如果你知道网页上的结构，你可以随意修改任何数据通过PS篡改内容
所以HTNML它是一种描述性的语言，具有图片、音频、视频和链接文本
2.HTML
复制时，有些复制也收费。我们不能复制任何电子书
我们试着在前面添加再域名 read：意思是进入阅读模式
回车后，可以复制朗读
(11条消息) 使用浏览器开发者工具下载歌曲_吃~博客-CSD博客_网页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>
文字加粗倾斜效果，作用都一样，建议使用加粗和_倾斜，而 ；是空格的含义_
3.3.图片
思维导图
<img src"图片路径">
我们可以用tab补全，或者选择下面的预选
我们看到图片太大，都看不到了
加入参数修改图片参数大小【宽weight】，【高height】，??可以看个够了
还有一些很好的提示参数：alt，图片出错，有是网络慢，还有就是图片路径不正确（这里就是路径问题）
还有一个不常用的属性，title，查看更多
路径
HTML有2种路径的写法：和。
如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片？…
如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。
-
相对路径：是从当前路径开始的路径，假如当前路径为E:Html estimg要描述上述路径，只需输入xjj.webp
-
绝对路径：是从盘符开始的路径，形如
E:Html estimgHTML的绝对路径指带域名的文件的完整路径。表示源文件所在目录的上上级目录，以此类推。正确地引用文件，我们需要学习一下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>
我的网页设计
)