web前端开发1

我们要学习一门语言，首先要知道它都基本组成，它是干什么的。
      html是用于在Internet上显示Web页面的主要标记语言；通过Web浏览器显示文本、图像或其他资源，HTML包括一系列标签，通过标签可以将网络上的文档格式统一；
       B/S架构
       B是browser（浏览器）用户使用的所有客户端（部分手机app，小程序），我们都可以把它视为浏览器，S是server（服务器）。浏览器发出请求，通过http等互联网协议，发送至S端服务器，S端把网页文件发送给前端，B端浏览器收到文件后，浏览器解析成图形界面，可供用户操作。
     html的基础标签
     我们现在通常学习html5，它是html语言的第五个版本。它是超文本语言，即一处发布，任何地方都可以查看。而！doctype html是html5的标志，它可以更好的与前几个html版本区分开。所以我们写HTML5时代码第一行就是doctype html。
     meta 是元标签，charset则是编码格式。所以我们HTML5的代码格式通常都是utf-8。
     首先我们要认识一些常用的标签。
div   无实意标签
p      段落标签
span无实意标签
li       列表
ul      无序列表（每一行前面默认为点）
ol      有序列表（每一行从1开始依次排列）
input输入框，输入一些信息，格式有（
text   输入文档
number输入数字
button输入按钮
......）
h1~h6为标题

选择器分为标签选择器 id选择器,id唯一且不重复类名选择器

接下来说一下css

    css基础
    如果说html是个框架的话，那么css就是在框架上加装饰品，使它变的美观。
    css的特点
    1.继承性     2.层叠性，可被覆盖
    css的优先级
1. 后来者居上,越往后越说的算
2. 行内样式优先级>头部样式>=外部样式
3. 越精确越说的算 id>class>标签
4. !important优先级最最高,但是不到最迫不得已时,不要用
   css中通常分3个样式表
外部样式表也叫链入样式表。
头部样式表。
行内样式表。

下面有一些html的命名法

驼峰命名法

xiaoMing小驼峰命名法 XiaoMing大驼峰命名法
下划线命名法 xiao_ming
xiao-ming

表现与结构分离

表现: css

结构: html

接下来是一些css常用属性

width: 宽度;

height: 高度;

background: 背景 (是一个复合属性)

background-color
background-image等

下面是一些基础例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #div1{
            width: 500px;
            height: 500px;
            background: url(https://img2.baidu.com/it/u=1108661846,3619135293&fm=26&fmt=auto) no-repeat;
            color: red;
            /*字体颜色*/
            font-size: 20px;
            /*字体大小*/
            /*chrome默认字体16px,最小支持字体12px*/
            font-weight: 700; 
            /*字体加粗*/
            text-indent: 40px;
            /*首行缩进*/
            line-height: 40px;
            /*行高*/
        }
        #div2{
            width: 300px;
            height: 50px;
            background: lightblue;
            text-align: center;
            line-height: 50px;
            /*单行垂直居中*/
        }
    </style>
</head>
<body>
    <div id="div1">
        时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。 
    </div>
    <div id="div2">滕王高阁临江诸</div>
</body>
</html>

块标签 div,ul,li,ol,h1~h6,p 可以设置宽高不可以与别人共处一行不设置宽度的情况下,默认宽度是100%

行内标签 span,strong,a 不可以设置宽高可以与别人共处一行其宽高由内容撑开

行内块标签 img,input 可以设置宽高可以与别人共处一行

通过一些实例来更好的认识这些标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            background: lightblue;
            /*display: inline;
            /*块标签转换成行内标签*/
            display: inline-block;
            /*块标签转换成行内块标签*/
        }
        span{
            width: 300px;
            height: 300px;
            background: lightgreen;
            /*display: block;
            /*行内标签转换成块标签*/
            display: inline-block;
        }
        input{
            width: 400px;
            height: 50px;
        }
    </style>
</head>
<body>
    
      <div>我是div</div><div>我是div</div>
      <span>我是span</span><span>我是span</span>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #div1{
            width: 500px;
            height: 500px;
            background: lightblue;
            overflow: hidden;
            /*处理向下浮动塌陷问题*/
            border: 5px double red;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: lightgreen;
            /*margin: 50px 0 0 50px;
            顺序为上右下左*/
            margin:100px auto 0;
        }
        #div3{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 50px solid rgba(170,170,170,0);
            /*rgb为3原色,rgb后+a(代表透明度) 范围0~1之间*/
            /*rgb都为0时为黑色,都为255时为白色*/
            border-bottom: 50px solid skyblue;
            border-left: 50px solid transparent;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            
        </div>
        <span>gkjlkl</span>
    </div>
    <div id="div3">
        
    </div>
</body>
</html>

注意:overflow 属性规定当内容溢出元素框时发生的事情/清除浮动。

最后,是html中的一个难点

浮动与定位

三种定位固定定位:相对于浏览器窗口定位,翻页时位置不变

相对定位:相对于原本文档流中的位置定位,仍然占据原位置

绝对定位:相对于离它最近的已定位父级进行定位,一直找到浏览器窗口为止

嵌套规则块里面可以放行内行内里面不可以放块

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        body{
            height: 10000px;
        }
        div{
            width: 100px;
            height: 100px;
        }
        #guDing{
            background: lightblue;
            position: fixed;
            left: 500px;
            top: 200px;
        }
        #xiangDui{
            background: lightcoral;
            position: relative;
            left: 100px;
            top: 200px;
        }
        #jueDui{
            background: lightgreen;
            position: absolute;
            left: 100px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div id="guDing"></div>
    <div id="xiangDui"></div>
    <div id="jueDui"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #father{
            width: 700px;
            height: 30px;
            background: lightblue;
            margin: 100px auto 0;
        }
        #son1{
            width: 500px;
            height: 100%;
            background: lightcoral;
            /*display: inline-block;*/
            float: left;
        }
        #son2{
            width: 100px;
            height: 100%;
            background: lightgreen;
            /*display: inline-block;*/
            float: right;

        }
    </style>
</head>
<body>
    <!-- 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.
    文档流 一旦浮动后就会脱离文档流 -->
    <div id="father">
        <div id="son1"></div>
        <div id="son2"></div>
    </div>
</body>
</html>

这是我在这一周的收货,希望对你们有些帮助......

posted @ 2021-11-06 17:07 吴萌阅读(39) 评论(0) 收藏举报

刷新页面返回顶部

web前端开发1

公告