当前位置：网站首页 > 技术文章 > 正文

干货 | Web前端开发小白学习笔记

myzbx 2024-12-14 13:50 69 浏览

web前端开发小白学习笔记

· 1 · 开发网页的三种技术

Html——-超文本标记语言–>负责网页的结构

Css——–层叠样式表–>站在美学的角度进行美化

JavaScript——JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。–>站在用户体验的角度设计网页的交互效果

· 2 · Html

2.1 什么是Html?

超文本标记语言(HyperTextMarkup Lanuage,简称:HTML)是一种用于创建网页的标准标记语言。

文本: 就是.txt文本。

超文本: 是一种可支持文本、图片、链接、音乐、程序的文本。

html当中，不存在编程语言的语法，而是充斥着各式各样的标签。

标签分为单标签和双标签。例:

<meta>-->是单标签
<html></html>-->是双标签。双标签结尾总是以"/"开始，表示这个标签的结尾。

html运行环境：浏览器。浏览器是用来打开网页的。

在浏览器中我们见到的所有的网页本质上都是一个文本，而这文本又称之为 html。

2.2 开发环境

只要你有一台电脑，能够正常运行就可以了。

一般开发少量的网页，用轻量级的文本编辑器就完全足够了。例如：sublime text3 ,notepad++ 等。

下载链接：Sublime text3官网下载
Notepad++官网下载

如果是开发比较大的项目，就用webstorm这个软件就行了。

如果你安装了Emmet插件，开发的效率会提高很多。不会安装插件的，自己去百度一下。

<一个前端程序猿的Sublime Text3的自我修养>

这是关于sublimet text3安装一些前端开发的插件的博客，里面有好多的对前端开发有用的插件。如果你有需要，可以去看一看。

2.3 html5文档结构的说明

html5文档声明头，想要完整的使用html5语法，必须使用文档声明头，声明当前文件是html5文件。

<html></html>

双标签–定义html文档内容的结构所有的html文档的内容都需要写在这对标签内部。

<head></head>

头部–通常情况下，里面写的内容是对于当前网页的一些预定义信息设置。

<body></body>

身体–网页里面要显示给用户看的内容，全部写在body里面

2.4 网页预定义信息

<meta charset="UTF-8">
<meta name="author" content="李白">
<meta name="keywords" content="key">

设定当前网页的编码格式。
meta标签是一个单标签，通过charset 属性，将其属性值设置为需要
的编码，即可为当前的网页设置编码格式。

seo优化–百度会对收录的所有的网站有一个评分系统
评分越高，越靠前。

<title>网页标题</title>

通常情况下， tilte要放在meta字符集设置的下面，防止出现乱码。

<link rel="stylesheet" href="style.css"> 引入外部的css文件


<style>
    /*css代码*/
</style>


<script src="01.js"></script>


<script>
    // js代码
</script>

引入外部的js脚本文件，需要注意的是，两个script标签中间不能存在任何内容换行都不可以。

2.5 常用的标签

<hr>换行分割线
<br>换行
<h1>-<h6>多级标题
<!---->注释

html的标签还有很多，想要了解更多的自己去百度。

在html中，一些语义不是太明显的标签我们可以用来做挂件。

HTML 字符集

上一篇：MySQL 9.1正式发布，有哪些值得关注的新特性?
下一篇：语言的转义字符你不知道的奥秘

干货 | Web前端开发小白学习笔记

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿