总结html

1、初识html

W3C : 万维网联盟！（World Wide Web Consortium ）
  创建于1994年，是web技术领域最权威最具有影响力的标准机构！
   
   
  W3C规定了web技术领域相关技术的标准！
   
  官网地址：
  www.w3c.org
  www.chinaw3c.org
   
  XML ：负责数据的存储
  Html ：结构化标准,负责数据的显示
  CSS ：表现标准
  JavaScript：行为标准
   
   
  Html概念：
   
  01.超文本标记语言（Hyper Text Markup Language）
  超文本:包含除了文本之外的视频，音频，图片等。
  标记：html也是有多个节点组成的!
  int a =5; 通过a找到5
  <student id="1"><student>
  <student id="2"><student>
  id就是我们的标记
   
  02.文件名以html或者htm结尾的文件我们称之为html！
   
  发展史：
  93年诞生HTML！
  00年改名XHTML!
  13年改名HTML5!
   
   
  HTML5的优势：
  01.世界知名浏览器厂商的支持！
  02.市场的需求
  03.跨平台
   
  HTML网页的基本结构
   
  <!DOCTYPE html> 只是告诉浏览器使用了html的规范
  <html> 根节点
  <head></head> 头部信息
  <body></body> 主体部分
  </html>
   
  我们怎么使用html呢？
  01.记事本(文本编辑器)
  02.DreamWeaver
 
03.WebStorm

第一个网页html

<!DOCTYPE html><!-- 声明当前的文件是H5的页面-->
  <html> <!--根节点-->
  <head lang="en"> <!--头部信息 lang="en"使用的语言是英语-->
  <title>这是我的第一个H5页面</title><!--网页的标题-->
  <meta charset="utf-8"> <!--设置页面的编码格式-->
  <meta http-equiv="keywords" content="第一次，h5">
  <!--
  meta:设置网页相关的元信息（meta-information）!
  比如：设置编码格式，搜索关键字，描述信息，页面跳转等。。。。
  meta常用的属性和属性值：
  01.charset：编码格式
  02.http-equiv：把content属性关联到我们的http头部！
  常用的属性值：
  001.keywords ： 搜索关键字
  002.description：描述当前页面的信息
  003.refresh ：跳转页面
  <meta http-equiv="refresh" content="3;url=http://www.github.com/xiaodoufu/">
  03.content:定义和http-equiv或者name属性的对应值
  -->
  <style type="text/css"></style><!--设置当前页面的样式-->
  <script type="text/javascript"></script> <!--设置当前页面的行为-->
   
  </head>
   
  <body> <!--网页中所有的数据 必须书写的位置-->
  这是我的第一个页面！
  </body>
  </html>

标题标签

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>标题标签</title>
  <!--
  标题标签： h1-h6 其他的都没有效果！
  会自动换行！块元素（自己独占一行的元素）！
  -->
  </head>
  <body>
  <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3>
  <h4>4级标题</h4>
  <h5>5级标题</h5>
  <h6>6级标题</h6>
  <h7>7级标题</h7>
  8级标题
   
   
  </body>
  </html>

段落标签

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>段落标签</title>
  <!--
  段落之前有空行！p标签也是块元素！
  自闭合标签
  <br/> 换行
  <hr/> 水平线
  <h1> <p> </h1> </p> 错误的！ 标签的不正确嵌套！
  <p> <h1> </h1></p> 正确！
  -->
  </head>
  <body>
   
  <p>
  北京欢迎你，有梦想谁都了不起！<br/>
  有勇气就会有奇迹。
  </p>
  <hr/>
  <p>
  北京欢迎你，为你开天辟地<br/>
  ……
  </p>
   
  </body>
  </html>

特殊字符

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>特殊字符的使用</title>
  <!--
  虽然有些特殊字符我们可以在页面上显示！但是不允许直接书写！
  需要特殊的符号来代替我们的特殊字符！
  特殊符号对照表：http://www.jb51.net/onlineread/htmlchar.htm
  -->
  </head>
  <body>
  大于号（>）：&gt; <br/>
  小于号（<）：&lt;<br/>
  引号（""）：&quot;<br/>
  单引号（‘）：&apos;<br/>
  版权符号（?）：&copy;<br/>
  <!--
   
   
  想让一行中的某些字体 凸显出来，我们通常使用
  em 斜体 不建议使用i
  strong 加粗 不建议使用b
  尽量使用的标签 语义化（让计算机便于解析，让码农易于阅读）！
  -->
  大家辛苦了<strong><em>吗？</em></strong>
  </body>
  </html>

图片标签

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>图片标签</title>
  <!--
  常见的图片格式：
  bmp,gif,png,jpg! 压缩（率）比！
   
  img标签 也是一个 行内元素（内联元素）！
   
  src :指的是 图片的位置！ 绝对不能写成绝对路径！
  项目中需要的所有文件，都在项目中的images文件夹中保存！
  src就写成项目的相对路径！
  title:鼠标放在图片上的悬停文字,如果没有alt属性，图片不显示时，显示title
  alt:不显示图片的时候 替换文字
  height:高度
  width: 宽度
  -->
  </head>
  <body>
  <img src="../images/a.jpg" height="200px" width="200px"
  title="这是一幅画" alt="多么美丽的画面">
  </body>
  </html>

超链接

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>超链接</title>
  <!--
  01.普通的超链接
  02.锚链接
  03.功能性链接
   
  src:我们一般指的是 文件的地址！路径！ 从哪里来
  href：是指向，引用！ 到哪里去
   
  target：目标页面的设置！指的是 我们点击超链接之后的页面显示窗口的位置！ 默认是当前窗口！ _self
  _blank：在新创建的窗口中显示！
  -->
  </head>
  <body>
   
  <a href="http://www.baidu.com" target="_blank">百度</a> <br/>
  <a href="http://www.taobao.com" target="_self">淘宝</a> <br/>
  <a href="http://www.jd.com">京东</a> <br/>
   
  <!--
  把图片嵌套在超链接中！
  -->
  <a href="http://www.github.com/xiaodoufu" target="_blank">
  <img src="../images/a.jpg" width="200px" height="200px" alt="这是一个美丽的画面">
  </a>
  </body>
  </html>

锚链接本页面跳转

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>锚链接本页面跳转</title>
  <!--
  锚链接：
  01.从本页面的A位置 跳转本页面的B位置 使用 #+标记名称
  02.从本页面的A位置 跳转其他页面的B位置 使用 页面名+#+标记名称
  name:标记的名称
  -->
  </head>
  <body>
  <div><a href="#flag" >跳转至第8个画面</a></div>
  <div><a href="08锚链接需要的页面.html#flag" >跳转至需要页面的第8个画面</a></div>
  <img src="../images/a.jpg" title="这是第1个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第2个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第3个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第4个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第5个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第6个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第7个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第8个画面" alt="以前有个画面">
  <!-- name="flag" flag标记名称 -->
  <a name="flag" href="#">这是第8个画面的标记</a> <!-- #返回本页面的最初位置-->
  </body>
  </html>

锚链接需要的页面

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>锚链接需要的页面</title>
  </head>
  <body>
  <img src="../images/a.jpg" title="这是第1个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第2个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第3个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第4个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第5个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第6个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第7个画面" alt="以前有个画面">
  <img src="../images/a.jpg" title="这是第8个画面" alt="以前有个画面">
  <a name="flag">这是需要界面的 第8个画面标记</a>
  </body>
  </html>

块元素和内联元素

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>块元素和内联元素</title>
  <!--
  块元素：自身独占一行！
  可以设置盒子大小！
  h1 - h6 p div
  内联元素：元素在一行显示！
  不可以设置盒大小！
  a img span子
  块元素和内联元素可以互相转换！ 通过display属性设置！
  -->
  </head>
  <body>
   
  <div style="width: 50px;height: 50px;border: 1px solid red;display: inline">
  我是一个小盒子
  </div>
   
  <a href="#" style="width: 50px;height: 50px;border: 1px solid red;display: block">这是内联元素</a>
   
   
  </body>
  </html>

2、列表表格和媒体元素

无序列表

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>无序列表</title>
  <!--
  什么是列表
  列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，
  以便浏览者能更快捷地获得相应的信息！
   
  01.前面有默认的实心圆
  02.每个li独占一行
  03.适用于我们的新闻列表，导航栏
  -->
  </head>
  <body>
  <ul>
  <li>好好学习</li>
  <li>好好学习</li>
  <li>好好学习</li>
  </ul>
   
   
  </body>
  </html>

有序列表

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>有序列表</title>
  <!--
  01.有顺序，前面默认是阿拉伯数字
  02.适用与试卷 和问卷调查！
  -->
  </head>
  <body>
  <ol>
  <li>好好学习</li>
  <li>好好学习</li>
  <li>好好学习</li>
  </ol>
  </body>
  </html>

自定义标签

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>自定义列表</title>
  <!--
  01.每个dt dd都独占一行
  02.默认前面没有任何标记
  03.适用于一个标题下，有多个列表项的场景
  -->
   
  </head>
  <body>
   
  <dl>
  <dt>C盘</dt>
  <dd>文件1</dd>
  <dd>文件2</dd>
   
  <dt>D盘</dt>
  <dd>文件1</dd>
  <dd>文件2</dd>
  </dl>
   
  </body>
  </html>

表格

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>表格</title>
  <!--
  01.简单易用，便于阅读
  02.结构简单
   
  table中的属性：
  01.border： 边框的像素
  02.cellpadding 设置内容和单元格之间的距离
  03.cellspacing 设置单元格和单元格之间的距离
  04.bgcolor 整个表格的背景色 #ffc0cb :代表的是16进制的颜色码
  05.width 表格在浏览器中的宽度比
   
   
  td节点中的
  align="left" 默认
  align="right"
  align="center"
  -->
  </head>
  <body>
  <table border="1px" cellpadding="5px" cellspacing="5px"
  bgcolor="pink" width="50%">
  <tr>
  <td>第1行的第1列</td>
  <td>第1行的第2列</td>
  <td>第1行的第3列</td>
  </tr>
  <tr>
  <td>第2行的第1列</td>
  <td>第2行的第2列</td>
  <td>第3行的第3列</td>
  </tr>
  </table>
   
   
   
   
   
  </body>
  </html>

跨行跨列

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>跨行跨列</title>
   
  <!--
  都必须写在td中
  rowspan :跨行
  colspan:跨列
  -->
  </head>
  <body>
   
  <table border="1px" cellpadding="5px">
  <tr>
  <td colspan="3" align="center"> 学生成绩表</td>
  </tr>
   
  <tr>
  <td rowspan="2">张三</td>
  <td>math</td>
  <td>80</td>
  </tr>
  <tr>
  <td>java</td>
  <td>90</td>
  </tr>
  <tr>
  <td rowspan="2">李四</td>
  <td>math</td>
  <td>85</td>
  </tr>
  <tr>
  <td>java</td>
  <td>95</td>
  </tr>
   
   
  </table>
   
  </body>
  </html>

高级表格

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>高级表格</title>
  </head>
  <body>
  <table border="1" cellspacing="0" width="70%">
  <caption>年终数据报表</caption> <!--标题-->
  <thead bgcolor="red"> <!--页眉-->
  <tr>
  <th>月份</th>
  <th>收入</th>
  </tr>
  </thead>
  <tbody bgcolor="pink"> <!--主体-->
  <tr>
  <td>1月份</td>
  <td>5000</td>
  </tr>
  <tr>
  <td>2月份</td>
  <td>5000</td>
  </tr>
  <tr>
  <td>3月份</td>
  <td>6000</td>
  </tr>
  <tr>
  <td>4月份</td>
  <td>8000</td>
  </tr>
  </tbody>
   
  <tfoot bgcolor="green"> <!--页脚-->
  <tr>
  <td>平均月收入</td>
  <td>6000</td>
  </tr>
  <tr>
  <td>总收入</td>
  <td>24000</td>
  </tr>
  </tfoot>
  </table>
   
   
  </body>
  </html>

音频标签

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>音频标签</title>
   
  <!--
  audio:音频标签
  controls：是否显示 控制条
  autoplay：是否自动播放
  -->
  </head>
  <body>
  <audio controls autoplay>
  <source src="../audio/music.mp3">
  </audio>
  </body>
  </html>

视频标签

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>视频标签</title>
  <!--
  video:视频标签
  controls：是否显示 控制条
  autoplay：是否自动播放
  -->
  </head>
  <body>
  <video controls autoplay src="../video/video.mp4"> </video>
  </body>
  </html>

结构元素

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>结构元素</title>
   
  <!--
   
  用于网页的布局：
   
  header: 头部区域
  section：html页面中的一块独立的部分
  footer：脚部区域
  nav:导航菜单
  article:独立的文章内容
  aside：常用于侧边栏
  -->
   
  <style type="text/css">
  header{
  height: 20px;
  border: 1px solid red;
  }
  section{
  height: 1000px;
  border: 1px solid black;
  }
  footer{
  height: 50px;
  border: 1px solid blue;
  }
  </style>
  </head>
  <body>
   
  <header>
  </header>
   
  <section>
  </section>
   
  <footer>
  </footer>
   
  </body>
  </html>

内联框架

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>内联框架</title>
  <!--
  src ：指的是 我们需要引入的外部文件地址
   
  需求：
  用户点击不同的超链接，在iframe框架中 显示不同的页面！
   
  -->
  </head>
  <body>
   
  <a href="http://www.jd.com" target="myIframe">京东</a>
  <a href="http://www.taobao.com" target="myIframe">淘宝</a>
  <a href="http://www.baidu.com" target="myIframe">百度</a>
   
  <iframe name="myIframe" src="http://www.baidu.com" scrolling="no" width="500" height="500"></iframe>
   
  </body>
  </html>

3、CSS美化页面

【

css美化页面
   
  如果在我们一行文字中，想让某个文字凸显出来，使用span！
   
  1.字体样式
  font-style:字体的风格 italic normal
  font-weight:字体的粗细 normal(默认400) bold(700) bolder 最大到900
  font-size:字体的大小 10px 2em rem pc pt
  font-family:字体的类型，比如我们的楷体，隶书,宋体。。。。。
   
  font：风格 粗细 大小 类型
  在一起设置属性的时候，四种属性顺序不能颠倒！
   
  2.文本样式
  color:文本颜色 red 16进制颜色码 rgb rgba
  rgb(red,green,blue)正数取值 0-255
  rgba(red,green,blue,alpha)
  alpha的取值必须是0-1 0不显示 1正常显示
  text-align:文本元素的水平对齐方式
  center left right justify(两端对齐)
  line-height:文本的行高!
  如果想设置文本的垂直居中line-height的值必须等于height的值
  text-indent:设置首行缩进
  p{
  text-indent:2em; 设置p首行缩进2个字符
  }
  text-decoration:文本的装饰
  none:默认值
  underline:下划线
  overline:上划线
  line-through:删除线
  text-shadow:文本阴影
   
  3.display 可以实现 块元素和行内元素的互换！
  inline inline-block block
   
  4.超链接伪类
   
  结构伪类选择器：
  div:nth-of-type() :nth-child
  css伪类是一个特殊的类！ 它针对于我们设置的css选择器起作用！
   
  css伪类的语法：
  选择器:伪类名｛
  属性:属性值;
  ｝
  :link ==> 还没有点击超链接的样式
  :visited ==> 点击之后超链接的样式
  :hover ==> 鼠标悬停在超链接的样式
  :active ==> 鼠标点击未释放超链接的样式
   
  love hate
  如果同时给一个选择器设置超链接伪类样式，那么顺序是必须不变的！
   
  5.列表样式
  list-style-type 列表符号样式
  none 无符号
  disc 实心圆
  circle 空心圆
  decimal 数字 .....
  list-style-image 列表图片 url
  list-style-position 列表符号是否被li包含，默认是ul包含
  list-style 列表样式
   
  如果同时设置了type和image 那么image会覆盖type！和书写先后顺序没关系！
   
  6.背景样式
  ">   background-image:背景图片
  background-position:背景位置
  background-repeat:背景重复方式
  repeat:默认方式 水平和垂直都平铺
  no-repeat:不平铺，只有一个图片
  repeat-x:水平平铺
  repeat-y:垂直平铺
   
  background: 背景色 背景图片 背景位置 平铺方式
  虽然没有固定顺序，但是我们有个默认的写法！
   
  如果我们相对背景图片的大小进行设置！那么请使用background-size
  background-size:contain;
  background-size：背景图片的尺寸
  auto:默认值，使用图片的大小
  cover:让整个图片正好填充整个盒子
  contain：让图片自动的方法或者缩小 适应盒子的大小
  percentage：使用百分比 手动的校正图片在盒子中的大小
   
   
  7.渐变属性
  linear-gradient:(方向,color1,color2)
  to top :方向
  red:第1个颜色
  black:第2个颜色
  IE浏览器是Trident内核，加前缀：-ms-
  Chrome浏览器是Webkit内核，加前缀：-webkit-
  Safari浏览器是Webkit内核，加前缀：-webkit-
  Opera浏览器是Blink内核，加前缀：-o-
  Firefox浏览器是Mozilla内核，加前缀：-moz-

】

Span

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>span标签</title>
  <!--span标签
  想让某些文字凸显出来
  -->
  <style type="text/css">
  div:first-child span{
  color: red;
  }
   
  div:last-child span{
  color: green;
  }
  /*同时设置body中的子元素span的风格 粗细 大小 类型*/
  body>span{
  font: oblique bold 50px "楷体";
  color: red;
  }
   
  </style>
   
   
   
  </head>
  <body>
  <div><span>今天</span>是个好日子！</div>
  <div><span>明天</span>也是个好日子！</div>
  <span>a</span>bcdefg
  </body>
  </html>

字体样式

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>字体样式</title>
   
  <style type="text/css">
   
  div{
  /*01.设置字体的类型*/
  font-family:"楷体" ;
  /*02.设置字体的风格*/
  font-style: italic;
  /*03.设置字体的大小 可以设置数值*/
  font-size:small;
  /*04.设置字体的粗细 可以设置数值*/
  font-weight: bold;
  }
  /* 简写方式==》同时设置 字体的 风格,粗细,大小 ，类型 顺序不能发生变化*/
  span{
  font:italic bolder 60px "楷体";
  }
  </style>
  </head>
  <body>
   
  <div><span>今天</span>是个好日子！</div>
  <div><span>明天</span>也是个好日子！</div>
  </body>
  </html>

display

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>display属性</title>
  <!-- 实现 块元素和 内联元素的相互转换 -->
   
  <!-- 需求：
  01.设置块元素2和3 在一行显示
  02.设置块元素2和3 的边框和宽度 高度 ==>因为已经变成了内联元素 所以宽度 高度 无效
  03.我们想块元素2和3 在一行显示 但是 还能设置 宽度 高度 ？？？display: inline-block;
  04.把内联元素3 变成块元素 并且设置 宽度 高度
  -->
  <style type="text/css">
  div:nth-of-type(2),div:nth-of-type(3){
  /* display: inline; 内联元素*/
  display: inline-block; /* 行内块元素*/
  border: 1px solid red;
  height: 50px;
  width: 50px;
  }
  span:nth-child(3){
  border: 1px solid red;
  display:block;/*块元素*/
  height: 50px;
  width: 50px;
  }
   
  </style>
   
  </head>
  <body>
   
  <span>内联元素1</span>
  <span>内联元素2</span>
  <span>内联元素3</span>
   
  <div>块元素1</div>
  <div>块元素2</div>
  <div>块元素3</div>
   
   
   
  </body>
  </html>

文本样式

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>文本样式</title>
   
  <style type="text/css">
  /* 01.设置文本的颜色
  RGB： red green blue
  rgb(red ,green,blue) 每个颜色的数值范围是0-255
  rgba(50,100,50,0.2) 最后一个参数 设置透明度 alpha 取值是0-1
  16进制的颜色码 #020202
  前两位代表R的分量
  中间两位代表G的分量
  后两位代表B的分量
   
   
  02.设置文本的对齐方式
  text-align center right left
   
  03.设置文本的垂直居中
  我们设置的line-height的值要和 盒子的 height属性值一致！
   
  04.文本的装饰
  text-decoration: line-through; 删除线
  text-decoration: underline; 下划线
  text-decoration: overline; 上划线
  05.文本的阴影
  text-shadow:red 2px 3px 1px ;
  red:阴影的颜色
  2px：x轴的位移
  3px：y轴的位移
  1px：阴影的模糊范围 值越小 看到的文本越清晰
  */
  div{
  /*color: rgb(50,100,50);只是设置文本颜色*/
  color: rgba(50,100,50,0.8); /*设置颜色的同时设置透明度*/
  text-align: left;/*水平居中方式*/
  text-indent: 2em;/*首行缩进*/
  border: 1px solid red;
  height: 100px;
  line-height:100px ; /*行高*/
  text-decoration: underline;
  text-shadow:red 2px 2px 1px ;/*文本的阴影*/
  }
   
  </style>
   
   
  </head>
  <body>
  <div>现价 500</div>
  <div>原价 900</div>
  </body>
  </html>

超链接伪类

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>超链接伪类</title>
  <!--
  a:link 我们还没有访问超链接时的样式
  a:visited 访问之后超链接的样式
  a:hover 鼠标悬停在超链接上的样式
  a:active 鼠标点击未释放
  顺序一定不能有误！
  -->
   
   
  <style type="text/css">
  a:link{
  color: red;
  }
  a:visited{
  color: greenyellow;
  }
  a:hover{
  color: deeppink;
  }
  a:active{
  color: yellow;
  }
   
  div[id="haha2"]:hover{
  color: red;
  text-shadow: pink 2px 2px 1px;
  }
   
   
  span:hover{
  background: red;
  }
   
  </style>
   
  </head>
  <body>
   
  <span>haha</span>
  <a href="#">大家辛苦了！</a>
   
  <div id="haha">哈哈</div>
  <div id="haha1">哈哈1</div>
  <div id="haha2">哈哈2</div>
  </body>
  </html>

列表样式

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>列表样式</title>
   
  <style type="text/css">
  /*01.去掉列表前面实心圆点
  list-style-type: none;
  list-style-type:设置前面默认的样式
   
  02.把默认的小圆点换成图片
  list-style-image: url("../images/a.jpg");
   
  03.设置li和图标的关系
  li是否包含前面的小图标
  */
  li{
  list-style-position: inside;
  /* list-style-image: url("../images/a.jpg");
  list-style-type: disc;*/
  }
  </style>
  </head>
  <body>
  <ul>
  <li>第1项</li>
  <li>第2项</li>
  <li>第3项</li>
  <li>第4项</li>
  </ul>
  </body>
  </html>

背景样式

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>背景样式</title>
   
  <style type="text/css">
   
  div{
  border: 1px solid red;
  height: 200px;
  width: 200px;
  background-color: aqua; /* 01.给div增加背景颜色*/
  background-image: url("../images/b.png"); /* 02.给div增加背景图片 图片会把颜色覆盖，其实颜色在图片后面*/
  background-repeat: no-repeat;/*03.设置图片的填充方式*/
  /* background-position: 20px 10px;04.设置图片定位 设置size时 需要 注释*/
  /* background:color image position repeat ; 简写的规范*/
  /*
  background-size:contain;
  background-size：背景图片的尺寸
  auto:默认值，使用图片的大小
  cover:让整个图片正好填充整个盒子
  contain：让图片自动的方法或者缩小 适应盒子的大小
  percentage：使用百分比 手动的校正图片在盒子中的大小 100%;
  */
  }
   
   
  </style>
   
   
  </head>
  <body>
  <div></div>
   
   
  </body>
  </html>

渐变属性

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>渐变属性</title>
  <!--
  01.线性渐变
  颜色按照从上到下或者从左到右 等顺序发生的变化
  02.径向渐变
  不是按照直线的顺序！ 圆形，椭圆！从一个点向所有的方向混合！
  -->
   
  <style type="text/css">
  div{
  border: 1px solid red;
  height: 200px;
  width: 200px;
  background: linear-gradient(to left top,red,green);
  /* to top :方向
  red:第1个颜色
  black:第2个颜色
  IE浏览器是Trident内核，加前缀：-ms-
  Chrome浏览器是Webkit内核，加前缀：-webkit-
  Safari浏览器是Webkit内核，加前缀：-webkit-
  Opera浏览器是Blink内核，加前缀：-o-
  Firefox浏览器是Mozilla内核，加前缀：-moz-
  */
  }
   
  </style>
   
   
  </head>
  <body>
   
  <div></div>
   
  </body>
  </html>

文本属性

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
   
  <style type="text/css">
  div{
  height: 50px;
  border: 1px solid red;
  line-height: 50px;
  text-align: center;
  }
   
  </style>
  </head>
  <body>
   
  <div>我想垂直居中</div>
   
  </body>
  </html>

4、浮动

网页会根据块元素或者内联元素的特性，按照从左至右，从上到下的方式自然排序！
  这种元素自然排列的方式，我们称之为====》标准文档流！
   
  浮动 float
  左浮动
  右浮动
  浮动之后 会脱离 标准文档流
   
  溢出 overflow
  overflow:
  01.visible:默认显示
  02.scroll：以滚动条的形式显示溢出部分
  03.hidden：溢出部分隐藏
  04.auto：自动跳转
   
  我们书写了一个页面，里面有很多块元素，默认排版就是标准文档流！
   
  如果我们想让ul中的li能在一行显示！
  01.display
  02.浮动
   
  只要是元素设置了浮动就会脱离标准文档流!
  如果我们的父元素容不下浮动元素！
  可以选择是否显示溢出的元素！
  使用overflow!
   
  clear 清除浮动
  none 默认
  left 在左侧不允许浮动
  right 在右侧不允许浮动
  both 左右侧都不允许浮动
   
   
   
  防止父级边框塌陷的方式：
  01.给父级盒子设置宽高！
  02.在父级盒子的最后一个位置增加div没有内容
  <div class="clear"></div>
  给这个div增加样式
  .clear{
  border: 1px solid black;
  clear: both;
  }
  03.在父盒子中设置溢出处理
  overflow: hidden;
  04.最终使用的方式 :after伪类
  在父盒子中增加一个class="clear"
  .clear:after{
  display: block;/*在#main div的左后一个位置增加一个块元素*/
  content: ‘‘; /*块元素的内容什么都没有*/
  clear: both; /*清除浮动*/
  }

网页布局

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>网页布局</title>
  <!-- 网页会根据块元素或者内联元素的特性，按照从左至右，从上到下的方式自然排序！
  这种元素自然排列的方式，我们称之为====》标准文档流！-->
  </head>
  <body>
  <span>11111</span>
  <span>22222</span>
  <span>33333</span>
  <div>33333</div>
  <span>11111</span>
  <span>22222</span>
  <span>33333</span>
  </body>
  </html>

浮动属性

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>浮动属性</title>
  <style type="text/css">
  #main{/*大盒子*/
  height: 300px;
  width: 300px;
  border: 1px solid red;
  /*针对于浮动之后 内容溢出的处理
  overflow:
  01.visible:默认显示
  02.scroll：以滚动条的形式显示溢出部分
  03.hidden：溢出部分隐藏
  04.auto：自动调整
  */
  overflow: scroll;
  }
   
  #a,#b,#c{ /*三个小盒子*/
  height: 150px;
  width: 110px;
  border: 1px solid red;
  margin: 2px;
  /*浮动之后 会脱离 标准文档流*/
  float: right;
  }
   
  </style>
   
  </head>
  <body>
  <div id="main">
  <div id="a">这是第1个盒子</div>
  <div id="b">这是第2个盒子</div>
  <div id="c">这是第3个盒子</div>
  </div>
  </body>
  </html>

清除浮动属性

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>浮动属性</title>
  <style type="text/css">
  #main{/*大盒子*/
  height: 300px;
  width: 300px;
  border: 1px solid red;
  }
   
  #a,#b,#c{ /*三个小盒子*/
  height: 50px;
  width: 70px;
  border: 1px solid blue;
  margin: 2px;
  float: left;
  }/*第三个盒子清除左浮动
  #c{
  clear: left;
  }*/
  /*清除第二盒子的左浮动*/
  #b{
  clear: left;
  }
   
  </style>
   
  </head>
  <body>
  <div id="main">
  <div id="a">这是第1个盒子</div>
  <div id="b">这是第2个盒子</div>
  <div id="c">这是第3个盒子</div>
  </div>
  </body>
  </html>

防止父级边框塌陷

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>防止父级边框塌陷</title>
   
  <style type="text/css">
  #main{
  border: 1px solid red;
  /*01.给父级div设置高度
  height: 500px;*/
  /* 03. 设置溢出处理 overflow: hidden;*/
  }
   
  #a,#b,#c{ /*三个小盒子*/
  border: 1px solid red;
  float: left; /* 01.因为 父级div没有设置高度和宽度！ 子的div右浮动了？脱离文档流 位置没了*/
  }
   
  /*02. 增加空div 防止父级边框塌陷
  .clear{
  border: 1px solid black;
  clear: both;
  }*/
   
  /*04.推荐使用 after伪类 */
  .clear:after{
  display: block;/*在#main div的左后一个位置增加一个块元素*/
  content: ‘‘; /*块元素的内容什么都没有*/
  clear: both; /*清除浮动*/
  }
  </style>
  </head>
  <body>
  <div id="main" class="clear">
  <div id="a"><img src="../images/b.png"></div>
  <div id="b"><img src="../images/b.png"></div>
  <div id="c"><img src="../images/b.png"></div>
  <!--02. 增加空div 防止父级边框塌陷 <div class="clear"></div> -->
  </div>
  </body>
  </html>

5、网页动画

css变形：transform
 平移   translate（x,y）
        translateX
        translateY
 transform:translate(100px,0)

 旋转   rotate(deg) 旋转多少度，不会改变元素的形状

 缩放   scale（x,y） 如果只书写了一个值，默认第2个参数等于第一个值
        scaleX
        scaleY

 倾斜   skew（x,y） deg 会改变元素的形状
        skewX
        skewY

 如果说我们想给一个元素同时设置多个 变形属性！
   transform： 倾斜  缩放  旋转  ；
    多个属性之间使用空格隔开！

我们上面的变形属性都是一瞬间就完成了！没有看到中间过程！

如果想看到！使用css过渡属性  transition==>是一个动画的转换过程！

css过渡属性：
transition:property  duration  timing-function  delay

property:过渡或者动画的css属性,例如color,width,如果想都设置使用all
duration:完成过渡效果需要的时间 s为单位
timing-function: 过渡函数
   ease：默认值  速度由快到慢
   linear：匀速
   ease-in:越来越快
   ease-out:越来越慢
   ease-in-out:先加速后减速
delay：过渡开始的延迟时间  s为单位

CSS动画

01.创建关键帧
@keyframes  名称(animates){
    0%{
      css属性：属性值；
    }
    50%{
      css属性：属性值；
    }
    100%{
      css属性：属性值；
    }
}
02.怎么调用关键帧
animation：关键帧的名称  3s linear 1s;

CSS3变形

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>css3变形</title>
   
  <style type="text/css">
  *{
  margin: 0px;
  padding: 0px;
  }
  li{
  list-style: none;
  float: left;
  margin-left: 15px;
  background: rgba(230,130,0,0.5);
  border-radius: 5px;/*圆角属性*/
  }
   
  li:hover{
  /*transform 变形属性*/
  /* transform:translate(4px,5px) ;平移*/
  transform: rotate(90deg) scale(1.5);/* 旋转的同时放大1.5倍*/
  /* transform: skewY(20deg);
  transform: skewX(20deg); 倾斜属性*/
  }
   
  a{
  text-decoration: none;
  }
   
  a:hover{
  background: rgba(150,230,100,0.5);
  border-radius: 5px;
  }
   
   
   
  </style>
  </head>
  <body>
  <ul>
  <li><a href="#">服装城</a></li>
  <li><a href="#">美妆馆</a></li>
  <li><a href="#">超市</a></li>
  <li><a href="#">全球购</a></li>
  <li><a href="#">闪购</a></li>
  <li><a href="#">团购</a></li>
  <li><a href="#">拍卖</a></li>
  <li><a href="#">金融</a></li>
  </ul>
  </body>
  </html>

CSS3过渡

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>CSS3过渡</title>
   
  <style type="text/css">
  *{
  margin: 0px;
  padding: 0px;
  }
   
   
  div{
  width: 100px;
  height: 100px;
  background-color: pink;
  text-align: center;
  line-height: 100px;
  transition:all 3s linear 2s;
  /**
  all： transition-property
  3s : transition-duration
  linear: transition-timing-function
  2s: transition-delay
  */
  }
   
  div:hover{
  background-color: red;
  font-size: 25px;
  transform: rotate(90deg) scale(1.5); /*旋转的同时放大1.5倍 这两个效果 一次性到位*/
  /*transition属性的值：
  01.transition-property:过渡的css属性的名称（color,font-size,background）等！
  想给多个属性设置过渡效果，使用all！
  02.transition-duration:过渡效果需要的时间！
  03.transition-timing-function:设置速度曲线！
  ease：慢速开始，之后变快！
  linear：匀速!
  ease-in:慢速开始！
  ease-out:慢速结束！
  04.transition-delay:过度效果开始前需要等待的时间！默认 0s!
  */
  }
   
   
   
  </style>
  </head>
  <body>
  <div>
  大家辛苦了！
  </div>
  </body>
  </html>

CSS3动画

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>CSS3动画</title>
  <style type="text/css">
  div{
  height: 50px;
  width: 50px;
  background: pink;
  /*调用动画*/
  animation:animates 5s linear 1s 2;
  }
  /*创建 关键帧*/
  @keyframes animates{
  0%{
  width: 0px;
  transform: translate(50px,0);
  }
  25%{
  width: 25px;
  height: 25px;
  transform: translate(150px,0) rotate(90deg);
  }
  50%{
  width: 50px;
  height: 50px;
  transform: translate(300px,0) rotate(180deg);
  }
  75%{
  width: 25px;
  height: 25px;
  transform: translate(150px,0) rotate(270deg);
  }
  100%{
  width: 50px;
  height: 50px;
  transform: translate(50px,0) rotate(360deg);
  }
  }
   
   
   
  </style>
   
   
  </head>
  <body>
  <div></div>
  </body>
  </html>

6、表单

常见的表单元素：
   文本框        type="text"    默认值
   密码框        type="password"
   单选按钮      type="radio"
            <input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女<br/>
          name属性值必须一致！否则会都能选择！
         value属性值必须设置！否则后台无法获取属性值！
         后台只能获取一个值！

   复选框        type="checkbox"
     name属性值必须一致！否则会都能选择！
     value属性值必须设置！否则后台无法获取属性值！
     后台获取时，需要做非空验证！

     单选按钮和 复选框 默认被选中使用checked

   列表框        type="select"
       默认被选中,在option中使用selected

   按钮          type="button"  普通按钮   只是一个按钮 后面学了js可以绑定事件
                 type="reset"   重置按钮   把表单中所有的元素内容变为初始值
                 type="submit"  提交按钮   会把表单中的所有内容提交到服务器

   多行文本域     type="textarea"
   邮箱          type="email"
   数字          type="number"
   滑块          type="range"
   搜索          type="search"

登陆页面

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>登录页面</title>
  <!--
  form表单的意义：
  01.获取用户的输入 ==》收集数据
  02.将用户的输入发送到服务器===》与服务器产生交互
   
   
  action:我们获取完用户的输入之后 提交到的服务器地址！
  #:代表当前页面！
  也可以不书写！
   
  method：我们提交的方式！
  可以理解成 我们
  普通人 说话 get
  和
  聋哑人打手语 post
  get和post的区别 安不安全 相对而言
   
  01.get会在url地址栏中显示我们输入的数据
  post会在请求头中显示用户的输入
  F12之后选择 network 向下拉到页面的最底部 有一个 form data
  这里有post请求的数据！
   
  02.http协议对get和post请求都没有长度限制
  如果对url的长度进行限制只有两种原因：
  001.浏览器自身的设置
  002.服务器的设置
   
   
  input标签中的常用属性：
  name：可以理解成标记！ 用于服务器获取我们这个表单中的元素值！ 必须的！
  value: 用户在页面中输入的值！ 我们一般可以不写！
  maxlength:文本框的最大字节数量
  size:表单元素的初始长度！
   
  比如说：<input type="text" name="userName" value="">
  那么再我们点击注册按钮的时候，
  会提交到服务器的数据是 userName="value的属性值"
  服务器根据 name的属性值，获取value的属性值!
  placeholder:占位符，提示语！不是value的值！ 只有在value属性值为空的时候显示！
  -->
  </head>
  <body>
   
  <form action="#" method="post">
  昵称: <input type="text" name="userName" size="100" placeholder="请输入用户名" maxlength="50"><br/>
  密码: <input type="password" name="pwd"><br/>
  性别:<input type="radio" name="sex" value="男" checked>男
  <input type="radio" name="sex" value="女">女<br/>
  爱好:<input type="checkbox" name="love" value="足球" checked>足球
  <input type="checkbox" name="love" value="乒乓球">乒乓球
  <input type="checkbox" name="love" value="羽毛球">羽毛球
  <input type="checkbox" name="love" value="篮球">篮球<br/>
   
  民族:<select name="nation" size="1">
  <option value="" >请选择</option>
  <option value="汉族" selected>汉族</option>
  <option value="满族">满族</option>
  <option value="维吾尔族" >维吾尔族</option>
  </select><br/>
   
  协议:<textarea name="protocol" rows="20" cols="20">
  xxx xxx
  xxx xxx
  xxx xxx
  </textarea>
  <br/>
  文件上传： <input type="file">
  选择颜色： <input type="color">
  日期： <input type="date">
  时间： <input type="time">
  邮箱:<input type="email" name="email"><br/>
  数字:<input type="number" name="num" max="50" min="1"><br/>
  滑块:<input type="range" max="200" value="150" step="50"><br/>
  搜索:<input type="search" name="search"><br/>
  QQ只读:<input name="qq" value="501804292" readonly><br/>
  隐藏域: <input type="hidden" name="hidden" value="a"><br/>
   
   
  <label> 密码: <input type="password" name="pwd"></label>
  <label for="pwd"> 密码: <input type="password" name="pwd" id="pwd"></label>
  <br/>
   
  正则验证手机号：<input name="phoneNum" required pattern="^1[34578]\d{9}$">
   
  <input name="userName" required placeholder="必填项">
  <input type="button" value="普通">
  <input type="reset" value="重置">
  <input type="submit" value="注册" disabled> <!-- disabled 按钮禁用-->
   
  <button type="submit" >button</button> <!-- 默认就是提交按钮，没有value属性-->
   
  </form>
   
   
  </body>
  </html>

7、初识CSS

CSS(Cascading Style Sheet)  级联（层叠）样式表！   网页样式的设计！

 96年 css1.0
 04年 css2.1
 10年 css3.0

优势：
  01.页面和样式的分离
  02.便于我们修改和使用
  03.多个页面的应用，css样式可以复用
  04.层叠，一个元素可以多次设置样式！
  05.页面压缩

 设置HTML文件样式的计算机语言！
 可以对网页中的文字，颜色，字体大小，边框，背景，高度，网页定位等样式的设定！

 例子：
   之前设计表格的时候！ 每一个单元格都是td！
   我们想让每个td的内容都居中显示？？？ 我们怎么做？？
   在每个td上 都加上align="center"!   但是麻烦！

 现在   我们可以通过 css的选择器 来统一给整个页面中的所有td设置样式！
  怎么设置呢？？

  td{    //页面中所有的td内容 水平居中！
     text-align:center;
    }

CSS的语法规则：
  选择器｛    //开发者模式   便于阅读
          属性1：值1;
          属性2：值2;
          属性3：值3;   //最后一个;可以省略不写！但是不建议省略！
         ｝

  选择器｛属性1：值1;属性2：值2;属性3：值3;｝ //生产者模式   减少内存

HTML中引入CSS样式的3种方式：

 例子：
     假如我们是一个包工头，现在需要对我们已经建好的楼房进行装修！

     两种选择：
       01.自己装修             == 》行内样式    <a href="#" style="color:red">百度</a>
       02.别人装修
           001.自己人装修      == 》内部样式
           002.其他人装修      == 》外部样式

  如果说自己人和其他人以及你自己都想干装修！
  肯定是自己说了算！！！！

  css样式的优先级：
  行内样式  >  内部样式 >  外部样式

  导入外部样式的两种方式：
      01.链接式   <link  rel="stylesheet"  href="外部文件位置"  type="text/css">
      02.导入式
          <style  type="text/css">
               @import "外部文件位置";
          </style>

 链接式的导入式的区别：
  01.链接式的link属性XHTML     @import 属于css2.1
  02.链接式优先加载css样式，再加载页面中的html内容！
  [email protected]先加载页面中的html内容，再加载css样式！
  [email protected]存在浏览器兼容性问题！

 css中最重要就是 选择器：

 选择器：
  1.基本选择器
      01.标签选择器  p{}   a{}  div{}
      02.类选择器   .a 获取页面中class属性值是a的元素   可以有N个
      <span class="a">第一个span标签</span>
      <span class="a">第二个span标签 </span>
      <span class="a">第三个span标签</span>
      <div class="a">第1个div标签</span>
      <div class="a">第2个div标签</span>
      03.id选择器  #a  获取页面中id属性值是a的元素  只能有1个
      <div  id="a"></div>

  2.高级选择器
      01.交集选择器
      02.并集选择器
      03.层次选择器
         01.后代选择器
         02.子选择器
         03.相邻兄弟选择器    之后的一个兄弟元素
         04.通用兄弟选择器    之后的所有兄弟元素

      04.结构伪类选择器   *****
      05.属性选择器  [属性=属性值]

标签选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>标签选择器</title>
  <!-- 内部样式设置 style标签应该写在head标签中
  <style type="text/css">
  h1{ /* h1 页面中所有的h1标签*/
  color: red; /*color 属性 red 属性值*/
  font-size: 50px;
  }
  </style> 我们css的优势之一是 网页和样式的分离-->
   
  <!-- 链接式
  <link rel="stylesheet" type="text/css" href="css/first.css">-->
   
  <!--导入式-->
  <style type="text/css">
  @import "css/first.css";
  </style>
   
  </head>
  <body>
  <!--需求：让页面中所有的h1标签 字体颜色为 红色 字体大小50px-->
  <h1 style="color: pink">这是1级标题</h1> <!--验证优先级-->
  <h1>这是1级标题</h1>
  <h1>这是1级标题</h1>
   
   
   
   
  </body>
  </html>

类选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>类选择器</title>
  <!--需求： 让页面中的class属性值为box的盒子颜色变成红色-->
  <style type="text/css">
  .box{ /*.box 类选择器 选取页面中的class属性值为box的元素*/
  color:red;
  }
   
  /* 我想让2 3 盒子也有这个样式*/
  .boxSize{
  font-size: 52px;
  }
   
  </style>
  </head>
  <body>
   
  <div class="boxSize">这是第1个盒子</div>
  <!--说明这个div同时具有两个class样式-->
  <div class="box boxSize">这是第2个盒子</div>
  <div class="box boxSize">这是第3个盒子</div>
  <div class="box">这是第4个盒子</div>
   
  </body>
  </html>

id选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>id选择器</title>
  <!--在一个页面中id属性值相同的而只能有一个！ 页面id唯一！-->
   
  <style type="text/css">
  /*给id="box2"的元素设置 颜色为 红色*/
  #box2{
  color: red;
  }
  /*给id="box3"的元素设置 字体大小 50px*/
  #box3{
  font-size: 50px;
  }
   
  </style>
  </head>
  <body>
  <div>这是第1个盒子</div>
  <div id="box2">这是第2个盒子</div>
  <div id="box3">这是第3个盒子</div>
  <div>这是第4个盒子</div>
  </body>
  </html>

选择器的优先级

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>选择器的优先级</title>
  <!--需求：
  分别使用 标签，类和id三种选择器 设置div的样式
  -->
  <style type="text/css">
  div{
  color: red;
  }
  .myDiv{
  color: black;
  }
  #name{
  color: pink; /* 页面显示的是 粉色*/
  }
  /*
  id选择器 > 类选择器 > 标签选择器
  */
   
  </style>
   
  </head>
  <body>
  <div id="name" class="myDiv">开始验证优先级</div>
   
  </body>
  </html>
 

元素样式的继承性

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>元素的继承性</title>
  <!-- 需求 ：
  给页面中id为first的div设置样式
  给页面中id为second的div设置样式
   
  -->
   
  <style type="text/css">
  #first{
  color: red;
  }
   
  #second{
  color: pink;
  }
  #third{
  color: greenyellow;
  }
   
  </style>
  </head>
  <body>
  <div id="first"> 第一个
  <div id="second"> 第二个
  <div id="third">
  第三个
  </div>
  </div>
  </div>
  </body>
  </html>

并集选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>并集选择器</title>
  <!-- 需求
  给id="mySpan1" ，class="mySpan2" 标签是div的所有元素
  设置相同的样式！
  -->
  <style type="text/css">
  /* 多个选择器都具有的样式. 每个选择器之间使用,隔开
  多个选择器没有顺序
  */
  #mySpan1,.mySpan2,div{
  color:red;
  }
  </style>
   
   
   
  </head>
  <body>
  <div>第1个盒子</div>
  <div>第2个盒子</div>
  <span id="mySpan1">这是第1个span</span>
  <span class="mySpan2">这是第2个span</span>
  </body>
  </html>

交集选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>交集选择器</title>
  <!-- 交集选择器的规则
  01：标签选择器+id选择器
  02：标签选择器+类选择器
  03.多个选择器直接连着写，不需要有符号隔开
  必须标签选择器在前！-->
   
   
  <style type="text/css">
  /* 需求：
  页面中 class="mySpan2" 并且 标签是div的元素 设置样式
  */
  div.mySpan2{
  color: red;
  }
   
   
   
   
   
  </style>
   
  </head>
  <body>
  <div>第1个盒子</div>
   
  <div class="mySpan2">第2个盒子</div>
   
  <span id="mySpan1">这是第1个span</span>
   
  <span class="mySpan2">这是第2个span</span>
  </body>
  </html>

后代选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>后代选择器</title>
  <!-- 需求：
  改变body中 所有span元素的样式
  后代选择器 中间使用空格隔开
  包含子和孙子等所有的子孙节点
  -->
  <style type="text/css">
  body span{
  color: red;
  }
  </style>
   
   
   
  </head>
  <body>
   
  <div> 儿子div1
  <span>相对于body来说是孙子span1</span>
  </div>
   
  <div>儿子div2
  <span>相对于body来说是孙子span2</span>
  </div>
   
   
  <span>相对于body来说是儿子span1</span>
  <span>相对于body来说是儿子span2</span>
   
   
  </body>
  </html>

子选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>子选择器</title>
  <!-- 需求：
  改变body中 所有子元素是span的样式
  只包含子节点
  -->
  <style type="text/css">
  body>span{
  color: red;
  }
  /*选择body中子元素是div的节点，如果div中还有其他的节点，也会随之改变*/
  body>div{
  color: red;
  }
  </style>
   
   
   
  </head>
  <body>
   
  <div> 儿子div1
  <span>相对于body来说是孙子span1</span>
  </div>
   
  <div>儿子div2
  <span>相对于body来说是孙子span2</span>
  </div>
   
   
  <span>相对于body来说是儿子span1</span>
  <span>相对于body来说是儿子span2</span>
   
   
  </body>
  </html>

相邻兄弟选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>相邻兄弟节点选择器</title>
  <!-- 需求：
  改变id=""second"的div元素后面第一个兄弟节点的样式
  -->
  <style type="text/css">
  #second+span{
  color: red;
  }
  </style>
   
   
   
  </head>
  <body>
   
  <div> 儿子div1
  <span>相对于body来说是孙子span1</span>
  </div>
   
  <div id="second">儿子div2
  <span>相对于body来说是孙子span2</span>
  </div>
   
   
  <span>相对于body来说是儿子span1</span>
  <span>相对于body来说是儿子span2</span>
   
   
  </body>
  </html>

通用兄弟选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>通用兄弟选择器</title>
  <!-- 需求：
  改变id=""second"的div元素后面所有兄弟节点的样式
  -->
  <style type="text/css">
  #second~span{
  color: red;
  }
  </style>
   
   
   
  </head>
  <body>
   
  <div> 儿子div1
  <span>相对于body来说是孙子span1</span>
  </div>
   
  <div id="second">儿子div2
  <span>相对于body来说是孙子span2</span>
  </div>
   
   
  <span>相对于body来说是儿子span1</span>
  <span>相对于body来说是儿子span2</span>
  <span>相对于body来说是儿子span3</span>
  <span>相对于body来说是儿子span4</span>
   
   
  </body>
  </html>

结构伪类选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>结构伪类选择器</title>
  <!-- 不需要在节点上新增额外的id或者class属性 ，需要我们知道节点的位置（下标）-->
  <style type="text/css">
  /*01.改变ul中第一个li的样式
  ul li:first-child{
  color: red;
  }*/
  /*02.改变ul中最后一个li的样式
  ul li:last-child{
  color: red;
  }*/
   
  /*03.改变第3个div的样式
  body中如果第3个元素是div就改变样式，
  否则都没有效果！ 着重于顺序！
  body div:nth-child(3){
  color: red;
  }*/
  /*04.改变页面中第2个span元素的样式
  nth-of-type： 先查询类型 再看顺序
  body span:nth-of-type(2){
  color: red;
  }
   
  body div:nth-of-type(3){
  color: red;
  }
  */
  </style>
   
   
  </head>
  <body>
   
  <div>div1</div>
  <div>div2</div>
  <span>span1</span>
  <div>div3</div>
  <span>span2</span>
   
  <ul>
  <li>第1个列表的第1项</li>
  <li>第1个列表的第2项</li>
  <li>第1个列表的第3项</li>
  <li>第1个列表的第4项</li>
  </ul>
  <ul>
  <li>第2个列表的第1项</li>
  <li>第2个列表的第2项</li>
  <li>第2个列表的第3项</li>
  <li>第2个列表的第4项</li>
  </ul>
  </body>
  </html>

属性选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>属性选择器</title>
   
  <style type="text/css">
  /* 01.改变元素id="first"的样式
  div[id="first"]{
  color: red;
  }*/
  /*02.改变所有id属性元素
  div[id]{
  color: red;
  }*/
  /*03.改变所有id属性值以h开头元素
  div[id^="h"]{
  color: red;
  }*/
  /*04.改变所有id属性值以a结尾元素
  div[id$="a"]{
  color: red;
  }*/
  /*04.改变所有id属性值包含i的元素
  div[id*="i"]{
  color: red;
  }*/
   
   
  </style>
   
   
  </head>
  <body>
  <div id="first">第1个</div>
  <div id="haha">第2个</div>
  <div id="heihei">第3个</div>
  <div>第4个</div>
  <div style="color: red;font-size: 50px">第5个</div>
  </body>
  </html>

8、盒子模型

盒子模型     div+css3

边框  border
border:1px  solid red;

border-color:边框颜色  上右下左四个边
border-top-color:上边框颜色
border-right-color:右边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色

border-width:边框粗细  上右下左四个边  thin  medium  thick 可以是像素
border-top-width
border-right-width
border-bottom-width
border-left-width

border-width:5px 10px ; 上下为5px  左右为10px
border-width:5px 10px  20px ;  上为5px  下为20px  左右为10px

border-style:边框样式
dashed  常用
solid   常用

none
hidden
dotted
double

简写：
border:1px  solid red; 规范写法
       粗细  样式  颜色！

margin:外边距
margin-top
margin-right
margin-bottom
margin-left

margin:5px 10px;上下外边距为5px  左右外边距为10px

margin:0px auto; 网页中的盒子居中显示！
前提：
  01.必须是块元素
  02.固定宽度

padding:内边距
padding-top
padding-right
padding-bottom
padding-left

padding:5px 10px;上下内边距为5px  左右内边距为10px

盒子模型总尺寸=内容宽度+padding+border+margin

box-sizing:设置盒子模型的大小规则

content-box:盒子的总尺寸
border-box:盒子的宽度或者高度 等于  内容的宽度或者高度
inherit:继承父盒子

圆角属性
border-radius:左上 右上  右下 左下

盒子阴影
 box-shadow:inset 10px 10px 1px pink;

inset:阴影类型   内 外
x轴
y轴
阴影半径
阴影颜色

边框border

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>边框border</title>
   
  <!--
  border的常用属性：
  01. 设置边框的颜色 border-color
  02. 设置边框的粗细 border-width
  03. 设置边框的样式 border-style
   
   
  -->
   
  <style type="text/css">
  /*设置盒子的宽高*/
  div{
  height: 50px;
  width: 50px;
  /* 设置盒子的上边框
  border-top-color: red;
  border-top-width: 1px;
  border-top-style: dashed;
  */
  /*同时设置四个边框
  border-color: red;
  border-width: 2px;
  border-style: dashed;
  */
  /*简写方式 虽然没有顺序 但是我们推荐使用 先 粗细 再 样式 最后 颜色！*/
  border: 1px solid red;
  }
  </style>
   
  </head>
  <body>
   
  <div></div>
  </body>
  </html>

外边距margin

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>外边距margin</title>
   
  <style type="text/css">
  *{ /*去掉网页中所有元素的内外边距*/
  margin: 0px;
  padding: 0px;
  }
   
   
  div{
  /*设置盒子的宽高*/
  height: 150px;
  width: 150px;
  /*设置盒子的边框*/
  border: 1px solid red;
  /*设置外边距 元素以左上角为准
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 50px;*/
  /*设置上下20px 左右50px
  设置边距的时候 顺序 是 上右下左！
  margin: 20px 50px;*/
  margin: 20px;
  }
   
  </style>
   
  </head>
  <body>
  <div><img src="../images/b.png" alt="这是一个图片"></div>
  <div><img src="../images/b.png" alt="这是一个图片"></div>
  </body>
  </html>

内边距padding

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>内边距padding</title>
   
  <style type="text/css">
  *{ /*去掉网页中所有元素的内外边距*/
  margin: 0px;
  padding: 0px;
  }
  /*设置大盒子*/
  #bigBox{
  /*设置盒子的宽高*/
  height: 200px;
  width: 200px;
  /*设置盒子的边框*/
  border: 1px solid red;
  /*padding-left:5px ;设置小盒子距离大盒子的左内边距*/
  }
  /*设置小盒子*/
  #image{
  /*设置盒子的宽高*/
  height: 150px;
  width: 150px;
  /*设置盒子的边框*/
  border: 1px dashed pink;
  margin-left: 5px;
  }
   
  </style>
   
  </head>
  <body>
  <div id="bigBox"> <!--大盒子-->
  <div id="image"> <!--小盒子-->
  <img src="../images/b.png" alt="这是一个图片"><!--内容-->
  </div>
  </div>
  </body>
  </html>

网页居中

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>网页居中</title>
  <!--
  网页居中的必要条件：
  01.必须是一个块元素
  02.必须设置固定宽度
  -->
  <style type="text/css">
  *{ /*去掉网页中所有元素的内外边距*/
  margin: 0px;
  padding: 0px;
  }
  /*设置大盒子*/
  div{
  height: 200px; /*设置盒子的宽高*/
  width: 200px;
  /*设置盒子的边框*/
  border: 1px solid red;
  /*通过外边距设置 居中*/
  margin:0px auto;
  }
   
  </style>
   
  </head>
  <body>
   
  <div> <!--大盒子-->
  </div>
   
  </body>
  </html>

盒子的尺寸boxsizing

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>盒子的尺寸boxsizing</title>
   
  <style type="text/css">
  *{
  margin: 0px;
  padding: 0px;
  }
  #father{/* 大盒子*/
  width: 100px;
  height: 100px;
  border: 1px solid red;
  box-sizing: border-box;
  }
   
  #son{/* 小盒子*/
  width: 40px;
  height: 40px;
  border: 1px solid yellowgreen;
  /* box-sizing: content-box;默认值。显示盒子总尺寸*/
  /* box-sizing: border-box; 盒子的高度和宽度就是内容的高度和宽度*/
  /*如果大盒子 设置了 盒子的尺寸 我们小盒子 可以适应大盒子尺寸*/
  box-sizing: inherit;
  }
   
   
  </style>
  </head>
  <body>
  <div id="father">
  <div id="son"></div>
  </div>
  </body>
  </html>

圆角属性

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>圆角属性</title>
   
  <style type="text/css">
  div{
  height: 50px;
  width: 50px;
  border: 1px solid red;
   
  border-radius: 5px 20px;/* 左上 右下 5px 右上 左下 20px*/
  /*设置圆角属性 简写 默认是 左上 右上 右下 左下 顺时针方向
  border-radius: 5px;*/
  }
   
  </style>
  </head>
  <body>
   
  <div></div>
  </body>
  </html>

设置半圆

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>设置半圆</title>
  <style type="text/css">
  div{
  background: pink;
  margin: 20px;
  }
  div:nth-of-type(1){
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;/* 左上和右上*/
  }
   
  div:nth-of-type(2){
  width: 100px;
  height: 50px;
  border-radius: 0 0 50px 50px ;/* 左下和右下*/
  }
  div:nth-of-type(3){
  width: 50px; /*高度和宽度需要调整*/
  height: 100px;
  border-radius:50px 0 0 50px ;/* 左上和左下*/
  }
  div:nth-of-type(4){
  width: 50px;
  height: 100px;
  border-radius: 0 50px 50px 0 ;/* 右上和右下*/
  }
   
   
   
  </style>
   
  </head>
  <body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  </body>
  </html>

设置圆形和扇形

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>设置圆形和扇形</title>
  <style type="text/css">
  div{
  background: pink;
  margin: 20px;
  }
  /*设置圆形*/
  div:nth-of-type(1){
  width: 50px;
  height: 50px;
  border-radius: 50px;
  }
   
  div:nth-of-type(2){
  width: 50px;
  height: 50px;
  border-radius: 50px 0 0 0;/* 左上*/
  }
   
  div:nth-of-type(3){
  width: 50px;
  height: 50px;
  border-radius: 0 50px 0 0;/* 右上*/
  }
   
  div:nth-of-type(4){
  width: 50px;
  height: 50px;
  border-radius: 0 0 50px 0;/* 右下*/
  }
   
  div:nth-of-type(5){
  width: 50px;
  height: 50px;
  border-radius: 0 0 0 50px;/* 左下*/
  }
   
   
   
  </style>
   
  </head>
  <body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  </body>
  </html>

盒子阴影

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>盒子阴影</title>
  <style type="text/css">
  div{
  height: 50px;
  width: 50px;
  border: 1px solid red;/*
  box-shadow: 10px 10px 1px pink; 外阴影*/
  box-shadow:inset 10px 10px 10px pink; /*内阴影*/
  }
   
  </style>
   
  </head>
  <body>
  <div></div>
  </body>
  </html>

9、定位

定位：  position
  1.static 默认值  没有定位
  2.relative 相对定位，参照物是自身原来的位置
      01.  参照物是自身原来的位置
      02.  不会脱离标准文档流，对父级盒子和相邻的盒子不会产生影响
      03.  自身之前的位置会保留

  3.absolute 绝对定位，参照物是当前盒子的父级
      01.参照物是当前盒子的父级
      02.父级必须是设置了定位（一般父级都是相对定位）
      03.如果找不到祖先元素，以浏览器为参照物
      04.会脱离标准文档流，
          如果相邻的盒子没有设置定位属性，会产生影响，
          如果相邻的盒子设置定位属性，不会产生影响，
      05.自身之前的位置不会保留

  4.fixed    固定定位，参照物是浏览器

 顺序离我们最近的是
 fixed > relative  > absolute > static

z-index:

设置相同层面的元素  堆叠顺序   默认值 是0   值越大  离我们越近

定位属性

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>定位属性</title>
  <!--
  position
  01.static ：默认，没有定位！ 离我们最远
  02.absolute：绝对定位
  001.脱离了标准文档流
  002.位置发生变化之后，位置不会被保留!后续元素会顶替之前的位置
  003.参照离这个设置了定位属性的最近的父级元素！如果没有 就以浏览器为准
  03.relative：相对定位
  001.相对于自身原来的位置
  002.没有脱离标准文档流
  003.位置发生变化之后，位置会被保留
  04.fixed：固定定位
  相对于浏览器
  -->
   
  <style type="text/css">
  *{
  margin: 0px;
  padding: 0px;
  }
   
  div{
  height: 50px;
  width: 50px;
  }
  #box{ /*大盒子*/
  height: 300px;
  width: 300px;
  border: 2px solid red;
  }
   
   
   
  #box div:nth-of-type(1){
  background: red;
  /*绝对定位*/
  position: absolute;
  left: 20px; /* 距离父级元素 左边20px*/
  }
   
  #box div:nth-of-type(2){
  background: orange;
  position:static ;/*默认值*/
  }
   
  #box div:nth-of-type(3){
  background: pink;
  /*相对定位*/
  position: relative;
  bottom:20px;
  }
   
   
   
  #box div:nth-of-type(4){
  background: red;
  /*固定定位*/
  position: fixed;
  left: 30px;
  top: 30px;
  }
   
  #box div:nth-of-type(5){ /*如果两个盒子设置的定位属性相同，默认按照html结构元素顺序 后面会覆盖前面*/
  background: greenyellow;
  /*固定定位
  position: fixed;
  left: 30px;
  top: 30px;*/
  }
   
  /*层级关系
  固定定位 > 相对定位 > 绝对定位 > 默认static
  */
   
  </style>
   
  </head>
  <body>
  <div id="box">
  <div>第1个盒子</div>
  <div>第2个盒子</div>
  <div>第3个盒子</div>
  <div>第4个盒子</div>
  <div>第5个盒子</div>
  </div>
  </body>
  </html>

z-index属性

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>z-index属性</title>
   
  <style type="text/css">
  *{
  margin: 0px;
  padding: 0px;
  }
  li{
  list-style: none;
  }
  #content{
  width: 350px;
  height: 300px;
  border: 1px solid red;
  margin: 0px auto;
  }
   
  .tipBg{ /*带背景的*/
  background: gray; /*可以使用 rgba*/
  opacity: 0.5;
  filter: alpha(opacity=50);/*解决低版本IE兼容性*/
  }
  .tipBg,.tipText{ /*都需要跑到 图片上去*/
  position: absolute; /* 都是绝对定位*/
  height: 25px;
  line-height: 25px;
  width: 331px; ;
  top: 102px;
  }
   
  .tipText{
  z-index:1;/*设置相同层面的元素 堆叠顺序 默认值 是0 值越大 离我们越近*/
  text-align: center;
  }
  </style>
  </head>
  <body>
  <div id="content">
  <ul>
  <li><img src="../images/maple.jpg" alt="香山红叶" /></li>
  <li class="tipText">京秋魅力•相约共赏香山红叶</li>
  <li class="tipBg"></li>
  <li>时间：11月16日 星期六 8:30</li>
  <li>地点：朝阳区西大望路珠江帝景K区正门前集合</li>
  </ul>
  </div>
  </body>
  </html> 
				


				
时间： 2024-11-01 14:39:36