网入web

HTML基础

2019-02-12  本文已影响62人  Viarotel

新的征程

web前端介绍

web前端开发做什么

pc端web开发；移动端web开发；混合app开发；网页游戏/移动端网页游戏开发；网页特效开发；后台开发(node.js)；微信小程序开发等 。ps:由课堂笔记整理，详细文档可到不凡官网咨询老师获取。

我们学什么

参照excel

软件架构

c/s client-server

b/s broswer-server

电脑基本环境配置

前端基础

HTML

HTML超文本标记语言。

html的结构

html由三部分组成。分为结构、表现、行为。 html页面采用纯文本形式编写，通过html中的不同标签来区分不同的部分和功能。所见即所得！

常用标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <!-- 字符集编码 meta标签是给浏览器识别的 告诉浏览器使用utf-8形式解析当前页面 -->
        <meta charset="UTF-8">
        <!-- seo 搜索引擎优化 -->
        <!-- 百度搜索引擎抓取的关键词 -->
        <meta name="keywords" content="不凡学院,郑州UI培训,河南郑州UI设计培训,河南郑州前端开发培训,郑州H5培训,郑州WEB前端培训,郑州HTML5前端培训,郑州软件培训">
        <!-- 百度搜索结果展示的内容 -->
        <meta name="description" content="河南郑州不凡学院开设UI设计培训课程和web前端开发课程。北京一线讲师现场教学，学习就等于工作。做自己擅长的事，分享知识与快乐！">
        <title>常用标签</title>
    </head>


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <iframe src="http://www.baidu.com" width="500px" height="400px" frameborder=0 ></iframe>
        
        <hr>

        <a href="http://www.baidu.com" target="_self">百度</a>
        <a href="http://www.baidu.com" target="_parent">父亲窗口打开百度</a>
        <a href="http://www.baidu.com" target="_top">顶层父类窗口打开百度</a>
    </body>
    </html>

图片及路径

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <!-- 相对路径 -->
        <img src="avatar.jpg" alt="对不起，图片找不到！">
        <hr>
        <img src="img/bf.png">
        <hr>
        <!-- 本地绝对路径 -->
        <img src="D:\不凡学院\html基础\课件\dev\avatar.jpg" alt="">
        <!-- 网络绝对路径 -->
        <hr>
        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2404337643,717943884&fm=58" alt="">
    </body>
    </html>

html基本规范(xhml语法规范)

字体标签

    <em>我是谁!</em>
    <strong>who am I ?</strong>
    <i>我是谁!</i>
    <b>who am I ?</b>
    5<sup>2</sup>
    H<sub>2</sub>O

列表

    <ul>
        <li>箱包</li>
        <li>数码</li>
        <li>咨询
            <ul>
                <li>法律咨询</li>
                <li>数学咨询</li>
            </ul>
        </li>
    </ul>
    <ol>
        <li>起床</li>
        <li>洗脸</li>
        <li>吃饭</li>
    </ol>
    <dl>
        <dt>html基础</dt>
            <dd>基本标签</dd>
            <dd>属性</dd>
        <dt>css基础</dt>
            <dd>css语法</dd>
            <dd>css引入方式</dd>
    </dl>

表单

    <!-- action 是当前表单提交的地址 -->
    <form action="www.bufanui.com" method="get">
        <fieldset>
            <legend>基本信息</legend>
            用户名: <input type="text" readonly  name="username" value="张三"> <br>
            曾用名： <input type="text" disabled  name="oldname" value="张小三"><br>
            密码: <input type="password" name="pwd"> <br> 
            性别: 
                <label>
                    男: <input type="radio" name="sex"  value="0"> 
                </label>
                <label>
                    女: <input type="radio" checked  name="sex"  value="1"> <br>
                </label>
        </fieldset>
        
        <fieldset>
            <legend>补充信息</legend>
            爱好: 
            <label>
                篮球: <input type="checkbox" name="like" value="basketball">
            </label>
            <label>
                足球: <input type="checkbox" checked name="like" value="football">
            </label>
            <label>
                乒乓: <input type="checkbox" name="like" value="pingpang"><br>
            </label>

        工作年龄: 
            <select name="experience">
                <option value="0">--无--</option>
                <option value="1">1年</option>
                <option value="2" selected>2~3年</option>
                <option value="3">3~5年</option>
            </select> <br>
        上传头像: <input type="file" name="avatar" multiple> <br>
        个人描述: <textarea name="desc" cols="30" rows="4">
                    我对工作有极大地热情,我喜欢写代码!
                    我大学时候是一个德智体美劳全面发展的废柴!
                </textarea> <br>
        </fieldset>
                
        
        <input type="submit" value="提交">
    </form>

转义字符

    <p>这是一个 &lt;p&gt;标签</p>
    <p>张&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三</p>

table 数据表格

    <!-- 复杂表单 -->
    <table border="1" cellspacing="10" cellpadding="10">
        <tr>
            <th>时间</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
        </tr>
        <tr>
            <td rowspan="2">上午</td>
            <td>语文</td>
            <td colspan="2">数学</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <tr>
            <td>思想品德</td>
            <td>思想品德</td>
            <td>思想品德</td>
            <td>思想品德</td>
            <td>思想品德</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>自然</td>
            <td>自然</td>
            <td>自然</td>
            <td>自然</td>
            <td>自然</td>
        </tr>

    </table>

css

css全称层叠样式表 (Cascading Style Sheets),用于实现页面的样式。

书写位置

css选择器

        /*标签p 和.p1的交集*/
        p.p1{
            color: red;
        }
        .p2.danger{
            color: blue;
        }
        /*并集选择器 都被选中*/
        .p1,.p2{
            font-size: 30px;
        }
        /*后代选择器 空格*/
        .p3 a{
            color: red;
        }
        /** 通配符 选择所有标签*/
        *{
            /*background-color: pink;*/
        }

css的单位

常用属性

属性名称 属性作用 值
width / height 宽高(块状单位有效) px 百分比 em等
background-color 背景颜色 color
cololr 字体颜色 color
font-size 字体大小 px em等
text-align 文字对齐方式 center left right
text-index 首行缩进 px em等
font-family 字体 微软雅黑 Microsoft YaHei、黑体 SimHei、Arial等
font-weight 字体加粗 100-900.加粗700-900/ bolder lighter normal
font-style 字体样式 Italic 斜体 / normal 正常
line-height 行高 单位： px /倍数 / 百分比 ;- 设置文字的行间距- 单行文字垂直居中 ：行高=父类盒子高度
font 字体缩写 `font:italic bolder 20px/1.2 'Arial','Microsoft YaHei'

背景图片

属性名称 属性作用 值
background-color 背景图片颜色 color
background-image 背景图片 url(‘1.png’);
background-repeat 平铺方式 repeat 、 no-repeat 、 repeat-x 、 repeat-y
background-position 图片位置 left、 right、 top、 bottom、 center
background-attachment 背景滚动 scroll、fixed (注意：基于body的定位）
background 简写（顺序不能错） background: green url(1.jpg) no-repeat center center fixed; 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body{
                background-image: url('img/banner.jpg');
                background-repeat: no-repeat;
                background-position: left top;
                /*是否跟最滚动*/
                background-attachment: fixed;
            }
            .d1{
                width: 100%;
                height:400px;
                /*background-color: green;*/
                /*background-image: url('img/bf.png');*/
                /*background-repeat: no-repeat;*/
                /*center 默认的是x轴  y轴默认居中*/
                /*跟数学的坐标系是不同的，x轴为正 ，y轴向下正 */
                /*background-position: -35px 30%;*/
                background: green  url('img/bf.png') no-repeat right 200px fixed;
                /*如果设置了fixed 那么背景图片的位置将会基于body*/
                /*background-attachment:fixed;*/
                /*精灵图片 雪碧图 做案例的时候再补充*/
                background-color: purple;
            }
            .d2{
                widows: 100%;
                height: 1000px;
                background-color: pink;
                /*透明度 ： 0~1  */
                opacity: .5;
            }
        </style>
    </head>
    <body>
        <!-- div 是一个标签，不表示任何的内容，没有自带样式。只是用于划分结构 -->
        <div class="d1">
            
        </div>
        <div class="d2">
            
        </div>
    </body>
    </html>

标签的表现形式

盒子模型

CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。包含内容区域、 padding（内边距） 、 border（边框）、margin（盒子与盒子的距离）

    <style>
        .d1{
            width: 300px;
            height: 300px;
            background-color: green;
            /*padding: 50px  100px 30px 80px;
            padding-left: 100px;*/
            padding: 100px;
        }
    </style>


    .d2{
        width:200px;
        height:200px;
        background-color: red;
        /*margin: 100px;
        margin-top: 200px;*/
        /*d2将会左右居中*/
        margin: 100px auto;
    }
    <!-- ======================= -->
    <!-- 当两个盒子发生嵌套的时候，给子类设置maring会给父类造成一种崩塌现象，子类的margin-top没有效果，而直接作用到父类 -->
    <!-- 解决方案： 1. 父类  overflow: hidden
               2. 父类 设置极小的padding -->
    <div class="box">
        <div class="inner-box">
            
        </div>
    </div>

    <hr>
    
    <!-- 如果垂直两个块状元素同时设置了margin-bottom和margin-top,那么这两个值将会发生重叠,不会累加，哪个值大用哪个 -->
    <div class="box2">
        
    </div>
    <div class="box3">
        
    </div>  


    .d1{
        width: 200px;
        height:200px;
        background-color: green;
        /*简写属性*/
        /*border: 10px solid red;*/
        border-width: 10px;
        border-style: solid;
        border-color: red;
        /*右边单独添加20像素*/
        border-right: 20px solid blue;
    }


    .baidu{
            /*display 可以改变元素的表现形式*/
            display: inline-block;
            width:300px;
            height:300px;
            background-color: pink;
        }
    .p1{
            /*display:none;*/
            visibility:hidden;
        }


    .d1{
            width: 200px;
            height: 200px;
            background-color: green;
            overflow: auto;
            /*overflow: scroll;
            overflow: hidden;*/
        }

文档流

浮动

浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。

浮动的影响

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .header{
                width: 100%;
                height: 100px;
                background-color: green;
            }
            .content{
                width: 100%;
                /*height: 500px;*/
                background-color: pink;
            }
            /*同级要浮动，都浮动*/
            .content .aside{
                float:left;
                width: 200px;
                height: 300px;
                background-color:red;
            }
            .content .main{
                float:left;
                width: 800px;
                height:900px;
                background-color: gray;
            }
            .footer{
                width: 100%;
                height: 100px;
                background-color: black;
            }
            /*不允许当前元素左右出现浮动元素  这样可以清除浮动的影响*/
            .clr{
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="header">
            
        </div>
        <div class="content">
            <div class="aside">
                
            </div>
            <div class="main">
                
            </div>
            <div class="clr"></div>
        </div>
        <div class="footer">
            
        </div>
    </body>
    </html>

定位

通过postion属性可以实现元素的定位。元素定位之后，需要通过设置left和top值对元素定位。

    .d1{
        position: relative;
        left: 100px;
        top: 100px;
        width: 200px;
        height: 200px;
        background-color: green;
    }


    .d1{
        /*有绝对的事情吗？绝对的值必须有参照物*/
        /*如何才能既保证父类有定位元素 而且父类不会再原来的位置偏移*/
        /*子绝父相*/
        position: relative;
        left: 0;
        top: 0;
    /*  left: 100px;
        top: 100px;*/
        margin-left: 100px;
        width:400px;
        height:400px;
        background-color: green;
    }
    .d11{
        position: absolute;
        left: 100px;
        top: 100px;
        width:150px;
        height: 150px;
        background-color: red;
    }

    <div class="d1">
        <div class="d11">
            
        </div>
    </div>


    .zx{
            position: fixed;
            right: 100px;
            bottom: 200px;
            width: 200px;
            height: 200px;
            background-color: red;
        }

    <a class="zx" href="#">
        w shi a
    </a>


    .d1,.d2,.d3{
        position: fixed;
        left: 0;
        top:0px;
        width: 200px;
        height: 200px;
        background-color: green;
    }
    .d1{
        z-index: 9;
    }
    .d2{
        left:30px;
        top: 30px;
        background-color: blue;
        z-index:2;
    }
    .d3{
        left: 80px;
        top: 80px;
        background-color: red;
        z-index: 0;
    }


    <div class="d1">
        d1
    </div>
    <div class="d2">
        d2
    </div>
    <div class="d3">
        d3
    </div>

规避脱标流

经验： 一般布局采用标准流，如果布局实现不了用浮动。定位一般用于解决小范围的某个标签的位置。

结束

html和css基础内容基本概况完毕，当然只掌握这些内容是不够的。只要跟着老师的教程走，耐心学，三四个案例下来就可以完全掌握页面基础知识。期间对于类命名，组织规则及实现技巧，都会一一说到。
也可添加丁老师微信mizheyanxiao,加入微信前端技术交流群，一块学习一块提高。

​

上一篇下一篇

猜你喜欢

热点阅读