Web前端页面基本元素

一、HTML页面的构成元素

1.HTML:Hyper Text Market Language 超文本标记语言,由一系列事先约定好的标记(标签)来描述一个页面的构成。HTML不是编程语言,只是标记语言。

HTML主要由三个部分构成:标记、属性、内容。

        (1)文本:设置字体、颜色、大小

        (2)图片:设置边框、大小、位置

        (3)超链接:图片文本均可以添加超链接

        (4)表格:行列构成的结构化数据、可以用表格展示,可以为表格设置大小、背景等,表格里面可以放所有元素

        (5)表单:文本框、下拉框、单选框、复选框、按钮、文本域等。

        (6)多媒体:音频、视频、H5游戏等。

2.CSS:Cascade Style Sheet : 层叠样式表,用于对页面元素进行布局和美化。

3.JavaScript:在浏览器中运行的解释性编程语言,用于进行页面交互(前后端交互、用户之间交互)

二、HTML的基本元素的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 设置字符集 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!-- 配置与IE和Edge的兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      <!-- 设置在手机上的显示效果 -->
    <title>蜗牛计算器-基于Table实现</title>
    <style>
        /* 类选择器,以 . 开头 */
        .button {
            background-color: gray;    /* 设置背景色为蓝色 */
            margin: auto;                /* 设置容器水平居中 */
        }

        /* 层次选择器,选择button类下面的所有标签为td的元素 */
        .button tr td {
            background-color: #7fffd4;   /* 颜色的RGB编码 */
            width: 25%;
            text-align: center;
            font-size: 30px;
        }

        /* 使用DIV+圆角的方式绘制三个小圆点,同时通过设置DIV的Float属性,实现DIV浮动,不独占一行 */
        .point-red {
            width: 20px;
            height: 20px;
            background-color: red;
            float: left;
            margin-left: 10px;
            border-radius: 10px;
        }
        .point-blue {
            width: 20px;
            height: 20px;
            background-color: blue;
            float: left;
            margin-left: 10px;
            border-radius: 10px;
        }
        .point-green {
            width: 20px;
            height: 20px;
            background-color: green;
            float: left;
            margin-left: 10px;
            border-radius: 10px;
        }
        .title {
            color: white;   /* 文字的颜色 */
            font-size: 22px;  /* 文字的大小 */
            float: right;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!-- 两行,一列,完成顶部和结果栏 -->
    <table width="450" height="120" border="0" bgcolor="gray" cellspacing="5" align="center">
        <tr>
            <td bgcolor="gray" height="50">
                <div class="point-red"></div>
                <div class="point-blue"></div>
                <div class="point-green"></div>
                <div class="title">蜗牛计算器</div>
            </td>
        </tr>
        <tr>
            <td bgcolor="white" style="border: solid 2px red;"></td>
        </tr>
    </table>

    <!-- 五行,四列,绘制计算器按钮 -->
    <table width="450" height="400" border="0" cellspacing="4" class="button">
        <tr>
            <td>AC</td>
            <td>+/-</td>
            <td>%</td>
            <td>÷</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>*</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>-</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>+</td>
        </tr>
        <tr>
            <td>0</td>
            <td>删除</td>
            <td>.</td>
            <td>=</td>
        </tr>
    </table>
</body>
</html>

三、css的使用方式

 

四、css选择器

 

 

 

 五、DIV模型

 

 

<!-- 盒模型及CSS基础样式 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型与CSS样式</title>
    <style>
        #outer {
            width: 908px;
            height: 450px;
            margin: auto;
            /* border: solid 5px blue; */
        }

        .inner {
            width: 450px;
            /* height: 300px; */
            border: solid 2px red;
            /* border-bottom: dashed 5px blue; */
            /* background-color: salmon; */
            /* margin: auto;  */

            margin-top: 100px;

            /* margin-top: auto; 四个方向都是auto
            margin-bottom: auto; */
            margin-left: auto;
            margin-right: auto;

            /* padding-top: 150px; */
            text-align: center;

            /* 设置当前这一行的文本高度为300px,实现单行的垂直居中 */
            /* line-height: 300px; */

            /* 通过设置 padding-top和padding-bottom实现垂直居中 */
            padding: 150px 0px;

            float: left;     /* 让DIV靠左浮动 

            /* 设置文本样式 */
            font-size: 30px;
            color: green;
            font-family: 微软雅黑,宋体,楷体,Verdana;
            font-style: italic;   /* 斜体 */
            font-weight: bold;    /* 加粗 */
            text-decoration: underline;    /* 下划线 */
        }
    </style>
</head>
<body>
    <div id="outer">
        <div class="inner">你好,欢迎来到蜗牛学院学习!<br/>你好,欢迎来到蜗牛学院学习!</div>
        <div class="inner">你好,欢迎来到蜗牛学院学习!<br/>你好,欢迎来到蜗牛学院学习!</div>
    </div>
</body>
</html>

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值