Web前端页面基本元素

qq_45616828

已于 2022-10-12 15:13:59 修改

阅读量1.9k

点赞数 1

文章标签：前端

于 2022-10-12 15:13:21 首次发布

本文链接：https://blog.csdn.net/qq_45616828/article/details/127275277

版权

一、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>