临时工作需要搭建一个web的展示页面,找了本教程和几个模版依葫芦画瓢,虽然搭的丑但勉强能看。在遗忘前梳理下基本用法。
TIPS
- 用谷歌浏览器打开网站,
【F12】
用其自带功能可查看整个web界面是如何搭建起来的。 - 编辑软件用的是
Sublime Text 3
,带高亮,自动补充等功能。
OK, Let's Go!
<!DOCTYPE html>
<html>
<head>
<title>title部分是web界面的标题栏</title>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"> <! 我是注释!此行代码解决中文乱码问题。>
</head>
<body>
body部分是web界面的内容。
<h1 align="center">标题并居中</h1>
<p align="right">文字内容右对齐并换行</p>
<hr width="300" size="5" color="770000" align="left" title="分割线,鼠标点中此线,显示title">
实现缩进功能。
<br> <! 实现换行功能>
<font color="#006600" size="2" face="黑体">设置字体颜色、字体大小等</font><br>
<font color="00dddd" size="5" face="隶书"> 蓝色字体--隶书</font>
<br>
<i>斜体</i> <u>下划线</u> <b>加粗</b><br> <strike>删除线</strike>
<p><i><u><b><font color="0066dd" size="5" face="隶书"> 各种嵌套</font></b></u></i></p>
<h3 align="left">列表</h3>
<ul>
<li>我是无序列表第1行</li>
<li>我是无序列表第2行</li>
</ul>
<ol>
<li>我是有序列表第1行</li>
<li>我是有序列表第2行</li>
</ol>
<h3>公式</h3>
2<sup>3</sup>=?<br>
log<sub>3</sub>81=?<br>
<h3>滚动特效</h3>
<font size="4" color="#cc0000">
<marquee direction="left">注意!将从右边滚动!</marquee>
<marquee direction="up" scrollamount="10" behavior="slide" loop=10 speed=2
bgcolor="#CCFF66" width="250" height="55">
let's go!!
</marquee>
</font>
<h2>链接</h2>
<h4>网页链接</h4>
<a href="anotherweb.html" target="_blank"
title="点击这个链接你将访问另一个网页.">
访问另一个网页
</a>
<h4>页面内的链接</h4>
<a name="top"><i>从这里开始</i></a><br>
<a href="#1">第一个链接</a><br>
<a href="#2">第二个链接</a><br>
<a href="#3">第三个链接</a><br>
<p><b>链接的内容:</b></p>
First:<a name="1">第一部分内容</a><br>
Second:<a name="2">第二部分内容</a><br>
Third:<a name="3">第三部分内容</a><br>
<h2>图片管理</h2>
<p>
<img src="images/fa.png" border="3" title="google translation" height="55">
<br><br>
<p>如果图片不存在,请显示wrong标记!</p>
<img src="images/fv.jpg" alt="wrong" align="absmiddle" border="4">
</p>
<b>图片链接</b><br>
<a href="anotherweb.html"><img src="images/fa.png" border="2"></a>
<br>
<b>图片滚动设置</b><br>
<marquee direction="down" scrollamount="10" loop="10" width="300"
height="300"><img src="images/fa.png"></marquee>
<br>
<h3>表格</h3>
<table width="500" height="100" align="center" border="2" bordercolor="#000000">
<caption><font color="#cc0000"><b>表格标题</b></font></caption>
<thead>
<th></th>
<th colspan="2" align="center">列名1</th>
<th bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee">列名2</th>
<th>列名3</th>
</thead>
<tfoot>
<tr><td>
さいこう! 标注!</td></tr>
</tfoot>
<tbody>
<tr>
<th>行名1</th>
<td background="images/fa.png">No.1</td>
<td>No.2</td>
<td>No.3</td>
<td>No.4</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
网友评论