《搭建属于自己的网站之网页前端学习》基础入门
一、安装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优化  ## meta标签(单标签) meta标签用来描述一个HTML网页文档的属性,关键词等,例如: charset="ut-8"是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式,通常使用utf-8。  # 三、标签之标题 ## 标题介绍与应用 标题(Heading)是通过<h1> - <h6>标签进行定义的。<h1>定义最大的标题<h6>定义最小的标题 </h6></h1></h6></h1>

VScode浏览器插件


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


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

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

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

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


结果如下:
水平线
标签在HTML页面中创建水平线

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


图片路径

绝对路径


六、标签之超文本链接
超链接描述
可以是一个词,一个字或者一组词,也是一幅画像


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

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