First Hope~大前端（起）

第一次。hello world~ 开发世界（少废话，直接干！）
（一）Html基础部分：
初体验：
（1）常用的web开发工具推荐：VS Code（Visual Studio Code）此为前端界最火的软件，Sublime Text，Markdown。
（2）说说VS Code:微软开发的（免费，跨平台，插件丰富，配置灵活）；官网地址呈上：https://code.visualstudio.com/。（点进去就是下载地址哈，一般可以试配的，不是去选择各位小主对应的即可）
常用的插件:1.Open-In-Browser(快速打开浏览器并预览web页面的内容，测试代码的效果是否符合预期)；2.Image-Preview（在VS Code编辑器中预览图片）;3.vscode-icons（为每个源码文件添加图标–便于清晰的认识区分）。（注：插件需要各位小主自装，步骤很简单，本人在此不多赘述。再温馨提示下：插件安装完毕后，各位小主需要关闭重新启动使其生效哈~）
（3）常见浏览器及其内核：
1.谷歌（Chrome）：早期内核Webkit–>现在是Blink；（JS 版本V8，号称世界最强最快）；
2.火狐（Mozilla）：Gecko内核；
3.欧鹏（Opera）：早期Presto–>Webkit–>现在Blink内核；
4.苹果（Safari）：Webkit内核（高速模式）；
5.IE：Trident内核（兼容模式）；
（注：这里推荐各位小主用谷歌浏览器，没有的安装下哦~）

由此正式开始HTML5的学习啦：（拿出你们的热情和掌声吧，哈哈~）
（一）（1）OK，当然首先要搞懂的是什么是HTML？
HTML（Hyper Text Markup Language）超文本***标记**语言。（注意：是标记语言，可不是编程语言哈~）。它是一种网页描述语言，咱学习这个主要是学他的标记，现在最新版本就是HTML5啦。
（2）那么什么是HTML文档呢？其实就是网页，.html（后缀为html就是啦~）
（3）好啊，这些咱都懂了，那怎么写个最基本的HTML文档呢？当当当当，基本模板来了，先不说明，先给各位小主呈现一下：

（OK，咱先说下第一行，DOCTYPE表示文档类型，我们的文档类型自然是html啦~）

（这一行，是默认的，我们不需要管）（此行译为原数据的字符集为UTF-8） ***Document*** （此行为网页的标题，根据各位小主的需要去搞哈~）（head这一段我们暂时不需要重点关注，一般就是可能会编辑下title）（注：这里写的是内容哈~）（body这一段是非常非常重要的，咱的网页内容就是往这里边写的，各位小主需要重点关注关注再关注，重要的事情说三遍！）（html为根标记，万事万物之根~）好了，现在基本的各位小主想必已然清楚了，你们一定很好奇，这么复杂，这么长，手敲的一行一行？NO，NO，NO！当然不是啦，不过，这个既然叫基本模板，还是能手敲出来是基础的。（好了，不再卖关子，我们先打开VS Code编辑器。建一个html的文档，然后两步走：yi-->输入英文下的感叹号，er-->回车），So Easy，对吧，妈妈再也担心我的模板了~嘎嘎（此处应有掌声）。

（二）神奇之旅，就此开始~
我们都知道，html是一种标记语言，因此，标签（标记）可谓是重中之重。标签啊，分类如下：（1）单标记，双标记（单双分）；（2）并列关系，嵌套关系（逻辑分）。OK，说了这么多，接下来该上重点了，各位小主，硬菜来了，请慢慢享用：

----------------我是可爱的分割线，嘎嘎-------------------------------
常用标记：
（1）标题：h1-h6（字体逐渐减小~，h1慎用哈，各位小主，此处以h3为例）：

这里写上各位小主想写的标题内容

（双标记）
（2）段落：p：

这里写上各位小主想写的内容

（双标记）
格式化标签：
（3）1.倾斜：em/i（em有实意，i无实意）： 这里写上各位小主想倾斜的内容， 这里写上各位小主想倾斜的内容（双标记）
（3）2.换行：
（单标记，手起刀落~）
（3）3.加粗： 这里写上各位小主想加粗的内容 ； 用法和strong一样，唯一区别是这无实意
（4）图像标签：
（单标签）

（温馨提示：1.在实际中，我们用的图片肯定不止一张，所以我们要专门建个文件夹，一般呢image名字，这里各位小主随意，咱自己能看懂就成。这个文件夹专门的存放所有图片；
2.关于路径问题，慎用绝对路径，多用相对路径，路径一定要搞对，否则出不来哈~
3.做实验看效果前，一定要保存，不保存，什么效果都不会有哈，在下就犯了这样的小囧尬~
）
（5）列表标签：ul（无序），ol（有序），dl（自定义）
dl（框架）–>dt（标题）–>dd（包括的内容），在此举个例子吧，这样各位小主也清晰些：

支付方式: 线上支付; 线下支付

在此说明一下：dl基本框架无实意，dt标题：支付方式，dd内容：在这表示支付方式的类型（实际的意思就是dt包括什么），在我们这有俩--线上支付，线下支付。（从现在就要养成好习惯，该缩进的缩进，父和子要有辈分感~，要学会多写注释，于己于人都方便），注释格式如下：注：在列表中，ul和ol的儿子必须是li（list），而li可放万物，ul和ol的区别就在于前后顺序的无和有。我们一般呢，用ul即可，因为ol的顺序限制点很多，ol可以理解为是特殊的ul。（我们一般用ul，dl即可）。超链接标签：（6）1.基本款（文字）：

好啦，今儿咱也说了不少，下次再见，我是金龙鱼1：1：1：，很高兴和各位小主在此相遇，bye~

First Hope~大前端（起）相关推荐

GMTC 大前端时代前端监控的最佳实践
摘要: 今天我分享的内容分成三个部分: 第一部分是"大前端时代前端监控新的变化", 讲述这些年来,前端监控一些新的视角以及最前沿的一些思考. 第二部分"前端监控的最佳实践 ...
为什么要选择html5,5分钟告诉你，为什么要学HTML5大前端
互联网的掘起,让这世界再次被认知能力,5G.人工智能技术.数据分析.云计算技术等.凭着优秀的深度学习.数据处理方法技术性,人们已经以全新升级的层面在平行世界里思索,这一切最后都将在终端设备中完成. H ...
当我们在谈大前端的时候，我们谈的是什么
在今天,大前端并不是一个陌生的词汇,我们偶尔会听人谈起它,前些天还看到卓同学写了一篇<大前端时代下App开发者的生存之道>,说明这个词开始成为某种共识了. \\ 但是大前端到底指的是什么? ...
02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素可以理解为语义话标记,比如:以前这么写&l ...
Picasso：开启大前端的未来
2019独角兽企业重金招聘Python工程师标准>>> "道生一,一生二,二生三,三生万物." -- <道德经> Picasso是大众点评移动研发团队 ...
我为NET狂-----大前端专帖
http://dnt.dkill.net/Article/Detail/321 本来前端的东西是不想开个专贴的,这样网友容易产生依赖,前端的东西看看书,平时仿照几个网站,遇到问题再调调增加点经验,基本 ...
阮一峰es6电子书_ES6理解进阶【大前端高薪训练营】
一:面向对象:类class 面向对象三大特性之封装封装是面向对象的重要原则,它在代码中的体现主要是以下两点: 封装整体:把对象的属性和行为封装为一个整体,其中内部成员可以分为静态成员(也叫类成员)和 ...
全新章节抢先读 | 揭秘覆盖全端业务的文娱大前端技术
优酷前端技术如何支撑营销活动?答案是能支撑全端业务的大前端技术.阿里文娱将曾经遇到的技术问题与挑战实践详细展开,整理成了大前端技术这一章节,带你一探文娱前端团队在支撑业务过程中的技术思考和沉淀! 点击 ...
vue前端服务器端口_解密智联招聘的大前端架构 Ada
作者 | 智联大前端 Ada 是智联招聘自主研发的演进式大前端架构.于 2017 年正式投入使用后,又经过三年持续演进,全面覆盖了从研发到运维的各个方面,具备跨技术栈工程化体系.交互式图形界面开发工具 ...
2021 大前端技术回顾及未来展望
作者:腾讯 IMWeb 前端团队 2021 年大前端领域没有出现革命性的明星项目,但在各个细分的技术领域都有一定的拓展与深耕,有很多新技术或者新特性有望在 2022 年迎来爆发.在互联网 " ...

First Hope~大前端（起）

这里写上各位小主想写的标题内容

First Hope~大前端（起）相关推荐

最新文章

热门文章