这段时间学习了html基础教程,与书籍相结合,但是实践的较少。
试着用之前学的做一个简单的网页。
今天主要完成了首页页面制作
涉及到导航、链接、图片映射、块级操作、布局、应用音频、表单
大约效果就是这样:
刚开始不会调整尺寸,导致会有左右方向的滚动条。
网上搜了搜用<center>
可以使页面居中。就对导航和标题栏进行了居中处理。
但是导航栏我现有知识还是不怎么会调整间距,我是手动加了 改变的。导航取消下划线:添加text-decoration:none;到a中的style。
关于div之间默认换行,网上说的很多方法都没有成功,后来是调整了产生空行div的margin-top为-10px解决了。后来修改着突然发现不用也正常了。
这个页面应用最多的就是锚。用坐标标记了对应的人物区域去做图片映射,链接到人物对应的锚(人物介绍)。
关于图片映射:
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
该段代码中的shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位)
对我来说,今天觉得最难的就是布局,图片放的位置,文字与关联图片的位置。搜索了一下,使用了css中的float使得元素左右浮动。但是位置会很死板,比如图中表单我就采用了向右浮动,结果用力过猛太偏了。
左边的图在搜索了一番,添加了<DIV style="margin:0px 0px 0px 100px"><img src="主要人物.jpg" alt="主要人物" width="750px" height="420px" usemap="#mainchar" ></DIV>
。
Style margin 属性
Style 对象参考手册 Style 对象
定义和用法
margin 属性设置或返回元素的外边距。
该属性可使用 1 到 4 种值:
如果规定一种值,比如:div {margin: 50px} - 所有四个外边距都是 50px。
如果规定两种值,比如:div {margin: 50px 10px} - 上外边距和下外边距是 50px,左外边距和右外边距是 10px。
如果规定三种值,比如:div {margin: 50px 10px 20px}- 上外边距是 50px,左外边距和右外边距是 10px,下外边距是 20px。
如果规定四种值,比如:div {margin: 50px 10px 20px 30px} - 上外边距是 50px,右外边距是 10px,下外边距是 20px,左外边距是 30px。
语法
设置 margin 属性:
Object.style.margin=”%|length|auto|inherit”
返回 margin 属性:
Object.style.margin
提示和注释
margin 属性和 padding 属性都是在元素周围插入空间。然而,不同的是,margin 将围绕边框外面插入空间,padding 将在元素边框内插入空间。
关于添加音频(参考了w3school):
最好的 HTML 解决方法
实例
<audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
上面的例子使用了两个不同的音频格式。HTML5 <audio>
元素会尝试以 mp3 或 ogg 来播放音频。如果失败,代码将回退尝试 <embed>
元素。
您必须把音频转换为不同的格式。
<audio> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法回退来显示错误消息。
注释:使用 (HTML5) 解决验证问题。
添加表单:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
<p><b>注意:</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>
</body>
</html>