HTML

1. 块级标签

标题：

一级标题

div:

这是一个div标签

p：

这是一个p标签，段落标签



    
    HTML块级标签


标题：

一级标题


二级标题


三级标题


四级标题


五级标题


六级标题

div:

这是一个div标签

p：

这是一个p标签，段落标签

table：表格


    表格的标题
    
    
    
    

        
        组号
        姓名
        成绩
    

    

        JAVA
        HTML
    

    
    
    
    
    
    

        第一组
        张三
        80
        90
    

    

        李四
        80
        90
    

    

        王五
        80
        90
  • 列表



    
    列表项


ul无序列表

    
    
  • AAA
    • 
    
  • BBB
    • 
    
  • CCC
    • 


ol有序列表，type属性可以指定序号的类型：数字字母罗马数字

    
    
  1. AAA
    2. 
    
  2. BBB
    3. 
    
  3. CCC
    4. 
    
  4. DDD
    5.
  • 表单



    
    form表单





    
欢迎使用XXX系统

    

        
    

    

        
    

    

        
    








    
    H5的块级标签
    





    
 头部区域

    

        
        

            独立内容区
            
h5提供的块级元素全部是用在做布局的：

            
    
                
  • main(主要内容区)
    • 
                
  • aside(侧边栏)
    • 
                
  • header(头部区域)
    • 
                
  • section(区域)
    • 
                
  • article(独立内容区)
    • 
                
  • nav(操作导航)
    • 
                
  • footer
    • 
            

        

    

    

        footer脚注：用于展示版权信息

结果

HTML_第1张图片

2. 行级标签

  • input
    input标签表示输入的意思，凡是可以填写内容或者可以点击的标签都是输入
    input标签具有type属性
    type=text文本输入框



    
    行级标签




    

        
        
    

    

        
        
    

    

        
        
        
        男
        女
        其他
    

    

        
        
        唱歌
        跳舞
        打篮球
        RAP
    

    

        
        
        
    

    

        
        加载错误时显示的信息
    

    
    

        
        
    

    

        
        
    

    

        
    

    

        这本书的价格是9.9

结果：

HTML_第2张图片

JavaScript

  • 在JS中，存在内置对象document，这个对象是浏览器赋予的，直接可以拿来使用，表示文档
  • JS所有的语法支撑是ES来定义的 ES目前使用的最多的是ES6，在ES6中有许多新特性
  • 在ES6中var定义的变量属于全局变量，使用let定义的变量属于局部变量
  • 为什么会使用var或者let来定义变量呢？
  • 因为JavaScript是一门弱类型的脚本语言，所谓的弱类型表示所有的变量没有类型之分。 例如 定义了一个变量 let a =1; 此时的变量a类型为数字，但是我们也可以再给塔赋一 个布尔值 a = true; 这就是弱类型语言的特征。一个变量具体到底是什么类型，需要看 具体赋的什么值

浏览器在解释执行HTML代码的时候，有可能要执行HTML中的脚本语言，只要HTML中存在脚本语言。

为了解析HTML文档，浏览器提供了一个window对象，这个对象是一个复合对象，里面里面包含了很多其他的对象。这些对象主要用于处理页面的中元素以及元素的行为。

window对象中的所有变量都是全局变量，在使用的使用可以省略window，直接使用window中 的变量 let elementById =

window.document.getElementById("username"); 
let element =document.getElementById("username");

在浏览器的窗口的控制台记录

element console.log(element) console.log(element.value)



    
    login




    

        
        
    

    

        密码：

CSS

层叠样式表，CSS主要用来告诉浏览器元素应该怎样呈现

1. CSS选择器

  • 基本选择器
    ID选择器 类选择器 标签选择器
  • 高级选择器
    层级选择器(子代选择器 后代选择器)

选择器的语法：

ID选择器 => #ID值{}

类选择器 => .类名{}

标签选择器 => 标签名{}


    

        
    

    

        
    


/*ID选择器*/
#p{
    background-color: cornsilk;
}
/*类选择器*/
.password{
    height: 20px;
    width: 200px;
}
/*标签选择器*/
body{
    width: 100%;
    height: 100%;
    background-color: pink;
}

2.CSS样式的编写方式

  • 行内样式
  • 内部样式
  • 外部样式(需要使用link 引入css)

子代选择器和后代选择器:



    
        
        子代选择器与后代选择器
        
    
    
        
        

            
            

                这是一个文本

3. CSS样式的属性

1. 通用的样式属性

  • 宽度和高度

width:200px;

height:100px;

  • 外边距margin

元素与元素之间的距离，外边距有4个方向：上下左右 外边距设置属性的时候必须从上边距开始，满足顺时针旋转的规则，依次为每个方向设置边距

height: 100px;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
/*
margin: 20px 30px 40px 50px;
*/

结果：

HTML_第3张图片

  • 内边距padding
/*padding-top: 10px;*/
/*padding-right: 11px;*/
/*padding-bottom: 12px;*/
/*padding-left: 13px;*/
padding: 10px 11px 12px 13px;

结果：

HTML_第4张图片

  • 边框border
    边框宽度: border-width
    边框线条类型：border-style
    边框线条颜色：border-color
    复合属性：width style color，顺序可以随意调整
    边框也有4边，因为也可以专门为其中一边进行设置：
    border-top、border-right、border-bottom、border-left
    圆角设计：border-radius
/*border-width: 10px;*/
/*border-style: double;*/
/*border-color: deepskyblue;*/
border: deepskyblue  double 10px;
.ee{
    border-width: 1px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

结果：

HTML_第5张图片

  • 字体font
    字体类型 font-family
    字体大小 font-size
    字体风格 font-style
    字体重量 font-weight
    字体的复合属性有要求： 风格->重量->大小->类型 或者 重量->风格->大小->类型。

    

        
这是一个标题

        
            字体类型 font-family
            字体大小 font-size
            字体风格 font-style
            字体重量 font-weight
            字体的复合属性有要求： 风格->重量->大小->类型  或者 重量->风格->大小->类型。
  • 文本text
    文本颜色 color
    文本首行缩进 text-indent
    文本行高 line-height：行高可以让文本垂直居中
    文本装饰 text-decoration： 上划线、中横线、下划线
    文本对齐方式 text-align： 居左、居右、居中、两端对齐

    文本颜色 color 文本首行缩进 text-indent 文本行高  line-height：行高可以让文本垂直居中 文本装饰 text-decoration： 上划线、中横线、下划线 文本对齐方式 text-align： 居左、居右、居中、两端对齐




    文字居中对齐
  • 背景background
    背景颜色：background-color
    背景图片：background-image
    背景大小：background-size
    背景位置：background-position
    背景是否可重复:background-repeat
html,body{
    width: 100%;
    height: 100%;
    margin: 0;
}
body{
    background-color: darkgrey;
    background-image: url("../img/002.gif");
    background-repeat: repeat;/*背景图片是否重复*/
    /*
    background-position: 100px 30px;!*背景图片的位置*!
    */
    /*
    background-size: 100% 100%;
    */
    /*背景图片的大小*/
}
  • 浮动float
    元素一旦进行浮动，就不再占用原来的位置空间，因为元素之间的摆放存在层级关系，相当于脱离了当前层级。如果浮动后，还想要元素依然占用父元素的空间，那么需要对浮动进行清除
    可以使用伪类样式来清除浮动
    伪类样式的定义就是使用双冒号来表示伪类
    ::after 表示在渲染CSS样式的最后要使用的样式
    ::before 表示在渲染CSS样式之前要使用的样式
    伪类样式的编写： 选择器::伪类的名称{}


    
        
        浮动
  • 定位position
    元素的定位方式：static(流式定位、默认)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)
    参照物：
    relative：参照物是自身
    absolute：向上逐层查找具有定位的父元素，如果没找到，就回以body标签进行定位，绝对定位的元素脱离了当前父容器的空间，层级已经发生了变化
    拥有定位的元素可以通过z-index来调整元素的层级，值越大，层级越高。


    
        
        元素的定位

2. 列表样式

列表样式类型：list-style-type:disc(实心圆)、circle(空心圆)、square(正方形)、decimal(数字)

列表样式位置：list-style-position：inside(内部)、outside(外部)

列表样式的图片:list-style-image:url();



    
        
        列表样式list
        
    
    
        

            
    
                
  1. 第一项
    2. 
                
  2. 第二项
    3. 
                
  3. 第三项
    4. 
                
  4. 第四项
    5.

3. 超链接伪样式

超链接的伪样式有四种：点击前，鼠标单击，鼠标悬浮，鼠标单击后

link->visited->hover->active



    
        
        超链接的伪样式

4. CSS3新增的样式属性

1 文本阴影

这是标题
h1{
    text-align: center;
    text-shadow: 2px 1px 1px #da1e1e;
    background-color: black;
    color: white;
}

2 盒子阴影

.box{
    width: 400px;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 3px 2px 10px black;
}

3 关键帧动画




    
    动画

4 渐变




    
    背景色

4.45 字体图标

CSS3可以让我们自己定义字体图标。目前用的比较多的就是font-awesome 字体