HTML/CSS 套版学习

前言

1. WEB入门教学： mtache.com/css

2. HTML标签大全： www.w3school.com.cn/tags/html_r…

3. CSS属性查询手册： www.w3school.com.cn/css/index.a…

4. Chrome浏览器调试工具

认识HTML

上图是一个HTML的基础标准结构，HTML的嵌套层级就像Illustrator软体的图层结构，html是最外层结构，里面包含了head和body，可点击箭头展开/收合标签下的内容

常用标签可打开Rpage网站，滑鼠右键点击“审查元素”查看页面使用了哪些标签，再到标签大全中查询对应的标签功效

常用HTML标签：

div “块”元素，会折行，排版用，是个容器 a “行内”元素，不会折行，是个连结 span “行内”元素，不会折行，是个容器 p “块”元素，会折行，文字容器 ul、li “块”元素，会折行，列表项 img "行内"元素，不会折行，图片

HTML主要掌握以上常用标签即可，剩下都是辅助及优化作用，入门后可再深入研究。

CSS学习

按照 mtache.com/css 学习步骤即可。 Visual studio code 作为Coder常用开发工具，入门学习时用自己熟悉的软体即可，用Dreamweaver的code模式也行。

※ CSS不难学，难点在每个属性的组合和排版，组合可在网路上查询，排版主要应用到：block、float、position、flex

浏览器调试

先对HTML和CSS有所了解了之后，再开学研究浏览器的调试工具，在页面空白处点击滑鼠右键，点击“审查元素”后查看到的面板 调试工具教学可参考： www.youtube.com/watch?v=Ml7… （教学可查看影片01:48:06开始处）

1. 认识面板

注意：在CSS面板中，越在上面的内容，层级越重，

2. 调试CSS 从HTML面板中点击选中标签，可查看每个标签应用到哪些CSS属性，当滑鼠移入到CSS属性位置，可取消勾选每个属性，取消后可查看页面内容变化

滑鼠也可以直接点击属性值并修改对应值，确认合适的属性值后，再写入到自己的代码中

总结

套版核心学习内容是CSS，HTML稍微认识一下结构以及常用内容即可，编写代码时，必须掌握浏览器调试工具，看上去可能会一头雾水，但只要讲解一下操作也就发现，就那么一回事而已。