-
从零开始学WEB前端——HTML理论讲解
有同学可能就会问：为什么我的创建的记事本文件名字叫“新建文本文档”而不是“新建文本文档.txt”呢？
这是因为.txt是后缀名，表示的是打开方式，就比如.docx后缀的都是默认用word打开，.xlsx的都是默认用excel打开。
常用文件扩展名，Windows系统文件按照不同的格式和用途分很多种类，为便于管理和识别，在对文件命名时，是以扩展名加以区分的，即文件名格式为： “主文件名.扩展名”。这样就可以根据文件的扩展名，判定文件的种类，从而知道其格式和用途。主要ISO、RAR、html、zip、exe、pdf等。
——百度百科
没有显示后缀名的同学需要打开“此电脑”->左上角选择查看->之后将文件拓展名勾选上。
这样
0x02 编写代码
Document 靓仔的第一个网页
直接将上面的代码粘贴到刚刚新建的记事本中，这时候我们就已经写好第一个网页了，只需要让谷歌浏览器去打开它我们就可以看到里面的内容了。
但是我们怎么让谷歌来打开一个记事本文件呢？很简单刚刚所提到的后缀名就可以解决，我们现在就把记事本的后缀名改成.html。
现在直接点击他就可以用浏览器打开了。
有的同学因为默认浏览器不是谷歌浏览器，所以显示的图片就不是谷歌的，这不应该当前操作。但是强烈建议使用谷歌浏览器（千万别用IE浏览器），在JavaScript一节中会详细介绍浏览器对我们写网页的影响。
恭喜！做到这一步你已经超越很多人了。
道虽迩，不行不至。事虽小，不为不成。 ——《荀子·修身》
下一步我会给大家讲解刚刚所写的那一段代码以及一些相关的专业知识。如果已经具备了专业知识的同学可以直接跳到标签介绍那里。
W3C组织
聊到网页我们就不得不提起一个组织：W3C
W3C：World Wide Web Consortium，万维网联盟组织，用来制定web标准的机构（组织）。
W3C 组织就类似于现实世界中的联合国。W3C就是网页世界的老大，规则都是由其来定的。所以我们在写网页的时候就需要遵守他的规则。
为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。
规则并不是用于约束小白的，而是用于约束高手的，因为高手会的太多，掌握太多他人所不会的。为了方便管理，所以需要规则加以约束。
Web标准：制作网页要遵循的规范。
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
Web标准包括三个方面：
-
结构标准（HTML）：用于对网页元素进行整理和分类。
-
表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
-
行为标准（JS）：用于定义网页的交互和行为。
根据上面的Web标准，可以将 Web前端分为三层，如下。
Web前端分三层：
-
HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
-
CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
-
JS：JavaScript。从交互的角度描述页面的行为。相当于人的动作，让人有生命力。
HTML 全称为 HyperText Markup Language，译为超文本标记语言。
HTML 不是一种编程语言，是一种描述性的标记语言。
作用：HTML是负责描述文档语义的语言。
这里我们需要注意两个地方一个是超文本、一个是标记语言。
所谓的超文本，有两层含义：
（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。
（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。
HTML 不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：
说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。
（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。
在记事本中编写代码虽然可以实现最终的效果，但是不免有些难以操作，所以现在我们用vscode来打开刚刚到记事本文件
打开方式一：点击左上角的文件然后选择打开文件，之后选中刚刚的记事本文件。
pass: 如果vscode界面是英文的说明没有安装汉化的插件，具体的安装步骤请看工具篇。
打开方式二：直接将文件拖动到vscode
文件和文件夹都是可以直接拖到vscode里面的，这样可以快捷打开。
我们要知道HTML标签都是有开始和结束的（双边标记），比如
和，在尖括号里多一个反斜杠表示结束。又或者有的标签是在末尾以/反斜杠直接闭合，这称为自闭合标签（单边标记）。
双边标记的标签在里面编写的是他的内容。
而自闭合标签大多数是编写的属性。
这些标签里有很多用等号的就称为标签的属性。
等号左边是要设置的属性名，右边是设置的属性值。
至于这些属性有什么用会在之后进行详细讲解。
一个最基本的网页应该包含一下的内容
标题 内容
pass:这里的title标签的标题是浏览器标签的标题，如下图。
其层级结构应该如下：
-
DOCTYPE
-
html
-
head
-
title
-
body
Document 靓仔的第一个网页
补充：头标签内部的常见标签如下：
-
</code>：指定整个网页的标题，在浏览器最上方显示。</p> </li><li> <p><code><base></code>：为页面上的所有链接规定默认地址或默认目标。</p> </li><li> <p><code><meta></code>：提供有关页面的基本信息</p> </li><li> <p><code><body></code>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。</p> </li><li> <p><code><link></code>：定义文档与外部资源的关系。</p> </li></ul> <p><a href="" rel="nofollow"></a>HTML规范</p> <hr> <p>（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<code><h1><font></font></h1></code></p> <p>（2）所有的标记都必须小写。</p> <p>（3）所有的标签都必须闭合。</p> <ul><li> <p>双标签：<code><span></span></code></p> </li><li> <p>单标签：<code><br></code> 建议写成 <code><br /></code> <code><hr></code> 建议转成 <code><hr /></code>，还有<code><img src=“URL” /></code></p> </li></ul> <p>（4）所有的属性值必须加引号。<code><font color="red"></font></code></p> <p>（5）所有的属性必须有值。<code><hr noshade="noshade"></code>、<code><input type="radio" checked="checked" /></code></p> <h4><a name="t2"></a><a id="_472"></a>总结</h4> <p>秋招即将开始，校招的朋友普遍是缺少项目经历的，所以<strong>底层逻辑，基础知识要掌握好！</strong></p> <p>而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。</p> <p>这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 <strong>HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法</strong>等高频考点<strong>238道（含答案）</strong>！</p> <p>资料截图 ：</p> <p><img src="https://1000bd.com/contentImg/2024/06/30/b4bfc9adbe6e03ac.png" alt=""></p> <p><img src="https://1000bd.com/contentImg/2024/06/30/45fec43cbb1616d6.png" alt=""></p> <p><img src="https://1000bd.com/contentImg/2024/06/30/940978f58060d68e.png" alt=""></p> <p><strong>高级前端工程师必备资料包</strong></p> <p><img src="https://1000bd.com/contentImg/2024/06/30/35bdbe1348d1a14b.png" alt=""></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1312037">CRM客户管理系统英文专业版</a> <br /> <a href="/Article/Index/801193">Python字典详解</a> <br /> <a href="/Article/Index/705957">结构体大小的计算（结构体内存对齐）</a> <br /> <a href="/Article/Index/704784">JAVA【常用类】【比较器】【system类】【Math类】</a> <br /> <a href="/Article/Index/1275727">对称加密 vs 非对称加密</a> <br /> <a href="/Article/Index/1613349">Linux---编辑器vim的认识与简单配置</a> <br /> <a href="/Article/Index/1322859">一文教你学会ArcGIS Pro地图设计与制图系列全流程（1）</a> <br /> <a href="/Article/Index/1250716">【ArcGIS Pro二次开发】(65)：进出平衡SHP转TXT、TXT转SHP</a> <br /> <a href="/Article/Index/855013">webpack之代码分离</a> <br /> <a href="/Article/Index/1383654">右值引用+移动语义</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/2401_85123638/article/details/139730110 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1906469">【JVM】编译执行与解释执行的区别是什么？JVM 使用哪种方式？</a> <br /> <a href="/Article/Index/1907193">用 Hashids 优雅解决 C 端自增 ID 暴露问题</a> <br /> <a href="/Article/Index/1907195">V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容</a> <br /> <a href="/Article/Index/1907196">LLVM Pass快速入门(四)：代码插桩</a> <br /> <a href="/Article/Index/1907197">milkup：桌面端 markdown AI续写和即时渲染</a> <br /> <a href="/Article/Index/1907198">基于项目工程构建SBOM（软件物料清单）的研究</a> <br /> <a href="/Article/Index/1907199">鸿蒙应用开发UI基础第二节：鸿蒙应用程序框架核心解析与实操</a> <br /> <a href="/Article/Index/1907200">.NET 中如何快速实现 List 集合去重？</a> <br /> <a href="/Article/Index/1907201">扣子Coze实战：从0到1打造抖音+小红书热点监控智能体</a> <br /> <a href="/Article/Index/1907202">浅谈数据访问层</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <div style="padding:0px 5px;"> <a href="/tools">小工具</a> <a href="https://games.1000bd.com">小游戏</a> </div> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style=" padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>
-