HTML常用代碼集合，背完這些基本可以自己做表白網(wǎng)頁了

lt;marquee>...</marquee>普通卷動(dòng)

<marquee behavior=slide>...</marquee>滑動(dòng)

<marquee behavior=scroll>...</marquee>預(yù)設(shè)卷動(dòng)

<marquee behavior=alternate>...</marquee>來回卷動(dòng)

<marquee direction=down>...</marquee>向下卷動(dòng)

<marquee direction=up>...</marquee>向上卷動(dòng)

<marquee direction=right></marquee>向右卷動(dòng)

<marquee direction=left></marquee>向左卷動(dòng)

<marquee loop=2>...</marquee>卷動(dòng)次數(shù)

<marquee width=180>...</marquee>設(shè)定寬度

<marquee height=30>...</marquee>設(shè)定高度

<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色

<marquee scrollamount=30>...</marquee>設(shè)定卷動(dòng)距離

<marquee scrolldelay=300>...</marquee>設(shè)定卷動(dòng)時(shí)間

<!>字體效果

<h1>...</h1>標(biāo)題字(最大)

<h6>...</h6>標(biāo)題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強(qiáng)調(diào))

<i>...</i>斜體字

<em>...</em>斜體字(強(qiáng)調(diào))

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執(zhí)行標(biāo)記符號(hào))

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style =font-size:100 px>...</font>無限增大

<!>區(qū)斷標(biāo)記

<hr>水平線

<hr size=9>水平線(設(shè)定大小)

<hr width=80%>水平線(設(shè)定寬度)

<hr color=ff0000>水平線(設(shè)定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結(jié)格式

<base href=位址>(預(yù)設(shè)好連結(jié)路徑)

<a href=位址></a>外部連結(jié)

<a href=位址 target=_blank></a>外部連結(jié)(另開新視窗)

<a href=位址 target=_top></a>外部連結(jié)(全視窗連結(jié))

<a href=位址 target=頁框名></a>外部連結(jié)(在指定頁框連結(jié))

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width=180>設(shè)定圖片寬度

<img src=圖片位址 height=30>設(shè)定圖片高度

<img src=圖片位址 alt=提示文字>設(shè)定圖片提示文字

<img src=圖片位址 border=1>設(shè)定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設(shè)定

<!>表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網(wǎng)址

<table border=邊框大小>...</table>設(shè)定表格邊框大小(使用數(shù)字)

<table bgcolor=顏色碼>...</table>設(shè)定表格的背景顏色

<table borderclor=顏色碼>...</table>設(shè)定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設(shè)定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設(shè)定表格亮邊框的顏色

<table cellpadding=參數(shù)>...</table>指定內(nèi)容與格線之間的間距(使用數(shù)字)

<table cellspacing=參數(shù)>...</table>指定格線與格線之間的距離(使用數(shù)字)

<table cols=參數(shù)>...</table>指定表格的欄數(shù)

<table frame=參數(shù)>...</table>設(shè)定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數(shù)字)

<table height=高度>...</table>指定表格的高度大小(使用數(shù)字)

<td colspan=參數(shù)>...</td>指定儲(chǔ)存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=參數(shù)>...</td>指定儲(chǔ)存格合并列的列數(shù)(使用數(shù)字)

<!>分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會(huì)自動(dòng)調(diào)整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會(huì)自動(dòng)調(diào)整

<frameset cols="20%,*">分割左右兩個(gè)框架

<frameset cols="20%,*,20%">分割左中右三個(gè)框架

<分割上下兩個(gè)框架

<frameset rows="20%,*,20%">分割上中下三個(gè)框架

<! - - ... - -> 注解

<a href target> 指定超連結(jié)的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結(jié)

<a href> 指定超連結(jié)

<a name=錨的名稱> 被連結(jié)點(diǎn)的名稱

<address>....</address> 用來顯示電子郵箱地址

<b> 粗體字

<base target> 指定超連結(jié)的分割視窗

<basefont size> 更改預(yù)設(shè)字形大小

<bgsound src> 加入背景音樂

<big> 顯示大字體

<blink> 閃爍的文字

<body text link vlink> 設(shè)定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設(shè)定表格標(biāo)題位置

<caption>...</caption> 為表格加上標(biāo)題

<center> 向中對(duì)齊

<cite>...<cite> 用於引經(jīng)據(jù)典的文字

<code>...</code> 用於列出一段程式碼

<comment>...</comment> 加上注解

<dd> 設(shè)定定義列表的項(xiàng)目解說

<dfn>...</dfn> 顯示"定義"文字

<dir>...</dir> 列表文字標(biāo)簽

<dl>...</dl> 設(shè)定定義列表的標(biāo)簽

<dt> 設(shè)定定義列表的項(xiàng)目

<em> 強(qiáng)調(diào)之用

<font face> 任意指定所用的字形

<font size> 設(shè)定字體大小

<form action> 設(shè)定戶動(dòng)式表單的處理方式

<form method> 設(shè)定戶動(dòng)式表單之資料傳送方式

<frame marginheight> 設(shè)定視窗的上下邊界

<frame marginwidth> 設(shè)定視窗的左右邊界

<frame name> 為分割視窗命名

<frame noresize> 鎖住分割視窗的大小

<frame scrolling> 設(shè)定分割視窗的卷軸

<frame src> 將html檔加入視窗

<frameset cols> 將視窗分割成左右的子視窗

<frameset rows> 將視窗分割成上下的子視窗

<frameset>...</frameset> 劃分分割視窗

<h1>~<h6> 設(shè)定文字大小

<head> 標(biāo)示文件資訊

<hr> 加上分格線

<html> 文件的開始與結(jié)束

<i> 斜體字

<img align> 調(diào)整圖形影像的位置

<img alt> 為你的圖形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入圖片并預(yù)設(shè)圖形大小

<img hspace> 插入圖片并預(yù)設(shè)圖形的左右邊界

<img lowsrc> 預(yù)載圖片功能

<img src border> 設(shè)定圖片邊界

<img src> 插入圖片

<img vspace> 插入圖片并預(yù)設(shè)圖形的上下邊界

<input type name value> 在表單中加入輸入欄位

<isindex> 定義查詢用表單

<kbd>...</kbd> 表示使用者輸入文字

<li type>...</li> 列表的項(xiàng)目 ( 可指定符號(hào) )

<marquee> 跑馬燈效果

<menu>...</menu> 條列文字標(biāo)簽

<multiple> 可同時(shí)選擇多項(xiàng)的列表欄

<noframe> 定義不出現(xiàn)分割視窗的文字

<ol>...</ol> 有序號(hào)的列表

<option> 定義表單中列表欄的項(xiàng)目

<p align> 設(shè)定對(duì)齊方向

<p> 分段

<person>...</person> 顯示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表單中定義列表欄

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強(qiáng)語氣

<sub> 下標(biāo)字

<sup> 上標(biāo)字

<table border=n> 調(diào)整表格的寬線高度

<table cellpadding> 調(diào)整資料欄位之邊界

<table cellspacing> 調(diào)整表格線的寬度

<table height> 調(diào)整表格的高度

<table width> 調(diào)整表格的寬度

<table>...</table> 產(chǎn)生表格的標(biāo)簽

<td align> 調(diào)整表格欄位之左右對(duì)齊

<td bgcolor> 設(shè)定表格欄位之背景顏色

<td colspan rowspan> 表格欄位的合并

<td nowrap> 設(shè)定表格欄位不換行

<td valign> 調(diào)整表格欄位之上下對(duì)齊

<td width> 調(diào)整表格欄位寬度

<td>...</td> 定義表格的資料欄位

<textarea name rows cols> 表單中加入多少列的文字輸入欄

<textarea wrap> 決定文字輸入欄是自動(dòng)否換行

<th>...</th> 定義表格的標(biāo)頭欄位

<title> 文件標(biāo)題

<tr>...</tr> 定義表格美一行

<tt> 打字機(jī)字體

<u> 文字加底線

<ul type>...</ul> 無序號(hào)的列表 ( 可指定符號(hào) )

<var>...</var> 用於顯示變數(shù)

天我將教大家學(xué)會(huì)制作一個(gè)簡單的前端代碼實(shí)現(xiàn)的照片墻，大家可以用任意張照片來實(shí)現(xiàn)這個(gè)效果，如果大家想要整個(gè)項(xiàng)目代碼的話，或者對(duì)代碼有什么問題的都可以，請(qǐng)?jiān)谠u(píng)論區(qū)留言或者直接私信我，我會(huì)第一時(shí)間發(fā)送給大家，私信的話也可以，直接回復(fù)：001

一、目錄結(jié)構(gòu)：

二、代碼預(yù)覽：

HTML代碼：

CSS代碼：

JavaScript代碼：

Underscore.js代碼：

這個(gè)是不需要我們自己敲代碼的，只需要在官方網(wǎng)站下載下來放入js文件中重新命名即可。( 官方網(wǎng)站：https://underscorejs.org/ )

Underscore 是一個(gè)JavaScript庫，它提供了大量有用的函數(shù)式編程助手，而無需擴(kuò)展任何內(nèi)置對(duì)象。

所有代碼整理完之后，點(diǎn)擊運(yùn)行，效果如下：

靜態(tài)效果：

動(dòng)態(tài)效果：

三、總結(jié)：

是不是很簡單，詳細(xì)過程不了解的，想要學(xué)習(xí)更多特效的，請(qǐng)關(guān)注我：一點(diǎn)新科技。我會(huì)每天給大家分享，如果想要實(shí)現(xiàn)更多特效，直接私信回復(fù)我即可，其實(shí)有不錯(cuò)的想法的，可以把照片改成你心里的那個(gè)他(她)的照片，加個(gè)背景音樂，做個(gè)表白墻也是不錯(cuò)的，O(∩_∩)O哈哈~

如果有什么好的意見或者想法的，可以在評(píng)論區(qū)留言，我們一起交流，共同學(xué)習(xí)進(jìn)步。大家多多轉(zhuǎn)發(fā)、關(guān)注，謝謝大家！！！

嘍，首先和大家說聲抱歉，停更了這么久，主要是期間因?yàn)楣ぷ髡{(diào)動(dòng)的關(guān)系，工作變忙了，沒有時(shí)間來更新了，今天趁著領(lǐng)導(dǎo)不在，偷偷來更新一下吧~

首先我的分享方式可能和別人的不同，別人可能是從最開始的一步一步開始教起，我不是，我是先把效果展示給大家，讓大家先看看這個(gè)東西，然后我再開始講，有看不下去的現(xiàn)在就可以吧網(wǎng)頁關(guān)了，免得看完又來噴我，我不是什么大神，噴我有什么用？我看的心里還不舒服，是吧，為了營造良好的網(wǎng)絡(luò)環(huán)境，別噴啊~

接下來進(jìn)入主題：

大家可能都看過下面的這個(gè)網(wǎng)頁截圖

這個(gè)是一個(gè)類似于計(jì)時(shí)器的這么一個(gè)情侶間的網(wǎng)頁，今天我的目的就是把大家都教會(huì)了(不會(huì)的我下面會(huì)放源碼)，然后回家有興趣的可以做好展示給自己的另一半看看~

我也放個(gè)網(wǎng)址吧，讓你們可以看看實(shí)際效果是什么樣的

http://1.giggle.applinzi.com/shouye1.html

就是這個(gè)樣子，雖然可能過氣了吧，但是我相信你的另一半看完還是會(huì)很感動(dòng)的

那么接下來，我要放html的源碼了:然后我會(huì)開始講解:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>G家life</title>

@font-face {

font-family: digit;

src: url('digital-7_mono.ttf') format("truetype");

}

</style>

</head>

<body>

<!--audio id="audio" controls>

</audio-->

<span class="space"/><span class="comments">*2017—03-10,Acquaintance</span><br />

My name = <span class="keyword">Guan</span> Jiaqi<br />

Your name = <span class="keyword">Shen</span> Jimei<br />

<span class="comments">//The first time I saw you. </span><br />

Be attracted to you;<br />

<span class="comments">// I used to think.</span><br />

Like a person without reason;<br />

I believe this sentence is wrong for a long time;<br />

<span class="comments">// I want to stay with you every day.</span><br />

時(shí)到花自開;<br />

<span class="comments">// 靠在你肩上的時(shí)候心忽然，暖了一下.</span><br />

<span class="keyword">你是非常可愛的人.<br />真應(yīng)該遇到最好的人<br /></span> 我也真希望 <span class="keyword">我就是</span>;<br />

<span class="placeholder"/><span class="comments">// I love three things in this world.</span><br />

<span class="placeholder"/>Sun for day, moon for night, and you forever.<br />

<span class="comments">// I love you not because of who you are,<br />but because of who I am when I am with you.

</span><br />

<br>

I want to say:<br />

You are the sun at two in the morning;<br />

玲瓏骰子安紅豆<br />

入骨相思知不知<br />

</div>

沈菇?jīng)觯@是我們相遇的第:

</div>

不思量自難忘<br/>

</div>

var offsetX = $("#loveHeart").width() / 2;

var offsetY = $("#loveHeart").height() / 2 - 55;

var together = new Date();

together.setFullYear(2017, 2, 14);

together.setHours(19);

together.setMinutes(0);

together.setSeconds(0);

together.setMilliseconds(0);

if (!document.createElement('canvas').getContext) {

var msg = document.createElement("div");

msg.id = "errorMsg";

msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";

document.body.appendChild(msg);

$("#code").css("display", "none")

$("#copyright").css("position", "absolute");

$("#copyright").css("bottom", "10px");

document.execCommand("stop");

} else {

setTimeout(function () {

startHeartAnimation();

}, 5000);

timeElapse(together);

setInterval(function () {

timeElapse(together);

}, 500);

adjustCodePosition();

$("#code").typewriter();

}

</script>

<p></p>

</div>

</body>

</html>

上面這個(gè)就是html的源碼，當(dāng)然還有css和js的源碼我還沒有給到大家，主要是大家目前還沒有對(duì)html有個(gè)了解，再去學(xué)css和js就會(huì)有點(diǎn)懵逼的樣子了

那我從第一行開始講起吧，

第一行是告訴瀏覽器，我這個(gè)是HTML5，所以你要用h5的格式去解析。這個(gè)不是很重要，反正每個(gè)頁面上都有的。

第二行之前講過，我就不再敘述了，是html網(wǎng)頁的開頭標(biāo)簽，相當(dāng)于就是告訴html，我要開始寫代碼啦

第三行之前也講過，是html中的頭文件開頭標(biāo)簽

第四行meta是告訴瀏覽器接受一個(gè)html文檔

等等，領(lǐng)導(dǎo)回來了……，我明天再說了

在線咨詢

上一篇：html頁面中css縮放圖片的方法
下一篇：Css實(shí)現(xiàn)手機(jī)端頁面強(qiáng)制橫屏

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML常用代碼集合，背完這些基本可以自己做表白網(wǎng)頁了

一、目錄結(jié)構(gòu)：

二、代碼預(yù)覽：

三、總結(jié)：

您的項(xiàng)目需求