在不知道寫點啥好了,打算寫一篇糊弄糊弄觀眾.
不要以為我起的標(biāo)題沒有意義啊,即便是糊弄那也是有一定價值滴.
先來討論下,刪除inline樣式有個毛的意義呢?其實意義大了,據(jù)我多年的項目經(jīng)驗,老有那么一小撮人喜歡在HTML中寫樣式(Me Too),導(dǎo)致后期項目調(diào)整的時候需要花部分時間整理樣式.
好的,那么標(biāo)題的作用就來了
$("*[style]").attr("style", "");
最省事的方法就是使用jQuery干掉所有的內(nèi)置樣式,避免了修改html的麻煩從而屏蔽掉沖突的問題進而從容的修改樣式表.哎呀我去,這排比句用的,我看我也蒙.
行了,知道大概針對啥樣的問題就沒毛病,如果你不關(guān)注我,那么老鐵,扎心了啊~
今天,前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。
可是與此相對的是,極少大學(xué)的計算機專業(yè)愿意開設(shè)前端課程,大部分前端工程師的知識,也都是在實踐和工作中不斷學(xué)習(xí)的。
最近收到很多同學(xué)的后臺留言,說希望多推出一些前端方向的教程。
今天我們就帶來一門適合前端初學(xué)者的課程,可以帶你從零入門 HTML、CSS、JS、React 等前端核心技能,并創(chuàng)建一個待辦事項的管理應(yīng)用~
項目效果:
課程從最基礎(chǔ)的 HTML/ CSS/JS 講起,還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深,層層遞進,如果你想快速上手 React 框架,這門課會是你非常好的選擇。
訪問“實驗樓”官網(wǎng),搜索“從 0 到 1 構(gòu)建待辦事項應(yīng)用”就能學(xué)習(xí)全部課程內(nèi)容。
以下是課程第一節(jié)的內(nèi)容 —— 「HTML 簡介」,帶你快速入門HTML,讓我們一起進入前端的大門看看吧:
「HTML 簡介」
本實驗是對 HTML 進行學(xué)習(xí),并且較詳細(xì)的說明了 Web 是如何工作的。主要內(nèi)容有:HTML 常見標(biāo)簽、HTML 文檔結(jié)構(gòu)、HTML 表格和表單、HTML 有序列表和無序列表。通過本節(jié)學(xué)習(xí),可以構(gòu)建簡單的 HTML 網(wǎng)頁。
HTML(超文本標(biāo)記語言)是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML 不需要編譯,可以直接由瀏覽器執(zhí)行,它的解析依賴于瀏覽器的內(nèi)核。它不是一種編程語言,而是一種標(biāo)記語言。
下面我們來演示用戶是如何看到一個網(wǎng)頁顯示的。
具體來講:
首先我們來看一個例子:
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡介</title>
<meta charset="utf-8" />
</head>
<body></body>
</html>
這是一個 HTML 的基本骨架,我們將逐步介紹這些是什么意思。
文檔類型聲明
<!DOCTYPE html> 是我們的文檔聲明頭。他告訴了瀏覽器,本文檔處理的是 HTML 文檔。
html 標(biāo)簽
html 標(biāo)簽即根元素,此處表示文檔的開始,該標(biāo)簽包含兩個子標(biāo)簽:head 和 body。
head 元素
head 標(biāo)簽下面所包含的標(biāo)簽由 title、meta、link、style、script 等(后面會講到)。
title 標(biāo)簽
作用:設(shè)置文檔的標(biāo)題或者名稱。瀏覽器通常將該標(biāo)簽的內(nèi)容顯示在窗口頂部或者標(biāo)簽頁上。每個 HTML 文檔只能有一個,必須有一個 title 標(biāo)簽。
meta 標(biāo)簽
<metacharset="UTF-8"> 聲明字符的編碼格式為 utf-8。
body 標(biāo)簽
body 標(biāo)簽定義文檔的主體,也就是我們的主要內(nèi)容(比如文本、超鏈接、圖像、表格和列表等)。
1.h 系類標(biāo)簽
h 標(biāo)簽有六種 h1,h2,h3,h4,h5,h6,它代表著我們的標(biāo)題。
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一級標(biāo)題</h1>
<h2>我是二級標(biāo)題</h2>
<h3>我是三級標(biāo)題</h3>
<h4>我是四級標(biāo)題</h4>
<h5>我是五級標(biāo)題</h5>
<h6>我是六級標(biāo)題</h6>
</body>
</html>
為了大家能更有效的學(xué)習(xí),請使用實驗樓的環(huán)境。首先我們新建一個文件,點擊 File,然后 New File,命名為 index.html。
然后輸入上面的代碼。
讓我們來看一下運行效果吧。鼠標(biāo)右鍵 index.html 文件,點擊 Open With,然后點擊 Preview。
最終效果為:
2.p 標(biāo)簽
p 標(biāo)簽是我們的文本標(biāo)簽,p 標(biāo)簽會自動在其兩個標(biāo)簽之間創(chuàng)建一些空白。刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容,把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。
<p>我是第一段文字,實驗樓,做實驗,學(xué)編程</p>
<p>我是第二段文字,實驗樓,做實驗,學(xué)編程</p>
3. 圖片標(biāo)簽
HTML 的圖像是通過標(biāo)簽 <img> 來定義的。語法: <imgsrc="圖片地址"/> 刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容,把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。
<p>實驗樓圖片:</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />
4.a 標(biāo)簽
<a> 標(biāo)簽是超鏈接標(biāo)簽,意思就是我們點擊它可以跳轉(zhuǎn)到一個網(wǎng)頁。刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容,把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。
<a href="https://www.shiyanlou.com/">實驗樓</a>
點擊文字:
跳轉(zhuǎn)到指定網(wǎng)頁:
篇幅有限,后續(xù)的課程內(nèi)容,請在“實驗樓”邊敲代碼邊學(xué)習(xí)~
訪問“實驗樓”官網(wǎng),搜索“從 0 到 1 構(gòu)建待辦事項應(yīng)用”,就能找到課程,繼續(xù)學(xué)習(xí)啦!
1)定義n初始值0,
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#app",
data: {
"n": 0
},
methods: {},
computed: {},
})
</script>
(2)定義自加按鈕,展示n的值,和判斷結(jié)果
<p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
<h2>n == {{n}}</h2>
<h3 v-text="n == 1"></h3>
<h1 style="color: red">使用v-show進行條件渲染</h1>
<h3 v-show="n == 1">使用v-show進行條件渲染</h3>
<h1 style="color: red">使用v-if進行條件渲染</h1>
<h3 v-if="n == 1">使用v-if進行條件渲染</h3>
<h1 style="color: red">使用if else-if else進行條件渲染 </h1>
<h3 v-if="n === 1">使用v-if進行條件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if進行條件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if進行條件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if進行條件渲染 if else-if - v-else</h3>
<h1 style="color: red">使用template v-if進行條件渲染 </h1>
<template v-if="n == 1">
<h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
<h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
<h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
</template>
執(zhí)行結(jié)果
筆記分享
<pre v-show="true">
條件渲染:
1、v-if
寫法:
(1)v-if = "表達式"
(2)v-else-if = "表達式"
(3)v-else = "表達式"
適用于:切換頻率較低的場景
特點:不展示的DOM元素將被直接刪除
注意:v-if和v-else-if、v-else一起使用的時候,要求結(jié)構(gòu)不可以被打斷
2、v-show
寫法:v-show = "表達式"
適用于:切換頻率較高的場景
特點:不展示的DOM元素未被移除,使用樣式進行隱藏
3、備注
使用v-if時,元素可能無法獲取到,使用v-show是可獲取到的
4、使用template v-if
寫的時候template對內(nèi)容進行了包裹,
等最終頁面渲染的時候,將把template標(biāo)簽刪掉,
這也就是說不破壞原來的樣式。
但是template只能配合v-if進行使用。
</pre>
源碼截圖
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。