接触前端web开发已经一个月了，当然这里面还是有知识盲点。首先我会先总结一下我自己经常出错的地方，其次再介绍一下html5的部分用法。 1、回顾知识点 在使用css的时候首先要在head头文件里面加入link语句，具体如下： <head> <link rel="stylesheet" type="text/css" href="链接样式表文件.css"/> </head> 其次我们会在css中建立一个通用css和index.css 在通用css中一般会有一下几个语句： *{ padding: 0; margin: 0; box-sizing: border-box; }
这一步目的是在消除空格，无缝连接。在网页设计时候，我们会用到盒子模型，最初为宽：内容宽+border+margin+padding，内容上比较繁琐，加上box-sizing: border-box;会使计算简便些，宽：width+margin (宽＝内容宽+border+padding)。
ul li{ list-style: none; } a{ text-decoration: none; } 因为ul li 在使用的时候默认是实心圈圈，在通用css中消除默认格式，同理超链接a在默认状态会有下划线，所以加上以上语句，达到我们想要的效果。 index.css中，我们在写代码的时候，尽量文字标注清晰，其次也尽可能简便。以下为我觉得容易遗忘的地方： 1、在颜色使用时候，有以下几种表达方式： red #f00 rgb(255,0,0) rgba(255,0,0,0.5) 带透明度的色彩值opacity: 50%/ 2、行高 ling-height 行间距 一般用行高布局垂直对齐方式 行高和高度一致，内容在垂直正中间 行高比高度大，内容在偏下 行高比高度小，内容偏上 我们可以通过行高和高度的关系控制几行，如高度是行高的两倍，那么可以写两行文字。 3、文字溢出的时候，一般一下几个语句连用 overflow:hidden;溢出隐藏 text-overflow:eclipse;点点省略，若为clips则是截止 white-space:nowrap;禁止换行 4、在表示同类第几个的时候，有: first-of-type 第一个同类型对象 :nth-of-type(n) 第n个同类型对象 n=数字或3n等 odd（奇数行） even（偶数行） 5、分清块元素和行内元素，行内元素如果需要其高度起作用需要转为块级元素 行内元素(内联元素) a span input img label select strong b 块级元素 div p h1~h6 table ul ol dl form pre display:block; 转换为块级元素 （占一行） display:inline-block; 转换为行内块 （宽高起作用） display:inline; 转换为行内元素 （占内容位置 6、::before /::after 要与conten一起使用，具体这里我也不是很清楚什么时候使用 { content:"";} 7、渐变线，默认是垂直往下的渐变过程 linear-gradient(270deg,red,yellow,green,pink) 线性渐变 在图片使用过程中 常常有透明度的渐变过程，语句如下 img{ transition:opacity .2s linear} img:hover{ opacity:.9} 8、在使用雪碧图的时候。从上往下是正，从左往右是正。 9、在布局的时候 经常使用的是div或ul li 或dl dt dd等。 html5的知识框 H5标签： header nav section aside footer 视频 音频格式有以下： video ：ogg webm mp4 audio :mp3 wav ogg
controls控件 width宽 height 高 autoplay自动播放 loop 循环 poster 静态显示页面图片 autobuffer 缓冲 src 视频路径 < video controls="controls" width="300“ > <source src="move.ogg" type="video/ogg" > <source src="move.mp4" type="video/mp4" > 您的浏览器暂不支持video标签。播放视频 </ video > < audio controls="controls" > <source src="happy.MP3" > <source src="happy.ogg" > 您的浏览器暂不支持audio标签。播放视频 </ audio>
