日常学习9.12 html基础

 

作业:登入注册页面

二阶段：

1.小组重分

2.二阶段需要

-一阶段基础

        2.1Java语法

        2.2面向对象

        2.3面对bug与解决bug 的能力(只要会报出来的bug都好解决)

        2.4沟通讨论

3.二阶段重点

        3.1锻造编程思维(解决方案) + 各种分享

        3.2新知识点:前端(jquety)、后端(IO/网络编程/反射与注解)

        3.3手写web服务器，手写各种框架

4.学习方法

        4.1当日事，当日毕；不留bug过夜

        4.2一个人干不如一群人干

        4.3先抓规范，再练逻辑

        4.4作息规律

#前端查询字典 HTML教程-菜鸟(字典:参考手册)

5.HTML基础

        5.1开发工具HbuilderX

        5.2工程项目创建

        5.3代码编写

        5.4测试运行

                5.4.1单文件本地运行

                5.4.2本地服务器运行

        5.5常见标签和属性

                5.5.1美化与布局标签 (没有默认样式，纯净)

                        div 盒子标签，块级元素(一个人占一整行，常用于布局)

                        span 行内元素(从左到右依次摆放，一行不够才换行，用于局部文字美化)

                5.5.2超链接

                        <a href="地址"></a>

                

                5.5.3图片

                        <img src="地址" width="数字"/height="数字"><>

                        (width与height只写一个另一个会根据比例自动缩放，都写则固定)

                5.5.4表单输入(多态)

                        <input type="">

                                -type="text" 文本框

                                -type="password" 密码框

                                -type="button" 按钮

                                -type="number" 文本框只能输入数字

                                -type="hide" 隐藏表单(存储数据，不如用户直接看到)

                                -type="checkbox" 复选框

                                -type="radio" 单选框

                5.5.5表格

                table        tr        td        th        thread        tbody

                5.5.6文本域

                textarea

                5.5.7音频

                <audio src=""><>

                5.5.8视频

                <video src=""><>

6.css基础

        6.1选择器

                6.1.1 id选择器 (不要重复)

                        #id名{

                                属性名:属性值;

                                属性名:属性值;

                                属性名:属性值;

                        }

                6.1.2 class选择器

                        .class名{

                                属性名:属性值;

                                属性名:属性值;

                                属性名:属性值;

                        }

                6.1.3伪类选择器

                        如 :hover (选择鼠标在链接上面时)

                        其他选择器:hover{

                                属性名:属性值;

                                属性名:属性值;

                                属性名:属性值;

                        }

                6.1.4元素选择器

                        标签名{

                                属性名:属性值;

                                属性名:属性值;

                                属性名:属性值;

                        }

                6.1.5其他选择器(后代选择器 兄弟选择器)

7.常见样式

        7.1位置

                外边距 margin

问题:上外边距合并

解决方案:父级设置overflow:hidde

        7.2大小

                宽width        高height

        7.3背景

background

 

        7.4字体

font

        7.5颜色(文本颜色)

color

 

        7.6边框

border   (solid  实线)

        7.7显示模式

        7.8文本

text

        7.9其他(阴影，动画…..)

8.css布局

8.1表格布局(没有表格嵌套的情况)

8.2浮动布局

div + css   浮动float:left;

8.3其它布局(弹性盒子布局，网格布局)

9.定位

9.1相对定位(相对于自己原来的位置)

position: relative;

9.2绝对定位(相对于父级容器 前提条件:父级也必须是相对定位或者绝对定位  否则会相对于浏览器)

position: absolute;

9.3其他：固定定位

position: fixed;