了解HTML-CSDN博客

第一课
一了解html
1.什么是html
超文本标记语言
2.认识两个重要的html版本
xthml是什么?
可扩展超文本标签语言
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-tran

html5是什么?
html5是未来的希望.虽然某些浏览器对他的支持不够,但会成为主流.
认识下它的标识

 
 <!DOCTYPE html>

shtml是什么?
运行在服务器上的html,后缀名为.shtml 服务器会检查html里有没有ssi指令.如果有,就会执行ssi指令.如果没有,则和运行普通html没有区别.
二.从今天开始,做一名程序员.
1.所有html代码必须使用小写.(写为js服务的自定义属性,可以用驼峰写法)
2.css命名规范.不许以数字开头.名字要见名知意(如果使用拼音必须拼完整).多个英语单词组成的css要用横杠分隔-.用便签纸记下常用的css命名贴在桌子上或显示屏周围.
3.将自己的中文输入法设置成中文模式下使用英文标点符号.
4.习惯性为代码块加注释.html用 csc用/* 注释 */
5.html代码必须有缩进.推荐使用代码编辑器,如sublime Bracket.这些编辑器会在回车的时候自动加缩进,自动补全标签.
6.遇到错误后,第一件事是检查有无语法错误.如少分号,逗号.css调用名字写错了.闭合标签没有写上等等.不要怕在排错上浪费时间.用半天的时间去排一个很低级的错误都是值得的.因为自己解决错误后,下次犯相同错的几率为零.
7.下载一个谷歌浏览器.每天都会用到.
8.写css属性尽量使用简写如
margin-top:10px;margin-right:20px;margin-bottom:30px; margin:left:40px;可以写成margin:10px 20px 30px 40px;

三. 块元素内联元素内联块状元素
1.了解html标签默认是属于那种元素.如p标签 div标签就是块元素 a标签 span标签是内联元素.下去查元素表.
2.知道内联元素和块元素的区别.了解内联块状元素的优点.

block元素的特点:
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素

inline元素的特点:
①和其他元素都在一行上；
②高，行高及外边距和内边距不可改变；
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素

补充:内联块状元素可以像内联元素一样不换行,同时还可以设置宽高及边距display:inline-block;

四. css优先级:
1.认识css优先级: 内联样式 > 内部样式表 > 外部样式表
2.认识css选择器优先级:ID派生选择器>ID选择器>class派生选择器>class选择器
3. !important; 写在属性值后面,样式的优先级最高

五.认识css的继承与限制继承
常用选择器:
后代选择器
子元素选择器

六. 了解BEM命名
BEM是块(Block) 元素(Element) 修饰符(Modifier)的简称.
这种命名方法是解决写css没名字可用的终极办法.
举个例子:
当我们要写搜索框的时候.如何给放大镜图标起名字
class="search-button-zoom" 解释:search表示这个元素在搜索模块内.button表示这是个按钮.zoom表示放大镜.修饰那个按钮.button是个怎样的按钮呢?有放大镜图标的按钮.
BEM命名的优点:
1.解决写css没有名字可用的问题
2.代码易读,还可以减少继承.加快css性能(因为用BEM方法起的名字不易重名)
缺点:
写起来费劲.

个人使用心得.BEM虽然好用,但不能乱用
1.不要用BEM重写常用的,没有歧义的css命名.如logo就是写成logo.而不要写成header-top-logo.大量使用反而使得代码晦涩难懂
2.如果感觉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是举个例子,随便写的,领悟意思就可以.

额外补充：
1.利用自定义css类（模仿Bootstrap）处理鸡肋样式
2.如果css样式特别复杂，可以考虑使用前缀。