怎么用html5制作个人主页

总体把页面一分为二，<header>是包含在<article>里面的，页脚部分是单独的一块儿。大致结构获悉了后再从局部入手，<header>部分，有主标题、副标题、还有作者署名，前面我们讲过，如果除了主标题，还有一个副标题，那可以把这两个标题写在一个<hgroup>元素中。如果除了主标题之外，还有其他内容，比如内容摘要、发表时间、作者、图片或者小标题链接等，那就应该把他们放在一个 <header>元素中。

<header>

<hgroup>

<h1>给个人博客增加色彩元素提升网站用户体验</h1>

<h2>网页的色彩——决定用户是否驻足停留的关键</h2>

</hgroup>

<p class="Byline">design by DanceSmile</p>

</header>

接下来是文章正文部分：

部分代码：

<div class="Content">

<p>第一眼看到杨青个人博客网站的时候，如果你喜欢...</p>

...

</div>

正文当中还有一幅插图，html5新增加了插图这个<figure>语义元素，<figcaption>不是只能包含文本，任何html元素都可以，比如链接、小图标。<figcaption>包含了对图片的完整说明，所以alt文本就显得多于了，这种情况下，可以把<img>元素中的alt属性删除：

<figure>

<img src="/d/file/jstt/bj/2013-06-19/200e781ddaa1d92cc3996637d06c38b2.jpg">

<figcaption>图片来源：腾讯CDC《浅析网页色彩应用》</figcaption>

</figure>

最后在把上面的代码写在<article>里面。

<footer>部分只是一些简单的页脚信息。

你想不想在网络上拥有一片属于你自己的空间呢？做一个个人主页吧！在这儿，你可以把自己介绍给大家，发表自己的文章和见解，认识更多的朋友。制作主页并不难，现在我们就来一起学习。

一、准备材料

首先要计划好准备在主页上放哪些内容，比如可以将自我介绍(包括家庭成员、爱好、联系方式等)、自己认为写得很好的文章、画得很好的画、拍得不错的照片放到个人主页上。把这些内容准备好后，再建一个文件夹，并在这个文件夹下建立几个子文件夹，把各方面的文件放入相应的文件夹里，便于管理文件。文件名最好用自己便于识别的字符。图像最好使用JPG和GIF格式的。如果是其他格式的图像，可以用图像处理软件进行转换，比如Office97的照片编辑器。

二、开始制作

材料准备好了，应该怎样制作呢？初学者可以使用Front-page98的汉化版本，它的用法与Word97很相似，就省去学习复杂的HTML语言了。基本的网页就是文字和图片的组合，再加上一些HTML文件、图片及音乐文件的链接、调用等。在特定的文字或图片上加入链接的方法是，先选定一段文字或一幅图片，然后点击菜单中的“插入／超级链接”命令在地址栏中填入链接要调用的地址就可以了。一般将首页保存为index.htm(有的主机要求为index.html)，然后再做二级页面。

三、上传到网上

最后要做的是把主页放到网络上，别人就可以访问你的主页了。这就需要先申请一个主页空间。网络上有很多免费提供个人主页空间的站点，如www.963.net，http：／／fjnet.net.cn，www.zg169.net，www.online.xa.sn.cn／page，http：／／member.zz.ha.cn，www.sina.com.cn等。点击该链接后，按要求填写好申请表格。该站点的管理员会将用户名、密码、上传主页的方法、目录、起始页的文件名规定等发送到你指定的电子信箱。这样，免费主页空间就申请好了。只要用FTP向指定的位置上传主页就可以了。

具体步骤如下：

1、打开服务器中网站文件的目录，假设为D:\\abcd。

2、新建一个txt文件，文件名改为index.htm。index.htm文件是网站首页的链接，进入你的网站后第一个显示的就是这个文件上的内容。然后右键index.htm—>打开方式—>记事本。

3、现在可以添加html代码，使得网页显示文本。<p></p>是html中段落的标签，<p>是开始符，</p>是结束符，两个符号之间的字会显示在网页上。在index.htm中添加一行：<p>声明：这是一个个人网站，网页里的内容均为站主原创，请勿用于违法行为。</p>；下图为效果截图。

4、还可以为网页添加图片，图片的标签是<img>。假设图片文件的路径为D:\\abcd\pic\123.jpg，则在index.htm中添加一行：<img src=pic/123.jpg>。下图为效果截图。

5、添加链接的标签是<a></a>。在index.htm中添加一行：<a href="https://www.baidu.com">百度，前面是链接，这里是显示的字。</a>下图为效果截图，点开蓝字，则会跳转到"百度一下"。

6、完成上述步骤后，即可制作个人网页。

---