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

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

一、安装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 小时前
小自考的校考和统考,出题方和难度差在哪
java·大数据·前端
撩得Android一次心动4 小时前
Jetpack Compose 知识点整理2【个人用】
android·笔记·学习·kotlin·compose
ShineWinsu4 小时前
对于JavaScript:操作元素的解析
开发语言·前端·javascript·面试·web·dom·元素
福兮说5 小时前
JSON 格式正确,数据就可靠吗?我用一份自编配置检查类型与空值
java·前端·json
dadaobusi5 小时前
学习:灵犀指令集
学习
xhyu616 小时前
【学习笔记】图像质量评估方法 (5.生成图像是否符合用户要求)
笔记·学习·计算机视觉
程序员老赵7 小时前
Docker 部署青龙面板:轻松搭建定时任务管理平台
前端·docker·开源
Swot7 小时前
Asciidoctor 公式数字下标错位问题:原因分析与解决方案
前端
Swot7 小时前
leo-editor 中将 Markdown 内容转成 asciidoc 格式
前端
狒狒AI7 小时前
Remotion / GSAP+Three / HyperFrames / Skia 四栈实测:代码渲染知识视频的选栈方法(附开源技能)
前端·人工智能·aigc