-
<!?DOCTYPE?html>
查看全部 -
<!DOCTYPE?html> <html> <head> ????<style> ????????/*?基礎(chǔ)樣式?*/ ????????.banner-container?{ ????????????position:?relative; ????????????width:?1200px; ????????????height:?400px; ????????????margin:?0?auto; ????????????overflow:?hidden; ????????} ????????/*?圖片列表?*/ ????????.banner-list?{ ????????????display:?flex; ????????????transition:?transform?0.5s?ease; ????????????width:?6000px;?/*?單張圖片寬度1200×5張?*/ ????????} ????????.banner-item?{ ????????????width:?1200px; ????????????height:?400px; ????????????flex-shrink:?0; ????????} ????????/*?導(dǎo)航圓點?*/ ????????.dot-nav?{ ????????????position:?absolute; ????????????bottom:?20px; ????????????left:?50%; ????????????transform:?translateX(-50%); ????????????display:?flex; ????????????gap:?10px; ????????} ????????.dot-item?{ ????????????width:?12px; ????????????height:?12px; ????????????border-radius:?50%; ????????????background:?rgba(255,255,255,0.5); ????????????cursor:?pointer; ????????????transition:?background?0.3s; ????????} ????????.dot-item.active??{ ????????????background:?#fff; ????????} ????????/*?箭頭按鈕?*/ ????????.arrow?{ ????????????position:?absolute; ????????????top:?50%; ????????????transform:?translateY(-50%); ????????????width:?40px; ????????????height:?40px; ????????????background:?rgba(0,0,0,0.3); ????????????border-radius:?50%; ????????????cursor:?pointer; ????????????display:?flex; ????????????align-items:?center; ????????????justify-content:?center; ????????????color:?white; ????????????font-size:?24px; ????????????opacity:?0; ????????????transition:?opacity?0.3s; ????????} ????????.banner-container:hover?.arrow?{ ????????????opacity:?1; ????????} ????????.arrow.prev??{?left:?20px;?} ????????.arrow.next??{?right:?20px;?} ????</style> </head> <body> ????<div?class="banner-container"> ????????<div?class="banner-list"> ????????????<img?src="img1.jpg"??class="banner-item"> ????????????<img?src="img2.jpg"??class="banner-item"> ????????????<img?src="img3.jpg"??class="banner-item"> ????????????<img?src="img4.jpg"??class="banner-item"> ????????????<img?src="img5.jpg"??class="banner-item"> ????????</div> ???????? ????????<!--?導(dǎo)航箭頭?--> ????????<div?class="arrow?prev">?</div> ????????<div?class="arrow?next">?</div> ???????? ????????<!--?導(dǎo)航圓點?--> ????????<div?class="dot-nav"></div> ????</div> ????<script> ????????const?banner?=?{ ????????????container:?document.querySelector('.banner-container'),? ????????????list:?document.querySelector('.banner-list'),? ????????????items:?document.querySelectorAll('.banner-item'),? ????????????currentIndex:?0, ????????????timer:?null, ???????????? ????????????init()?{ ????????????????//?生成導(dǎo)航圓點 ????????????????const?dotNav?=?document.querySelector('.dot-nav');? ????????????????this.items.forEach((_,??index)?=>?{ ????????????????????const?dot?=?document.createElement('div');? ????????????????????dot.className??=?`dot-item${index?===?0???'?active'?:?''}`; ????????????????????dot.addEventListener('click',??()?=>?this.goTo(index));? ????????????????????dotNav.appendChild(dot);? ????????????????}); ????????????????//?箭頭事件 ????????????????document.querySelector('.arrow.prev').addEventListener('click',??()?=>?this.prev());? ????????????????document.querySelector('.arrow.next').addEventListener('click',??()?=>?this.next());? ????????????????//?自動播放 ????????????????this.autoPlay();? ???????????????? ????????????????//?懸停暫停 ????????????????this.container.addEventListener('mouseenter',??()?=>?clearInterval(this.timer));? ????????????????this.container.addEventListener('mouseleave',??()?=>?this.autoPlay());? ????????????}, ????????????updatePosition()?{ ????????????????this.list.style.transform??=?`translateX(-${this.currentIndex??*?1200}px)`; ????????????????document.querySelectorAll('.dot-item').forEach((dot,??index)?=>?{ ????????????????????dot.classList.toggle('active',??index?===?this.currentIndex);? ????????????????}); ????????????}, ????????????prev()?{ ????????????????this.currentIndex??=?(this.currentIndex??-?1?+?this.items.length)??%?this.items.length;? ????????????????this.updatePosition();? ????????????}, ????????????next()?{ ????????????????this.currentIndex??=?(this.currentIndex??+?1)?%?this.items.length;? ????????????????this.updatePosition();? ????????????}, ????????????goTo(index)?{ ????????????????this.currentIndex??=?index; ????????????????this.updatePosition();? ????????????}, ????????????autoPlay()?{ ????????????????this.timer??=?setInterval(()?=>?this.next(),??3000); ????????????} ????????}; ????????banner.init();? ????</script> </body> </html>查看全部 -
網(wǎng)頁，app，組成
查看全部 -
前端的三大核心技能
前端是由三個語言組成，分別是HTML、CSS、JavaScript
前端后期的框架或庫只是同上述內(nèi)容封裝而來，是為了更方便的操作這三個語言而已。
1 . HTML的全稱是超文本標記語言。我們可以使用這些標簽說明文字、圖像、音視頻等等。
? ? ? HTML的的官方叫法為“標簽”
? ? ? 簡單來說，HTML更像是房子的架構(gòu)，做好HTML后我們就相當于在了一個毛坯房。
2 . CSS又叫層疊樣式表，可以靜態(tài)地修飾網(wǎng)面，讓網(wǎng)頁更有活力更好看。
? ? ??簡單來說，CSS更像給房子裝修好買了家具，讓房子更漂亮了.
3 .?JavaScript? (簡稱"JS")是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時編譯型的編程語言，他主要負責(zé)和使? ? ? ? 用者與網(wǎng)面交互使用的。比如按鈕的觸碰效果、導(dǎo)航欄輪播等效果。
? ? 簡單來說，JS更像房子的智能家居系統(tǒng)，讓用戶和房子能夠互動。
查看全部 -
<span>輸入帳號密碼隔前面的文字
查看全部 -
input需要登入介面而使用的標籤
<input type(類型)="例如:帳號/密碼/生日/電話"/>
查看全部 -
<ol>數(shù)字列表
查看全部 -
<ul>大列表
<il>小列表
查看全部 -
div分割作用
查看全部 -
input標簽有六種，輸入框
查看全部 -
<!DOCTYPE(告知瀏覽器這是甚麼) 後方帶入html之類的>
有頭就有尾基本要有以下三大標籤
<html></html>甚麼編碼
<head></head>網(wǎng)頁的頭
<body></body>網(wǎng)頁的身體
三大標籤順序為
<html>
????<head> </head>
????<body></body>
</html>
????3. <meta>裡面charset(網(wǎng)頁編碼解析器)="UTF-8(中文)"
????4.<title>網(wǎng)頁標題</title>
????
查看全部 -
前端人員是制作小程序，app的查看全部
-
<span>標簽被用來組合文檔中的行內(nèi)元素
查看全部 -
P標簽
P標簽里不可以放占位的標簽，例如：input、buttom、div等。
p標簽里可以放文字、圖片、a標簽。
查看全部 -
1.html中作為按鈕標簽有兩種，一種是input、另一種是button標簽。
2.最基本的區(qū)別為前者為單標簽，后者為閉合的標簽。
<input type="button" value="按鈕">? ? ? <!-- 單標簽 -->
<button>按鈕</button>? ? ? ? ? ? ? ? ? ?<!-- 閉合標簽 -->
<button>
<img src="img/1.gif">
</button>
查看全部 -
<input value="慕課網(wǎng)">? ? ? ? ?<!-- input框里的實打?qū)嵉奈淖?-->
<input value="abc">
<input?
maxlength="5"? ? ? ? ? ? ? ? ??
value="abcdefg">? ? ? ? ? ? ? ?<!-- 限制input框的長度,不會限制value的長度 -->
<input value="請輸入密碼">
<input placeholder="請輸入密碼">? ? ?<!-- 提示內(nèi)容 -->
查看全部 -
input標簽是網(wǎng)頁中最常見的輸入文字的標簽
input有很多種類型，例如：密碼、文字、數(shù)字、顏色、復(fù)選等。
<input type="text"/>? ? ? ? <!-- 文本 -->
<input type="password"/>? ? <!-- 密碼 -->
<input type="number"/>? ? ? <!-- 數(shù)字 -->
<input type="color"/>? ? ? ?<!-- 顏色 -->
<input type="checkbox"/>? ? <!-- 復(fù)選框 -->
<input type="date">? ? ? ? ?<!-- 日期 -->
查看全部 -
1.前端網(wǎng)頁的有序列表ol（英文ordered List）
2.列表里的項目用<li>(英文list item)標簽記述
3.默認狀態(tài)寬度是一整行
查看全部 -
<a href="http://idcbgp.cn/u/index/allcourses">
慕課網(wǎng)
</a>
跳轉(zhuǎn)頁面
<a target="_blank" href="http://idcbgp.cn/">
<img src="http://idcbgp.cn/static/img/index/logo2020.png" width="20" height="20"/>
</a>
新開頁面
<a href="index-one.html">
index_one頁面
</a>
跳轉(zhuǎn)到同級目錄頁面
<a href="New Folder/index-oo.html">
index_oo第二頁面
</a>
跳轉(zhuǎn)到不同級目錄頁面
../(返回上級目錄)
查看全部 -
herf? 超文本引用
查看全部 -
<ul>?標簽定義無序（帶項目符號）列表。
請使用?<ul>?標簽和 <li> 標簽來創(chuàng)建無序列表。
提示：請使用 CSS 來設(shè)置列表樣式。
提示：對于有序列表，請使用?<ol> 標簽。
查看全部 -
<ol>?標簽定義有序列表。有序列表可以是數(shù)字或字母順序。
<li>?標簽用于定義每個列表項。
提示：請使用 CSS 來設(shè)置列表樣式。
提示：對于無序列表，請使用?<ul> 標簽。
查看全部 -
<div>?標簽定義 HTML 文檔中的分割或部分（分區(qū)或小節(jié)，division/section）。
<div>?標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。
任何類型的內(nèi)容都可以放在?<div>?標簽內(nèi)！<div>?標簽可用作 HTML 元素的容器，然后使用 CSS 設(shè)置樣式或使用 JavaScript 進行操作。
如果用?id?或?class?來標記?<div>，那么該標簽的作用會變得更加有效。通過使用?class?或?id?屬性，可以輕松地對?<div>?標簽設(shè)置樣式。
注意：默認情況下，瀏覽器總是在?<div>?元素前后放置一個換行符。
用法
<div>?是塊級元素。這意味著它的內(nèi)容自動地開始一個新行。實際上，換行是?<div>?固有的唯一格式表現(xiàn)?？梢酝ㄟ^?<div>?的?class?或?id?應(yīng)用額外的樣式。
不必為每一個?<div>?都加上類或 id，雖然這樣做也有一定的好處。
可以對同一個?<div>?元素應(yīng)用?class?或?id?屬性，但是更常見的情況是只應(yīng)用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標識單獨的唯一的元素。
查看全部 -
<title>?標簽定義文檔的標題。標題必須是純文本的，顯示在瀏覽器的標題欄或頁面的選項卡中。
<title>?標簽在 HTML 文檔中是必需的！
頁面標題的內(nèi)容對于搜索引擎優(yōu)化 (SEO) 非常重要！搜索引擎算法使用頁面標題來決定在搜索結(jié)果中列出頁面時的順序。
<title>?元素：
定義瀏覽器工具欄中的標題
添加到收藏夾時為頁面提供標題
在搜索引擎結(jié)果中顯示頁面的標題
以下是創(chuàng)建好的標題的一些建議：
選擇較長且具有描述性的標題（避免使用僅包含一個或兩個單詞的標題）
搜索引擎將顯示大約 50-60 個字符的標題，因此請盡量避免標題過長
不要僅將標題設(shè)為一組單詞的列表（這可能會降低頁面在搜索結(jié)果中的排名）
因此，盡量使標題準確且有意義！
注意：一個 HTML 文檔中不能包含多個?<title>?元素。
<meta>?標簽定義關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)是關(guān)于數(shù)據(jù)的數(shù)據(jù)（信息）。
<meta>?標簽始終位于?<head> 元素?內(nèi)，通常用于指定字符集、頁面描述、關(guān)鍵詞、文檔作者和視口設(shè)置：
元數(shù)據(jù)不會顯示在頁面上，但可以被機器解析。
瀏覽器（如何顯示內(nèi)容或重新加載頁面）、搜索引擎（關(guān)鍵詞）和其他網(wǎng)絡(luò)服務(wù)會用到元數(shù)據(jù)。
提示：meta 元素有多種不同用法，而且一個 HTML 文檔中可以多個 meta 元素。
提示：通過?<meta>?標簽，有一種方法讓網(wǎng)頁設(shè)計師控制視口（即用戶在網(wǎng)頁中可見的區(qū)域）（請參見下面的"設(shè)置視口"實例）。
注意：每個 meta 元素只能用于一種用途。如果想要使用的特性不止一個，那就應(yīng)該在 head 元素中添加多個 meta 元素。
查看全部 -
<a></a> a標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。 a元素最重要的屬性是?href?屬性，它指定鏈接的目標。
查看全部 -
<span>標簽：組合文檔中的行內(nèi)元素
<span>abc</span>
<span>123</span>
效果就是在一行顯示：
abc123
同一個div中的input會從左到右的排序，不會換到下一行
查看全部 -
P標簽自成一行，且會自動在其后創(chuàng)建一些空白；
div里面可以放P，P不能放div
p標簽里面不能放div,不能放ul，ol，li
但是P標簽里面放文字、圖片<img>、鏈接<a>是可以的
查看全部
舉報