3.1

开发说这个需求做不了，他在骗你么？

产品经理学技术

小奈：我想学习写代码？大仁：那我建议你学下html，上次和你说的输入url后，货品其实就是网页，现在教你写网页。

02

村姑：html

在互联网早期，网页都十分简陋。html就像个乡下来的的丫头，她有基本的骨架和血肉。至于它的骨架结构，我们可以把它想像成盒子，盒子套着盒子。

盒子套盒子

html非常单纯，比如说h1表示大标题，p表示段落，img表示段落。html还有个非常有趣的标签，ahref=url某个链接/a,链接标签，我们可以在一张网页里写上很多链接，这样子就很方便了。就像一张网一样，所有的网页跳转都变得很方便。

不知道大家看过类似下面的网页没，加载css加载不出来的时候。早期根本就没有css，所以就是这样子。

在早期，大家就是这样子忍受的。后来大家都抱怨了，但是HTML只负责展示内容和结构。后来浏览器大叔说服它稍微打扮下，大家伙给她申请了手镯之类的装饰品，之后就有了size（尺寸）、color（颜色）、align（对齐）等，哎呦，稍微好看点。

从此村姑天天出门都要打扮。有一天她发脾气了，这哪受的了，太累了吧。

03

化妆师：css

没办法，只能请专门的化妆师了。css真的是很神奇，把html打扮的美轮美奂的。化妆师有2大法宝，分离内容和样式，让化妆工作变得简易，架构盒子间的位置。

法宝1:选择器

面对着这样一个村姑，化妆师开始想办法了。首先是把整个html的盒子定位出来。例如要找标题这个盒子，通过htmlheadtitle这样子才找到，化妆师直接规定htmlheadtitle。

以后就是这样定位title了，类似的其它盒子的定位也是如此。

法宝2:盒子支架

上面我们看到，盒子都是倒到左边去了，盒子和盒子间的距离不行，这样子排版很丑耶，所以给这些盒子添加了支架，固定它们的位置。

边框（border）：设定颜色宽窄样式

内边距(padding)：内容到边框的间距

外边距(margin)：边框到相邻元素的间距

04

css发展史

自此，化妆师凭借这两个法宝，帮村姑打扮的美轮美奂，化妆师被大家所爱戴，化妆师的技术和法宝也不断升级，从css1.0到2.0到现在的3.0，前端学习起来也并非易事了。

代码分割线

05

简单例子

!DOCTYPEhtmlhtmlheadmetacharset="utf-8"title产品经理的技术课堂/title/headbodyh1产品经理的技术修养/h1p产品经理的第一行代码/p/body/html

06

打字机：自我介绍

!DOCTYPEhtmlhtmlhead/headmeta
转载请注明原文网址：http://www.coolofsoul.com/jsyy/jsyy/24078.html