51-10000 attribute 屬性 HTML前端複習基礎功能程式碼封裝集合
阿新 • • 發佈：2021-12-06
Attributes are additional information provided by HTML elements。
利用HTML的屬性工具，就完全可以為網頁開發，帶來很多的屬性，很多的功能新增，這樣子網頁就不顯得那麼土的了。
用Vue框架寫前端程式碼
<template> <div> <!-- HTML樣式CSS的直接寫入 --> <!-- 樣式大包裹頂部 --> <div style="background-color: DeepSkyBlue"> <p>View Code前端頁面展示學習</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>
部分效果展示：