整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在考慮開發(fā)聊天機(jī)器人嗎？ 在本教程中，我們將引導(dǎo)你完成使用 Embedchain 框架構(gòu)建 ChatBot 的步驟。 Embedchain 庫(kù)提供了用于開發(fā)可針對(duì)不同領(lǐng)域進(jìn)行定制的聊天機(jī)器人的適應(yīng)性基礎(chǔ)設(shè)施。 在本課程中，我們將集中精力開發(fā)Audi聊天機(jī)器人。 我們將詳細(xì)介紹安裝 Embedchain 庫(kù)、設(shè)置 OpenAI API 密鑰、構(gòu)建聊天機(jī)器人實(shí)例、為其提供訓(xùn)練資源，以及向聊天機(jī)器人詢問(wèn)問(wèn)題以獲得答案。
NSDT工具推薦： Three.js AI紋理開發(fā)包 - YOLO合成數(shù)據(jù)生成器 - GLTF/GLB在線編輯 - 3D模型格式在線轉(zhuǎn)換 - 可編程3D場(chǎng)景編輯器 - REVIT導(dǎo)出3D模型插件 - 3D模型語(yǔ)義搜索引擎
首先，我們需要安裝 Embedchain 庫(kù)，它提供了創(chuàng)建 ChatBot 所需的工具。 在 Jupyter Notebook 中打開代碼單元并運(yùn)行以下命令來(lái)安裝庫(kù)：
!pip install -q embedchain接下來(lái)，我們需要設(shè)置 OpenAI API 密鑰。 借助 API 密鑰，我們可以訪問(wèn) OpenAI 提供的強(qiáng)大語(yǔ)言模型。 我們可以從不同的模塊導(dǎo)入 API 密鑰，或者顯式地將其分配為環(huán)境變量來(lái)設(shè)置 API 密鑰。 以下是如何使用導(dǎo)入的模塊設(shè)置 API 密鑰的說(shuō)明：
import os
import key
os.environ['OPENAI_API_KEY']=key.OPENAI_API_KEY確保將 key.OPENAI_API_KEY 替換為你的 OpenAI API 密鑰的實(shí)際值。
在此步驟中，我們從 Embedchain 庫(kù)導(dǎo)入必要的模塊，并選擇我們要?jiǎng)?chuàng)建的 ChatBot 類型。 Embedchain 中提供三種類型的 ChatBot：App（使用 OpenAI 模型，付費(fèi)）、OpenSourceApp（使用開源模型，免費(fèi)）和 PersonApp（使用 OpenAI 模型，付費(fèi)）。
現(xiàn)在，讓我們使用 Embedchain 庫(kù)中的 App 類創(chuàng)建 ChatBot 的實(shí)例：
Audi_ChatBot=App()為了使我們的聊天機(jī)器人知識(shí)淵博并能夠回答問(wèn)題，我們需要使用相關(guān)資源對(duì)其進(jìn)行培訓(xùn)。 Embedchain 庫(kù)允許我們嵌入在線和本地資源。 以下是如何嵌入在線資源的示例：
Audi_ChatBot.add("youtube_video", "https://www.youtube.com/watch?v=LmjdUjvJL1E")
Audi_ChatBot.add("web_page", "https://www.audiusa.com/us/web/en/models/a3/a3/2023/overview.html")在本例中，我們嵌入了與 Audi A3 相關(guān)的 YouTube 視頻和網(wǎng)頁(yè) URL。 這將為聊天機(jī)器人提供響應(yīng)用戶查詢的信息。
我們還可以嵌入本地資源，例如 PDF 文件。 這是一個(gè)例子：
Audi_ChatBot.add_local("pdf_file", "/content/data/2020-audi-a3-24.pdf")這會(huì)將本地 PDF 文件添加到 ChatBot 的培訓(xùn)資源中。
現(xiàn)在我們的聊天機(jī)器人已經(jīng)訓(xùn)練完畢，我們可以通過(guò)提出問(wèn)題并獲得答復(fù)來(lái)與它進(jìn)行交互。 讓我們看一個(gè)如何查詢 ChatBot 并接收響應(yīng)的示例：
result=Audi_ChatBot.query("What can adaptive cruise control do?")
print(result)在此示例中，我們向 ChatBot 詢問(wèn)奧迪車輛自適應(yīng)巡航控制的功能。 ChatBot 將分析查詢并根據(jù)其訓(xùn)練過(guò)的嵌入式資源提供響應(yīng)。
完整代碼如下：
# Step 1: Install the Embedchain library
!pip install -q embedchain
# Step 2: Set the OpenAI API Key
import os
import key
os.environ['OPENAI_API_KEY']=key.OPENAI_API_KEY
# Step 3: Import the necessary modules
from embedchain import App
# Step 4: Create a ChatBot instance
Audi_ChatBot=App()
# Step 5: Train the ChatBot with resources
Audi_ChatBot.add("youtube_video", "https://www.youtube.com/watch?v=LmjdUjvJL1E")
Audi_ChatBot.add("web_page", "https://www.audiusa.com/us/web/en/models/a3/a3/2023/overview.html")
Audi_ChatBot.add_local("pdf_file", "/content/data/2020-audi-a3-24.pdf")
# Step 6: Query the ChatBot
result=Audi_ChatBot.query("What can adaptive cruise control do?")
print(result)原文鏈接：Embedchain開發(fā)入門 - BimAnt
多入門學(xué)前端的同學(xué)，或是準(zhǔn)備面試的同學(xué)都會(huì)去死記硬背一些前端知識(shí)點(diǎn)，筆者也是這么經(jīng)歷過(guò)來(lái)的，但卻不推薦這種囫圇吞棗、不求甚解的學(xué)習(xí)方式，因?yàn)檫@樣會(huì)走很多彎路，屬于“應(yīng)試”學(xué)習(xí)，我們更應(yīng)該的是從基礎(chǔ)到復(fù)雜，從表象到原理的角度卻思考學(xué)習(xí)，才能熟練掌握技能。
整理了一些在CSS（層疊樣式表）中的知識(shí)點(diǎn)，或許你曾看過(guò)一些什么“萬(wàn)字總結(jié)”、“面試必看”，但還是希望更多同學(xué)能夠沉下心來(lái)學(xué)習(xí)，不僅僅滿足于停留在“API工程師”的層面，多從CSS約定的規(guī)則去解釋現(xiàn)象。
瀏覽器中，明確了width和height就可以繪制出一塊矩形區(qū)域，也決定（量化）了當(dāng)前HTML標(biāo)簽渲染后在屏幕上占據(jù)的有效矩形面積。
值說(shuō)明100px像素（絕對(duì)）單位，矩形寬度為100px50%百分比（相對(duì)）單位，矩形寬度為包含塊定義width的50%50vw（相對(duì)）單位，矩形寬度為視口寬度的50%，CSS3規(guī)范50vh（相對(duì)）單位，矩形寬度為視口高度的50%，CSS3規(guī)范auto默認(rèn)值，為內(nèi)容（與子元素）撐開的寬度，塊級(jí)元素寬度默認(rèn)為100%inherit繼承父元素對(duì)應(yīng)值initial初始值，在MDN文檔中可查，不同的CSS屬性的初始值不同unset繼承父級(jí)相應(yīng)屬性值，父級(jí)沒(méi)有對(duì)應(yīng)屬性則取默認(rèn)初始值
height屬性規(guī)則與width相同。另外max-height、min-height優(yōu)先級(jí)大于height，同理max-width和min-width優(yōu)先級(jí)大于width。
我們有時(shí)會(huì)在CSS里寫height: 100%，發(fā)現(xiàn)并無(wú)效果，如下：
<div class="block"></div>
* {
padding: 0;
margin: 0;
border: 0;
}
body {
background-color: green;
/* height: 100%; */
border: 5px solid greenyellow;
}
.block {
width: 100%;
height: 100%;
background-color: red;
}
block類 div的高度并未按照我們預(yù)想那樣撐滿全屏高度
高度100%并未鋪滿屏幕
代碼&效果：https://codepen.io/DYBOY/embed/RwoJKRP
block類的父級(jí)（包含塊）是body，body在未設(shè)置值的時(shí)，height值為auto，body的實(shí)際計(jì)算高度為內(nèi)容撐開的高度，即為0（可以將上述代碼的border樣式取消注釋，可看到body的高度）
那么子元素block類的高度即等同于0
body {
background-color: azure;
height: auto;
}
.block {
width: 100%;
height: 0 * 100%; // 0
background-color: red;
}
所以此時(shí)block類所在的div盒子的高度無(wú)效，height為0，即在瀏覽器上無(wú)渲染高度 瀏覽器的渲染規(guī)則可理解記憶為：深度優(yōu)先遍歷計(jì)算
子元素的相對(duì)單位的計(jì)算值都是基于父/祖先元素對(duì)應(yīng)的屬性值，auto是基于內(nèi)容區(qū)域撐開計(jì)算所得。
瀏覽器渲染HTML文檔流，背景色默認(rèn)為白色，如果文檔中的html、body標(biāo)簽設(shè)置了背景色，這兩個(gè)標(biāo)簽的背景色實(shí)際設(shè)置的是瀏覽器視口的背景色。
盒模型可以看作四個(gè)“同心矩形”組合而成，如下圖
對(duì)于這三個(gè)屬性的表現(xiàn)其實(shí)并無(wú)特別可說(shuō)明，見上圖可知意。
元素分為行級(jí)元素和塊級(jí)元素，行級(jí)元素的margin和padding的上下值無(wú)效。
自己之前一直有個(gè)誤區(qū)，認(rèn)為padding、margin的百分比單位的計(jì)算基數(shù)是當(dāng)前元素矩形區(qū)域?qū)捀邅?lái)算，但是根據(jù)包含塊的規(guī)則，他們的計(jì)算基數(shù)應(yīng)該是包含塊的width值。
之前團(tuán)隊(duì)里大佬洪巖問(wèn)：“如何實(shí)現(xiàn)一個(gè)高度是自適應(yīng)寬度3倍的圖片？”
實(shí)現(xiàn)方法1: 利用Chrome瀏覽器最新支持的aspect-ratio屬性，其問(wèn)題就是C端瀏覽器兼容性不好
.box {
aspect-ratio: 1/3; // width/height 寬高比
}
aspect-ratio效果
實(shí)現(xiàn)方法2: 巧用包含塊規(guī)則（padding和width屬性百分比值的計(jì)算基數(shù)是包含塊的寬度）+背景圖實(shí)現(xiàn)
利用包含塊規(guī)則實(shí)現(xiàn)
代碼和演示：https://codepen.io/DYBOY/pen/JjbZgeE
border-radius屬性用于描述邊框圓角半徑，根據(jù)資料如果是百分比單位，則根據(jù)所在**盒子模型的矩形寬和高（包含border和padding）**作為計(jì)算基數(shù)，border-radius的值描述的是邊框角度所在橢圓的半長(zhǎng)軸和半短長(zhǎng)軸長(zhǎng)度。
border-*-radius屬性的兩個(gè)長(zhǎng)度或百分比值定義了四分之一橢圓的半徑，該半徑定義了外邊界邊角的形狀（參見下圖）。第一個(gè)值為水平半徑，第二個(gè)為垂直半徑。如果省略第二個(gè)值，則從第一個(gè)復(fù)制。如果任一長(zhǎng)度為零，則角為正方形，而不是圓角。
水平半徑的百分比是指邊框的寬度，而垂直半徑的百分比是指邊框的高度。
來(lái)看下面這個(gè)示例：
<div class="box">1</div>
<div class="box style1">2</div>
<div class="box style2">3</div>
<div class="box style3">4</div>
* {
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 10px auto;
background-color: #00abef;
border-radius: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
color: #fff;
}
.style1 {
padding: 20px;
}
.style2 {
padding: 20px;
border-radius: 50%;
}
.style3 {
padding: 20px;
border-width: 10px;
box-sizing: border-box;
}
效果
代碼&演示：https://codepen.io/DYBOY/pen/BaQPaaj
發(fā)現(xiàn)第二個(gè)形狀是一個(gè)橢圓，其原因是百分比的計(jì)算是把所在元素矩形區(qū)域的寬和高作為計(jì)算基數(shù)，而所在矩形的框高的計(jì)算值需要加上padding和border的寬度，所以變成了一個(gè)橢圓。那么，是不是把盒模型設(shè)置為IE盒模型就可以避免這個(gè)問(wèn)題了？答案是的，如上代碼的第四個(gè)圓形。
利用邊框的橢圓，可以制造平滑的不規(guī)則形狀，例如模仿一個(gè)水滴：
運(yùn)動(dòng)的水珠
**知識(shí)點(diǎn)：**如果沒(méi)有設(shè)置border-color，默認(rèn)邊框顏色為所在元素的文本顏色。
BFC是盒模型中在屏幕上渲染展示的矩形區(qū)域，決定了浮動(dòng)、盒模型渲染交互的區(qū)域。
margin區(qū)域折疊是一個(gè)BFC（塊級(jí)格式化上下文）的問(wèn)題，兩個(gè)div屬于同一個(gè)BFC。父子元素margin-top塌陷，兄弟元素margin重合取較大值。
若想要避免，則需要讓兩個(gè)相鄰設(shè)置了margin的元素都變成一個(gè)BFC。
創(chuàng)建BFC的常見CSS屬性值？
關(guān)于BFC更詳細(xì)的解讀可以參閱：
父級(jí)margin，子級(jí)的margin-top無(wú)效
高度塌陷
代碼&演示：https://codepen.io/DYBOY/pen/poNxjOP
解決方案：
原因是父子組件的margin-top取最大值，上面例子中父子組件的包含塊都是body，屬于同一個(gè)BFC（html標(biāo)簽）內(nèi)的子元素，因此需要將父/子元素變成BFC（根據(jù)如上的創(chuàng)建BFC的CSS值設(shè)置），那么子元素的margin就會(huì)依賴父元素的左上角作為基準(zhǔn)點(diǎn)margin偏移。
<style>
.box {
margin: 20px auto;
background-color: red;
width: 200px;
height: 200px;
}
</style>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
上下相鄰元素的外邊距為20px重合了
解決方案：
想要每?jī)蓚€(gè)盒子的上下邊距為20px*2，則就需要如下處理：
<style>
.box-parent {
overflow: hidden;
/* display: flow-root; */
}
.box {
margin: 20px auto;
background-color: red;
width: 200px;
height: 200px;
}
</style>
<div class="box-parent">
<div class="box"></div>
</div>
<div class="box-parent">
<div class="box"></div>
</div>
<div class="box-parent">
<div class="box"></div>
</div>
推薦解決方案：
由于改變了DOM結(jié)構(gòu)，所以不是最好的解決方法，更好的方法就是利用塌陷規(guī)則，增加margin-bottom/margin-top的值，直接計(jì)算得到兩塊元素之間的margin，并設(shè)置對(duì)應(yīng)值。
包含塊內(nèi)容可參閱文章《字節(jié)前端都知道的CSS包含塊規(guī)則》
盒子模型包含四部分：外邊距（margin area）、邊框（border area）、內(nèi)邊距（padding area）、內(nèi)容區(qū)（content area），其分布組合如下圖所示。
盒子模型
盒模型有兩種，IE盒模型（border-box）和標(biāo)準(zhǔn)盒模型（content-box），其常用語(yǔ)法如下
// 默認(rèn)為標(biāo)準(zhǔn)盒模型
box-sizing：border-box ｜ content-box
不同的盒模型影響HTML標(biāo)簽在瀏覽器上實(shí)際渲染的屏幕像素面積，該屬性規(guī)定了border和padding屬性值是否占用width和height規(guī)定的內(nèi)容區(qū)。
例如寬度width屬性的值計(jì)算規(guī)則如下：
一言以蔽之，content-box的寬高是規(guī)定內(nèi)容區(qū)寬高，border-box的寬高規(guī)定了content+border+padding三者和的寬高
CSS盒模型
關(guān)于定位，必要明確的就是定位的基準(zhǔn)點(diǎn)是哪兒？
值說(shuō)明static默認(rèn)值，文檔流正常位置，top、left、right、bottom、z-index無(wú)效relative相對(duì)定位，相對(duì)文檔流原正常位置左上角偏移，不影響其他元素absolute絕對(duì)定位，脫離正常文檔流，相對(duì)position!=static的父元素（包含塊）左上角偏移fixed固定定位，脫離正常文檔流，相對(duì)視口左上角偏移sticky粘性定位，相對(duì)文檔流的包含塊、滾動(dòng)祖先元素左上角偏移，不影響其他元素
line-height帶有單位時(shí)，計(jì)算行高的結(jié)果為line-height高度，line-height規(guī)定的是行高最小的的高度
line-height是相對(duì)單位時(shí)，line-height具有繼承性，其子元素如果沒(méi)有設(shè)置line-height，那么子元素的行高為父元素計(jì)算所得的行高值。
line-height值為純數(shù)字時(shí)，當(dāng)前行高會(huì)根據(jù)當(dāng)前文本的 font-size*line-height 計(jì)算所得。
.a.b：（無(wú)空格）當(dāng)a和b在同一標(biāo)簽類名中同時(shí)出現(xiàn)才選擇
.a .b：（有空格）選擇a的所有后代b
.a>.b：（>）選擇a的子代b
.a, .b：（,）a與b樣式相同
.a+.b：（+）選擇a緊鄰的兄弟b
.a~.b：（~）有共同父元素，選擇a后的所有b，ab不必緊鄰
:root ：文檔根元素
font-stretch: normal;
font-kerning: normal;
text-rendering: optimizeLegibility;
文本是最基礎(chǔ)最重要的功能之一，深入了解文本的渲染布局非常有必要。
關(guān)于文本處理相關(guān)的CSS，知識(shí)點(diǎn)較多且深，因此將在后續(xù)文章將詳細(xì)解讀，因?yàn)槲淖痔幚韺儆谝粋€(gè)需要深入理解的領(lǐng)域，也是一個(gè)基礎(chǔ)領(lǐng)域，在大部分的場(chǎng)景我們是不需要關(guān)心，但是如果涉及到精細(xì)化展示、兼容性的問(wèn)題，就不得不涉及到文本渲染原理相關(guān)內(nèi)容。
九、flex布局
.box {
display: flex; /* 還可以設(shè)置行內(nèi)元素的 inline-flex */
flex-direction: row; /* 主軸水平?。簉ow：列（左至右）；row-reverse：列（右至左） 主軸豎直！cloumn：行（上至下）；column-reverse：行（下至上） */
flex-wrap: nowrap; /* 一行放不下的時(shí)候：nowrap不換行，wrap換行，wrap-reverse換行第一行在下方 */
/* flex-flow: row nowrap; 是上面兩者的簡(jiǎn)寫形式 */
justify-content: flex-start; /* 定義項(xiàng)目在主軸上的對(duì)齊方式 flex-start左側(cè)，flex-end右側(cè)，center居中，space-between兩端對(duì)齊項(xiàng)目間隔相等，space-around項(xiàng)目左右兩側(cè)間距相同 */
align-items: flex-start; /* 定義項(xiàng)目在縱軸上的對(duì)齊方式 flex-start上，flex-end下，center居中，baseline項(xiàng)目中第一行文字對(duì)齊，stretch默認(rèn)值高度未設(shè)置時(shí)候?qū)螡M容器高度 */
}
.item {
order: 0; /* 定義項(xiàng)目的排列順序，數(shù)值越小越靠前，默認(rèn)0 */
flex-grow: 0; /* 定義剩于空間的放大比例，默認(rèn)0不放大，如果多個(gè)item均為1，則將等分剩于的空間，不同值按照比例分配剩于空間 */
flex-shrink: 1; /* 定義項(xiàng)目縮小比例，默認(rèn)為1，空間不足，均等比例縮小，為0則不縮小 */
flex-basis: auto; /* 定義項(xiàng)目在分配剩于主軸空間之前的主軸占據(jù)的長(zhǎng)度，瀏覽器會(huì)根據(jù)這個(gè)屬性去計(jì)算是否有剩于的空間 */
/* flex: auto; 是flex-grow、flex-shrink和flex-basis的簡(jiǎn)寫默認(rèn)值：0 1 auto */
align-self: flex-start; /* 設(shè)置單個(gè)項(xiàng)目與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋父容器設(shè)置的align-items，默認(rèn)auto繼承父元素的align-items值 auto | flex-start | flex-end | center | baseline | stretch */
}
上述是筆者對(duì)flex使用經(jīng)驗(yàn)的一些精簡(jiǎn)總結(jié)，另外推薦大家閱讀《Flexbox布局中不為人知的細(xì)節(jié) - Alibaba F2E》，從原理層解讀，研讀完非常受用。
example：
html {
--theme-color: red;
--theme-font-size: 16px;
}
.example {
color: var(--theme-color);
font-size: var(--theme-font-size);
}
因?yàn)槭切碌膶傩砸?guī)則，在低版本設(shè)備上可能遇上不兼容情況，因此可以使用查詢特性的@supports()
@supports(color: var(--theme-color)) {
// 支持上面的的處理方式則下面的css將生效
.class-box {
color: var(--theme-color);
}
}
// 對(duì)于selector的支持不好
@supports not (color: var(--theme-color)) {
// 不支持上面的的處理方式則下面的css將生效
.class-box {
color: red;
}
}
兼容性：https://caniuse.com/?search=%40supports
@support文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports
上述講到了十個(gè)大的CSS知識(shí)點(diǎn)，也是工作開發(fā)過(guò)程中經(jīng)常會(huì)遇到的細(xì)節(jié)問(wèn)題，把這些知識(shí)點(diǎn)/CSS規(guī)則熟記于心，有利于高效率編寫前端樣式！
Low了，網(wǎng)頁(yè)居然還用這么老掉牙的特效！弄個(gè)粗體字，下劃線就是突出重點(diǎn)了？真是一股濃濃的鄉(xiāng)村風(fēng)撲面而來(lái)；弄個(gè)圖在頁(yè)面飄來(lái)飄去就是動(dòng)畫效果了，你要這么認(rèn)為的話那我只能保持沉默了。在HTML5占領(lǐng)著整個(gè)互聯(lián)網(wǎng)之時(shí)，想透過(guò)網(wǎng)頁(yè)抓住所有人的眼球，因循守舊是行不通的。因此，有你不能不知道的HTML常用代碼。只有熟悉掌握了常用的HTML代碼，你才能在編寫網(wǎng)頁(yè)的時(shí)候做到行云流水，用處處流露著細(xì)膩和創(chuàng)意的動(dòng)效細(xì)節(jié)打動(dòng)所有人。
在這里還是要說(shuō)一下我自己建的前端JavaScript學(xué)習(xí)交流群：574462090，不管你是小白還是大牛，小編我都挺歡迎，小白嘛，多問(wèn)點(diǎn)問(wèn)題也就學(xué)好了，不定期分享干貨，包括最新的2017年前端學(xué)習(xí)資料，歡迎初學(xué)和進(jìn)階中的小伙伴。
html代碼大全：結(jié)構(gòu)性定義
文件類型<HTML></HTML> （放在檔案的開頭與結(jié)尾）
文件主題<TITLE></TITLE> （必須放在「文頭」區(qū)塊內(nèi)）
文頭<HEAD></HEAD> （描述性資料，像是「主題」）
文體<BODY></BODY> （文件本體）
標(biāo)題<H?></H?> （從1到6，有六層選擇）
標(biāo)題的對(duì)齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>
區(qū)分<DIV></DIV>
區(qū)分的對(duì)齊 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文區(qū)塊<BLOCKQUOTE></BLOCKQUOTE> （通常會(huì)內(nèi)縮）
強(qiáng)調(diào)<EM></EM> （通常會(huì)以斜體顯示）
特別強(qiáng)調(diào)<STRONG></STRONG> （通常會(huì)以加粗顯示）
引文<CITE></CITE> （通常會(huì)以斜體顯示）
碼<CODE></CODE> （顯示原始碼之用）
樣本<SAMP></SAMP>
鍵盤輸入<KBD></KBD>
變數(shù)<VAR></VAR>
定義<DFN></DFN> （有些瀏覽器不提供）
地址 <ADDRESS></ADDRESS>
大字<BIG></BIG>
小字<SMALL></SMALL>
與外觀相關(guān)的標(biāo)簽（作者自訂的表現(xiàn)方式）
加粗<B></B>
斜體<I></I>
底線<U></U> （尚有些瀏覽器不提供）
刪除線<S></S> （尚有些瀏覽器不提供）
下標(biāo)<SUB></SUB>
上標(biāo)<SUP></SUP>
打字機(jī)體<TT></TT> （用單空格字型顯示）
預(yù)定格式<PRE></PRE> （保留文件中空格的大?。?/p>
預(yù)定格式的寬度<PRE WIDTH=?></PRE>（以字元計(jì)算）
向中看齊<CENTER></CENTER> （文字與圖片都可以）
閃耀<BLINK></BLINK> （有史以來(lái)最被嘲弄的標(biāo)簽）
字體大小 <FONTSIZE=?></FONT>（從1到7）
改變字體大小 <FONTSIZE=+|-?></FONT>
基本字體大小 <BASEFONTSIZE=?> （從1到7; 內(nèi)定為3）
字體顏色 <FONTCOLOR="#$$"></FONT>（$$為顏色代碼）
2
html代碼大全：修改頁(yè)面的實(shí)用性HTML代碼
1)貼圖：<img src="圖片地址">
2)加入連接：<a href="所要連接的相關(guān)地址">寫上你想寫的字</a>
3)在新窗口打開連接：<a href="相關(guān)地址" target="_blank">寫上要寫的字</a>
4)移動(dòng)字體(走馬燈)：<marquee>寫上你想寫的字</marquee>
5)字體加粗：<b>寫上你想寫的字</b>
6)字體斜體：<i>寫上你想寫的字</i>
7)字體下劃線: <u>寫上你想寫的字</u>
8)字體刪除線: <s>寫上你想寫的字</s>
9)字體加大: <big>寫上你想寫的字</big>
10)字體控制大小：<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)
11)更改字體顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進(jìn)制)之間
12)消除連接的下劃線：<a href="相關(guān)地址" style="text-decoration:none">寫上你想寫的字</a>
13)貼音樂(lè)：<embed src="音樂(lè)地址" width="寬度" height="高度" autostart=false>
14)貼flash: <embed src="flash地址" width="寬度" height="高度">
15)貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>
16)換行：<br>
17)段落：<p>段落</p>
18)原始文字樣式：<pre>正文</pre>
19)換帖子背景：<body background="背景圖片地址">
20)固定帖子背景不隨滾動(dòng)條滾動(dòng)：<body background="背景圖片地址" body
bgproperties=fixed>
21)定制帖子背景顏色：<body bgcolor="#value">(value值見10)
22)帖子背景音樂(lè)：<bgsound="背景音樂(lè)地址" loop=infinite>
23)貼網(wǎng)頁(yè)：<iframe. src="相關(guān)地址" width="寬度" height="高度"></iframe>
3
html代碼大全：常常會(huì)遇到的問(wèn)題
點(diǎn)擊關(guān)閉窗口
<a href="javascript.:top.window.close();">點(diǎn)擊關(guān)閉窗口</a>！
請(qǐng)問(wèn)如何去掉主頁(yè)右面的滾動(dòng)條？
<body scroll="no">
<body style="overflow-y:hidden">
如何做到讓一個(gè)網(wǎng)頁(yè)自動(dòng)關(guān)閉.
<html>
<head>
<OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
</head>
<body >
這個(gè)窗口會(huì)在10秒過(guò)后自動(dòng)關(guān)閉,而且不會(huì)出現(xiàn)提示. </body>
如何在不刷新頁(yè)面的情況下刷新css?
<style>
button{ color:#000000;}
</style>
<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點(diǎn)擊按鈕直接修改style標(biāo)簽里button選擇符使按鈕改為 紅色</button>
請(qǐng)問(wèn)如何讓網(wǎng)頁(yè)自動(dòng)刷新？
在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動(dòng)刷新，你可以更改為任意值。
如何讓頁(yè)面自動(dòng)刷新？
方法一，用refresh
HTML 代碼片段如下:
<head>
<meta. http-equiv="refresh" c>
</head>
5表示刷新時(shí)間
[Ctrl+A 全部選擇 提示:你可先修改部分代碼，再按運(yùn)行]
方法二，使用setTimeout控制
<img src=/logo.gif>
<script>
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
</SCRIPT>
如何讓超鏈接沒(méi)有下劃線
在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：
<style. type="text/css"> <!--
a { text-decoration: none}
--> </style>
請(qǐng)問(wèn)如何去掉IE的上下滾動(dòng)條？
<body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>
</body>
怎樣才能把RealPlayer文件在網(wǎng)頁(yè)做一個(gè)試聽連接？
<embed height=25 src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c>
如何用html實(shí)現(xiàn)瀏覽器上后退按鈕的功能？
<a href="java script.:history.go(-1)">點(diǎn)擊后退</a>
或者
<script> history.back() </SCRIPT>
4
html代碼大全：你不一定知道的技巧
16. ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標(biāo)右鍵
<table borderncontextmenu=return(false)><td>no</table> 可用于Table
17. <body nselectstart="return false"> 取消選取、防止復(fù)制
18.onpaste="return false" 不準(zhǔn)粘貼
19.oncopy="return false;" ncut="return false;" 防止復(fù)制
20. <link rel="Shortcut Icon"href="favicon.ico"> IE地址欄前換成自己的圖標(biāo)
21. <link rel="Bookmark"href="favicon.ico"> 可以在收藏夾中顯示出你的圖標(biāo)
22. <inputstyle="ime-mode:disabled"> 關(guān)閉輸入法
23. 永遠(yuǎn)都會(huì)帶著框架
<script. language="JavaScript"><!--
if (window==top)top.location.href="frames.htm"; //frames.htm為框架網(wǎng)頁(yè)
// --></script>
24. 防止被人frame.
<SCRIPT. LANGUAGE=JAVASCRIPT><!--
if (top.location !=self.location)top.location=self.location;
// --></SCRIPT>
25. 網(wǎng)頁(yè)將不能被另存為
<noscript><iframe.src=*.html></iframe></noscript>
26. 查看網(wǎng)頁(yè)源代碼
<input type=button value=查看網(wǎng)頁(yè)源代碼
onclick="window.location="view-source:"+"http://www.pconline.com.cn"">
27.刪除時(shí)確認(rèn)
<a href="javascript：if(confirm("確實(shí)要?jiǎng)h除嗎?"))location="boos.asp? &areyou=刪除&page=1"">刪除</a>
28.屏蔽功能鍵Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert("禁止按Shift鍵!");//可以換成ALT CTRL
}
document.onkeydown=look;
</script>
29. 網(wǎng)頁(yè)不會(huì)被緩存
<META. HTTP-EQUIV="pragma" CONTENT="no-cache">
<META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">
<META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META. HTTP-EQUIV="expires"CONTENT="0">
30.怎樣讓表單沒(méi)有凹凸感？
<input type=text style="border:1 solid #000000">
或 <input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>
31.不要滾動(dòng)條?
讓豎條沒(méi)有:
<body style="overflow:scroll;overflow-y:hidden">
</body>
讓橫條沒(méi)有:
<body style="overflow:scroll;overflow-x:hidden">
</body>
兩個(gè)都去掉？更簡(jiǎn)單了
<body scroll="no">
</body>
32.怎樣去掉圖片鏈接點(diǎn)擊后，圖片周圍的虛線？
<a href="#"nFocus="this.blur()"><img src="logo.jpg"border=0></a>
33.電子郵件處理提交表單
<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">
<input type=submit>
</form>
34.在打開的子窗口刷新父窗口的代碼里如何寫？
window.opener.location.reload()
35.如何設(shè)定打開頁(yè)面的大小
<body nload="top.resizeTo(300,200);">
打開頁(yè)面的位置<bodynload="top.moveBy(300,200);">
36.在頁(yè)面中如何加入不是滿鋪的背景圖片,拉動(dòng)頁(yè)面時(shí)背景圖不動(dòng)
<STYLE>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>
37. 檢查一段字符串是否全由數(shù)字組成
<script. language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>
38. 獲得一個(gè)窗口的大小
document.body.clientWidth; document.body.clientHeight
39. 怎么判斷是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");
else alert("全是字符");
40.TEXTAREA自適應(yīng)文字行數(shù)的多少
<textarea rows=1 name=s1 cols=27npropertychange="this.style.posHeight=this.scrollHeight">
</textarea>
41. 日期減去天數(shù)等于第二個(gè)日期
<script. language=Javascript>
function cc(dd,dadd)
{
//可以加上錯(cuò)誤處理
var a=new Date(dd)
a=a.valueOf()
a=a - dadd * 24 * 60 * 60 * 1000
a=new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")
} cc("12/23/2002",2)
</script>
42. 選擇了哪一個(gè)Radio
<HTML><script. language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio"value="style" checked>Style.
<INPUT name="radio1" type="radio"value="barcode">Barcode
<INPUT type="button" value="check"nclick="checkme()">
</BODY></HTML>
43.腳本永不出錯(cuò)
<SCRIPT. LANGUAGE="JavaScript">
<!-- Hide function killErrors(){return true;} window.onerror=killErrors;// -->
</SCRIPT>
44.ENTER鍵可以讓光標(biāo)移到下一個(gè)輸入框
<input nkeydown="if(event.keyCode==13)event.keyCode=9">
文末再提兩點(diǎn)建議吧：
剛學(xué)前端JavaScript的時(shí)候，一定不要追求速成，編程不比其他傳統(tǒng)行業(yè)，可以快速的上手，他需要一定的代碼量積累起來(lái)，不然你追求速成很可能會(huì)車毀人亡。
這個(gè)文章到這里就說(shuō)完了，想要前端學(xué)習(xí)資料的進(jìn)我的群自助領(lǐng)取，已經(jīng)上傳到群文件里了：574462090，歡迎初學(xué)和進(jìn)階中的小伙伴。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
