初入web知识点(三)

◆HTML5标签
video视频(主要格式MOEG4) audio音频(主要格式MP3)
<video src="地址"></video> <audio src="地址"></audio>
*标签属性(主要)
①autoplay 自动播放
②controls 显示控件
③loop 循环播放
◆块级元素和行内元素
块级元素 行内元素

独占一行 不独占一行
可设宽高 不可设宽高
内容大小影响不影响元素大小 内容大小不影响不影响元素大小
可嵌套行内和会计元素 嵌套行内和会计元素会让行内显示错乱
四方向margin有变化 四方向margin只有左右有变化
◆HTML语义化标签
article 文章
(也可直接使用的标签) aside 侧边栏 footer页脚 header页眉 nav导航 section章、节
◆◆CSS:层叠样式表
定义HTML元素的显示形式,一种格式化网页内容的技术
◆样式规则:
①内嵌样式:在开始标签内潜入CSS <div style=""> </div> 也可叫内联
②内部样式:在head中输入 <style type=""> </style>
③外部样式:新建文件 选择CSSsheet并编辑 在head中输入 <link rel="" href="CSS文件的地址">
④@important:通过@important链接,只出现在CSS文件中
优先级别:内嵌级别最高 内部和外部 要看位置 谁的位置在上面,谁就高级

◆CSS基础语法
①多个声明用;隔开
②每条声明由一个属性和一个值组成
③属性和值用:分开
④选择器分组用,分开
◆CSS权重值
每个等级的值为其所代表的选择器的个数乘以这一等级的权重值,最后把所有等级的值相加得出选择器的特殊值
第一等级:内联样式(内嵌) 权重值 1000
第二等级:ID选择器 权重值 0100
第三等级:类、伪类选择器 权重值 0010
第四等级:元素、伪元素选择器 权重值 0001
通用选择器 * 子选择器 > 相邻兄弟选择器 + 权重值0000
这里所有的权重值相加不是二进制
TIP: important本身没有权重值,但是如果有它的存在,会让其他所有的权重失效从而使自己的权重值达到最高
◆CSS样式
CSS背景:background 注意前景的区别
background-size是CSS3的 有时简写是会显示不出来,需要单独出来写
CSS文本:定义文本外观,用来改变文本的颜色、间距……
文本属性:①color 颜色 后面直接跟颜色单词/十六进制颜色/rgb
◇扩充:rgb是red green blue 的意思 因为这是颜色的三种基本色 比如:rgb(255,0,0)是红色 rgb(0,0,0)是黑色 rgb(255,255,255)是白色
②direction 文本方向:rtl(right to left)从右至左 ltr inherit
③line-height:多用来实现垂直居中
④text-align: 文本距左/中/右 多用来实现水平居中
⑤text-decoration:文本修饰 属性:none 默认 underline下划线 overline上划线 line-through删除线 blink 闪烁
可以用来删除a标签的下划线 a{text-decoration:none}
◇扩充:图片遮盖技术 ①看似图片,实则是标题 ② 回到首页 ③ 用text-decoration实现
⑥text-transform :控制元素中的字母 常用属性;uppercase大写字母 lowercase小写字母 多用于不区分大小写的验证码。
CSS字体:
font: family字体的系列 size大小 style:风格 weight:粗细
CSS列表:
list-style-type:none 去掉无序列表的点
也可以用list-style-type来改变无序列表的样式 可以是图片
CSS表格:
border-collapse:collapse来实现表格变成单边框
caption-side标题的位置
CSS轮廓:
outline : color style width

时间: 2024-10-05 04:55:17

初入web知识点(三)的相关文章

初入web知识点(二)

◆CSS选择器(七种) ①元素选择器(类型选择器) 选择匹配选择器的网页上的任何HTML元素,不考虑这些元素在文档树中的位置.目标是一个元素的每个实例. ②类选择器(类名{属性:值:}) 被用于选择有某个class属性的任何HTML元素,不考虑在文档树中的位置. ③ID选择器 与类选择器相似,被用于选择某个ID属性的任何HTML元素,不用考虑这些元素在文档树中的位置.与类选择器的主要区别在于,同一属性ID值在同一页面上只能出现一次.而同一class属性值可以在同一页面中多次出现. ④包含选择器

初入web知识点(七)

◆LESS 基于CSS的一种扩展技术:引入了变量.混合.运算.函数:简化CSS的代码,降低维护成本:必须通过解析器(koloa).***步骤***①新建文件夹②.html文件 .less文件③启动koloa配置路径④输入less文件 刷新koloa⑤会自动生成一个.css的文件(在写的过程中不要关闭koloa软件)⑥html引入的文件是koloa解析出来的CSS文件 ◆**◆ ①变量:@变量名:值 如 @名称自取: 5px soild red; 使用时 div{ border:@名称自取 } ②

初入web知识点(四)

◆CSS选择器(补充) ①伪类选择器 格式: 元素:属性{} 允许我们格式化不在文档树中的一些条目.向某些元素添加特殊样式 锚伪类 不同方式格式化超级链接<a>元素的四种不同状态; * a:link 是用在未访问过的链接的选择器 * a:visited 是用在以访问过的链接的选择器 * a:hover 是用在鼠标光标放在其上的链接选择器 * a:active 是用在获得焦点(比如被点击)的链接上的选择器 TIP:在CSS定义中,a:hover必须置于a:link和a:visited之后才有效:

初入web知识点(五)

◆CSS盒模型 包含:element元素 padding内边距 border边框 margin外边距 * 内边距padding padding是简写属性 设置值时不能为负值 值的顺序是top上→right右→bottom下→left左 设置时如不全部定义则 top的值影响right和bottom right的值影响left * 边框border 属性:style width color(默认值为透明色transparent,可以利用这一点来做三角形) border足够粗 div足够小 并且其他三

初入web知识点(八)

◆APP端/**CSS原生代码**/TIP:① 还是要在head部分加入 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">网页自适应移动端② 宽高使用百分比③ 高也可以使用rem④ CSS文件开头要用@media比如:@media screen and (min-width: 960px){

初入web知识点(一)

HTML标签:◆ <img src="../images/XXX.PNG" alt="xxx"> ../表示url地址信息 最好不要超过两级 images表示上两级中的images文件夹 XXX.PNG表示images文件夹中的某一张PNG图片 xxx表示当图片不显示时所显示的文本内容“xxx”◆ <pre></pre> 预文本格式 网页显示内容样式与代码编写时的样式一样◆ <a href="……">

初入web知识点(六)

◆过渡 transition 苹果浏览器前要加前缀 IE9不支持 多与hover配合使用 可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点,必须规定两项内容: ①规定您希望把效果添加到哪个 CSS 属性上 规定属性名称 ②规定效果的时长 ,以秒为单位 默认值是0 属性: transition 简写属性,用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的 CSS 属性的名称 tr

初入javascript知识点(八)

jQuery性能优化 1.对于在jQuery中重复使用的标签,在第一次选择的时候就用一个变量把它保存起来. 2.在使用类名选择器时,加上父级选择器(父级选择器使用id或标签名) 3.使用find方法来选取后代 4.尽量使用jquery中的链式写法 5.使用事件委托 数据库 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. MongoDB简介 MongoDB是一个基于分布式文件存储的数据库,由C++语言编写,旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB

初入web前端

web前端是什么意思,以前都没有听说过.听说最多的就是程序员,传说中的程序员就像个木头人一样,一天就知道敲代码,而且好多都是单身汪.我也没有想过我会接触web前端编程,现在接触了,也开始学习web前端编程. 以前就听说过C语言,现在开始学了才知道编程语言有好多,如Java.C.C++.C#.PHP.Python.VB等,这些也是编程里所说的高级语言.没错 我就是学习的C#语言,但是不是我们看到这个就读C井语言,它叫Csharp语言.我来分享一下我学习的知识. 一.计算机语言是二进制的,源代码计算