一天，正准备午睡，微信滴滴的响了两下，我打开手机，看到白雪发来了微信：大寸老师，上次你讲的《产品经理应该了解的那些技术常识》我觉得挺好，我想深入了解下前端程序员所用到的技术，能给我简单讲讲嘛？
白雪，我的学妹，是一个勤奋好学的女孩，在参加了一次产品经理宣讲会之后，便立志自己要成为一个优秀的产品经理。
我不禁陷入了沉思：前端技术包含的内容很多，我们知道现阶段HTML、CSS和JavaScript称之为前端网页三剑客，HTML用来控制网页的展开结构，CSS用来控制网页的显示样式，JavaScript用来控制网页的交互行为，可以说每块内容需要学习的内容很多。
曾对前端很感兴趣的大寸老师在学校的时候和同学折腾过一段时间网页，当时为了某个交互的实现曾费尽心思。因此在之后的工作中，每次看到前端小姐姐在调试代码，为了实现产品的某个交互需求，我都会为她们精益求精的工作劲头感动。
01
作为一个产品新人，我们应该从最好理解，最有实操性的HTML了解起来吧。不需要部署令人头疼的环境变量，不需要安装繁琐的虚拟机，只需要敲敲代码，点击运行就所见即所得了。
想到这里，我毫不犹豫的回复到：没问题。先给你科普一下前端HTML吧，可以从这个方面了解下前端小姐姐是怎么使用HTML的。
HTML的全称是“Hyper Text Markup Language”，翻译过来就是超文本标记语言。从定义上就可以看出了，它并不是编程语言，而是一门可以对文字、段落、列表、表格、表单、图片、音频、视频等进行标记的语言。
基本的语法结构如下：
我们可以从上面的基本结构中可以到到，每个语法都是成对出现的，因此HTML的最基本的语法如下：
内容标签符>
那么，我们来逐一解释一下基本语法结构中的内容。
1 文档声明
告诉我们是一个HTML文档，这个是永远不变的。
2 标签
标签告诉浏览器网页是从开始的，在终止。这个几乎也永远不变，就是一个格式。
3 头部
和里面就是网页的标题，你起什么标题就放进去。
4 身体
和就是标签的聚集地了，就是网页上的内容，如我们看到的文字、段落、图片等，也就是你要放什么东西，直接放到和中间就可以了。
5 解释说明
，放到后面的解释说明，html要求的，和C语言的“//”不同啊。
到这里，HTML的基本结构就了解了，你看，是不是挺容易的。在熟悉了基本结构之后，就是要研究和之间的内容了。
一个网页的内容标签有很多，因此在和填满了各式各样的标签。每个标签的结构和语法不同，前端的小姐姐就是往和之间添加不同的标签来开发页面的。
都有哪些内容呢，主要包含以下几个方面的内容：
(1)文字和段落
这个就不用解释了吧，就是网页上的大段大段的文字啦。
(2)列表
它是网页中一种常见的数据排列方式，包含有序列表和无序列表，就是将文字按照规则排列下来。突然想起一首歌的名字，我搜了 一下，正好是列表的样式。
它的基本语法结构如下：
(3)表格
这个也很常见啦，在后台内容管理平台，有很多数据要查询，这个查询出来的数据就是通过表格来展示的。
它的基本语法结构如下：
(4)图像
这就是我们看到的图片了，它的基本语法如下：
(5)超链接
当点击某个超链接，可以跳转到另一个页面。它的基本语法如下：
(6)表单
有些同学常常把表单、表格、列表混淆，大寸老师告诉你，你每次见到的登录页就是表单了，它的模样基本如下：
表单的标签总共有四个，、、和。每类标签里面有包含有各自的属性，在这里大寸老师就不班门弄斧了，小伙伴们查阅下书籍就能找到相关的答案了。
(7)多媒体
我们常见的多媒体就是音频文件和视频文件了，HTML5的语法结构如下：
02
这时，白雪突然兴奋的说道：大寸老师，我听懂了，HTML是前端工程师的基本技能之一，他们在开发的时候就是在和之间填一填、补一补，让网页的基本元素先表现出来。
“嗯嗯，是的，基本是这样的，HTML配合CSS和Javas就能够完成一个简单的网页了，也就能够满足视觉和交互层面的工作，刚才讲的也是一个大概，希望你好好看书，多多学习啦。”
“好的，老师。”
-END-
更多精彩内容，请随手关注大寸老师
浮生杂记，看书，生活，有眼前的苟且，也有诗和远方
天涯很远，时间也短。关注我们，每天进步一点点~
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
