您好,欢迎来到站长目录(28sn.com)!


html和css的总结

来源:网络整理 浏览:306次 时间:2019-11-16

接触前端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>

推荐站点

  • 我爱发烧音乐我爱发烧音乐

    我爱发烧音乐囊括了从流行音乐到古典音乐多个类型的音乐作品,专栏推荐最新的音乐,提供音乐排名榜单!可供免费线上收听音乐,歌曲流畅,音效极佳! 网站提供的钢琴以及二胡专栏,可供收听者,陶冶情操,改善心情,是难得的轻音乐典藏!

    www.520fs.com
  • 世纪音乐网世纪音乐网

    世纪音乐网是专业的在线音乐试听MP3下载网站。歌曲总计30余万首,收录了网上最新歌曲和流行音乐,DJ舞曲,非主流音乐,经典老歌,劲舞团歌曲,搞笑歌曲,儿童歌曲,英文歌曲等。是您上网听歌的最佳网站。

    www.ssjj.com
  • 怒江大峡谷网怒江大峡谷网

    怒江大峡谷网内容包括:新闻、要闻、怒江报、视频、文化、民俗、人文、音乐、政务、公告、政策等地方信息。

    www.nujiang.cn
  • 杭州网杭州网

      杭州网是杭州地区唯一的新闻门户网站,由中共杭州市委宣传部、杭州日报报业集团和杭州广播电视集团共同组建的杭州网络传媒有限公司运营。

    www.hangzhou.com.cn
  • 深圳在线深圳在线

      深圳在线 www.szol.net是深圳本地最大、最早的地方生活资讯网站之一,网站名“深圳在线www.szol.net”由南方报业传媒集团编辑委员会总编辑、南方日报社总编辑、南方都市报总编辑、南方书画院名誉院长王春芙亲笔题名,深圳在线www.szol.net团队与深圳热线www.szonline.net、奥一网www.oeeee.com都源于全国最早成立于1996年的知名网络公司——深圳万用网。

    www.szol.net

鄂公网安备 42062502000001号