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> </p> <p>红色标注部分就是CSS样式代码。CSS中文名叫级联样式表，白话就是说长什么样子。CSS就是起装修作用的，必须要和HTML一起配合使用。</p> <p>再看下面这段代码截图（和第一张图一样）：</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> <h3>#专栏作家#</h3> <p>董海荣，微信公众号：pingyaonr，人人都是产品经理专栏作家。关注智能汽车、移动互联网和虚拟现实。擅长内容编辑运营、原型设计、需求挖掘梳理、产品规划管理。欢迎交流学习。</p> <p>本文原创发布于人人都是产品经理，未经许可，不得转载。 </div>
</div>
<script type="text/javascript" src="/layui/layui.js"></script>
<script>
layui.use('code', function(){
layui.code({
elem: 'pre', //默认值为.layui-code
about:false,
title:'我理解的网站产品经理之四：网站产品前端姿势_html/css_WEB-ITnose代码块',
encode: true //是否转义html标签。默认不开启
});
});
</script>
<footer class="comm-footer">
<ul class="channels">
<li>
<a target="_top" href="/system/">操作系统</a>
</li><li>
<a target="_top" href="/down/">程序下载</a>
</li><li>
<a target="_top" href="/jquery/">jquery插件库</a>
</li><li>
<a target="_top" href="/jiaoben/">编程</a>
</li><li>
<a target="_top" href="/db/">数据库</a>
</li><li>
<a target="_top" href="/tools/">在线工具</a>
</li><li>
<a target="_top" href="/framebook/">框架书籍</a>
</li><li>
<a target="_top" href="/xitongjiaocheng/">系统教程</a>
</li><li>
<a target="_top" href="/ruanjianxiazai/">软件下载</a>
</li> </ul>
<ul class="versions">
<li>
<a href="https://m.gxlcms.com" class="active">触屏版</a>
</li>
<li>
<a href="https://www.gxlcms.com" target="_top">电脑版</a>
</li>
</ul>
<p><a href="https://beian.miit.gov.cn/" target="_blank" style="color:#ffffff"></a><script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script></p>
</footer>
</body>
</html>