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

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

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

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

相关推荐
乔冠宇2 分钟前
CSS3中的新增属性总结
前端·javascript·css3
e***58233 分钟前
Spring Cloud GateWay搭建
android·前端·后端
云栈开源日记1 小时前
Python 开发技术栈梳理:从数据库、爬虫到 Django 与机器学习
数据库·爬虫·python·学习·机器学习·django
青衫码上行1 小时前
【Java Web学习 | 第15篇】jQuery(万字长文警告)
java·开发语言·前端·学习·jquery
x***13393 小时前
【MyBatisPlus】MyBatisPlus介绍与使用
android·前端·后端
z***75155 小时前
【Springboot3+vue3】从零到一搭建Springboot3+vue3前后端分离项目之后端环境搭建
android·前端·后端
必胜的思想钢印6 小时前
修改主频&睡眠模式&停机模式&待机模式
笔记·stm32·单片机·嵌入式硬件·学习
fruge6 小时前
仿写优秀组件:还原 Element Plus 的 Dialog 弹窗核心逻辑
前端
an86950017 小时前
vue新建项目
前端·javascript·vue.js
w***95497 小时前
SQL美化器:sql-beautify安装与配置完全指南
android·前端·后端