首页 > 网站建设 >

网站制作静态页面HTML语法实际操作经验分享(二)

发布时间:2018-08-27 作者:深圳网站制作

本文接上篇,网站制作静态语法基础分享。由于时间以及篇幅关系,深圳网站制作会分期陆续分享我们的网页前端设计师的静态网页制作心得。
【示例】使用Dreamweaver新建文档,保存为test2.html。输入下面代码,使用无序列表分别显示了一元二次方程求解有4种方法。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>示例代码</title>
</head>
<body>
<h1>解一元二次方程</h1>
<p>一元二次方程求解有4种方法:</p>
<ul>
<li>直接开平方法</li>
<li>配方法</li>
<li>公式法</li>

<li>分解因式法</li>
</ul>
</body>
</html>
按F12键,在浏览器中预览,则显示效果如下图所示。

使用格式标签定义数学解方程文本图使用无序列表分别显示一元二次方程求解方法
【示例】新建文档,保存为test3.html。输入下面代码,使用定义列表显示两个成语的解释。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>示例代码</title>
</head>
<body>
<h1>成语词条列表</h1>
<dl>
<dt>知无不言,言无不尽</dt>
<dd>知道的就说,要说就毫无保留。</dd>
<dt>智者千虑,必有一失</dt>
<dd>不管多聪明的人,在很多次的考虑中,也一定会出现个别错误。</dd>
</dl>
</body>
</html>按F12键,在浏览器中预览,则显示效果如图所示。
4.链接标签链接标签可以实现把多个网页联系在一起。
☑ <a>:定义锚。
☑ <link>:定义文档与外部资源的关系。
☑ <nav>:定义导航链接。
【示例】新建文档,保存为test4.html。输入下面代码,使用<a>标签定义一个超链接,单击该超链接可以跳转到百度首页。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>示例代码</title>
</head>
<body>
<ahref="http://www.baidu.com/">去百度搜索</a>
</body>
</html>
【示例】新建文档,保存为test5.html。输入下面代码,使用<a>标签可以定义锚点。锚点是一类特殊的超链接,它可以定位到网页中某个具体的位置。例如,在下面示例中单击超链接文本,就可以跳转到网页的底部。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>示例代码</title>
</head>
<body>
<ahref="#btm">跳转到底部</a>
<divid="box"style="height:2000px;border:solid1pxred;">撑开浏览器滚动条</div>
<spanid="btm">底部锚点位置</span>
</body></html>
5.图像多媒体标签图像多媒体标签主要用于引入外部多媒体文件,并进行显示。主要包括下面几个标签。
☑ <img>:定义图像。
☑ <map>:定义图像映射。
☑ <area>:定义图像地图内部的区域。
☑ <canvas>:定义图形。
☑ <figcaption>:定义figure元素的标题。
☑ <figure>:定义媒介内容的分组,以及它们的标题。
☑ <audio>:定义声音内容。
☑ <source>:定义媒介源。
☑ <track>:定义用在媒体播放器中的文本轨道。
☑ <video>:定义视频。
6.表格标签表格标签用来组织和管理数据,主要包括下面几个标签。
☑ <table>:定义表格。
☑ <caption>:定义表格标题。
☑ <th>:定义表格中的表头单元格。
☑ <tr>:定义表格中的行。
☑ <td>:定义表格中的单元。
☑ <thead>:定义表格中的表头内容。
☑ <tbody>:定义表格中的主体内容。
☑ <tfoot>:定义表格中的表注内容(脚注)。
☑ <col>:定义表格中一个或多个列的属性值。
☑ <colgroup>:定义表格中供格式化的列组。
【示例】新建文档,保存为test6.html。输入下面代码,使用表格结构显示5行3列的数据集。
按F12键,在浏览器中预览,则显示效果如图显示表格数据。网站制作静态语法经验分享我们经天就到这里,全文未完,如您认为对您有帮助,敬请持续关注本站。深圳网站制作博纳网络编辑整理。
文章标题:网站制作静态页面HTML语法实际操作经验分享(二)
本文地址:https://www.198bona.com/news/1269.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯