鉴于很多人对于学习网页制作的迫切需求, 把这部分内容提前了. 从实际工作来看也是这样, 很多用户并不需要后台, 数据库什么的, 只需要有一个漂亮的网页就足够了.
但是网页制作, 说简单很简单, html几个常用标签, css基本选择器和属性, 就够了. 但是真正做好很不容易.
不多说, 还是先从最简单的开始.
我们见到的网页, 其实就是html文件. 里面写了一些内容, 扩展名是html. 但是里面的内容有一些格式上的要求, 就是html的语法.
如果使用某些编辑器, 新建html文件, 是会出现基本的网页结构的. 如果没有, 就需要自己手动输入一下了. 软件开发目前就是这样, 尽管有很多自动化工具, 但是很多时候我们还是要手工作. 不过熟悉之后, 也就无感了.
html的内容就是各种标签. 记一些最常用的就好. 那些不太会用到的不如忘掉, 给自己减轻点负担.
标签是要写在尖括号里的, 格式照着写就行. html方便的地方在于, 只要在浏览器里点击右键, 查看源代码, 就可以看html文件的内容了, 想学习还是想复制粘贴都可以随意了.
标签的尖括号里还可以写一些属性. 大概就是谁=谁之类的信息. 有很多关键的信息是写在固定的属性中的. 比如链接和图片的地址.
div自带换行, span没有换行, 类似于java里的println和print这种区别.
ul 以及 li 列表, 表示一系列重复或相关的东西, 我是理解成数组的.
table 表格, 以前很流行, 现在用的也少了. 不过很好理解, 和excel里的表格一样, 横平竖直, 方方正正. 里面还可以填一些内容.
input 输入框, 默认是输入单行文本的, 加一个password的type属性, 就会用星号替代输入内容, 可以用来输入密码.
加一个file的type可以选择文件.
form 以前是用来提交数据, input都必须写在form里才行, 现在很多都不用表单提交, 自己发送数据, 也就有些边缘化了.
p 表示段落, 从功能来说, 也是带个换行.
h1 到 h6 标题, 带换行
a 链接网址
img 图片
我只想大概提一下. 要快速学习的话, 一个是推荐w3c的学习网站, 可以很方便的看到写出来的效果, 内容结构也组织的比较清楚. 另外一个就是看markdown的文档, 很短, 可能就一页, 但是浓缩了html的精华. 现在很流行, 写起来方便, 而且可以转成html.
css
html里写了网页的内容, 至于美观就要靠css了. css学习起来很简单, 要用好也不容易.
css也是一种类型的文件, 扩展名css. 里面的内容是按照css的语法写的.
css的基本格式 选择器 { 属性 : 值; 另一个属性 : 值}
选择器有三种最基本的.
类选择器 现在基本是最常用的了 可以看到网页里到处都是class.
标签选择器, 和标签同名.
id选择器, 标签里用id属性. 原则上不能有重复的id.
基本选择器可以组合起来.
后代选择 用空格分隔 类似于 一年级 二班
并列选族 用逗号分隔 类似 一年级, 三年级
属性包含几大类, 就是对各种外观的描述和控制.
比如, 位置 大小 颜色 字体 装饰 动画 等.
值包括各种属性相应的单位.
比如长度的表示法 px表示像素 em表示字宽 百分比 还有rem
颜色表示 rgb CMYK hal
具体还是先从w3c的文档开始学习吧. 其实css是一门跨界的学科, 要真正用好还需要了解一些视觉艺术, 设计排版方面的知识. 总之还是多学多练吧.
现在学习的话, 建议直接从css3入手. 布局和动画会简单很多. 另外一个建议就是使用样式库, 尤其是基于css3的, 纯css库, 简单方便, 没有副作用. 使用库之后的主要工作量就是添加相应的class.
引入css到html中使用link标签. 修改和调试方面, 直接用浏览器打开html文件都可以看到效果. 不需要什么其他的设置.
总体来看,制作网页更多是练的内容, 而不是学的内容. 更多是设计的内容, 而不是技术的内容. 更多是经验的内容, 而不是智力的内容.
推荐几本书吧:
写给大家看的设计书
3周3web页面
