
学习html5的笔记
文章平均质量分 75
html5小白进阶历程
Yolo ʚɞ
努力进阶的前端女程序员一枚
展开
-
2.10-css渐变、过渡、2d、3d
线性渐变--CSS3线性渐变中的角度渐变,角度渐变是水平线和渐变线之间的角度,以圆心为起点进行发散盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景径向渐变radial-gradient()形式创建径向渐变背景过渡transition过渡1、所有数值类型的属性都可以参与过渡,比如width、height、left、top、border-radius2、背景颜色和文字都可以被过渡3、所有变形(包括...原创 2021-08-09 13:44:20 · 170 阅读 · 1 评论 -
2.8-边框和圆角
边框border: 1px solid red; 线宽度 线型 线的颜色线型:solid --实线 dashed--虚线 dotted--点状线小属性 意义 border-width 线宽 border-style 线型 border-color 线颜色 去掉边框border:none圆角1、border-radius属性的值通常为px单位,表示圆角的半径border...原创 2021-07-31 16:51:48 · 164 阅读 · 0 评论 -
2.7-媒体查询和移动端
1.媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。语法@media all and (min-width:320px) { body { background-color:blue;} }设原创 2021-07-31 16:30:08 · 305 阅读 · 0 评论 -
2.6-flex布局(重点)
左右布局(1)浮动 float:left/right;(2)行内块元素 display:inline-block;(3)flex布局:display:flex;Flex布局 --弹性容器:当内容过多会自适应调整宽度,元素等比例缩放flex容器属性1、display:flex、inline-flex;在弹性容器中默认有两条轴: 主轴:默认情况是水平从左到右的一条轴 侧轴:垂直主轴的一条,默认就是垂直从上到下的一条注意,设为 Flex 布局以后,子元素的flo...原创 2021-07-31 16:04:31 · 1270 阅读 · 0 评论 -
1.5-语义化标签
header元素 表示页面的页头 content/container元素 表示页面的内容 footer元素 表示页面的页脚 nav元素 表示页面的导航栏部分 column元素 表示页面的栏目 wrapper元素 表示页面外围控制整体布局宽度 left、right、center元素 表示左右中 loginbar元素 表示页面的登录条 logo元素 表示页面中的logo部分 banner元素 表示页面的广告,页面中轮播图的位置 main元素 表示页面的主体 hot元素 表示页面中的热点原创 2021-07-31 15:48:51 · 155 阅读 · 0 评论 -
1.1-h5基础标签
1标题标签<h1>-<h6>h就是head的缩写,独占一行2段落标签<p> p就是paragraph的缩写特点:(1)文本在一个段落中会根据游览器窗口的大小自动换行(2)段落和段落之间保有空隙3换行标签<br /> br就是break的缩写4文本格式标签加粗:<strong></strong> <b></b>倾斜:<em><...原创 2021-07-24 16:11:03 · 121 阅读 · 0 评论 -
1.4-表格与表单标签
1 表格table 标签1.1 表格的结果为表头和表身,可以为表格添加标题1.2 thead代表表头,tbody代表表身,thead嵌套tr和th,tbody里面嵌套tr和td1.3 tr里只能嵌套th和td,th一般用来表示表头,有加粗的样式,td代表表头对应的具体数据合并单元格标签 跨行合并:rowspan=“合并单元格的个数” 跨列合并:colspan=“合并单元格的个数”跨行:最上侧单元格为目标单元格,写合并单元格跨列:最左侧单元...原创 2021-07-24 16:02:08 · 516 阅读 · 0 评论 -
2.5-浮动与定位
CSS文档流CSS 有三种基本的定位机制:普通流、浮动流、定位流。 普通流:块级元素从上到下布局,行内元素从左到右布局 浮动流:无论是什么元素都是水平排列 定位流:根据自己的需求随意定位1浮动流--主要用于左右布局使用浮动要注意什么?浮动有哪些性质?使用浮动要注意父盒子要有足够的宽度,如果父盒子没有足够的宽度,那么盒子就会掉下来,并且要浮动都浮动,就是说如果有一个兄弟盒子浮动,那么其他亲兄弟的盒子也要浮动1.1 浮动有顺序贴靠的性质就是说三个盒子都在进性浮动,那么三号盒...原创 2021-07-23 15:37:44 · 165 阅读 · 0 评论 -
1.3-多媒体语义化标签
1、图片标签images source 图片来源<img src="" />图片本质上没有被插入到网页中,只是被引入到网页中alt属性1、如果由于某种原因无法加载图像。游览器会在页面上显示alt属性中的备用文本2、供视力不方便的朋友使用的网页朗读器,也会 朗读alt中的文本width、height(不需要写单位)如果省略其中一个属性,则表示按原始比列缩放图片扩展:背景属性1、背景颜色 {background-color:颜色值;} 2、背景图片的设.原创 2021-07-23 14:05:02 · 171 阅读 · 0 评论 -
1.2-h5列表标签
1、无序列表--没有刻意顺序(1)没有顺序级别之分,是并列的(2)<ul>只能放<li>标签(3)<li>里面可以放任何元素(4)<ul>带有自己的样式属性<ul> <li></li> --list item</ul>ul的type属性类似于下图可用无序列表2、有序列表--有刻意顺序可用有序列表(1)有顺序级别之分(2)<o...原创 2021-07-23 10:44:18 · 469 阅读 · 0 评论 -
2.1-css选择器
1、标签选择器标签选择器也称元素选择器,类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所以该种标签语法:标签名称 {属性:属性值;}(a)标签选择符就是以文档对象html中的标签作为选择符,即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。(b)所有的页面元素都可以作为选择符; 用法: (1)如果想改变某个元素的默认样式时,可以使用标签选择符;(如:改变一个p段落样式) (2)当统一文档某个元素的显示效果时,可以使用标签选择原创 2021-07-23 09:57:20 · 198 阅读 · 0 评论 -
2.4-元素类型--块级元素,行内元素,行内块元素
1、块级元素 (display:block)--不能并排显示,可设置宽高A:块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,B:默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列。C:块状元素都可以定义自己的宽度和高度。D:块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。2、行内元素(display:inline)--能并排显示,不能设置宽高.原创 2021-07-20 21:22:46 · 429 阅读 · 0 评论 -
2.3-盒模型-矩形区域
1、宽度(width)--表示盒子内容的宽度单位:px;移动端也会有百分比;rem未设置(1)块级元素(div,h系列、li等)自动撑满(非继承)(2)行内元素(a、span等)随着内容撑开2、高度(height)--表示盒子内容的高度单位:px;移动端也会有百分比;rem未设置时:默认为0,被其内容自动撑开3、内边距(padding)--盒内元素到盒子的距离作用: (1)用来调整内容(子元素)在容器(父元素)中的位置关系 (2)用来调整子元素在父元素...原创 2021-07-20 20:16:05 · 164 阅读 · 0 评论 -
2.2-文本和字体属性
1、color属性 主要可以用英语单词、十六进制、rgb()、rgba()等表示法 rgb(红,绿,蓝)(0~255) rgba(红,绿,蓝,透明度)透明度(0~1,0表示纯透明,1表示纯实心)2、font-size属性 单位:px、em、rem 网页文字正文字号通常是16px,游览器最小支持10px字号3、font-weight属性 字体的粗细 normal和bold normal--正常粗细,与400等值 bold-...原创 2021-07-20 19:26:34 · 265 阅读 · 0 评论