HTML5+CSS3基础

项目目录

1.在index.html里引入所有外部样式 ，完成SEO三大标签，添加ico.

2.完成base.css样式，添加common.css样式里的版心

3.写indext.html布局和common.css样式（头部和尾部）

4.写indext.html布局和index.css样式（中间部分）

emmet语法

<!-- .demo$*3-->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
<!-- 生成的标签里面默认显示几个文字  div{文字}*3-->
    <div>我喜欢学习</div>
    <div>我喜欢学习</div>
    <div>我喜欢学习</div>
<!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

CSS书写顺序 

（浏览器执行的效率更高）

1.浮动   display

2.盒子模型：margin border padding 宽高 背景颜色

3.文字样式

扫描二维码关注公众号，回复： 14964692 查看本文章

HTML标签

hr 水平线标签

strong 加粗（表示的强调语义更强烈）

ins 下划线（表示的强调语义更强烈）

em 倾斜（表示的强调语义更强烈）

del 删除线（表示的强调语义更强烈）

图像标签

//  alt 替换文本 图像显示不出来的时候用文字替换
//  title 提示文本 鼠标放到图像上,提示的文字
//  width   height    border
<img src="img.jpg" alt="这是嘛" title="思密达"  width="500" border="15"/>

HTML5新增音频标签

//  controls 显示播放的控件
//  autoplay 自动播放（部分浏览器不支持）
//  loop 循环播放
<audio src="media/music.mp3" autoplay controls></audio>

HTML5新增视频标签

视频标签目前支持的三种格式：MP4   WebM   Ogg

//  autoplay  自动播放（谷歌浏览器需配合muted实现静音播放）
video src="media/mi.mp4" autoplay muted controls loop="loop" poster="media/mi9.jpg"></video>

链接

// 1.外部链接
// target 打开窗口的方式  _self 当前窗口打开页面(默认)  _blank 新窗口打开页面
<a href="http://www.qq.com" target="_blank"> 腾讯</a>

// 2.内部链接: 网站内部页面之间的相互链接
<a href="gongsijianjie.html" target="_blank">公司简介</a>

// 3.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式
<a href="img.zip">下载文件</a>

// 4.网页元素的链接
<a href="http://www.baidu.com"><img src="img.jpg"/></a>

列表

//  无序列表  
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
    </ul>

//  有序列表
    <ol>
        <li>刘德华</li>
        <li>刘若英</li>
        <li>王心凌</li>
    </ol>

//  自定义列表
    <dl>
        <dt>关注我们</dt>    //dt 主题
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>

表格

//  tr  表格每行
//  th  表头单元格 用于表格第一行，表示一列小标题，默认内部文字加粗居中显示
//  td  表格单元格  包裹内容
//  caption  表格大标题   默认表格顶部居中显示
//  thead  表格头部
//  tbody  表格主题
//  tfoot  表格底部
   <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
      <caption>
        歌星排名表
      </caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>刘德华</td>
          <td>男</td>
          <td>56</td>
        </tr>
        <tr>
          <td>张学友</td>
          <td>男</td>
          <td>58</td>
        </tr>
        <tr>
          <td>郭富城</td>
          <td>男</td>
          <td>51</td>
        </tr>
        <tr>
          <td>黎明</td>
          <td>男</td>
          <td>57</td>
        </tr>
      </tbody>       
    </table>

//  合并单元格
//  rowspan 跨行合并
//  colspan 跨列合并
<table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
           
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
           
            <td></td>
            <td></td>
        </tr>
    
    </table>

表单

<form action="xxx.php" method="get">
        <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">  
<br> 
        <!-- placeholder 占位符(提示信息) -->
        <input type="text" placeholder="请输入用户名" />
<br>
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  
<br> 
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">  
<br> 
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
<br> 
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> 
<br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        <!-- multiple 多文件选择 -->
        上传头像:  <input type="file" multiple>
    </form>

   select 下拉表单

<form>
      籍贯:
      <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
      </select>
    </form>

textarea文本域

    <form>
      今日反馈:
      <!-- cols文本域可见宽度  rows 文本域可见行数-->
      <textarea cols="50" rows="5">这个反馈留言是textarea来做的 </textarea>
    </form>

label标签

<label for="text"> 用户名:</label> <input type="text" id="text" >

HTML5语义化标签

字符实体

内部样式表（小案例）

<style>
div {
     color: pink;
}
</style>

<body>
    <div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>
</body>

外部样式表（项目中）

<link rel="stylesheet" href="style.css">
 
<body>
    <div>来呀~快活呀,反正有大把时间...</div>
</body>

行内样式表（配合JS使用）

<body>
  <p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
</body>

标签选择器

<style>
p {
   color: green;
}
</style>
 
<body>
    <p>男生</p>
</body>

类选择器

<style>
/* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/
.red {
     color:  red;
     }
.font {
     font-size: 35px;
     }
</style>
 
<body>
     <div class="red font">刘德华</div>
</body>

id选择器

<style>
/* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
     #pink {
         color: pink;
     }
</style>

<body>
    <div id="pink">迈克尔·杰克逊</div>
</body>

通配符选择器

<style>
/* * 这里把 html  body  div  span  li 等等的标签都改为了红色 */
     * {
         color: red;
     }
</style>

<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>

文字基本样式

// 字体大小
font-size: 16px;  

// 700 字体加粗;  400 字体正常
font-weight: 700; 

// italic 字体倾斜； normal 让倾斜的字体不倾斜
font-style: italic; 

// 字体类型 
font-family: '微软雅黑';  
 
// 字体复合属性
font: font-style  font-weight  font-size/line-height  font-family; 
font: italic 700 16px 'Microsoft yahei';  

// 字体颜色
color: rgb(255, 0, 255);

// 文字对齐 
text-align: center; 

// 行高
line-height: 25px;

// 装饰文本
text-decoration: underline;  // 下划线
text-decoration: line-through;  // 删除线
text-decoration: overline;  // 上划线 
text-decoration: none;  // 取消默认的下划线

// 文本缩进  2em 缩进当前元素 2个文字大小的距离   
text-indent: 2em;

//  文字阴影
//  text-shadow: h-shadow v-shadow blur color;
//  h-shadow 必需 水平阴影的位置 允许负值
//  v-shadow 必需 垂直阴影的位置 允许负值
//  blur  可选 模糊的距离
//  color 可选 阴影的颜色
text-shadow: 5px 5px 6px green;

背景基本样式

//  背景颜色
background-color: pink;

//  背景图片
background-image: url(images/logo.png);

//  背景平铺
/* 1.背景图片不平铺 */
background-repeat: no-repeat;
/* 2.默认的情况下,背景图片是平铺的 */
background-repeat: repeat; 
/* 3. 沿着x轴平铺 */
background-repeat: repeat-x; 
/* 4. 沿着Y轴平铺 */
background-repeat: repeat-y;
/* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */

//  背景位置
/* background-position:  方位名词; */
background-position: center top; 
/* 20px 50px; x轴一定是 20  y轴一定是 50 */
background-position: 20px 50px; 
/* 混合模式 水平是居中对齐  垂直 y是 20 */
background-position: center 20px;

//  背景图片固定  
background-attachment: fixed;

//  背景半透明
background: rgba(0, 0, 0, .3);

//  背景图片大小
background-size: 宽度 高度;
background-size: contain; // 包含 将图片等比例缩放，直到不会超出盒子的最大（盒子可能留白）
background-size: cover; // 覆盖 将图片等比例缩放，直到填满整个盒子（图片可能显示不全）

//  复合写法
//  background:color image repeat position/size;
background: black url(images/bg.jpg) no-repeat fixed center top;

颜色取值

标签居中

margin: 0 auto;

img 、文字 、 input 需要居中时，是给他们的父元素添加text-align: center;

 复合选择器

1.后代选择器 (选择器1 选择器2{css})

  <style>  
      ul li {
        color: pink;
      }
  </style>

    <ul>
      <li>我是ul 的孩子</li>
      <li>我是ul 的孩子</li>
      <li>我是ul 的孩子</li>
    </ul>

2.子元素选择器 (选择器1>选择器2{css})

    <style>
        .nav>a {
            color: red;
        }
    </style>

    <div class="nav">
         // 只包括儿子
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>

并集选择器(选择器1,选择器2{css})

    <style>
    // 约定的语法规范,我们并集选择器喜欢竖着写  
    // 一定要注意,最后一个选择器 不需要加逗号  
        div,
        p,
        .pig li {
            color: pink;
        }
    </style>

    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>

交集选择器(选择器1选择器2{css})

    <style>
     p.box {
            color: pink;
        }
    </style>
     
    <p class="box">这是p标签:box</p>
    <p>pppp</p>
    <div class="box">这是div标签:box</div>

伪类选择器(选择器：hover{css})

   <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>

<a href="#">小猪佩奇</a>

 元素显示模块转换

行内块元素（input  textarea button select ...）：一行内显示多个，加高宽生效

块级元素可以嵌套：文本、块级元素、行内元素、行内块元素【p标签不可以嵌套div、p、h h等块级元素】

a标签可以嵌套任何元素【a标签不能嵌套a标签】

行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 

    <style>
      a {
        width: 150px;
        height: 50px;
        background-color: pink;
        /* 把行内元素 a 转换为 块级元素 */
        display: block;
      }

      div {
        width: 300px;
        height: 100px;
        background-color: purple;
        /* 把 div 块级元素转换为行内元素 */
        display: inline;
      }

      span {
        width: 300px;
        height: 30px;
        background-color: skyblue;
        display: inline-block;
      }
    </style>

    <a href="#">把行内元素 a 转换为 块级元素</a>
    <a href="#">把行内元素 a 转换为 块级元素</a>
    <div>把 div 块级元素转换为行内元素</div>
    <div>把 div 块级元素转换为行内元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>

CSS特性--继承性

子元素默认继承父元素样式的特点 :color、font-style、font-weight、font-size、font-family、text-indext、text-align、line-heught...（文字控制属性都可以继承）

CSS特性--优先级

优先级公式：继承<通配符选择器<标签<类<id<行内样式<！important

盒子模型

content（内容）、padding（内边距）、border（边框）、margin（外边距）

给盒子添加box-sizing:border-box;属性，浏览器就会自动计算并减去盒子多余大小

//  边框的复合写法    
//  边框的粗细  一般情况下都用 px
//  边框的样式  solid 实线边框  dashed 虚线边框  dotted 点线边框
//  边框的颜色
border: 5px solid pink;

//  内边距复合写法(简写)
//  四值：上  右  下  左
padding: 5px 10px 20px 30px; 
//  三值：上  左右  下 
padding: 10px 20px 30px; 
//  两值：上下  左右  
padding: 10px 20px;  

// 盒子阴影
// box-shadow: h-shadow v-shadow blur spread color inset;
//  h-shadow  必选 水平偏移量，可以负值
//  v-shadow  必选 垂直偏移量，可以负值
//  blur  可选 模糊度
//  spread 可选 阴影扩大
//  color 可选 阴影颜色
//  inset 可选 将阴影改为内部阴影 默认外阴影
box-shadow: 10px 10px 10px 4px pink;

CSS3新增结构伪类选择器

 

 伪元素选择器before和after（必须设置content属性）

     <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        div::before {
            /* 这个content是必须要写的 */
            content: '我';
        }
        div::after {
            content: '小猪佩奇';
        }
    </style>
 
    <div>
        是
    </div>

浮动float

【浮动的元素不能通过margin: 0 auto;或者text-align: center;  可以设置在父元素里】

常见标准流排版：

块级元素：从上往下，垂直布局，独占一行

行内元素、行内块元素：从左往右，水平布局，自行折行

浮动的特性--脱标

   <style>
        /* 设置了浮动（float）的元素会：
        1. 脱离标准普通流的控制（浮）移动到指定位置（动）。
        2.浮动的盒子不在保留原先的位置 */
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(0, 153, 255);
        }
    </style>

<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

 清除浮动（清除浮动带来的影响）

方法：1.给父元素设置overflow:hidden【方便】

     .main{
          overflow:hidden;
      }

      <div class="main">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
      </div>

           2.给父元素设置高度 【新闻列表、京东推荐模块不能固定父元素高度】

           3.额外标签法:给父元素内容后面加一个块级元素，在块级元素里设置clear:both

.clearfix {
//清除左右两侧浮动的影响
      clear:both;
}

      <div class="main">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
        <div class="clearfix"></div>
      </div>

          4. 单伪元素清除法：

 // 基本写法
.clearfix {
     content:'';
     display:block;
     clear:both;
 }
      <div class="main clearfix">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
      </div>

          5. 双伪元素清除法：

//  clearfix::before作用：解决外边距塌陷问题
.clearfix::before,
.clearfix::after {
     content:'';
     display:table;
 }
.clearfix::after {
     clear:both;
}

      <div class="main clearfix">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
      </div>

定位position

【position与left、right、top、bottom配合使用】

1.相对定位relative：相对于自己之前的位置进行移动

2.绝对定位absolute：相对于非静态定位的父元素进行定位移动【子绝父相】【绝对定位不能使用 margin: auto;居中】

 确定高和宽，让盒子水平垂直居中

    <style>
      .box {
        /* 确定高和宽，让盒子水平垂直居中 */
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -150px;

        width: 300px;
        height: 300px;
        background-color: peru;
      }
    </style>
   
  <body>
    <!-- 确定高和宽：让盒子水平垂直居中 -->
    <div class="box"></div>
  </body>

不确定高和宽(高和宽可以随意改变)，让盒子水平垂直居中

    <style>
       .hezi {
        /* 不确定高和宽(高和宽可以随意改变)，让盒子水平垂直居中 */
        position: absolute;
        top: 50%;
        left: 50%;
        //  位移
        transform: translate(-50%, -50%);

        width: 500px;
        height: 300px;
        background-color: pink;
      }
    </style>
  
  <body>
    <!-- 不确定高和宽：让盒子水平垂直居中 -->
    <div class="hezi"></div>
  </body>

3.固定定位 fixed：相对于浏览器进行定位移动

4.粘性定位sticky

元素层级问题

【z-index必须配合定位才能生效】 

1.不同布局方式元素的层级关系：标准流<浮动<定位

2.不同定位之间的层级关系：相对、绝对、固定默认为层级相同,在html中写在下面的元素会覆盖上面的元素

<style>
   .xiongda {
            //  z-index必须配合定位才能生效
            position: absolute;
            top: 30;
            left: 30;
            width: 200px;
            height: 200px;
            background-color: red;

            // z-index: 整数; （默认值为0）  取值越大，显示顺序越靠上
            z-index: 1;
           }
    
   .xionger {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: green;
        }
</style>

//  默认的情况下，定位的盒子，写在下面的元素会覆盖上面的元素
<div class="xiongda">熊大</div>
<div class="xionger">熊二</div>

CSS定位装饰

//  vertical-align  用来定义行内元素的基线(baseline)相对于该元素所在行的基线的垂直对齐
//  baseline (默认值)将支持valign特性的对象的内容与基线对齐
//  sub 垂直对齐文本的下标
//  super 垂直对齐文本的上标
//  top 将支持valign特性的对象的内容与对象顶端对齐
//  text-top 将支持valign特性的对象的文本与对象顶端对齐
//  middle 将支持valign特性的对象的内容与对象中部对齐
//  bottom 将支持valign特性的对象的文本与对象底端对齐
//  text-bottom 将支持valign特性的对象的文本与对象底端对齐
/* 让图片和文字垂直居中 */
vertical-align: middle;

//  cursor 光标类型
//  default (默认值) 通常是箭头
//  pointer  小手效果  提示用户可以点击
//  text  工字型 提示用户可以选择文字
//  move   十字光标 提示用户可以移动
cursor:default ;

//  border-radius 边框圆角
//  四值：左上  右上  右下  左下
border-radius: 5px 10px 20px 30px; 
//  三值：左上   右上、左下   右下
border-radius: 10px 20px 30px; 
//  两值：左上、右下   右上、左下 
border-radius: 10px 20px; 
//  一个值： 表示四个角相同 
border-radius: 20px;  
/* 50% 就是宽度和高度的一半 */
border-radius: 50%;

//  显示隐藏元素之overflow 溢出部分显示效果
/* （默认值）溢出的部分可见 */
overflow: visible;
/* 溢出的部分隐藏起来 */
overflow: hidden;
/* scroll 溢出的部分显示滚动条  不溢出也显示滚动条 */
overflow: scroll; 
/* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
overflow: auto; 

//  显示隐藏元素之display   不占位隐藏
display: none;

//  显示隐藏元素之visibility   占位隐藏
visibility: hidden;

//  opacity  元素整体透明度  整个元素都会透明，包括里面的内容
//  0-1之间的数字  1表示完全不透明  0表示完全透明
opacity: 0.3;

精灵图

   <style>
      span {
        display: inline-block;
        width: 100px;
        height: 112px;
        background: url(images/精灵图.jpg) no-repeat;
        /* background-position: x y;  */
        /* 水平方向位置(往左是负值)  垂直方向位置(往上是负值) */
        background-position: -493px -276px;
      }
    </style>
  
    <span></span>

过渡

<style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            transition: all 0.5s;
            /* 如果想要多个属性都变化，属性写all就可以了 */
            /* 谁做过渡，给谁加 */
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>

<div></div>