HTML入门零基础教程(二)
嗨,大家好,我是异星球的小怪同志
一个想法有点乱七八糟的小怪
如果觉得对你有帮助,请支持一波。
希望未来可以一起学习交流。
目录
一、HTML标签
1.HTML语法规范
2.标签的关系
二、HTML的基本结构标签
1.第一个HTML网页
2.HTML基本结构总结
三、网页开发工具
1.Visual Studio Code的下载及安装
2.Visual Studio Code的使用
3.使用VS Code的快捷键
4.VS Code插件安装
一、HTML标签
1.HTML语法规范
HTML标签都要包含在尖括号里,尖括号里可以写上想要的标签,标签一般都是成对出现的。
比如:<html>和</html>,我们称为双标签。标签中对应的第一个标签是开始标签,第二个标签是结束标签。
当然也有特殊的标签必须是单个标签(极少情况),比如:<br />,我们称为单标签。
2.标签的关系
双标签关系可以分为两类:包含关系和并列关系。
包含关系:简单可以理解为父子关系,head为父亲,title为儿子
<head><title> </title>
</head>
并列关系:简单可以理解为兄弟关系,head为哥哥,body为弟弟
<head> </head>
<body> </body>
我们可以再尝试着理解:下面所属的代码,html是head和body的父亲,而html和body属于儿子为包含关系,并且head和body是兄弟关系也就是并列关系。
<html><head> </head><body> </body>
</html>
二、HTML的基本结构标签
1.第一个HTML网页
每一个网页都会有一个基本的结构标签(也称之为骨架标签),页面内容也是在这些基本标签上书写,HTML页面也称为HTML文档。
<html><head><title>1024程序员节快乐<title></head><body>代码敲烂,工资过万</body>
</html>
由上述代码可知:
标签名 | 定义 | 说明 | |
<html></html> | HTML 标签 | 页面中最大的标签,我们称为根标签 | |
<head></head> |
文档的头部 | 注意在head标签中我们必须要设置的标签的title | |
<title></tltle> | 文档的标题 | 让页面拥有一个属于自己的网页标题 | |
<body></body> | 文档的主体 | 元素包含文档的所有内容,页面内容基本都是放到body里面的 |
那么我们可以来演示一遍
2.HTML基本结构总结
三、网页开发工具
常见的网站建设工具有Sublime、Visual Studio Code、webstorm、Dreamweaver、Hbuilder等,其实都大差不差,只要你会运用都是可以的。可以用Dreamweaver我前面发的文章有讲http://t.csdn.cn/MwxEj ,也可以用现在大家经常用的Visual Studio Code。
1.Visual Studio Code的下载及安装
(1)下载去这里https://code.visualstudio.com/Download,根据你电脑的系统,选择版本进行下载。
(2)下载好之后,进行一系列的安装,如下图所示:
(a)首先选择我同意此协议
(b)接着安装到自己想要的盘里,最好不要安装到C盘
(c)红色的建议我们勾选,橙色的不建议勾选,想勾选也可以
(d)选择好之后点击下一步
(e)点击安装
(f)安装成功
(g)我们双击桌面打开软件,选择中文安装包
(h)再次重启,就可以了
2.Visual Studio Code的使用
(1)首先我们可以点击文件窗口然后新建文件,也可以直接在界面上点击新建文件,接着文件建好之后要先保存,保存也可以在文件窗口中找到。文件一点要保存为.html网页格式
(2)那么我们就开始敲代码之路了,首先我们看到的是没有任何单词,一个一个写很费事,那么有了开发工具,我们就可以输入一个感叹号,注意是英文状态下输入,然后选择第一个感叹号。
(3)这样我们的HTML基本骨架就已经形成了,就可以写想要的内容了
(4)我们可以尝试尝试 建立网页
(5)建立好之后,可以点击右键,然后用浏览器预览,也可以使用快捷键。浏览器的插件要在扩展中下载。当然后续如果需要什么插件,都可以这样下载,下载之后要记得重启一下。
(6)我们就可以看到我们所创建的网页了啦
3.使用VS Code的快捷键
(1)双击可以打开软件。
(2)新建文件夹(ctrl+n) 。
(3)保存(ctrl+s),注意移动要保存为.html文件。
(4)ctrl+加号键,ctrl+减号键,放大或缩小视图界面。
(5)生成页面的骨架结构,用英文状态下输入感叹号。
(6)利用鼠标右键可以很快点击浏览器预览。
4.VS Code插件安装
推荐安装的插件,仅供参考,安装好之后记得重启一下。
插件 | 作用 |
Chinese(Simplifed)Language Pack for VS Code |
中文(简体)语言包 |
Open in Browser | 鼠标右击选择浏览器打开html文件 |
JS-CSS-HTML Formatter | 每次保存,都会自动格式化js css 和html代码 |
Auto Rename Tag | 自动重命名配对的HTML/XML标签 |
CSS Peek | 追踪至样式 |
好啦,今天就到这里,下次再更~
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=wg8t2mvqa8az
HTML入门零基础教程(二)相关推荐
- Python入门|零基础教程
前言 俗话说的好:"Python学的好,工作不愁找",不管我们学习哪一门语言,我们都要掌握从抽象化中提取出来的方法,这样你才能提高我们的学习能力,并且在学习新事物的时候可以提取我们 ...
- HTML入门零基础教程(四)
嗨,大家好,我是异星球的小怪同志 一个想法有点乱七八糟的小怪 如果觉得对你有帮助,请支持一波. 希望未来可以一起学习交流. 通过前三篇的学习,相信你们对HTML有了一些基础的了解,那么我们就来先做一个 ...
- 麒麟子Javascript游戏编程零基础教程二:游戏程序员分工
小伙子,能够走到这里,你已经不错了. 什么?你是妹子? 放心吧,入了这行,妹子也会被"汉化"的. 游戏程序员分工,以及对应的技能需求. 一.按大类划分 1.客户端程序员 负责处理客 ...
- HTML入门零基础教程(六)
嗨,大家好,我是异星球的小怪同志 一个想法有点乱七八糟的小怪 如果觉得对你有帮助,请支持一波. 希望未来可以一起学习交流. 目录 一.图像的路径 1.路径(前期铺垫知识) 2.VSCode打开目录文 ...
- HTML入门零基础教程(三)
嗨,大家好,我是异星球的小怪同志 一个想法有点乱七八糟的小怪 如果觉得对你有帮助,请支持一波. 希望未来可以一起学习交流. 目录 一. VSCode工具生成骨架标签新增代码 1.文档类型声明标签 2 ...
- HTML入门零基础教程(一)
嗨,大家好,我是异星球的小怪同志 一个想法有点乱七八糟的小怪 如果觉得对你有帮助,请支持一波. 希望未来可以一起学习交流. 目录 一.网页的基本组成 1.什么是网页? 2.什么是HTML? 3.网页 ...
- 麒麟子Javascript游戏编程零基础教程大纲
大家好,我是麒麟子, 开源项目<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 开源项目地址(Github与Gitee同步更新): Github ht ...
- 【吉他入门零基础】超全吉他自学视频教程下载
吉他就目前而言算是一个比较大众化且流行度比较高的技能,很多年轻人都愿意去学习吉他,三更灯火网站长也偶尔闲暇时间摆弄. 学会了吉他,男的可以撩妹,女的可以撩汉,最重要的是还可以自我陶冶,悲伤的时候劳资可 ...
- B站百万播放量Java零基础教程视频(适合Java 0基础,Java初学入门),史上最细Java零基础教学视频
是否还在为学习Java如何入门而烦恼? 是否还在为Java软件如何安装而烦恼? 是否还在找寻着适合零基础的Java视频教程? 动力节点教学总监老杜159集课堂实录Java零基础视频教程,从初学者角度出 ...
最新文章
- 删除无序单链表中值重复出现的节点
- Oracle TNSListener服务启动后自动停止问题
- Hook KiUserExceptionDispatcher参数指针错误的问题
- linux内核cpu负载计算,CPU 负载 — The Linux Kernel documentation
- 数据包提取文件_航测怎样高效提取无人机POS航点数据
- rs232读取智能电表_三相电表怎么看度数 怎么计算总电量
- php 图片合成,PHP中多张图片合成一张图片例子
- UsernamePasswordAuthenticationFilter源码分析
- 手机浏览器中屏蔽img的系统右键菜单context menu
- from mysql partition select_通过分区(Partition)提升MySQL性能[原创翻译]
- java程序猿总结出来的经验
- 如何在 FPGA 上实现双线性插值的计算?
- Jexl表达式引擎-根据字符串动态执行JAVA
- android 入门 (分析: 非匿名内部类 监听功能的实现)
- 在虚幻引擎5中构建你的首款游戏 - 03 - 模型和材质蓝图
- BUCK-BOOST反激变压器设计
- 室外巡检项目搭建仿真环境
- Excel画图多个线条样式设置(在黑白下区分各个线条的作用)
- 讯飞社区android 源码,android 讯飞语音 demo
- 怎样批量解析手机端头条视频和封面图片并保存