Attributes are additional information provided by HTML elements。

 利用HTML的属性工具，就完全可以为网页开发，带来很多的属性，很多的功能添加，这样子网页就不显得那么土的了。

      

用Vue框架写前端代码 

<template>
  <div>
    <!-- HTML样式CSS的直接写入  -->
    <!-- 样式大包裹顶部 -->
    <div style="background-color: DeepSkyBlue">
      <p>前端页面展示学习</p>
      <p>后端逻辑加入，以及前后端的打通连接起来</p>
      <p>learn html</p>
      <p>HTML基础程序封装 TestOne</p>
      <h1>控软测试前端</h1>
      <h2>前端知识点HTML复习</h2>
      <h3>这是标题 3</h3>
      <h4>这是标题 4</h4>
      <h5>这是标题 5</h5>
      <h6>这是标题 6</h6>
      <p>这是一个段落。</p>
      <p>这是另外一个段落。</p>
      <a href="https://www.runoob.com">这是一个链接</a>
      <p>
        每个表格从一个table标签开始<br />
        每个表格行从tr标签开始 <br />
        每个表格的数据从td标签开始
      </p>
      <!-- 标题 -->
      <h4>一列：</h4>
      <!-- 表格写入 -->
      <table border="1">
        <tr>
          <td>100</td>
        </tr>
      </table>
      <!-- 练习1  1列-->
      <table border="1">
        <tr>
          <td>1000</td>
        </tr>
      </table>
      <h4>一行3列</h4>
      <table border="1">
        <tr>
          <td>100</td>
          <td>200</td>
          <td>300</td>
        </tr>
      </table>
      <!--  -->
      <h4>1行3列复习1</h4>
      <table border="1">
        <tr>
          <td>1000</td>
          <td>2000</td>
          <td>3000</td>
        </tr>
      </table>
      <h4>两行3列</h4>
      <table border="1">
        <tr>
          <td>100</td>
          <td>200</td>
          <td>300</td>
        </tr>
        <tr>
          <td>400</td>
          <td>500</td>
          <td>600</td>
        </tr>
      </table>
      <h4>2行3列复习1</h4>
      <table border="5">
        <tr>
          <td>10</td>
          <td>20</td>
          <td>30</td>
        </tr>
        <tr>
          <td>40</td>
          <td>50</td>
          <td>60</td>
        </tr>
      </table>
      <!--  -->
      <p>a标签定义一个超级链接</p>
      <a href="https://www.inspur.com/">点击跳转到 浪潮官网</a><br />
      <!-- 列表顶部 -->
      <p>HTML 支持有序、无序和定义列表:</p>

      <p>有序列表</p>
      <ol>
        <li>咖啡</li>
        <li>牛奶</li>
        <li>tea</li>
      </ol>
      <ol start="9">
        <li>咖啡</li>
        <li>牛奶</li>
        <li>tea</li>
      </ol>
      <h4>无序列表</h4>
      <ul>
        <li>tea</li>
        <li>咖啡</li>
        <li>牛奶</li>
      </ul>
      <!-- 列表底部 -->
      <!-- 属性是 HTML元素提供的附加信息 -->
      <!-- 属性实例 -->
      <!-- 属性英文 attribute 额吹比由特 -->
      <a href="https://www.inspur.com/"
        >这是一个使用了a标签的链接。加入了href属性</a
      >

      <h2>html图像程序实例</h2>
      <!--  菜鸟路径有斜杠。自个的不用斜杠，才能显示。报错：要不然，加入斜杠不显示图片的。 -->
      <img
        border=""
        src="img/11.jpg.jpg"
        alt="11 rock"
        width="505"
        height="328"
      />
    </div>
   <!-- 样式大包裹底部 -->
    <!-- 样式写入复习1   戊子日  -->
    <div style="background-color: red">css样式测试盒子1</div>

    <div style="background-color: black">盒子2</div>

    <div style="background-color: NavyBlue">盒子3</div>



  </div>
</template>



<script>
//复制JavaScript代码， 写接口代码去测试  辛巳日
import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module
import url from "@/plugins/urlHelper.js";
export default {
  data() {
    return {
      editorConfig: {
        initialFrameHeight: 500, //设置高度
        initialFrameWidth: "100%", //设置宽度
        UEDITOR_HOME_URL: url.getUEConfig(),
        serverUrl: url.getUE(),
      },
      query: {}, //对象
      loading: false,
      currentPage4: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      form: {}, //表单对象
      dialogVisible: false,
      submiting: false,
      id: 0,
      domain: url.getDomain(),
    };
  },
  components: {
    VueUeditorWrap,
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage4 = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      this.getList();
    },
    //筛选
    filterTag(filter) {
      var val = filter["isEnable"][0];
      this.form.isEnable = val;
      //刷新列表
      this.getList();
    },
    //搜索查询
    selList: function () {
      this.currentPage4 = 1;
      this.getList();
    },
    getList: function () {
      var _this = this;
      _this.loading = true;
      var params = _this.query;
      params.pageindex = _this.currentPage4;
      params.pagesize = _this.pageSize;
      var link = url.getArt("getlist_info");
      $.get(link, params, (data) => {
        _this.loading = false;
        _this.tableData = data.list;
        _this.total = data.total;
      });
    },
    //提交表单
    submitForm(formName) {
      var _this = this;
      var link = url.getArt("save_info");
      var info = this.form;
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submiting = true;
          //提交后台添加
          $.post(link, info, (res) => {
            _this.submiting = false;
            if (res.status) {
              _this.dialogVisible = false;
              _this.getList();
              _this.$message({
                type: "success",
                message: res.msg,
              });
            } else {
              _this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    //编辑
    editClick: function (row) {
      // this.form = Object.assign({}, row);
      this.dialogVisible = true;
      var id = row.id;
      var link = url.getArt("getmodel_info");
      $.get(link, { id: id }, (res) => {
        this.form = res;
      });
    },
    //删除
    delClick: function (row) {
      var _this = this;
      var link = url.getArt("delete_info"); //获取请求地址
      var id = row.id; //获取对象id
      this.$confirm("确定要删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $.post(link, { id: id }, (res) => {
            _this.btnLoading = false;
            if (res.status) {
              _this.msg = res;
              _this.getList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    //获取服务器列表
    this.getList();
  },
};
</script>

View Code

 部分效果展示：