html个人简单练习

来源：互联网发布：图片编辑字幕软件编辑：程序博客网时间：2024/05/22 10:34

这段时间学习了html基础教程，与书籍相结合，但是实践的较少。
试着用之前学的做一个简单的网页。
今天主要完成了首页页面制作
涉及到导航、链接、图片映射、块级操作、布局、应用音频、表单

大约效果就是这样：
这里写图片描述

刚开始不会调整尺寸，导致会有左右方向的滚动条。
网上搜了搜用<center> 可以使页面居中。就对导航和标题栏进行了居中处理。

但是导航栏我现有知识还是不怎么会调整间距，我是手动加了&nbsp改变的。导航取消下划线：添加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>

效果

阅读全文

0 0