写给大家的编程书（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>

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

待续

写给大家的编程书（3）相关推荐

写给大家的编程书（2）
浏览器,昵称世界之窗,是上篇提到的标准和规范的一部分. 那个时候,火狐还叫NetScape(网景)这个名字,它将在以后的几年和IE拼得你死我活.那个时候,Google还没有出生,更别提Chrome了. ...
写给大家的编程书（7）
CSS--传送石_(:з」∠)_(真名是级联样式表),是一项从内容中分离样式的标准化技术. 这个技术比以后将要介绍到的javascript来得不纠结很多,没有经历多少无硝烟的战争(可以参看微软和网景的 ...
c++ 读陈黎娟的《C、C++实践进阶之道，写给程序员的编程书》所感--关于变量的类型与引用
最近在看陈黎娟的书<C.C++实践进阶之道,写给程序员的编程书>,其中第十一章讲的是变量和类型,现做笔记如下: 数据存储区域分只读数据区(存储常量和恒值,正常情况下不做修改).全局/静态存 ...
我是如何阅读编程书的
英文原文:How I Read Programming Books,编译:外刊IT评论我是学电子工程毕业的,在这个专业里我必须要用的编程语言只有C/C++,汇编和Matlab.在参加了一个创业周末的 ...
双十一，你买了哪些大呼过瘾的编程书？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 一年一度的双十一悄然过去,这几天几乎身边每个人都在谈论着 ...
外部依赖项很多未定义标识符_从日本编程书籍《我的第一本编程书》中译版看中文例程如何扬长避短——标识符（一）
日本作者平山尚在前言归结了本书的三点独特之处: 从始至终只编写一个程序(俄罗斯方块游戏) 使用专门的工具绝对面向首次接触程序的人群第一点,优势是一个项目主体贯穿全书,但同时很考验编排顺序,以及技术 ...
每个程序员都应该读的非编程书
1.<银河系漫游指南>by Douglas Adams 推荐数:480 生活,宇宙,所有的一切. "看在前,思考在后,然后去实践.但是看总是在最前面.否则,你只能看到你以为的样子 ...
python 广告联盟_聚力商城的Python编程书怎么样？
大数据时代Python编程优显其作用,身边很多人都在学,有的还能自学成才,所以我最近也在聚力商城买了一本Python编程书,很多人不知道聚力商城的Python编程书怎么样?我就来说说自己的感受吧. 这 ...
经典Windows编程书单
转载:图灵社区说好的这次写一个图形编程书单--但是看起来不是很好整理,这类书散落的家里到处都是-- 先把经典Windows编程的书整理一下吧,不过Windows的也到处都是很多都找不到了,只能把找到 ...

写给大家的编程书（3）

写给大家的编程书（3）相关推荐

最新文章

热门文章