纸上得来终觉浅,绝知此事要躬行。 ——陆游《冬夜读书示子聿》
语雀地址:https://www.yuque.com/beilayanmen
Github地址:https://github.com/SuZui-cn/my-web
Gitee地址:https://gitee.com/north_gate/my-web
个人博客地址:https://foollyone.cn/
-
VSCode基本介绍
-
前端工具介绍
-
VSCode的使用
-
HTML常用标签
-
基本文档标签
-
基本标签
-
文本格式化
-
链接
-
图片
-
无序列表
-
有序列表
-
定义列表
-
表格
-
框架
-
表单
-
HTML标签练习
-
标签练习
-
基本标签实战
-
列表标签练习
-
图片标签练习
-
表格标签练习
-
表单标签练习
-
善于实用搜索引擎
在上一篇文章中,我们主要是针对于HTML的基础理论进行了探讨。但是学习一门技术不能总停留在理论,本文将会和大家一起来对HTML进行练习。
实践是检验真理的唯一标准。
前端工具介绍
作为一个合格的程序员,熟练的掌握开发工具是必不可少的。这里给大家稍微的讲解一下前端常用的开发工具。
-
VSCode:插件众多,拓展性强;适用于绝大部分前端开发
-
Sublime Text:界面简洁,轻量级启动快速。
-
HBuilder:国产前端开发工具,非常不错的软件,在开发微信小程序和手机APP上非常好用。
-
WebStorm:jetbrains公司旗下的JavaScript开发工具,适合在前端工程化的项目中使用。
-
Dreamweaver:曾经以PS+DW+FW称霸网页领域,号称网页三剑客。
-
记事本:大佬都是用记事本写代码的。【手动狗头】
在以前编写网页大多数是使用的dreamweaver(DW),DW对于新手而言很友好,可以用可视化的编辑方式编写网页,但是DW自己生成的样式代码略微复杂,后期的维护难度很大。随着时代的进步,开发工具也在逐步的更新换代,DW逐渐退出前端开发的视野中。这里推荐大家使用VSCode这款神器。(想要编写微信小程序的同学可以试着使用HBuilder)。
VSCode的使用
自动保存
在编写完代码之后需要保存再打开浏览器才能看到界面的效果,作者在初学网页的时候经常忘记保存代码,导致页面一直不出现效果。所以推荐大家开启vscode里的自动保存。
左上角:文件->勾选自动保存。
创建文件/文件夹
在VSCode中除了在之前介绍的可以直接将文件/文件夹直接拖进vscode以外,还可以快捷的创建文件/文件夹。只需要选中要创建文件/文件夹的父级目录再点击按钮就可以快捷创建。
具体操作如下图:
插件推荐
这里推荐几款目前阶段适合大家的插件。插件这部分我不会一次推荐很多,只会分阶段的推荐,并且讲解每个插件的具体作用。以防大家装了一堆插件,结果连具体插件是做什么的都不知道。(也欢迎大家多多关注作者的干货推荐专栏,里面会推荐很多实用的插件)
Auto Close Tag
自动闭合标签。装上这款插件我们在写标签的时候只需要输入/就可以快速生成闭合标签。
Auto Rename Tag
自动重命名标签。这个插件可以让我们在修改标签时自动帮我们修改另一个。比如 在修改<div>
标签为<span>
标签的时候,它会自动帮我们把</div>
标签替换为</span>
标签。
open in browser
快速在浏览器打开,装上这个插件可以让我们在vscode界面中快速打开浏览器
pass:该插件作者在初学的时候出现过快捷键不能正常打开浏览器的情况,解决办法是降低该插件的版本即可。
使用方式:
-
右键选择
-
快捷键:Alt + b
Live Server
实时预览,这款插件可以在本地运行一个微型服务器,让我们可以实时预览编辑的效果。(在修改召唤神龙那篇文章中就是用该插件和谷歌的另一个路径映射的插件联动,从而达到修改游戏的效果。有兴趣的同学可以去看看我写的修改召唤神龙的文章)
使用方式:
安装好该插件之后在vscode右下角会出现一个’Go Live’,点击即可。
Path Intellisense
路径联想,在我们引入图片或者其他文件的时候这款软件会为我们提示路径。
在网页中,每个html标签被称为元素,每个元素都有对应的属性(关于属性,会在下一篇CSS介绍的文章中详细讲解)
HTML标签的本质是为文本添加语义!
在学习编程的时候会涉及大量的概念,以及一些常用的代码片段。所以建议大家养成记笔记的习惯。
拓展内容
建议大家自主学习gitpage搭建个人博客(后期可能会出教程,等不了的同学可以自行百度,关键词:gitpage搭建个人博客)
同时建议大家学习markdown语法,并选择一款顺手的markdown编辑器。作者使用的是typroa 0.9版本(因为该软件1.0之后的版本收费)
typroa历史版本下载:https://typora.io/releases/all
既然安装了typroa可以自主学习一下图床的概念,再将Typroa和PicGo联动起来
世上无难事,只要肯登攀。 —— 毛泽东《水调歌头·重上井冈山》
pass:以下标签取自菜鸟教程
基本文档标签
可见文本…
网页基础的结构,主要需要注意层级结构,以及外部文件是在<head>
标签中引入(js文件可以在body中引入)
基本标签
一级标题
二级标题
三级标题
. . .
. . .
六级标题
文本
这是一个段落。
(换行)
(水平线)
大家在这里可以试试<span>
标签和<div>
标签有什么区别
提示:行级元素,块级元素(后续DIV+CSS布局章节会详细讲解)
文本格式化
粗体文本
计算机代码
强调文本
斜体文本
键盘输入
预格式化文本
更小的文本
重要的文本
(缩写)
(联系信息)(文字方向)
(从另一个源引用的部分)
(工作的名称)
(删除的文本)
(插入的文本)
(下标文本)
(上标文本)
链接
普通的链接:链接文本
邮件链接: 发送e-mail
书签:
注意a标签设置跳转的属性是href可不是src。
图片
图片这里的话需要注意一点就是文件的引用路径,相对路径和绝对路径是不同的
相对路径和绝对路径的区别:https://blog.csdn.net/qq_34107571/article/details/82834825
./是当前文件夹
…/是上一级文件夹
…/…/是上上一级文件夹
在目前的阶段,图片显示不出绝大部分是因为路径的问题,相对路径需要结合之前推荐的Path Intellisense
路径联想插件多多练习。
pass:使用绝对路径的时候将代码发送给别人,图片会因为路径位置没有对应图片而显示不出来,所以需要注意。其他外部文件(列如CSS、JS文件)在使用绝对路径的时候也会出现这种问题。这点需要注意。