写给大家的编程书（3）

网页设计师是一个正在消失的职业。工具推陈出新，工作更加专业和颗粒化，加之互联网技术的普及，这群人中的多数经历过一场辛酸地技术性失业。

当然，回到当初。网页设计一度是文科森和艺术家们的阵地，那个时候photoshop还没有那么多奇妙的滤镜。设计网页如同设计海报一般，合理的配色、插图、内容布局一定会赢得客户的称赞。网页还没有那么多交互行为，像一个窗口或者是一种包装，你“互联网了”，说明你“潮”了，有主页的公司似乎充满了技术含量和进取心。

色彩、布局、样式同样是HTML规范中的一部分（虽然新的标准中，大部分被废除且不建议使用了）。才情和个性，要在HTML的框架和规则中进行张扬，文科森和艺术家们笑了，哈哈，不过是些记忆活。

我们曾经提到过，标签主要包含：”我是什么“，”我的内容是什么“两个部分，作为补充，属性也是标签的重要组成。

属性包含了属性名和属性值。它们的作用是，在相似的群体中，较准确地定义个体或者小群体以消除二义性。厂里的工友分工不同，我们希望找到前端和开发：我们创建一个属性，他的属性名是工种，属性值可以是前端、开发、运营、产品经理...中的任何一个值。

下面给出表示属性的规则：

属性包含在HTML标签中，注意是在”我是什么“定义开始的标签中而不是定义结束的标签中：<h1 属性>

一个标签定义中可以包含多个属性，不同属性用空格分开：<h1 属性1 属性2 属性3>

嗯，通过 属性名=属性值的方式表示属性，属性值一般用双引号包裹：<h1 工作="前端" 年龄="16" 印象="童工">

最后，所有符号必须是英文半角符号，练习时使用中文输入法的童鞋不妨切换一下。

利用这个规则，我们可以尝试一些更为高级的标签，顺便丰富一下”鸽子菜单“。

<input>标签，通过type属性来确定控件的类型。比如文本框是text，单选框是radio，多选框是checkbox，按钮是button。

我们在页面中加入几个单选框，询问一下客人是否愿意点菜单上的鸽子大餐吧：

单选框1：<input type="radio">上菜吧！</input>

单选框2：<input type="radio">再等等！</input>

选了单选后框，要让客人可以确定一下，这样我们的厨房后台才会知道，同样还是<input>我们把类型制定为button(按钮)。因为”确定“两个字是写在按钮上的，“上菜吧！”这些文字是写在单选框旁边的，所以有必有把“确定”两个字作为<input>的一个属性：这里引入一个属性value，可以标识按钮上显示的文字，还是按照上面的规则，可以写为<input type="button" value="确定"></input>。

源码

<h1>
	鸽子的晚餐
</h1>
<ol>
	<li>
		香辣鸽子
	</li>
	<li>
		红烧鸽子
	</li>
	<li>
		原味炖鸽子
	</li>
</ol>

<input type="radio">上菜吧！</input>
<input type="radio">再等等！</input>
<input type="button" value="确定"></input>

效果

等等，确定按钮不是应该换行吗？我们介绍一个新的标签<br>，单写一个<br>就好，<br></br>无需成对出现。把两个个<br>加在单选框和确定按钮之间，一个<br>代表换一行，两个连续的<br>代表换两行：

源码

<input type="radio">上菜吧！</input>
<input type="radio">再等等！</input>
<br>
<br>
<input type="button" value="确定"></input>

效果

再来，让艺术来得更猛烈一些吧！我们在“鸽子的晚餐“下画一条线——插入一个<hr>（horizon水平线）标签。

让标题加粗<b></b>；变红！<font color="red">；居中！<center></center>

强调每一道鸽子菜<em></em>；要蓝色的文字，不然奥特曼了！<font color="blue">

源码

<h1>
	<center>
		<font color="red">
			<b>
				鸽子的晚餐
			</b>
		</font>
	</center>
</h1>
<hr>
<ol>
	<li>
		<font color="blue">
			<em>
				香辣鸽子
			</em>
		</font>
	</li>
	<li>
		<font color="blue">
			<em>
				红烧鸽子
			</em>
		</font>
	</li>
	<li>
		<font color="blue">
			<em>
				原味炖鸽子
			</em>
		</font>
	</li>
</ol>

<input type="radio">上菜吧！</input>
<input type="radio">再等等！</input>
<br>
<br>
<input type="button" value="确定"></input>

一种非理性的赶脚直接上脑，网页设计师真厉害！但是很快，一大波烦恼就会接近，或许对很多人和公司而言是噩梦。

待续