html5+css3 笔记

入门知识导读


html5+css3 笔记_第1张图片
image.png

本地使用hbuilder 内置服务器访问 原理


html5+css3 笔记_第2张图片
image.png

h5 与 h4 区别:
1.h5 比h4 页面 组成要简单明了
2.h5 支持的标签比 h4 要多 比如 video 等


html5+css3 笔记_第3张图片
h5页面

html5+css3 笔记_第4张图片
h4页面

组面组成 两个部分 0
head 头部 :内涵
body 身子 :展示部分


html5+css3 笔记_第5张图片
image.png

body中的标签

标题标签

当出现错误时不同的浏览器 翻译出来的 页面不同

html5+css3 笔记_第6张图片
image.png

html5+css3 笔记_第7张图片
image.png

换行标签

浏览器翻译 html过程是 从上到下从左到右

段落标签

实现自然段 效果

横线

(标题与文章内容的分割线)

加粗与斜体

html5+css3 笔记_第8张图片
image.png

图像标签

超链接标签

卖女孩的小火柴
属性
href : 链接地址
target:目标 当前页跳转 target="_self" / 新打开一个页面 target="_blank"

字符实体 &标签 帮我们进行转义

比如 空格  

body 设置背景颜色 使用bgcolor 属性

CSS 层叠样式表

html-body 相当于赤身裸体的人
CSS 相当于衣服
用法 head标签中 写一个         

标记选择器.class1

  

标记选择器.class2

  

标记选择器.class3

  

标记选择器.class4

  

标记选择器.class5

  

使用于别的标记

     
html5+css3 笔记_第16张图片
image.png

并集选择器

image.png




Title
  
    
  
     

集体声明h1

  

集体声明h2

  

集体声明h3

  

集体声明h4

  
集体声明h5
  

集体声明p1

  

集体声明p2

  

集体声明p3

     
html5+css3 笔记_第17张图片
image.png

css 外部样式引入 两种方法

1. 导入外部样式表 @import

common.css

@charset "gb2312";  
/* CSS Document */

#first{font-size:16px; color: green;}
#second{font-size:24px;color: red;}




导入外部样式表



  

北京欢迎你

北京欢迎你,有梦想谁都了不起!

有勇气就会有奇迹。

北京欢迎你,为你开天辟地

流动中的魅力充满朝气。

html5+css3 笔记_第18张图片
显示结果

2。链接外部样式表 link





链接外部样式表



  

北京欢迎你

北京欢迎你,有梦想谁都了不起!

有勇气就会有奇迹。

北京欢迎你,为你开天辟地

流动中的魅力充满朝气。

行内样式 在标签内使用style属性 (特殊情况才使用)




    
    Title
    


    

hello css 标签选择器

标签选择器

优先级顺序对比

link外链 与 style 看上下位置 下面的覆盖上面的
在style里面  普通选择器 都是下面的 覆盖上面的
      @import url("css/common1.css"); 无论在上还是在下优先级最低
行内引用 sytle 优先级最高 
    标签选择器 <类选择器 < id选择器
html5+css3 笔记_第19张图片
image.png

image.png

css 中的继承关系 修饰父类时 子类会继承父类中的特点





链接外部样式表




    撒旦发生的
  

北京欢迎你

北京欢迎你,有梦想谁都了不起!

有勇气就会有奇迹。

北京欢迎你,为你开天辟地

流动中的魅力充满朝气。

html5+css3 笔记_第20张图片
继承关系上下一片红

css 修饰字体
font-family:字体
font-size: 大小
font-style:字体风格
font-wight:字体粗细
font :可以只是所有的属性


image.png
p {font:oblique bold 20px "楷体";}

text 文本修饰
text-align: 文本位置
text-decoration: 文本修饰 横线

.p1 {
            text-decoration: none;
        }
        .p2{
            text-decoration: underline;
        }
        .p3{
            text-decoration: overline;
        }
        .p4{
            text-decoration: line-through;
        }
        .p5{
            text-decoration: blink;
        }
html5+css3 笔记_第21张图片
image.png

伪类:




    
    Title
    


你好啊

产业融入教育

背景颜色 background-color

列表去掉圆点 list-style

 li{

            list-style: none;
        }

引用外部 漂亮的字体
http://www.fontawesome.com.cn/

image.png

div+css 盒式布局

html5+css3 笔记_第22张图片
image.png

width : 是 content 的宽度
height: 是 content 的高度

border :边框
padding :内边距
margin :外边距

而以页面中 div实际宽度 或者高度 计算
realwidth=width+2border +2padding
realheight=height+2border+2padding

html5+css3 笔记_第23张图片
image.png


    
        
        div 测试   div+css 布局
        
    
    
            
            
        
你好1
你好2
你好3
html5+css3 笔记_第24张图片
边界实际宽度计算

设置
border -width: 边框宽度
border-color : 边框颜色 (上 右 下 左 )



    
        
        div 测试   div+css 布局
        
    
    
        
        
你好4 border-color
html5+css3 笔记_第25张图片
image.png


    
        
        div 测试   div+css 布局
        
    
    
        
你好4 border-color
html5+css3 笔记_第26张图片
image.png

border-color 结论为:
一个颜色 : 上下左右一致
两个颜色 : 上下(第一个颜色)左右(第二个颜色)
三个颜色 : 上 (第一个颜色) 下(第二个颜色) 左右(第三个颜色)
四个颜色: 上 右 下 左

内外边框

参考系的问题
如果 以a6 为参考系 a6与a5的距离是 a6的外边距 在a6 当中设置margin
如果 以a5 为参考系 a5 与a5 的距离是 a5的内边距 在a5 当中设置 padding



    
        
        div 测试   div+css 布局
        
    
    

        
html5+css3 笔记_第27张图片
image.png

页面居中对齐 margin 0 auto




   
   Title
   


   
我要水平居中对齐

元素默认值

body标签: 默认margin=8px
p标签 : 默认 margin- top/bottom=16px
h1标签:默认 margin- top/bottom=21.440px
ul标签: 默认 margin- top/bottom=16px ,padding left=40px


html5+css3 笔记_第28张图片
通过F12 使用开发者工具查看 h1标签 属性

元素分类

行级元素

1.inline内嵌元素
,,,



    
        
        内嵌元素的特性
        

        
    
    
        
        
你好啊啊实打实的阿发士大夫
你好啊啊实打实的阿发士大夫
html5+css3 笔记_第29张图片
image.png

block 块级元素

块元素的特性:
1.默认独占一行显示
2.没有宽度时,默认撑满一排
3.支持所有css命令



~


    -

    • -

    • -
      -

      内联块元素—代表元素
      img
      inline-block的特点:
      元素在一行显示
      支持宽高
      没有宽度的时候内容撑开宽度

                  既具备 inline 的 一行显示多个
                  也具备 block 改变宽高  
                  所以img标签很特殊 叫做 inline-block
      
      
      
          
              
              块级元素 
              
              
              
              
          
          
              
              
              
              
          
      
      
      
      html5+css3 笔记_第30张图片
      inline-block

      display 1.显示与隐藏 2块级与行级元素的转变

      @charset "utf-8";
      /* CSS Document */
      body,h1, p, div {
          margin:0px;
          padding:0px;
      }
      body {
          font-size:12px;
          line-height:25px;
      }
      #music {
          width:260px;
      }
      #music h1 {
          font-size:14px;
          text-align:center;
          line-height:35px;
      }
      #music p {
          text-align:right;
          color:#6E6E6E;
          border-bottom:1px #7F7F7F dashed;
          line-height:28px;
          margin-bottom:10px;
      }
      #music span {
          display:block;
          padding-left:5px;
      }
      #show h2{
          color:red;
      }
      #show:hover div{
          display:inline;
      }
      #music div {
          padding-left:5px;
      }
      
      #music .song-2{display:none}
      
      
      
      
      
      最炫民族风
      
      
      
      

      最炫民族风

      演唱:凤凰传奇

      苍茫的天涯是我的爱 绵绵的青山脚下花正开 什么样的节奏是最呀最摇摆 什么样的歌声才是最开怀 弯弯的河水从天上来 流向那万紫千红一片海

      显示全部

      火辣辣的歌谣是我们的期待
      一路边走边唱才是最自在
      我们要唱就要唱得最痛快

      图片背景

      背景图像
      background-image属性


      image.png

      背景重复方式 :默认是重复的
      background-repeat属性


      html5+css3 笔记_第31张图片
      image.png

      背景定位
      background-position属性


      image.png

      image.png

      image.png

      image.png
      
      
      
          
          Title
          
      
      
      
      摆渡人摆渡人摆渡人摆渡人 摆渡人摆渡人摆渡人摆渡人

      表格 table


      普通列
      标题列
      colspan="2" 占两列
      rowspan="2" 占两行

      
      
      
          
          Title
          
      
      
      
          
          
      
      Name Telephone 为空
      Bill Gates 555 77 854 555 77 855
      image.png

      关于table 的 css 修饰

      
      
          
              
              
              
              
              
          
          
          
          
              
      考试成绩表
      姓名语文英语 数学
      小明80 80
      小红 90 90 90
      小杰 100 100 100
      平均 90 90 90
      html5+css3 笔记_第32张图片
      border-collapse: collapse

      如果不设置 边框坍塌效果border-collapse: collapse


      html5+css3 笔记_第33张图片
      image.png
      html5+css3 笔记_第34张图片
      image.png
      
      
      
          
          Title
          
      
      
      
      

      表单

      请选择您的性别:

      请选择你的爱好: 睡觉 吃饭 足球 篮球 乒乓球 打豆豆

      请选择您的家乡:

      请输入您的账户名:

      请输入您的密码:

      请输入您的建议和要求:

      html5+css3 笔记_第35张图片
      image.png

      position

      html5+css3 笔记_第36张图片
      image.png

      相对位置 relative

      css文件

      @charset "gb2312";
      /* CSS Document */
      
      div {
          width: 300px;
          margin:10px;
          padding:5px;
          font-size:12px;
          line-height:25px;
      }
      #father {
          width: 500px;
          margin: 50px auto;
          border:1px #666 solid;
          padding:10px;
      }
      #first {
          background-color:#FC9;
          border:1px #B55A00 dashed;
          position:relative;
          top:10px;
          left:50px;
      }
      #second {
          background-color:#CCF;
          border:1px #0000A8 dashed;
      }
      #third {
          background-color:#C5DECC;
          border:1px #395E4F dashed;
      }
      
      

      html文件

      
      
      
          
      position属性
      
      
      
      
      第一个盒子
      第二个盒子
      第三个盒子
      html5+css3 笔记_第37张图片
      image.png

      absulote 绝对定位

      脱离文档流 以最近的父节点来进行定位 如果没有 祖先 节点 以浏览器 左上角为坐标原点 定位。

      把父类 position设置为 static时 不可以约束 其子元素 的绝对参考系位置
      css

      @charset "gb2312";
      /* CSS Document */
      
      div {
          width: 300px;
          margin:10px;
          padding:5px;
          font-size:12px;
          line-height:25px;
      }
      #father {
          width: 500px;
          margin: 50px auto;
          border:1px #666 solid;
          padding:10px;
      }
      #first {
          background-color:#FC9;
          border:1px #B55A00 dashed;
          position: absolute;
          top:10px;
          left: 50px;
      }
      #second {
          background-color:#CCF;
          border:1px #0000A8 dashed;
      }
      #third {
          background-color:#C5DECC;
          border:1px #395E4F dashed;
      }
      
      

      html

      
      
      
      
      position属性
      
      
      
      
      第一个盒子
      第二个盒子
      第三个盒子

      父子关系· 看 父类 的 position
      可以约束位置

      @charset "gb2312";
      /* CSS Document */
      
      div {
          width: 300px;
          margin:10px;
          padding:5px;
          font-size:12px;
          line-height:25px;
      }
      #father {
          width: 500px;
          margin: 50px auto;
          border:1px #666 solid;
          padding:10px;
          position: relative;  /*absolute与relative可以约束 */   
          
      }
      #first {
          background-color:#FC9;
          border:1px #B55A00 dashed;
          position: absolute;
          top:10px;
          left: 50px;
      }
      #second {
          background-color:#CCF;
          border:1px #0000A8 dashed;
      }
      #third {
          background-color:#C5DECC;
          border:1px #395E4F dashed;
      }
      
      

      不可以约束

      @charset "gb2312";
      /* CSS Document */
      
      div {
          width: 300px;
          margin:10px;
          padding:5px;
          font-size:12px;
          line-height:25px;
      }
      #father {
          width: 500px;
          margin: 50px auto;
          border:1px #666 solid;
          padding:10px;
          position: static;
          
      }
      #first {
          background-color:#FC9;
          border:1px #B55A00 dashed;
          position: absolute;
          top:10px;
          left: 50px;
      }
      #second {
          background-color:#CCF;
          border:1px #0000A8 dashed;
      }
      #third {
          background-color:#C5DECC;
          border:1px #395E4F dashed;
      }
      
      

      垂直布局 z-index

      
      
          
              
              
              
          
          
              
      html5+css3 笔记_第38张图片
      image.png

      透明度 opacity

      
      
          
              
              
              
          
          
              

      飘移 float


      image.png
      
      
      
          
          Title
          
      
      
      
      我是块级元素1,没有设置浮动
      我是块级元素2,没有设置浮动
      我是块级元素3,没有设置浮动
      html5+css3 笔记_第39张图片
      image.png
      
      
      
          
          Title
          
      
      
      
      我是块级元素1,没有设置浮动
      我是块级元素2,没有设置浮动
      我是块级元素3,没有设置浮动
      html5+css3 笔记_第40张图片
      image.png

      image.png

      html5+css3 笔记_第41张图片
      image.png
      
      
      
          
          Title
          
      
      
      
      我是块级元素1,没有设置浮动
      我是块级元素2,没有设置浮动
      我是块级元素3,没有设置浮动
      html5+css3 笔记_第42张图片
      image.png

      overflow图片 视频超出 规定范围问题

      html5+css3 笔记_第43张图片
      image.png

      css

      @charset "gb2312";
      /* CSS Document */
      body {
          font-size:12px;
          line-height:22px;
      }
      #content {
          width:200px;
          height:150px;
          border:1px #000 solid;
          overflow:hidden;
      }
      
      
      
      
      
          
      overflow属性
      
      
      
      
      
      
      酒

      在CSS中使用overflow属性处理盒子中的内容溢出,它规定当内容溢出盒子时发生的事情,例如内容不会被修剪而呈现在盒子之外,或者内容会被修剪,修剪内容隐藏等。

      clear :拯救 因为 飘移 造成的父类坍塌问题


      html5+css3 笔记_第44张图片
      image.png
      
      
      
          
          Title
          
      
      
      
      aaaaa
      bbbb
      cccc
      dddd

      我是一段文本我是一段文本我是一段文本我是一段文本

      html5+css3 笔记_第45张图片
      image.png

      h5新标签

      header footer 等标签 其实就是 有意义的div标签 (块级元素)


      html5+css3 笔记_第46张图片
      image.png
      
      
      
      
          

      这是一个header标签

      这是一个section标签

      • 导航1
      • 导航2

      内页内容...

      这是一个footer标签
      尾部标签

      hgroup 标签 为 组标签 可以通过 修改hgroup(父类影响 子类)

      
      
      
          
          
          hgroup
      
       
          

      欢迎学习HTML5 教程

      第二章表单的hgroup

      figure figcaption :特殊流标签 一般用于图片 视频 代码 等


      image.png
      
      
      
      
      figcaption
      
       
          
          
      北京风景

      global 标签

      contenteditable :对table 可编辑
      spellcheck: 英文拼写检查

      
      
      
      
      创建一个web页面
      
      
      

      名字: 麦克 生日: 1999.01.01
      性别: 职业: 教师
      国籍: 中国 公司: NEUSOFT
      ben
      我要标注我中大奖了太高兴了,快兑奖去...
      
      
      
       spellcheck属性的使用
       
      
      
      这是可编辑的段落,请检查文字是否有错误。

      This paragraph is editable,Please check whether there is an error te xaaat.

      video audio 视频音频标签

      embed 多媒体 嵌入标签

      embed
      
      
      
      
       
      
      
      这是一个多媒体文件

      重定义标签
      老瓶子 装新酒


      html5+css3 笔记_第47张图片
      image.png
      
      
      
      
      
      
       
      
      
      套餐 99元

      牛排套餐 含牛排350克,西兰花100克

      双人餐 199元

      叉烧双拼 港式烧鹅,港式叉烧各300克,油菜300克


      某宝客服     售后服务 | 联系我们 | 版权信息 | 声明 | 投诉

      form 表单新增属性

      
      
      
      
      
      
          
          
          
      用户名:
      密码:
      出生年份:

      datalist 下拉列表

      
      
      
      
      无标题文档
      
      
      
          
        
        
          
      
      
      
      
      html5+css3 笔记_第48张图片
      image.png

      detail summery 实现隐藏文档功能

      
      
      
      
      无标题文档
      
      
          
          
      
      HTML5实战揭秘

      HTML5章节

      第一章HTML5简介
      HTML5由来
      第二章标签
      新标签的哟功法
      第三章表单
      智能表单的应用
      第四章画布
      画布的应用
      初始访问

      html5+css3 笔记_第49张图片
      隐藏的部分进行展示

      input 标签新增加属性

      
      
      
      
      
      
          
      用户名: 密码: 出生年份:
      默认值:
      邮箱:
      URL:
      DATE:
      TIME:
      Month:
      WEEK:
      数字:
      滑动条:
      搜索:
      颜色:

      自动填充表单

      output:输出表单 ,novalidate表单

      
      
      
      
      
      
          
          输出表单output

      novalidate表单
      请输入电子邮件地址:
      html5+css3 笔记_第50张图片
      image.png

      CSS3 新特性

      选择器

      html5+css3 笔记_第51张图片
      image.png

      
      
      
      
      
      
      
      
      

      h1元素这里是span元素

      h2元素这里是span元素

      h3元素这里是span元素

      h4元素这里是span元素

      h5之前的h6元素这里是span元素
      h5元素这里是span元素
      h6元素这里是span元素
      h5之后的第二个h6元素这里是span元素
      div内的h5
      div内的h6

      图片结果


      html5+css3 笔记_第52张图片
      image.png

      伪类 选择器

      html5+css3 笔记_第53张图片
      image.png
      
      
      
      
      
      
      
      设置了css样式的a链接
      
      
      
      
      html5+css3 笔记_第54张图片
      image.png
      
      
      
      
              
          
          
              
      disabled和enabled
      选中下面的项试试(单选按钮)
      选中下面的项试试(多选按钮)
      image.png
      
      
      
      
      
      
      
      
      
      盒子1
      盒子2
      选项一
    • 子选项
    • 结构伪类选择器

      html5+css3 笔记_第55张图片
      image.png

      只匹配父类下的第一子节点 若匹配这选中 ,否则不选中

      
      
      
      
              
              结构性伪类选择符 E:first-child
              
          
          
              

      我是父亲的第1个子元素,可惜我不是p标签,所以无法选中我

      我是父亲的第2个子元素

      我是父亲的第3个子元素

      我是父亲的第4个子元素

      我是父亲的第5个子元素


      我是父亲的第1个子元素,并且我是p标签,所以我被选中了

      我是父亲的第2个子元素

      我是父亲的第3个子元素

      我是父亲的第4个子元素

      我是父亲的第5个子元素

      匹配父类下的第一个 对应子节点 ,不论前面多少个其他子节点,当前子节点皆可被选中

      
      
      
      
              
              结构性伪类选择符 E:first-of-type
              
          
          
              

      我是父亲的第1个子元素

      我是父亲的第2个子元素,我虽然是父亲的第2个元素,但是我是父亲p元素中第1个p元素,所以选中了

      我是父亲的第3个子元素

      我是父亲的第4个子元素

      我是父亲的第5个子元素


      我是父亲的第1个子元素,我是父亲的第一个p标签所以我被选中了

      我是父亲的第2个子元素

      我是父亲的第3个子元素

      我是父亲的第4个子元素

      我是父亲的第5个子元素

      属性选择器

      html5+css3 笔记_第56张图片
      image.png
      
      
          
          
              
          
          
              

      小红

      小绿毛龟

      我最喜欢黄色了

      小兰兰


      百度一下,你就知道
      返回首页
      点此下载高清无码的高洛峰的AVI大片的种子

      伪标签选择器


      html5+css3 笔记_第57张图片
      image.png
      
      
      
      
              
          
          
              

      春晓-孟浩然
      春眠不觉晓,
      处处蚊子咬,
      打上敌敌畏,
      不至死多少。


      点此下载
      听歌听的是腕,戴表戴的是链...

你可能感兴趣的:(html5+css3 笔记)