从99乘法表初始JavaScript、Html与CSS

最新推荐文章于 2023-12-29 11:49:36 发布

mario_lover

最新推荐文章于 2023-12-29 11:49:36 发布

阅读量895

点赞数 2

分类专栏： Java 文章标签： html css javascript 脚本语言 java

本文链接：https://blog.youkuaiyun.com/iMotherBoard/article/details/103811001

版权

Java 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了JavaScript、HTML和CSS的基础知识，并通过实例展示了如何使用它们来实现99乘法表。JavaScript是一种轻量级的编程语言，常用于Web开发；HTML是超文本标记语言，用于构建网页结构；CSS则负责网页的样式设计。通过JavaScript的代码控制，结合HTML和CSS，可以在浏览器上展示乘法表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript、HTML与CSS 是什么

JavaScript
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

HTML
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

简而言之，JavaScript、HTML与CSS是前端开发的重要组成部分。我们所见网页几乎都离不开他们。

99乘法表

上过小学都知道99乘法表，长下面这个样子：
在这里插入图片描述我们就是通过JavaScript、HTML 以及CSS编码，在浏览器上展示出上面这个99乘法表。

技术栈

HTML的基本框架

 <!DOCTYPE html>：html5 定义该文档是html文档
   html:html文档的根标签
   head：头标签。用于指定html文档的一些属性。引入外部的资源
   title：标题标签。
   body：体标签

HTML中标签分类

围堵标签：有开始标签和结束标签。如 <body> </body>
自闭和标签：开始标签和结束标签在一起。如 <hr/>

HTML中table标签

table：定义表格
	align：对齐方式
tr：定义行
td：定义单元格

CSS基本用法

在Style标签中定义

JS代码的页面输出

 document.write("输出内容");

JS代码的流程控制

 for循环，与Java语言基本一致

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        /* <style>为CSS代码，控制表格单元格的外观*/
        td{
            border: 1px solid cadetblue;
        }

    </style>

    <script>
        // <script>标签下为JS代码
        document.write("<table  align='center'>");/*<table>表格开始的标志*/


        //99乘法表共有9行，外层循环控制
        for (var i = 1; i <= 9 ; i++) {
            document.write("<tr>");  /*<tr>为新起一行的标志*/
            for (var j = 1; j <=i ; j++) {
                document.write("<td>"); /*<td>为新起单元格的标志*/


                document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");/*&nbsp;&nbsp;&nbsp;代表三个空格*/

                document.write("</td>");/*</td>单元格结束的标志*/
            }
            document.write("</tr>");/*<tr>一行结束的标志*/
        }

        //2.完成表格嵌套
        document.write("</table>");/*<table>表格结束的标志*/

    </script>
</head>
<body>
<!--<body>为空-->
</body>
</html>