带你快速入门Html并制作简单网页相册


如果事与愿违,那就相信上天另有安排!

介绍

HTML称为超文本标记语言,也是一种标识性的语言。它可以通过一系列标签将网络上的文档格式统一,同时将各个地方分散的internet资源连接起来,构成一个整体。其构成的html文本也是由HTML命令组成的描述性文本,广泛应用于现在网页之中,我们所看到的网页中的文字,图片,音乐,视频动画,超链接,表格等等都是由其命令实现的。

前言

这里我就通过一片制作网页相册的教程,带你们感受html语言的魅力所在,对于我一个刚刚入门html的人来说,也许是我学了其他多种语言的原因,我觉得html语法规则不仅仅简单容易理解,还很明了,编写也非常容易,语法规则也比较简单,很适合一些想入门程序的人找感觉。

很多小伙伴总是问我有没有简单表白的小程序,我总是回答说没有!!其实方式还是有的,就比如用html制作一个相册,插入音乐,一段段回忆就有感觉,有韵味的连接起来了,展现出来的效果就好像视频一样,效果并不比视频差,修改编辑却比视频更加方便,实现起来也更容易!最主要的是————轻量化,所占的空间体积比视频小很多!

实现步骤

==================================================================

第一步

既然说到轻量化,我们这里直接就用文本编辑器就行了(windows 在桌面单机右键新建一个文本文档 Mac按住command 输入文本编辑启用文本编辑器 最后我们只需要把文本的后缀改为html就行了)

  • 拟写(网页)标题

在文本编辑器中输入下面代码


<head><title>网页标题</title></head>

这样你就能看到为你的网页设置一个个性化的标题了,上面的语法就不用我解释了,英语单词的意思!

实现效果如下:

网页标题

第二步

这里我加入center 向中对齐的命令,如果你们需要 就自己添加就行了,要文本居中就可添加!

  • 拟写正文标题

    <head><title>网页标题</title></head>
<center>
    <h1>内容标题</h1>
</center>

实现效果如下

正文标题

第三步

  • 文章内容

<center>
    <body>
        Hello World
    </body>
</center>

body就是身体的意思,文章的身体就是内容了!也只是一个标签而已,你们就这么理解吧!

实现效果如下

文章内容

到这里有的小伙伴就要问了 这个字,这么小,能不能放大,当然是可以的!
还是一样,用英语单词就能解决!


<center>
    <body>
        <font size="40">hello world</font>
    </body>
</center>

font 就是字体的意思 size 大小,就是单词的意思,不用理解!记住就行了

可能有的小伙伴还需要给字体添加颜色


<center>
    <body>
        <font size="40" color=red>hello world</font>
    </body>
</center>

理解这里就不余缀了,还是单词意思,遵守语法规则就行了!

第四步

在桌面新建一个文件夹,把你要展示的图片和你编写的这个网页配置文件放在同一个文件夹里面
文件的名字随意了,最好是简洁,看看下面的语句你就明白了。


<marquee scrollamount="30">
    <img src="1.bmp" width="1920" height="1080">
    <img src="2.jpg" width="1920" height="1080">
    <img src="3.png" width="1920" height="1080">
    <img src="4.jpg" width="1920" height="1080">
    <img src="5.png" width="1920" height="1080">
</marquee>

marquee 普通卷动的意思,这里我选用的是 <img>标签插入正常的图片,还有一种是使用 <css> 样式插入背景图片 这个后面在说把!

widthheight 分别就是限制图片的宽和高了,后面的数值是像素密度,也就是我们说的分辨率了,记得引号是英文状态下的符号!

到这里,基本就能实现网页相册的图片轮播了!是不是很简单呢!

是的一切都是优雅,一切都是这么美好!

实现效果如下

图片播放

到这里是不是就结束了呢?
不,还没有,我们还有背景音乐!

第五步

  • 插入背景音乐

同样把我们要插入的背景音乐放在同一个文件夹里面

这里我们使用 embed 标签 ,同样使用 src 属性:


<embed src="shifeiti.mp3" hidden="false"

autostart="true" loop="true"/>

hidden 隐藏播放器的播放按钮

autostart ="true" 自动播放 false 则为手动点击播放

loop="true" 循环播放 false 为只播放一次

到了这里差不多就可以实现我们想要的效果了。

注意 如果播放不了,请更换浏览器即可!一般只要不是太老的播放器都能实现播放!!

因为是本地连接,没有上传到服务器,如果要给他人欣赏,我们只需要将此文件夹打包发送给别人就可以了!

总结

网页文件就是这么简单,方便快捷,容易理解记忆,这只是简单的,如果我们找到了别人的源码,那我么只需要修改相应的数据就能供我们自己使用了


<center>
    <head><title>My photo</title>
    <embed src="shifeiti.mp3" hidden="false"
    autostart="true" loop="true">
    </head>
    <h1>single photo</h1>
</center>
<center>
<body>
    <font size="40" color=red>hello world</font>
</body>
</center>
<marquee scrollamount="30">
    <img src="1.bmp" width="1920" height="1080">
    <img src="2.jpg" width="1920" height="1080">
    <img src="3.png" width="1920" height="1080">
    <img src="4.jpg" width="1920" height="1080">
    <img src="5.png" width="1920" height="1080">
</marquee>

上面就是我写的之前代码的范例了,没看懂的小伙伴直接复制修改一下路径和相关信息就能用了。

最后在贴上一些常用的语法


##字体效果 
<h1>...</h1> ##标题字(最大) 
<h6>...</h6> ##标题字(最小) 
<b>...</b> ##粗体字 
<xmp>...</xmp> ##固定宽度字体(在文件中空白、换行、定位功能有效) 
<plaintext>...</plaintext> ##固定宽度字体(不执行标记符号) 
<listing>...</listing> ##固定宽度小字体 
<strong>...</strong> ##粗体字(强调) 
<i>...</i> ##斜体字 
<em>...</em> ##斜体字(强调) 
<dfn>...</dfn> ##斜体字(表示定义) 
<u>...</u> ##底线 
<ins>...</ins> ##底线(表示插入文字) 
<strike>...</strike> ##横线 
<s>...</s> ##删除线 
<del>...</del> ##删除线(表示删除) 
<kbd>...</kbd> ##键盘文字 
<tt>...</tt> ##打字体 
<h1>~<h6> ##设定文字大小 
<head> ##标示文件信息 
<hr> ##加上分网格线 
<html> ##文件的开始与结束  


##水平线 
<hr size=9> ##水平线(设定大小) 
<hr width=80%> ##水平线(设定宽度) 
<hr color=ff0000> ##水平线(设定颜色)  
<nobr>...</nobr> ##水域(不换行) 
<p>...</p> ##水域(段落) 
<center>...</center> ##置中 


##贴图/音乐 
<img src=图片地址> ##贴图 
<img src=图片地址 width=180> ##设定图片宽度 
<img src=图片地址 height=30> ##设定图片高度 
<img src=图片地址 alt=提示文字> ##设定图片提示文字 
<img src=图片地址 border=1> ##设定图片边框 
<bgsound src=MID音乐文件地址> ##背景音乐设定 
<img align> ##调整图形影像的位置 
<img ali> ##为你的图形影像加注 
<img dynsrc loop> ##加入影片 
<img height width> ##插入图片并预设图形大小 


##分割窗口 
<frameset cols="20%,*"> ##左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整 
<frameset rows="20%,*"> ##上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整 
<frameset cols="20%,*"> ##分割左右两个框架 
<frameset cols="20%,*,20%"> ##分割左中右三个框架 
<frameset rows="20%,*,20%"> ##分割上中下三个框架 
<form action> ##设定户动式窗体的处理方式 
<from method> ##设定户动式窗体之资料传送方式 
<frame marginheight> ##设定窗口的上下边界 
<frame marginwidth> ##设定窗口的左右边界 
<frame name> ##为分割窗口命名 
<frame noresize> ##锁住分割窗口的大小 
<frame scrolling> ##设定分割窗口的滚动条 
<frame src> ##将HTML文件加入窗口 
<frameset cols> ##将窗口分割成左右的子窗口 
<frameset rows> ##将窗口分割成上下的子窗口 
<frameset>...</frameset> ##划分分割窗口 

##表格语法 
<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> ##指定储存格合并列的列数(使用数字) 

##动画
<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> ##设定卷动时间 


##链接
<a href target> ##指定超级链接的分割窗口 
<a href=#锚的名称> ##指定锚名称的超级链接 
<a href> ##指定超级链接 
<a name=锚的名称> ##被连结点的名称 
<address>....</address> ##用来显示电子邮箱地址 
<base href=地址> ##(预设好连结路径) 
<a href=地址> ##外部连结 
<a href=地址 target=_blank> ##外部连结(另开新窗口) 
<a href=地址 target=_top> ##外部连结(全窗口连结) 
<a href=地址 target=页框名> ##外部连结(在指定页框连结) 

文章作者: 筱雨涵
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 筱雨涵 !