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

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

一、安装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标签中,可以是词或者图片,都可以通过设置链接的形式,实现跳转

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

相关推荐
Shaneyxs3 分钟前
从 0 到 1 实现CloudBase云开发 + 低代码全栈开发活动管理小程序(13)
前端
L.fountain4 分钟前
图像自回归生成(Auto-regressive image generation)实战学习(一)
人工智能·深度学习·学习·计算机视觉·图像自回归
半山烟雨半山青5 分钟前
微信内容emoji表情包编辑器 + vue3 + ts + WrchatEmogi Editor
前端·javascript·vue.js
码途潇潇6 分钟前
Vue 事件机制全面解析:原生事件、自定义事件与 DOM 冒泡完全讲透
前端·javascript
zmirror7 分钟前
Monorepo 在 Docker 中的构建方案方案
前端
用户479492835691518 分钟前
node_modules 太胖?用 Node.js 原生功能给依赖做一次大扫除
前端·后端·node.js
TL滕25 分钟前
从0开始学算法——第十八天(分治算法练习)
笔记·学习·算法
_Kayo_29 分钟前
TypeScript 学习笔记2
前端·javascript·typescript
海纳百川本尊7606431 分钟前
Flutter框架核心原理深度解析
前端
Shaneyxs31 分钟前
从 0 到 1 实现CloudBase云开发 + 低代码全栈开发活动管理小程序(12)
前端