前端基础---display和visibility
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ background-color: red; /* 将一个内联元素变成块元素 通过display可以修改元素
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内联元素的盒模型</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-col
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浏览器默认样式</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-colo
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直外边距的重叠</title> <style type="text/css"> .box1{ /* 为上面的元素设置一个下外边距 */ width: 100px; height:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #bf
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: #b
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子模型</title> <style type="text/css"> .box1{ /* 使用width来设置盒子内容区的宽度 使用height来设置盒子内容区的高度 widt
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本样式</title> <style type="text/css"> /* text-transform可以来设置文本的大小写 可选值: none 默认值 该怎么显示就怎么显示
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行间距</title> <style type="text/css"> /* 在css中并没有为我们提供一个直接设置行间距的方式 我们只能通过设置行高来简介的设置行间距,行高越大行
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .p1{ color: red; font-size: 30px; font-family: "微软雅黑"; /*
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ font-family: arial , 微软雅黑 , 华文彩云 , serif; } </style> <
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字体一</title> <style type="text/css"> .p1{ /* 设置字体颜色,使用color来设置文字的颜色 */ color: red; /* 设置文字的
阅读全文
摘要：颜色单位 在CSS可以直接使用颜色的单词来表示不同颜色 红色: red 蓝色: blue 绿色: green 也可以使用RGB值来表示不同的颜色 所谓的RGB值指的是通过Red,Green,Blue三原色 通过这三种颜色的统统能读,来表示不同的颜色 颜色的呢浓度需要0-255之间的值,255表示最大
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>长度单位</title> <style type="text/css"> /* 长度单位 像素px 像素是我们在网页中使用的最多的一个单位 一个像素就相当于我们品目中的一个小点 我
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>定义列表</title> </head> <body> <!-- 定义列表用来对一些词汇或内容进行定义 使用dl来创建一个定义列表 dl中有两个字标签 dt: 被定义的内容 dd:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无序列表和有序列表</title> <style type="text/css"> /* 去掉项目符号 */ .ul1 { list-style: none; } </style>
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本标签</title> </head> <body> <!-- em和strong 这两个标签都表示一个强调的内容 em主要表示与其上的强调,em在浏览器中默认使用斜体显示 st
阅读全文
摘要：涉及到a的伪类一共有四个: :link :visited :hover :active 而这四个选择器的优先级是一个样的 所以为了避免出现不必要的错误要按照以下顺序 1. :link 2. :visited 3. :hover 4. :active
阅读全文
摘要：当时用不同的选择器,选中同一个元素时并且设置相同的样式时 这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重) 决定 优先级高的优先显示 优先级的规则 内联样式 优先级 1000 id选择器 优先级 100 类和伪类 优先级 10 元素选择器 优先级 1 通配选择器 优
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>样式的继承</title> </head> <body> <!-- 像儿子可以继承父亲的遗产一样,祖先元素上的样式,也会被他的后代元素所继承 利用继承,可以将一些基本的样式设置给祖
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>否定伪类</title> <style type="text/css"> /* 否定伪类: :not(选择器) */ p:not(.hello){ background-color
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>兄弟元素选择器</title> <style type="text/css"> /* 后一个兄弟元素选择器 作用: 可以选中一个元素后紧挨着的指定的兄弟元素 语法: 前一个+后一个
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子元素的伪类</title> <style type="text/css"> /* :first-child -选择第一个子标签 :last-child -选择最后一个子标签. :
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性选择器</title> <style type="text/css"> /* 属性选择器: 作用: 可以根据元素中的属性或属性值来选取指定元素 语法: [属性名] 选取含有指定
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素</title> <style type="text/css"> /* 使用伪元素来表示元素中的一些特殊的位置 */ /* 首字母 - :first-letter 首行 -
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪类选择器</title> <style type="text/css"> /* 伪类专门用来表示元素的一种特殊的状态 比如: 访问过的超链接,比如普通的超链接,比如获取焦点的文本
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子元素和后代元素选择器</title> <style type="text/css"> /* 后代元素选择器 作用: 选中指定元素的指定后代元素 语法: 祖先元素 后代元素{} *
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常用选择器</title> <style type="text/css"> /* 为页面中的所有的p元素,设置一个字体颜色为红色 */ /* 元素选择器 作用: 通过元素选择器可以
阅读全文
摘要：块元素和内联元素 div就是一个块元素 所谓的块元素就是会独占一行的元素,无论他的内容有多少 他都会独占一整行 块元素有: div p h1 h2 h3.... div这个标签没有任何语义,就是一个纯粹的块元素 并且不会为它里面的元素设置任何的默认样式 div元素主要用来对页面进行布局的 span是
阅读全文
摘要：在style中全部都是css代码,不能有html代码 在css中只能使用css注释 /* */ 只能编写在style标签中,或者css文件中 css语法: 选择器 声明块 选择器: -通过选择器可以选中页面中指定的元素, 并且将声明块中的样式应用到对应的元素上 声明块: -声明块紧跟在选择器的后面,
阅读全文
摘要：可以将样式表编写到外部的css文件中,然后通过link标签来讲外部的css文件引入到当前页面中, 这样外部文件中的css样式表将会应用到当前页面中 将css样式统一编写带外部的样式表中,完全使结构表现纹理,可以使样式表可以在不同页面中使用 最大限度的复用,并且可以加快用户的访问速度 最推荐使用外部样
阅读全文
摘要：1. 层叠样式表(Cascading Style Sheets)2. Css可以用来为网页创建样式表,通过样式 表可以对网页进行装饰。3. 所谓层叠，可以将整个网页想象成是一-层 一层的结构,层次高的将会覆盖层次低的。 而css就可以分别为网页的各个层次设置样 式。 可以将css样式编写到元素的st
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>东风破</title> </head> <body> <center> <h1>这是我的个人博客</h1> <hr> <h2>东风破</h2> <a href="#">周杰伦</a
阅读全文
摘要：<!-- 使用超链接可以让我们从一个页面跳转到另一个页面 使用 a 标签创建一个超链接 属性: href: 只想链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址 target: 可以用来指定打开链接的未知 可选值: _self: 当前窗口打开 _blank: 在新的窗口中打开链接 可以设
阅读全文
摘要：<!-- 使用内联框架可以引入一个外部的页面 使用iframe来创建一个内联框架 属性: src: 指向一个外部页面的路径,可以使用相对路径 width: height: name: 可以为内联框架指定一个name属性 在现实开发中不推荐使用内联框架,因为内联框架红的内容不会被搜索引擎检索 -->
阅读全文
摘要：使用meta标签还可以用来设置网页的关键字 name 和 content 属性是设置关键字所必须的 <!-- 使用meta标签可以用来设置网页的关键字 --> <meta charset="utf-8" name="keywords" content="HTML5,JavaScript"> 还可以用
阅读全文
摘要：图片的格式 JPEG(JPG) - JPRG图片支持的颜色比较多,图片可以压缩,但是不支持透明 - 一般使用JPEG来保存照片等颜色丰富的图片 GIF - GIF支持的颜色少,只支持简单的透明,支持动态图 - 图片颜色单一或者是动态图时可以使用GIF PNG -PNG支持的颜色多,并且支持复杂的透明
阅读全文
摘要：相对路径顾名思义就是相对于当前文件的路径./代表当前文件所在的目录../代表当前文件的上一级目录/代表的是根目录、、、、、、、、、、、、、、、、、绝对路径是指文件在硬盘上真正存在的路径一般在网页中不使用相对路径，因为在本地用很能没问题，但是代码上传到线上时，路径可能就不对了；
阅读全文
摘要：使用img标签来想网页中引入一个外部图片 img标签也是一个自动结束标签 属性: src: 设置一个外部图片的路径 alt: 可以用来设置在图片不能显示时,对图片的描述 搜索引擎可以通过alt属性来识别不同的图片 如果不写alt属性,则搜索引擎不会对img中的图片进行收录 width: 可以用来修改
阅读全文
摘要：在HTML中,一些如< >这种特殊字符不能直接使用 需要使用一些特殊符合来表示这些特殊字符,这些特殊符号我们成为实体(转义符) 实体的语法: &实体的名字: < < > > 空格 版权符号 © a<b> ccc &nb
阅读全文
摘要：标题标签 * 在HTML中一共有六级标签 h1~h6 在现实效果上h1最大,h6最小,但是文字的大小我们并不关心 使用HTML标签时,关心的是标签的语义 6个级别的标题中,h1最重要,表示一个网页中的主要内容,h2~h6重要性依次降低 对于搜索引擎来说,检索玩title标签后 立即检索h1标签的内容
阅读全文
摘要：当编写完代码后的编码格式与浏览器的解码格式不同的时候会出现乱码的情况 为了避免出现这种情况需要用到 meta 标签 <meta charset="UTF-8"> 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!
阅读全文
摘要：H5文档声明,声明当前网页是H5标准编写的 如果不写文档声明,有些浏览器会进入一个怪异的模式,会导浏览器解析异常,无法正常显示 所以一定要写文档声明 <!DOCTYPE html> <!DOCTYPE html> <!--此网页由H5标准编写--> <html lang="en"> <head> <
阅读全文
摘要：属性可以用来改变标签内容的样式 属性需要卸载开始标签中,实际上就是一个名值对的结构 一个标签可以有多个属性,属性之间空格隔开 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性的认识</title>
阅读全文
摘要：当我们需要备注的时候,需要注释文字,用来提示 注释如下: <!-- 这是HTML的注释--> 注释的内容不会在页面中显示,但是会在源码中展示 要养成注释的习惯,要简单明了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
阅读全文
摘要：标签要前后呼应 <xx>开头 </xx>结尾 例如: <h1></h1> HTML基本格式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>这是一个网页</title> <!-- 这个是网页标签的名称 --> </head> <
阅读全文
