![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5零基础学习笔记
文章平均质量分 58
woaiwanshumen
这个作者很懒,什么都没留下…
展开
-
HTML5学习_day07(1)--BFC概念
1.BFC?块级格式化上下文(block formatting context)简称BFC它规定了块级盒子的渲染布局方式。 2.什么元素可以触发产生一个BFC?1.根元素(HTML)2.float浮动属性为非none,如设置为left或right时3.position为 absolute(绝对定位)或fixed(固定定位)4.display为inline-bl原创 2016-10-08 10:53:22 · 355 阅读 · 0 评论 -
HTML5学习_day11(1)--HTML新标签
一.用法:定义了独立的内容,内容通常是一篇帖子,一篇博客,一篇短文,杂志,新闻文章,一条完整的回复,评论等内部可以使用header,footer,section,article标签提示:每一个article标签的内部结构应该是相似的。用法:是界面进行分区,元素通常可由标签和内容组成注意:内容一般宝航一个标签h1-h6,可以包含article,嵌套sectio原创 2016-10-12 19:06:38 · 330 阅读 · 0 评论 -
HTML5学习_day10(4)--兼容性个例
兼容性个例1.并一行的元素,第一个元素没有设置浮动,第二个元素设置了向左浮动。在IE6,7下连两个元素之间会多出3px的空隙。解决办法:如果一行有一个元素设置了浮动,那么给ital元素都设置浮动就可以消除空隙。2.并列一行元素,第一个元素没有设置浮动,第二个元素向右浮动,那么在IE6,7下,第二个元素会折行显示。3.块属性标签设置浮动,并且有水平方向的margin值,水原创 2016-10-11 20:52:55 · 352 阅读 · 0 评论 -
HTML5学习_day05(8)--html之伪类元素选择器(伪元素)
伪类元素选择器 div:after{ content: "后面添加"; } div:before{ content: "前面的"; } :before 在内容前面添加一个元素 :after 在内容后面添加一个元素 添加内容用content属性 123 content:属性值 1.content:“字符串”;原创 2016-09-26 19:15:28 · 605 阅读 · 0 评论 -
HTML5学习_day05(7)--html之布局中使用浮动带来的问题
解决float带来的布局问题 .div1{ width: 600px; /*height: 400px;*/ /*float: left;*/ /*display: inline-block;*/ /*margin:10px auto; */ /*设置了内敛标签后 margin左右无效 duv1不能水平居中*/ border:4px so原创 2016-09-26 19:13:23 · 441 阅读 · 0 评论 -
HTML5学习_day05(6)--html之布局中使用浮动带来的问题
问题1: 如果两个相邻兄弟块级元素,给第一个元素float,那么后面的未设置float的块级元素就会无视这个浮动元素的存在,占据浮动元素原有的空间,发生了布局的重叠。 问题2. 对于父子级元素,子元素设置了float,如果父级元素没有设置固定的高度的话,则会导致父级元素高度塌陷。 问题3. 背景不显示原创 2016-09-26 16:48:24 · 344 阅读 · 0 评论 -
HTML5学习_day05(5)--html之float元素的规则
浮动元素的细则 div{ width: 400px; height: 400px; background-color: aqua; } p{ width: 300px; height: 300px; background-color: salmon; position:; float: lef原创 2016-09-26 16:23:34 · 325 阅读 · 0 评论 -
HTML5学习_day05(4)--html之float具体表现
浮动具体表现形式 .class1 { width: 300px; height: 200px; background: wheat; /*float: left;*/ /*position: absolute; 定位属性 可注释float查看效果 定位是完全脱离文档流,所以div3的一些文字被覆盖了 但是float是半脱离文档流 所原创 2016-09-26 16:12:54 · 398 阅读 · 0 评论 -
HTML5学习_day05(3)--html之float定义
1.什么是浮动? 浮动的框可以向左或向右移动,知道它的外边缘碰到包含框或者是另外一个浮动元素的浮动框为止。 2.float语法: float: left 元素向左浮动 right 元素向右浮动 none 元素不浮动 inherit 从父元素集成float属性原创 2016-09-26 11:35:54 · 321 阅读 · 0 评论 -
HTML5学习_day11(2)--H5多媒体标签
多媒体标签一.audio音频标签浏览器不支持该标签时,才显示这部分文字属性:1.src:表示文件地址2.controls 向用户展示播放按钮3.当浏览器不支持该标签时,才显示标签里面的内容4.loop文件循环播放5.autoplay 让文件自动播放6.preload用来缓存大的文件其中有三个值可选a.none:不缓存b.auto:缓存(默认)原创 2016-10-12 19:15:01 · 689 阅读 · 0 评论 -
HTML5学习_day12(1)--html布局
布局的分类a.静态布局:限制死宽高的网站传统web设计,不管浏览器具体是多少,网页的布局就一直会按照最开始的布局来显示。特点:固定死宽高。b.自适应布局:根据不同显示分辨率各设置一套样式,让元素的大小不变 位置可变(但是如果继续缩小 该页面还是会出现滑动条,样式是固定px 没用百分比)定义:就是为不同的屏幕分辨率来定义不同的布局,并且在每个布局中页面元素不随窗口原创 2016-10-12 19:27:46 · 416 阅读 · 0 评论 -
HTML5学习_day12(2)--流式布局
流式布局流式布局的实质:百分比布局转换公式目标元素的宽度/上下级元素的宽度(父级元素的宽度)=百分比宽度;弹性图片去掉图片的宽高,指定max-width:100%;可以使图片缩放到与包含其容器的宽度的100%匹配。两个简单例子:例子1: #wrap{ width: 800px; height: 600px; margi原创 2016-10-12 19:35:45 · 1107 阅读 · 0 评论 -
HTML5学习_day06(5)--html之固定总结(轮播图 垂直居中)
1.position:relative 不会脱离文档流2.position:absolute | fix 脱离文档流3.absolute是相对于父级非static(没有设置定位默认值)进行定位(若父级是static 继续往上找有定位的父级)4.fixed始终是相对于浏览器窗口来进行定位定位的用途:1.图片的叠加2.元素的垂直居中3,布局位置的改变4.广告植入原创 2016-10-08 09:56:37 · 2371 阅读 · 0 评论 -
HTML5学习_day06(3)--html之绝对定位
绝对定位的定义position: absolute;它使相对不是static的最近一次的有定位父元素来进行定义的。((这里的所有定位都不能是默认值 static)一开始设置定位时 就找上一级的父元素是否有定位 有就以它为基准定位 若是没有就继续往上找 直到找到有定位的元素 实在没有就会以body为基准定位)被定位的元素会完全脱离文档流,然后我们可以通过left,right,top,原创 2016-10-08 09:29:13 · 689 阅读 · 0 评论 -
HTML5学习_day06(4)--html之固定定位
1.固定定位的定义position:fixed它使相对浏览器窗口进行定位的,同样脱离文档流的,可以通过left,right,top,bottom来调整元素所在的位置就是让该标签一直显示在网页某个位置 无论你怎么滚动界面2.用户1.一般用来做页面的导航部分与底部2.可以用来做网页中插入广告和商业推广注意:1.我们在使用时候尽量使用在页面的底部,因为他脱离了文档流,也原创 2016-10-08 09:31:46 · 520 阅读 · 0 评论 -
HTML5学习_day06(2)--html之相对定位
相对定位就是相对于自己原来的位置 只是内容偏移了而已并且原有占用的空间依旧存在 不会被其他元素填充 相对定位 #div{ width: 1000px; border: 3px solid red; } #div div{ width: 200px; height: 200px; border: 4px so原创 2016-09-27 15:55:32 · 881 阅读 · 0 评论 -
HTML5学习_day06(1)--html之定位的定义
1.什么是定位? 把一个元素按照某一种方式放到某一个地方。 2.定位的语法 position属性 值: absolute 绝对定位 relative 相对定位 static 静态(系统默认值) fixed 固定定位原创 2016-09-27 14:36:39 · 344 阅读 · 0 评论 -
HTML5学习_day13(2)--nth-child(n)伪类选择器(多标签时不通过id,class来快速选中标签)
nth-child作用:可以不通过id,class来快速选中标签用法: 1 2 3 4可以通过div:nth-child(2)来快速选中第二个divnth-child(n):n可输出正整数,代表选中第几个控制第8个元素的样式div:nth-child(8){color: red;}注意:第原创 2016-10-12 20:55:47 · 1439 阅读 · 0 评论 -
HTML5学习_day13(1)--css3基础属性
css3选择器css2选择器1.标签选择器2.id选择器3.class选择器4.群组选择器5.后代选择器6.伪类选择器(first-child等)7.通配选择器css3选择器:1.子选择器 例如:div>p2.相邻兄弟选择器 div+p(只能选择到div下方第一个p 若div下方第一个不是p元素 就没改变 且div自身的样式不改变)3.属性选择器原创 2016-10-12 20:37:38 · 627 阅读 · 0 评论 -
HTML5学习_day12(3)--响应式布局
响应式布局设计的一般步骤第一步:在head标签内设置meta标签第二步:在style标签内通过媒体查询来设置meta querymeta query 是响应式设计的核心,它能够跟浏览器进行沟通,浏览应该呈现什么样的布局。iphone3gs当屏幕小于320px时执行里面的样式@media only screen and (min-width: 100px) and (原创 2016-10-12 19:44:21 · 855 阅读 · 0 评论 -
HTML5学习_day10(3)--兼容性概念
浏览器兼容性概念1.市面上浏览器有哪些?IE6,IE7,IE8,谷歌浏览器,火狐浏览器至于我们常用的浏览器的遨游浏览器,QQ,360采用的是计算机系统自带的浏览器内核,所有只要兼容以上几类浏览器即可兼容这些浏览器2.CSS HACK?CSS hack是通过在CSS样式中加入一些特殊符号,让不同的浏览器识别不同的符号(什么浏览器识别什么样的符号都是有自己一套标准)原创 2016-10-11 20:49:12 · 386 阅读 · 0 评论 -
HTML5学习_day10(2)--css文件书写格式
css文件书写格式1.尽量将样式写在一个单独的css文件里面,在head里面去引用1)实现了内容与样式的分离,2)减少了页面的体积3)css文件可以被缓存,重用,维护成本低(注意:css文件只加载一次,重新刷新页面时会在缓存里面找)2.不要使用@import(这个也是可以调用css文件 但是是在style标签内使用 @import url(css路径);)影响css原创 2016-10-11 20:36:13 · 1948 阅读 · 0 评论 -
HTML5学习_day10(1)--css编码风格和WEB标准架构
CSS编码风格1)单行阅读性比较差优点:减少css文件数。提高开发速度。2)多行优点:阅读性比较强缺点:css行数比较多,影响效率。注意:1.200kb大小的css文件执行速率相差1s2.如果一个网站打开时间超过3s,会有20%-30%的用户流失,如果超过5s,流失率达80-100%。WEB标准架构:实现样式和行为的分离分割为:.原创 2016-10-11 20:29:54 · 340 阅读 · 0 评论 -
HTML5学习_day01(6)--html颜色的几种写法
颜色的几种写法1.颜色第一种写法:用颜色名来表示,red,blue,green,pink,dark,yellow等background-color: green;效果:2.颜色第二种写法:通过16进制值表示(把图片拖进PS工具,按I,按住CTRL左击你所想要的颜色就能获取颜色代码);纯红:#FF0000=#F00;黑色:#000000=#000;原创 2016-09-20 20:11:33 · 2278 阅读 · 0 评论 -
HTML5学习_day01(3)--css样式引用方式
一.内嵌格式语法:在标签中写一个style的属性例如:优点:优先级最高缺点:不已修改,维护困难,代码量非常大,存在代码冗余。例子:width:宽度 height:高度 background-color:背景颜色效果如下:二.内部样式写法:在head标签写一个style标签,在style标签里面通过选择器来选择标签来控制该标签的样式。原创 2016-09-20 16:44:30 · 447 阅读 · 0 评论 -
HTML5学习_day01(4)--css内部样式之选择器
选择器常用三种类型:1.标签选择器语法:标签名{属性1:属性值1;属性2:属性值2;}2.class选择器语法:.class名{属性1:属性值1;属性2:属性值2;}3.id选择器语法:#id名{属性1:属性值1;属性2:属性值2;} 选择器 div{ height: 100px;原创 2016-09-20 18:52:31 · 443 阅读 · 0 评论 -
HTML5学习_day01(2)--HBuilder工具tab快捷键使用
快捷键TAB使用1.标签快速生成格式:标签名 按tab键 自动生成标签例子:div 生成2.多个标签快速生成格式:标签名*10 按TAB键后 自动生个10个标签例子:div*3 生成3,快速生成并添加内容格式:标签名{内容} 生标签并把内容写入标签之间例子:div{这是我的div} 生成这是我的di原创 2016-09-20 14:43:05 · 4217 阅读 · 0 评论 -
HTML5学习_day01(1)
1.作用:文档类型声明,告诉浏览器采用什么标准进行编码,然后浏览器就会按照声明的标准进行便签解析。如果不写:就会进入异常模式,也就是浏览器不知道你当前文件采用什么格式进行编码的,解析时就会产生混乱。注意:不区分大小写 任意大小写字母组合皆可 只要单词对了就行了原创 2016-09-20 09:49:33 · 323 阅读 · 0 评论 -
HTML5学习_day03(4)--html盒模型了解
盒模型:每个html元素都可以看做成一个盒模型。1.一个盒子的特点。(border,padding,内容区域)2.盒子与盒子之前的关系(margin)盒子的结构:1.content(内容区域):展示文字跟图片的2.padding(内边距):内容与边框线的距离3.border(边框):元素的边框4.margin(外边距):元素与元素之间的距离(兄弟元素,父子级关系原创 2016-09-22 19:22:05 · 387 阅读 · 0 评论 -
HTML5学习_day03(3)--a标签伪类(四种状态样式变化)
标签未被点击过的效果a:link{color: red;}定义标签访问后的效果(测试时无法还原link效果时 清理浏览器缓存)a:visited{color:black;}鼠标悬浮在标签位置时效果a:hover{color:green;}鼠标按下未放开时效果a:active{color: darkgoldenrod;}遵循顺序:原创 2016-09-22 19:19:09 · 1137 阅读 · 0 评论 -
HTML5学习_day03(2)--html之a标签(超链接)
a标签:语法:target属性值:1._blank 在空白页打开ahref="https://www.baidu.com"target="_blank" id="baidu">百度a>2._self(默认) 在相同窗口打开跳转的地址3._parent 在父框架集中打开跳转的地址(效果同上)4._top 在整个窗口中打开链接地址(效果也同上原创 2016-09-22 19:11:48 · 248 阅读 · 0 评论 -
HTML5学习_day01(7)--css常用文本样式
css常用文本样式0.dark* 属性值 可以设置文本段落背景颜色用法: 《水浒传》,是中国四大名著之一。效果:《水浒传》,是中国四大名著之一。1.文字颜色 属性名:color用法:蓝色效果:这句话的字都是蓝色的。2. 文本样式 属性名:font-style属性值:斜体=italic 正常=norm原创 2016-09-20 21:23:50 · 457 阅读 · 0 评论 -
HTML5学习_day01(5)--css常见样式background
background属性为了方便测试 css直接卸载标签内首先说明 width代表长度 height代表宽度1.background-color:背景颜色填充例如: 效果如下有关颜色的写法:2.background-image 设置背景图片(若图片大小与div大小一样就能变成背景 若小于div大小就会自动填充)用法:backg原创 2016-09-20 19:18:10 · 550 阅读 · 0 评论 -
HTML5学习_day02(2)--css层次选择器
css层次选择器1.后代选择器 写法: 父..父级选择器 父级选择器 子级选择器{样式1;样式2;} 作用:一级一级去寻找直到找到子级选择器,然后对子级进行样式控制。一般的标签的嵌套使用的比较多。 实际:就是从最外层一层一层去 找直到找到你想要的标签,最终通过选择器进行样式的设置。 例如:原创 2016-09-21 19:16:56 · 1173 阅读 · 0 评论 -
HTML5学习_day09(1)--(iframe embend dispalu_table !important)的使用
一.浮动框架 iframe iframe可以称之为内敛框架, 它可以在网页中局部插入另一个文件或者页面。可添加样式。 用法: iframe可于a标签来组合使用例子: 点击效果如下:点击注意:a标签的target一定要iframe中的name名字保持一致可只显示某个网页的某一原创 2016-10-11 19:52:38 · 850 阅读 · 0 评论 -
HTML5学习_day08(1)--雪碧图
雪碧图原理1.雪碧图原理是CSS一种头图像合成技术,该方法是将所有的小图标拼接到一张图片上,然后利用图片的背景定位来显示需要现实的部分。2.使用场景1)静态图,不随用户的信息的变化而变化2)下图片,图片容量比较小3)夹在两比较大的图片3.使用雪碧图,可以减少http请求,加速显示内容,4.雪碧图的制作方式1.利用PS进行手工拼接2.s原创 2016-10-11 19:40:55 · 469 阅读 · 0 评论 -
HTML5学习_day07(2)--BFC定义
1.BFC?块级格式化上下文(block formatting context)简称BFC它规定了块级盒子的渲染布局方式。 2.什么元素可以触发产生一个BFC?1.根元素(HTML)2.float浮动属性为非none,如设置为left或right时3.position为 absolute(绝对定位)或fixed(固定定位)4.display为inline-bloc原创 2016-10-11 19:03:20 · 301 阅读 · 0 评论 -
HTML5学习_day05(2)--html文档流和脱离文档流
文档流和非文档流的定义: 1.什么是文档流? 解释:将窗体自上而下分成一行行,并在每一行中按从左到右的顺序来排放元素,这个我们称之为文档流。 2.什么是脱离文档流(非文档流)? 解释:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。原创 2016-09-26 10:10:49 · 825 阅读 · 0 评论 -
HTML5学习_day05(1)--html浮动之文档布局
文档布局的4种方式: 1.流式布局(自然布局) 特点:没有任何修饰(没有定位float 定位 弹性)的布局,也就是元素在排版过程中,元素从上到下,从左到右的流式排列,遇块(块级元素)换行等。 2.浮动布局(float) 特点:给元素设置float属性后,脱离文档流,进行左右浮动,紧贴着父级框的左右框。此浮动元素流出来原创 2016-09-26 09:27:33 · 254 阅读 · 0 评论 -
HTML5学习_day02(5)--html块级标签
1.h标签 我是一级标题 我是二级标题 我是三级标题 我是四级标题 我是五级标题 我是六级标题 注意: a.h1标签一个网页最好只有一个 b.h2标题一个网页不能超过12个 c.h3之后的标签就不做数量要求了2.p标原创 2016-09-21 20:05:07 · 582 阅读 · 0 评论