CSS是为HTML服务的, 离开了网页, CSS是看不到效果的.
我们见到的网页, 其实就是html文件, 扩展名是html. 里面的内容要按照html的语法. 在浏览器中打开时, 浏览器就会按照HTML的语法规则解析网页, 分解成DOM节点树和CSS规则树, 将CSS样式规则应用到匹配的元素树, 渲染出页面的结构, 绘制到屏幕上.
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文件的帮助文档, markdown可以看作简化版的html, 基本语法很少, 可能就一页, 但是浓缩了html的精华. 现在markdown格式很流行, 写起来方便, 而且可以转成html.
css
html里写了网页的内容, 至于美观就要靠css了. css学习起来很简单, 要用好也不容易.
css也是一种类型的文件, 扩展名css. 里面的内容是按照css的语法写的.
css的基本格式 选择器 { 属性 : 值; 另一个属性 : 值}
选择器有三种最基本的.
类选择器 现在基本是最常用的了 可以看到网页里到处都是class.
标签选择器, 和标签同名.
id选择器, 标签里用id属性. 原则上一个页面内不应该有重复的id. 不过浏览器的容错能力较强, 有重复的id也不会报错.
基本选择器可以组合起来.
后代选择 用空格分隔 类似于 一年级 二班
并列选族 用逗号分隔 类似 一年级, 三年级
属性包含几大类, 就是对各种外观的描述和控制.
比如, 位置 大小 颜色 字体 装饰 动画 等.
值包括各种属性相应的单位.
比如长度的表示法 px表示像素 em表示字宽 百分比 还有rem
颜色表示 rgb CMYK hsl
具体还是先从w3c的文档开始学习吧. 其实css是一门跨界的学科, 要真正用好还需要了解一些视觉艺术, 设计排版方面的知识. 总之还是多学多练吧.
现在学习的话, 建议直接从css3入手. 布局和动画会简单很多. 另外一个选择是使用样式库, 尤其是基于css3的, 纯css库, 简单方便, 没有副作用. 使用库之后的主要工作量就是添加相应的class.
引入css到html中使用link标签. 或者写在页面内的style标签内. 修改和调试方面, 直接用浏览器打开html文件都可以看到效果. 不需要什么其他的设置.
总体来看,制作网页更多是练的内容, 而不是学的内容. 更多是设计的内容, 而不是技术的内容. 更多是经验的内容, 而不是智力的内容.
推荐几本书吧:
写给大家看的设计书
3周3web页面
补充
在 html5 里面有的元素是可以省略不写的
可以省略全部标记的元素有 :
html,head,body,colgroup,tbody
不允许写结束标签的元素有 :
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。
这些标签都是单标签。
可以省略结束标记的元素有 :
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。
使用这些标签可以节省结束标签, 可以部分代替pug等缩进式模板的功能. 这是浏览器原生支持的, 不需要转换.
HTML中可以使用字符实体, 就是特定格式的字符编码, 如换行
乘号 × 在某些场景下可以用一下.