来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
2016年了，嗨，大家新年好。
作为一个网页的产品经理，网页的前端知识可谓是不能不知，本文主讲网站产品的前端姿势。
通常，HTML、CSS、JavaScript共同构建了你看到的任何一个网页展示和交互。
下面是这三种字母的解释：
- HTML(HyperTextMarkup Language) 超文本标记语言
- CSS（Cascading Style Sheets）级联样式表
- JavaScript 一种脚本语言，主要用于前端页面的DOM处理
不太懂可自行百度了解。
文本的意思，应该大家都明白，就是你随手在桌面上建立一个txt，这就是一个文本文件。
那什么是HTML超文本标记语言呢？就是对一个普通的txt里面的文字进行标记，标记其中的一段为title，标记任意一段为某个意思，最终形成了一套规则就是html。
一个html文档通常的结构是这样的：
doctype、html、head(/head)、body(/body)、/html。
下面我们来看一段html：
看下面这段代码截图：
“电动汽车_新能源汽车_电动汽车网”原先是普通的文本，但是这里套了
，用于标记此处是标题，同时也告诉了搜索引擎这里是标题。</p><p>再看下面这段代码截图：</p><p>红色标注部分就是CSS样式代码。CSS中文名叫级联样式表，白话就是说长什么样子。CSS就是起装修作用的，必须要和HTML一起配合使用。</p><p>再看下面这段代码截图（和第一张图一样）：</p><p>上图第二个红色标注的地方就是JavaScript，JavaScript是一种脚本语言，它在网页中使用的主要场景是控制HTML中的每一个元素。比如，点了一个按钮会弹出一个层，其实就是利用JavaScript实现的。</p><p>目前的互联网，任何一个网页都是由他们三个构建起来的，作为网页产品经理必须知道，若是能够看懂、简单修改甚至是自己写，那就更棒了，再深的介绍就不在此说明了。</p><p>当然作为创业公司的产品经理还有注意前端页面规范和兼容性的问题，作为合格的前端工程师上面说的都应该必须过关，作为产品经理也必须明了。</p><p>比如html文档格式，必须有的dtd格式，文件编码utf－8等这些常识性姿势。</p><p>除了html，大家应该还看到htm、shtml、xhtml等这些文档，大家可以自行百度做了解，究竟有什么用和什么区别。</p><p>说到这里大家应该想问了，html应该用什么软件开发呢？Dreamweaver，百度自行了解。</p><p>本文仅适用于产品新人，产品大佬可以忽略。</p><p></p><h3>#专栏作家#</h3><p>董海荣，微信公众号：pingyaonr，人人都是产品经理专栏作家。关注智能汽车、移动互联网和虚拟现实。擅长内容编辑运营、原型设计、需求挖掘梳理、产品规划管理。欢迎交流学习。</p> </div>
</div>
</div>
<div class="block">
<div class="posttitle"><h4>相关文章</h4></div>
<div class="relatecon">
<div class="relatelist"><a href="http://www.deer33.com/post/314.html" title="唱响统一的歌《大中华》:大中华，大中华，再大也不分家">唱响统一的歌《大中华》:大中华，大中华，再大也不分家</a><span class="posttime">2025-02-01</span></div><div class="relatelist"><a href="http://www.deer33.com/post/319.html" title="HTML 标签和属性值的基本格式（html 标签属性大全 (完美版)）">HTML 标签和属性值的基本格式（html 标签属性大全 (完美版)）</a><span class="posttime">2025-02-01</span></div> </div>
</div>
</div>
<div class="sidebar fixed">
<dl id="divCatalog" class="sidebox">
<dt class="sidetitle">网站分类</dt> <dd>
<ul><li><a title="技术文章" href="http://www.deer33.com/?cate=1">技术文章</a></li>
</ul>
</dd>
</dl><dl id="divTags" class="sidebox">
<dt class="sidetitle">标签列表</dt> <dd>
<ul><li><a title="数据库设计工具有哪些" href="http://www.deer33.com/tags-2.html">数据库设计工具有哪些<span class="tag-count"> (34)</span></a></li>
<li><a title="网上商城项目完整源码" href="http://www.deer33.com/tags-3.html">网上商城项目完整源码<span class="tag-count"> (34)</span></a></li>
<li><a title="系统管理系统" href="http://www.deer33.com/tags-6.html">系统管理系统<span class="tag-count"> (43)</span></a></li>
<li><a title="round向上取整公式怎么用" href="http://www.deer33.com/tags-7.html">round向上取整公式怎么用<span class="tag-count"> (57)</span></a></li>
<li><a title="htmlinput属性" href="http://www.deer33.com/tags-11.html">htmlinput属性<span class="tag-count"> (46)</span></a></li>
<li><a title="html5下载官方网站" href="http://www.deer33.com/tags-12.html">html5下载官方网站<span class="tag-count"> (48)</span></a></li>
<li><a title="python正则表达式使用实例" href="http://www.deer33.com/tags-15.html">python正则表达式使用实例<span class="tag-count"> (35)</span></a></li>
<li><a title="程序员需要考哪些证书" href="http://www.deer33.com/tags-16.html">程序员需要考哪些证书<span class="tag-count"> (34)</span></a></li>
<li><a title="程序员基础知识" href="http://www.deer33.com/tags-17.html">程序员基础知识<span class="tag-count"> (33)</span></a></li>
<li><a title="源代码电影在线播放" href="http://www.deer33.com/tags-26.html">源代码电影在线播放<span class="tag-count"> (37)</span></a></li>
<li><a title="java我的世界启动器" href="http://www.deer33.com/tags-29.html">java我的世界启动器<span class="tag-count"> (44)</span></a></li>
<li><a title="手机数控编程软件免费" href="http://www.deer33.com/tags-36.html">手机数控编程软件免费<span class="tag-count"> (56)</span></a></li>
<li><a title="如何编程序" href="http://www.deer33.com/tags-37.html">如何编程序<span class="tag-count"> (35)</span></a></li>
<li><a title="手机编程游戏软件" href="http://www.deer33.com/tags-43.html">手机编程游戏软件<span class="tag-count"> (35)</span></a></li>
<li><a title="简单学生的网页代码" href="http://www.deer33.com/tags-44.html">简单学生的网页代码<span class="tag-count"> (35)</span></a></li>
<li><a title="sql必知必会" href="http://www.deer33.com/tags-56.html">sql必知必会<span class="tag-count"> (36)</span></a></li>
<li><a title="二次函数公式大全表格" href="http://www.deer33.com/tags-59.html">二次函数公式大全表格<span class="tag-count"> (36)</span></a></li>
<li><a title="jquery事件处理" href="http://www.deer33.com/tags-62.html">jquery事件处理<span class="tag-count"> (34)</span></a></li>
<li><a title="jquery ui下载" href="http://www.deer33.com/tags-63.html">jquery ui下载<span class="tag-count"> (36)</span></a></li>
<li><a title="jquery是什么库" href="http://www.deer33.com/tags-64.html">jquery是什么库<span class="tag-count"> (35)</span></a></li>
<li><a title="网站免费源码大全下载" href="http://www.deer33.com/tags-153.html">网站免费源码大全下载<span class="tag-count"> (34)</span></a></li>
<li><a title="常用控件" href="http://www.deer33.com/tags-254.html">常用控件<span class="tag-count"> (35)</span></a></li>
<li><a title="wordpress网站建设" href="http://www.deer33.com/tags-329.html">wordpress网站建设<span class="tag-count"> (34)</span></a></li>
<li><a title="反函数和原函数关系" href="http://www.deer33.com/tags-335.html">反函数和原函数关系<span class="tag-count"> (34)</span></a></li>
<li><a title="sqlserver" href="http://www.deer33.com/tags-360.html">sqlserver<span class="tag-count"> (34)</span></a></li>
</ul>
</dd>
</dl><dl id="divComments" class="sidebox">
<dt class="sidetitle">最新留言</dt> <dd>
<ul></ul>
</dd>
</dl></div> </div>
</div>
</div>
</div>
<div class="footer">
<div class="fademask"></div>
<div class="wrap">
<h3><a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024111239号-17
</a></h3>
<!--<h4>Powered By <a href="https://www.zblogcn.com/" title="Z-BlogPHP 1.7.3 Build 173295" target="_blank" rel="noopener norefferrer">Z-BlogPHP</a>. Theme by <a href="https://www.toyean.com/" target="_blank" title="拓源网">TOYEAN</a>.</h4>-->
</div>
</div>
<div class="edgebar">
</div></body>
</html><!--124.71 ms , 9 queries , 3844kb memory , 0 error-->