《搭建属于自己的网站之网页前端学习》基础入门

《搭建属于自己的网站之网页前端学习》基础入门

一、安装VScode

我习惯了用电脑管家直接安装

vscode安装中文扩展包

安装完事后,可能重启还是中文的,我的就是,所以需要重新修改以下代码

可以按下快捷键 Ctrl + Shift + P(Mac上为 Command + Shift + P),输入以下命令:

c 复制代码
Configure Display Language

在弹出的选项中选择 zh-cn,然后点击 Restart 按钮重启VSCode。

常用的快捷键

二、HTML5简介与基础骨架

DOCTYPE

写文件,要先写声明,这是由于现在有不同的浏览器厂商,不同浏览器厂商对于不同HTML文件的适应性不同,为了避免错误和展示的不一样,所以需要先申明。

所有的网页都有:

HTML的基本骨架就是包含了、head、body标签

html标签

定义HTML文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点。

head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息,包括文档的标题、在Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

body标签

body元素定义文档的主体。

body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

它会直接在页面中显示出来,也就是用户可以直观看到的内容

title标签

可定义文档的标题。

2它显示在浏览器窗口的标题栏或状态栏上。
标签是标签中唯一必须要求包含的东西,就是说写head一定要写title<title>的增加有利于SEO优化 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f3d667bd07ba47d79bbcc41d1698476f.png) ## meta标签(单标签) meta标签用来描述一个HTML网页文档的属性,关键词等,例如: charset="ut-8"是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式,通常使用utf-8。 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/b856a5687c79464183a477c62cb78282.png) # 三、标签之标题 ## 标题介绍与应用 标题(Heading)是通过<h1> - <h6>标签进行定义的。<h1>定义最大的标题<h6>定义最小的标题 </h6></h1></h6></h1>

VScode浏览器插件

标题是便于搜索引擎检索的,所以在可以尽量将H1和H2设置为网页的主要表达的内容

属性是新的东西,属性是指在标签中写的所有的内容都可以称为属性,属性有属性的值比如如下:

四、标签之段落、换行、水平线

段落标签

段落标签是用

来表示的,是双标签,有开始,就要有结束。

换行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用

元素是一个空的HTML元素。


结果如下:

水平线

标签在HTML页面中创建水平线

五、图片

图片属性

网站中最多的元素毋庸置疑,一定是图片


图片路径

绝对路径

六、标签之超文本链接

超链接描述

可以是一个词,一个字或者一组词,也是一幅画像

在a标签中,可以是词或者图片,都可以通过设置链接的形式,实现跳转

超链接,当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手

相关推荐
ywf12151 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
恋猫de小郭1 小时前
2026,Android Compose 终于支持 Hot Reload 了,但是收费
android·前端·flutter
hpoenixf7 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特7 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷7 小时前
阶段一:从 0 看懂 JSVMP 架构,先在脑子里搭出一台最小 JSVM
前端·javascript·架构
mengchanmian8 小时前
前端node常用配置
前端
sinat_255487818 小时前
读者、作家 Java集合学习笔记
java·笔记·学习
华洛8 小时前
利好打工人,openclaw不是企业提效工具,而是个人助理
前端·javascript·产品经理
xkxnq8 小时前
第六阶段:Vue生态高级整合与优化(第93天)Element Plus进阶:自定义主题(变量覆盖)+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A9 小时前
vue css中 :global的使用
前端·javascript·vue.js