前端与HTML | 青训营笔记

315 阅读2分钟

立一个flag!

这是我参与【第五届青训营】伴学笔记创作活动的第1天,给自己立个flag:坚持记笔记,不做摆烂小菜鸡!

认识前端

  • 什么是前端?前端工程师需要做的是用web技术栈解决多端人机交互问题,呈现出来的内容和网页就是前端。
  • 什么是前端技术栈?HTML对页面结构、内容进行描绘,CSS对页面样式进行描绘,JavaScript定义网页的行为,三者都是运行在浏览器中的,可以通过网络协议和服务器端互通。这三者也构成了最基础的前端技术栈。
  • 前端应该关注哪些方面?功能、美观、性能(如:动画的流畅度)、安全、无障碍(对不同人群、不同光线的环境等)、兼容(如:电脑、平板、手机均可使用)、体验。
  • 前端的开发环境?浏览器(用来查看代码运行效果)+代码编辑器(如:vscode)即可。

HTML知识

打开vscode,新建html为后缀的文件即可编辑网页结构内容的相关代码。

在html文件中输入!+回车就可以看到一个比较完整、默认的网页代码框架,如下图: 微信图片编辑_20230115182938.jpg 我们从上面的代码中可以看出标签可以嵌套标签,如:html标签下有headbody两个标签,前者负责网页的信息、属性(如:网页标题),后者负责网页的内容。所以也可以将网页的框架结构类比做树,我们称其为DOM树

微信图片_20230115185047.jpg

HTML(HyperText Markup Language)称为超文本标记语言,它可以用不同的标签表达出不同的页面结构,比如图片、表格等等,并且即使是文本内容,也可以根据自己的需求,设定其为标题文本、段落文本、加粗文本、斜体文本等等。
标签丰富多样,同一种效果对应的表达形式本应有很多种,但是为了网页结构的清晰(方便搜索引擎爬取网页内容等等)、代码的可读性(方便网页维护等等),我们使用时要做到语义化,让对应的标签实现自己存在的意义(如:一级标题文本✅直接用h1标签,❌而不使用普通的p标签+style属性设置字体字号放大)。

除了上面提到的<h1><p>标签,还有很多种标签,在此简单介绍几个比较常见的:

标签效果
<h1></h1>一级标题
<p></p>段落文本
<img />图片
<a></a>跳转链接
<ol><li></li></ol>有序列表
<ul><li></li></ul>无序列表
<table><tr><td></td></tr></table>表格
<button></button>按钮
<input />输入框