2021-04-27 Web前端编程实验（一）

最新推荐文章于 2024-06-25 10:30:23 发布

Phunsukh_Wangdu

最新推荐文章于 2024-06-25 10:30:23 发布

阅读量1.3k

点赞数 2

分类专栏： Web前端编程文章标签： html

本文链接：https://blog.csdn.net/APPDREAMER/article/details/116211328

版权

Web前端编程专栏收录该内容

10 篇文章 2 订阅

订阅专栏

Web前端编程实验（一）

前言
本次实验所用编程语言为html，所用编辑文本工具为记事本。

注意事项
（1）前端编程注意html语言的灵活运用。
（2）具体所有实验请参考博客 Web前端编程（一）~（八）。

实验一
1、实验题目。（注：题目如下）

2、本实验所需掌握知识。
（所需掌握知识一：文本处理）

代码格式	代码例子	实现效果
`<u> 文本 </u>`	`<u> 苹果 </u>`	下划线
`<p> 文本 </p>`	`<p> 苹果 </p>`	段落
`<b> 文本 </b>`	`<b> 苹果 </b>`	加粗
`<h1> 文本 </h1>`	`<h1> 苹果 </h1>`	标题
`<b> 文本 </b>`	`<b> 苹果 </b>`	加粗
`<hr>`	`<hr>`	水平线标记

（所需掌握知识二：建立表格）

<TABLE BORDER>
    <TR>
    <TD>
      文本
    </TD>
    </TR> 
    </TABLE>

代码格式	代码例子	实现效果
`<TABLE BORDER> 文本 </TABLE>`	`<TABLE BORDER> <TR> <TD> 文本 </TD></TR> </TABLE>`	建立表格的最外层框架
`<TD> 文本 </TD>`	`<TD> 苹果 </TD>`	分列
`<TR> 文本 </TR>`	`<TR> 苹果 </TR>`	分行

（所需掌握知识三：有序列表以及转义符以及font标记）

 <OL>
      <LI><font face="隶书" size=3 color="blue"><u>&nbsp苹果</font></u>
      <LI><font face="隶书" size=3 color="blue"><u>&nbsp梨子</font></u>
      <LI><font face="隶书" size=3 color="blue"><u>&nbsp香蕉</font></u>
      <LI><font face="隶书" size=3 color="blue"><u>&nbsp草莓</font></u></p>
 </OL>

代码格式	代码例子	实现效果
`<OL> 文本 </OL>`	`<LI><font face="隶书" size=3 color="blue"><u>&nbsp苹果</font></u>`	有序列表
`<LI> 文本 </LI>`	`<LI> 苹果 </LI>`	分序
`&nbsp`	`&nbsp苹果`	空格

3、代码实现。（注：代码如下）

<html>

<head>
<meta charset="utf-8">
<title>实验一</title>
</head>

<body>

    <h1><font face="宋体" size=5 color="black">常用站点</font></h1>

    <p><font face="隶书" size=3 color="purple"><u>凤凰</u></font></p>
    <p><font face="隶书" size=3 color="blue"><u>新浪</u></font></p>
    <p><font face="隶书" size=3 color="blue"><u>搜狐</u></font></p>
    <p><font face="隶书" size=3 color="purple"><u>百度</u></font></p>

    <b><p><font face="宋体" size=6 color="black">web前端开发</font></p></b>
    <b><p><font face="宋体" size=5 color="black">HTML</font></p></b>

    <p>超文本标记语言，用于构建网页结构，定义网页包括的内容。</p>
    <HR>

    <TABLE BORDER>
    <TR>
    <TD>
    <h2><font face="宋体" size=6 color="black">水果
</font></h2>
    </TD>
    </TR>
    <TR>
    <TD>
    <OL>
      <LI><font face="隶书" size=3 color="blue"><u>&nbsp苹果</font></u>
      <LI><font face="隶书" size=3 color="blue"><u>&nbsp梨子</font></u>
      <LI><font face="隶书" size=3 color="blue"><u>&nbsp香蕉</font></u>
      <LI><font face="隶书" size=3 color="blue"><u>&nbsp草莓</font></u></p>
    </OL>
    </TD>
    </TR>  
    </TABLE>
</body>

</html>