HTML常用代码集合，背完这些基本可以自己做表白网页了

lt;marquee>...</marquee>普通卷动

<marquee behavior=slide>...</marquee>滑动

<marquee behavior=scroll>...</marquee>预设卷动

<marquee behavior=alternate>...</marquee>来回卷动

<marquee direction=down>...</marquee>向下卷动

<marquee direction=up>...</marquee>向上卷动

<marquee direction=right></marquee>向右卷动

<marquee direction=left></marquee>向左卷动

<marquee loop=2>...</marquee>卷动次数

<marquee width=180>...</marquee>设定宽度

<marquee height=30>...</marquee>设定高度

<marquee bgcolor=FF0000>...</marquee>设定背景颜色

<marquee scrollamount=30>...</marquee>设定卷动距离

<marquee scrolldelay=300>...</marquee>设定卷动时间

<!>字体效果

<h1>...</h1>标题字(最大)

<h6>...</h6>标题字(最小)

<b>...</b>粗体字

<strong>...</strong>粗体字(强调)

<i>...</i>斜体字

<em>...</em>斜体字(强调)

<dfn>...</dfn>斜体字(表示定义)

<u>...</u>底线

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

<strike>...</strike>横线

<s>...</s>删除线

<del>...</del>删除线(表示删除)

<kbd>...</kbd>键盘文字

<tt>...</tt> 打字体

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

<plaintext>...</plaintext>固定宽度字体(不执行标记符号)

<listing>...</listing> 固定宽度小字体

<font color=00ff00>...</font>字体颜色

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

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

<!>区断标记

<hr>水平线

<hr size=9>水平线(设定大小)

<hr width=80%>水平线(设定宽度)

<hr color=ff0000>水平线(设定颜色)

<br>(换行)

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

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

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

<!>连结格式

<base href=位址>(预设好连结路径)

<a href=位址></a>外部连结

<a href=位址 target=_blank></a>外部连结(另开新视窗)

<a href=位址 target=_top></a>外部连结(全视窗连结)

<a href=位址 target=页框名></a>外部连结(在指定页框连结)

<!>贴图/音乐

<img src=图片位址>贴图

<img src=图片位址 width=180>设定图片宽度

<img src=图片位址 height=30>设定图片高度

<img src=图片位址 alt=提示文字>设定图片提示文字

<img src=图片位址 border=1>设定图片边框

<bgsound src=MID音乐档位址>背景音乐设定

<!>表格语法

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

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

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

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

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

<!>分割视窗

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架

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

<a href target> 指定超连结的分割视窗

<a href=#锚的名称> 指定锚名称的超连结

<a href> 指定超连结

<a name=锚的名称> 被连结点的名称

<address>....</address> 用来显示电子邮箱地址

<b> 粗体字

<base target> 指定超连结的分割视窗

<basefont size> 更改预设字形大小

<bgsound src> 加入背景音乐

<big> 显示大字体

<blink> 闪烁的文字

<body text link vlink> 设定文字颜色

<body> 显示本文

<br> 换行

<caption align> 设定表格标题位置

<caption>...</caption> 为表格加上标题

<center> 向中对齐

<cite>...<cite> 用於引经据典的文字

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

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

<dd> 设定定义列表的项目解说

<dfn>...</dfn> 显示"定义"文字

<dir>...</dir> 列表文字标签

<dl>...</dl> 设定定义列表的标签

<dt> 设定定义列表的项目

<em> 强调之用

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

<font size> 设定字体大小

<form action> 设定户动式表单的处理方式

<form method> 设定户动式表单之资料传送方式

<frame marginheight> 设定视窗的上下边界

<frame marginwidth> 设定视窗的左右边界

<frame name> 为分割视窗命名

<frame noresize> 锁住分割视窗的大小

<frame scrolling> 设定分割视窗的卷轴

<frame src> 将html档加入视窗

<frameset cols> 将视窗分割成左右的子视窗

<frameset rows> 将视窗分割成上下的子视窗

<frameset>...</frameset> 划分分割视窗

<h1>~<h6> 设定文字大小

<head> 标示文件资讯

<hr> 加上分格线

<html> 文件的开始与结束

<i> 斜体字

<img align> 调整图形影像的位置

<img alt> 为你的图形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入图片并预设图形大小

<img hspace> 插入图片并预设图形的左右边界

<img lowsrc> 预载图片功能

<img src border> 设定图片边界

<img src> 插入图片

<img vspace> 插入图片并预设图形的上下边界

<input type name value> 在表单中加入输入栏位

<isindex> 定义查询用表单

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

<li type>...</li> 列表的项目 ( 可指定符号 )

<marquee> 跑马灯效果

<menu>...</menu> 条列文字标签

<multiple> 可同时选择多项的列表栏

<noframe> 定义不出现分割视窗的文字

<ol>...</ol> 有序号的列表

<option> 定义表单中列表栏的项目

<p align> 设定对齐方向

<p> 分段

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

<pre> 使用原有排列

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

<select>...</select> 在表单中定义列表栏

<small> 显示小字体

<strike> 文字加横线

<strong> 用於加强语气

<sub> 下标字

<sup> 上标字

<table border=n> 调整表格的宽线高度

<table cellpadding> 调整资料栏位之边界

<table cellspacing> 调整表格线的宽度

<table height> 调整表格的高度

<table width> 调整表格的宽度

<table>...</table> 产生表格的标签

<td align> 调整表格栏位之左右对齐

<td bgcolor> 设定表格栏位之背景颜色

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

<td nowrap> 设定表格栏位不换行

<td valign> 调整表格栏位之上下对齐

<td width> 调整表格栏位宽度

<td>...</td> 定义表格的资料栏位

<textarea name rows cols> 表单中加入多少列的文字输入栏

<textarea wrap> 决定文字输入栏是自动否换行

<th>...</th> 定义表格的标头栏位

<title> 文件标题

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

<tt> 打字机字体

<u> 文字加底线

<ul type>...</ul> 无序号的列表 ( 可指定符号 )

<var>...</var> 用於显示变数

天我将教大家学会制作一个简单的前端代码实现的照片墙，大家可以用任意张照片来实现这个效果，如果大家想要整个项目代码的话，或者对代码有什么问题的都可以，请在评论区留言或者直接私信我，我会第一时间发送给大家，私信的话也可以，直接回复：001

一、目录结构：

二、代码预览：

HTML代码：

CSS代码：

JavaScript代码：

Underscore.js代码：

这个是不需要我们自己敲代码的，只需要在官方网站下载下来放入js文件中重新命名即可。( 官方网站：https://underscorejs.org/ )

Underscore 是一个JavaScript库，它提供了大量有用的函数式编程助手，而无需扩展任何内置对象。

所有代码整理完之后，点击运行，效果如下：

静态效果：

动态效果：

三、总结：

是不是很简单，详细过程不了解的，想要学习更多特效的，请关注我：一点新科技。我会每天给大家分享，如果想要实现更多特效，直接私信回复我即可，其实有不错的想法的，可以把照片改成你心里的那个他(她)的照片，加个背景音乐，做个表白墙也是不错的，O(∩_∩)O哈哈~

如果有什么好的意见或者想法的，可以在评论区留言，我们一起交流，共同学习进步。大家多多转发、关注，谢谢大家！！！

喽，首先和大家说声抱歉，停更了这么久，主要是期间因为工作调动的关系，工作变忙了，没有时间来更新了，今天趁着领导不在，偷偷来更新一下吧~

首先我的分享方式可能和别人的不同，别人可能是从最开始的一步一步开始教起，我不是，我是先把效果展示给大家，让大家先看看这个东西，然后我再开始讲，有看不下去的现在就可以吧网页关了，免得看完又来喷我，我不是什么大神，喷我有什么用？我看的心里还不舒服，是吧，为了营造良好的网络环境，别喷啊~

接下来进入主题：

大家可能都看过下面的这个网页截图

这个是一个类似于计时器的这么一个情侣间的网页，今天我的目的就是把大家都教会了(不会的我下面会放源码)，然后回家有兴趣的可以做好展示给自己的另一半看看~

我也放个网址吧，让你们可以看看实际效果是什么样的

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

就是这个样子，虽然可能过气了吧，但是我相信你的另一半看完还是会很感动的

那么接下来，我要放html的源码了:然后我会开始讲解:

<!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 />

时到花自开;<br />

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

<span class="keyword">你是非常可爱的人.<br />真应该遇到最好的人<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>

沈菇凉，这是我们相遇的第:

</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>

上面这个就是html的源码，当然还有css和js的源码我还没有给到大家，主要是大家目前还没有对html有个了解，再去学css和js就会有点懵逼的样子了

那我从第一行开始讲起吧，

第一行是告诉浏览器，我这个是HTML5，所以你要用h5的格式去解析。这个不是很重要，反正每个页面上都有的。

第二行之前讲过，我就不再叙述了，是html网页的开头标签，相当于就是告诉html，我要开始写代码啦

第三行之前也讲过，是html中的头文件开头标签

第四行meta是告诉浏览器接受一个html文档

等等，领导回来了……，我明天再说了

在线咨询

上一篇：html页面中css缩放图片的方法
下一篇：Css实现手机端页面强制横屏

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML常用代码集合，背完这些基本可以自己做表白网页了

一、目录结构：

二、代码预览：

三、总结：

您的项目需求