1. 了解html
1.1. 什么是html
超文本标记语言
2.2. 认识两个重要的html版本
xhtml是什么?
可扩展超文本标签语言
xhtml是一个更纯净更严格的html版本.xhtml是为更好的使用xml而生;认识它的标识.在html标签前面加上这句标示这个html的版本是xhtml.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html5是什么? html5是未来的希望.虽然某些浏览器对他的支持不够,但会成为主流. 认识下它的标识
<!DOCTYPE html>
shtml是什么? 运行在服务器上的html,后缀名为.shtml 服务器会检查html里有没有ssi指令.如果有,就会执行ssi指令.如果没有,则和运行普通html没有区别.
2. 从今天开始,做一名程序员.
2.1. 所有html代码必须使用小写.(写为js服务的自定义属性,可以用驼峰写法)
2.2. css命名规范.不许以数字开头.名字要见名知意(如果使用拼音必须拼完整).多个英语单词组成的css要用横杠分隔-.用便签纸记下常用的css命名贴在桌子上或显示屏周围. 参考文档
2.3. 将自己的中文输入法设置成中文模式下使用英文标点符号.
2.4. 习惯性为代码块加注释.html用注释 css用/* 注释 */
2.5. html代码必须有缩进.推荐使用代码编辑器,如sublime vs code.
2.6. 遇到错误后,第一件事是检查有无语法错误.如少分号,逗号.css调用名字写错了.闭合标签有没有写上等等.不要怕在排错上浪费时间.用半天的时间去排一个很低级的错误都是值得的.因为自己解决错误后,下次犯相同错的几率为零.
2.7. 下载一个谷歌浏览器.每天都会用到.
2.8. 写css属性尽量使用简写 如:
margin-top:10px;margin-right:20px;margin-bottom:30px; margin:left:40px;可以写成margin:10px 20px 30px 40px;
3. 块元素 内联元素 内联块状元素
3.1. 了解html标签默认是属于那种元素.如p标签 div标签就是块元素 a标签 span标签 是内联元素.下去查元素表.
行内元素与块元素
3.2. 知道内联元素和块元素的区别.了解内联块状元素的优点.
block元素的特点:
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素
inline元素的特点:
①和其他元素都在一行上；
②高，行高及外边距和内边距不可改变；
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素
补充:内联块状元素display:inline-block,可以像内联元素一样不换行,同时还可以设置宽高及边距;
4. css优先级:
4.1. 认识css优先级: 内联样式 > 内部样式表 > 外部样式表
4.2. 认识css选择器优先级:ID派生选择器>ID选择器>class派生选择器>class选择器
4.3. !important; 写在属性值后面,样式的优先级最高
css选择器
css3新增属性
5. 认识css的继承与限制继承
常用选择器:
后代选择器
子元素选择器
6. 了解BEM命名
BEM是 块(Block) 元素(Element) 修饰符(Modifier)的简称.这种命名方法是解决写css没名字可用的终极办法.
举个例子:
当我们要写搜索框的时候.如何给放大镜图标起名字
class="search-button-zoom" 解释:search表示这个元素在搜索模块内.button表示这是个按钮.zoom表示放大镜.修饰那个按钮.button`是个怎样的按钮呢?有放大镜图标的按钮.
BEM命名的优点:
- 解决写css没有名字可用的问题
- 代码易读,还可以减少继承.加快css性能(因为用BEM方法起的名字不易重名)
缺点: 写起来费劲.
个人使用心得.BEM虽然好用,但不能乱用 - 不要用BEM重写常用的,没有歧义的css命名.如logo就是写成logo.而不要写成header-top-logo.大量使用反而使得代码晦涩难懂
- 如果感觉html嵌套层级很深,对于代码有一种莫名的不踏实的感觉,就应该考虑BEM截断继承
例如:.div .content >ul>li>a>item>item-list{}我们可以为a标签定义一个BEM,BEM命名几乎不会再其他方式再出现..div .content >ul>li{}假设为a标签设置了BEM命名:.content-item-news>item>item-list{}.content-item-news是举个例子,随便写的,领悟意思就可以.
额外补充：
- 利用自定义css类（模仿Bootstrap）处理鸡肋样式
- 如果css样式特别复杂，可以考虑使用前缀。
3.css属性重置
