前段初学 | 简单定义以及环境配置

最新推荐文章于 2024-06-13 10:31:50 发布

printfbaozw

最新推荐文章于 2024-06-13 10:31:50 发布

阅读量253

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/printfbaozw/article/details/127955625

版权

网页是如何形成的？

网页通过浏览器才能访问阅读；
网页是网站中的“一页”；
文件扩展名为“ .html ”。

什么是HTML？

HTML是用来描述网页的一种语言。

HTML指的是超文本标记语言（Hyper Text Markup Language）；
HTML不是一种编程语言，而是一种标记语言；
标记语言是一套标记标签（markup tag）

WEB的组成部分

HTML结构

W3C制定了结构HTML的语法、标准。
记住常用的标签，包括但不限于表格、表单等等。
缺点：仅能组建网页结构，不生动、不好看。

CSS表现

W3C制定了表现CSS的语法、标准。
进行布局、配色、动画等，使网页更加生动。

JS行为

W3C、ECMA制定了行为标准（W3C DOM, ECMAScript）
触发一种行为，图片循环播放，视频暂停开始行为标准。

第一个网页建立

基本标签：<html>  <head>  <body>  </html>  </head>  </body> 
其中“<head>”和“<body>”属于并列关系，

标签之间有“父子关系”，“并列关系”等，编写时有固定标签。

这里用“文本文档”进行简单的示例：
在这里插入图片描述

用以上的简单标签进行编写

“< title >”

显示在页面标签，详情如图所示：

在这里插入图片描述

“< center >”

用于将文字居中，详情如下图所示：
在这里插入图片描述

“< br/ >”

用于换行，在上图有所展示

综上，为简单的页面制作。

HTML的基本语法

1. <常规标记>也叫双标记

<标记></标记>
<标记属性 = “属性值” 属性 = “属性值” ></标记>
标记也叫标签或者元素
例如：< head > < /head >

2. 空标记也叫单标记

<标记/>
<标记属性 = “属性值” / >
例如：< br / >

使用工具

Visual Studio Code

界面汉化

使用时将Visual Studio Code安装中文插件，方便未来使用。

在这里插入图片描述

下载并重启，即可获得中文界面。

添加代码目录

建议将目录放在除c盘外的存储盘上，以便减少c盘占用。
在vscode上创建“.html”文件，即可进行使用

效果图，本人采用白色界面

快速建立模板

在vscode中输入“!”并按回车，即可生成。
在这里插入图片描述
注意：上文说的“!”为英文输入法中的叹号，有同学输入中文叹号（即"！"）则无法生成！

安装插件

通过安装合适的插件，使得编程更加方便。
此文将介绍三款常用插件，以方便未来使用。

1. Auto Rename Tag

在这里插入图片描述
用于重命名前后标签，更改前面标签，会相应更改后面标签

这里以< body >为例
在这里插入图片描述

由此可见，仅修改前一部分，后边的</ body>也变为</ body1>

2. view-in-browser

在这里插入图片描述
用于直接跳转到网页，不需要在文件夹中寻找“.html”文件，即可直接跳转。

右键单击代码，选择view in browser，单击即可跳转。

3. Live Server

用于页面的自动刷新。用于解决修改再浏览器预览html文件时，预览需手动刷新问题
在这里插入图片描述
Ctrl + S保存后，网页将自动替换

总结

以上是对HTML的简单入门以及环境配置，今后将在此账号长期更新前端学习的帖子，希望以上内容对你有所帮助。