HTML5前端学习笔记
关注
分享
扫一扫
Robin_Hood_
不慌 不怂
展开
-
C9、CSS的三大特性
C9、CSS的三大特性一、谷歌的开发工具F12或者找到开发者工具开发工具中的CSS样式可以调整，非灰色背景的样式是代码所写的二、CSS的继承性作用：给父元素设置属性，子元素也能使用能继承元素：以line、color、font-、text-开头的属性才能被继承不仅儿子能够继承，只要是后代都能被继承继承性中的特殊：1.a标签的文字颜色和下划线不能继承。2.h标签的文字大小是不能继承的应用场景：一般用于...原创 2018-05-17 10:34:30 · 211 阅读 · 0 评论 -
C15、过渡模块
C15、过渡模块一、a标签伪类选择器作用修改a标签状态的样式的a:link改变链接属性a:visited改变访问后属性a:hover:鼠标悬停下状态a:active:修改鼠标长按下状态伪类选择器有严格顺序 love** ha**te如果默认状态和访问样式一样可以简写a{}伪类选择器在标签选择器的后面a标签盒子有关的都写在标签选择器中，后文字背景相关写在伪类选择器中二、过渡模块伪类选择器可以用在其他...原创 2018-06-08 13:22:35 · 213 阅读 · 0 评论 -
C14、定位流-相对定位
C14、定位流-相对定位一、定位流：相对定位 position: relative：相对于以前的标准流位置进行移动 不脱离标准流，还是会占用一份空间，区分块级及行级空间left、right、top、bottom.多个方向会矛盾使用场景，微调元素，配合绝对定位使用绝对定位position:absolute ：脱离标准流，相对于body来定位不区分行内和块级元素没有祖先元素情况下使用body作为参考，...原创 2018-06-07 20:35:40 · 320 阅读 · 0 评论 -
C18、背景相关
C18、背景相关一、背景尺寸background-sizeCSS3新增的属性，专门用于设置背景图片大小支持百分比、像素、auto等等cover，告诉图片等比拉伸，填满元素二、背景图片定位区域属性背景图片默认从padding上面开始显示的background-origin：指定背景图片从什么区域开始显示background-clip: padding-box三、设置多层背景图片background ...原创 2018-06-13 13:28:07 · 208 阅读 · 0 评论 -
C12、盒子模型
一、边框属性什么是：边框就是环绕在标签的宽度和高度边框格式：border：border-stayle: solid,dashedborder：连写，bd+//快捷键，全部可以省略border-width: 上 右 下 左border-style: 上 右 下 左border-color: 上 右 下 左border用来做几何图形二、内边距属性什么是内边距：边框和内容之间的距离就是内边距设置方式...原创 2018-05-23 11:32:54 · 261 阅读 · 0 评论 -
C8、CSS选择器
C8、CSS选择器一、标签选择器1、格式 标签名称{ 属性：值；}能够通过标签名选中标签二、id选择器给标签添加id属性/#来表示id选择器注意： id是留给js使用的，前端中不能随意设置三、类选择器class是可以重复滴. 来表示class选择器类名专门给特定标签设置样式的HTML标签中可以同时绑定多个类名可以把公共的标签抽取四、后代选择器作用：找到所有特定的后代标签，设置属性格式：...原创 2018-05-16 14:42:08 · 238 阅读 · 0 评论 -
C13、网页布局方式
C13、网页布局方式一、网页布局方式：浏览器如何对当前内容进行排版排版方式：1.标准流（文档流/普通流） 垂直排版（从上到下）2.浮动流 3.定位流二、浮动流基本概念浮动流：“半脱离标准流”的排版方式浮动流只有一种排版方式，就是水平排版，它只能设置一种排版方式浮动流不能使用margin: 0 auto 的部分块级元素，浮动流中全部可以设置宽高，不区分三、浮动元素脱标什么是浮动元素脱标？脱标： 脱离...原创 2018-05-26 07:59:43 · 314 阅读 · 0 评论 -
C7、CSS属性
C7、CSS属性一、文字常见属性规定文字样式的属性：font-style: 更改文字属性 ：italic倾斜、normal正常（快捷键fs、fsn）规定文字粗细的属性font-weight: 更改文字粗细 ： lighter、bold、 bolder、数值（100-900整百）规定文字大小的属性font-size：更改文字大小：单位px（pixel像素），注意、一定要带单位快捷键 fz10 fo...原创 2018-05-14 19:30:21 · 187 阅读 · 0 评论 -
C6、从HTML到CSS
C6、从HTML到CSS一、使用HTML加样式注意：这种方式已经过时，现在都是HTML只作为语义弊端：需要记忆标签有哪些属性，如果该标签没有这个属性，那么设置了没有效果需求变更的时候，要修改大量的代码。前端开放中HTML只是添加语义，CSS只是添加样式二、使用CSS方式格式：在head标签中...原创 2018-05-14 18:56:51 · 194 阅读 · 0 评论 -
C5、多媒体标签
C5、多媒体标签一、video标签<video src=""> </video>autoplay="autoplay" 自动播放controls="controls" 是否需要显示控制条poster="" 占位图片，视频没有播放前的图片loop:循环播放，用于广告视频preload：预加载视频，与autoplay相冲突muted：静音width：宽height：高二、vid原创 2018-05-14 14:24:23 · 321 阅读 · 0 评论 -
C4、表单
C4、表单一、什么是表单专门用来收集用户信息的叫做表单。二、表单的格式input<form> <input type="text"> //input标签有很多属性选择，决定他的语义 <input type="password" value="123">//密文输入框,value是默认值 <input type="rad原创 2018-05-14 11:43:29 · 263 阅读 · 0 评论 -
C3、表格标签
一、表格历史曾经大量在网页上使用，以前的网页绝大部分是表格标签，是个时代的代表例如 2004新浪。后来被DIV+CSS所取代。二、表格格式<table>//代表全部表格 <tr>//代表行数 tablerows 表格行 <td>//代表行的第几个格子 </td> </tr></table>三、...原创 2018-05-14 09:30:59 · 575 阅读 · 0 评论 -
C2、无序标签
一、什么是列表标签给一堆数据添加语义，告诉浏览器是一个整体数据。二、HTML中的列表标签分类无序列表（unorder list）：给数据添加列表语义没有顺序区分用得很多有序列表（order list）有序的列表用的不是很多定义列表（define list）定义格式：<dl><dt></dt> //dt definition title定义列表<dd&...原创 2018-05-14 09:29:52 · 207 阅读 · 0 评论 -
C1、HTML
一、HTML结构：<!DOCTYPE html> html5标准，向下兼容Headtitlemeta标签的左右就是指定当前网页的字符集，charset="GBK"Body二、常用HTML标签：H1-H61、p： 浏览器单独占据一行2、hr：在浏览器上显示一个分割线3、<hr /> /<hr >区别 HTML与XHTML区别快捷键：Ctrl + D 复制行Ctr...原创 2018-05-12 09:02:30 · 444 阅读 · 0 评论 -
C11、CSS背景和精灵图
C11、CSS背景和精灵图一、设置背景设置标签的背景颜色：通过background-color设置背景颜色设置背景图片：通过background-image设置背景url()指定，可以是本地，也可以是网络图片如果图片大小没有标签打，那么会自动填充多次请求获取图片background-repeat: //平铺repeat 可以加快渲染速度，节约网络资源二、背景图片定位背景定位：同一个标签可以同时设...原创 2018-05-18 10:39:42 · 344 阅读 · 3 评论 -
C16、2D转换模块
C16、2D转换模块一、旋转播放和平移transfrom：rotate(deg) 旋转多少度transfrom: translate() 平移多少pxtransfrom：sale() 缩放tranfrom: translate() sale() ;综合多个转换，坐标系会发生改变二、形变中心点默认以自己中心点来旋转的transform-origin: 0,0 围绕这个点旋转 可以是px、% ...原创 2018-06-08 16:38:04 · 167 阅读 · 0 评论