XKLibra


喵~

WEB的基础教程

  • ~17.38K 字
  • 次阅读
  1. 1. WEB的基础教程
    1. 1.1. 编辑器OR文本编辑器
    2. 1.2. HTML基础
      1. 1.2.1. HTML 段落与文字
        1. 1.2.1.1. 标题
        2. 1.2.1.2. 段落
      2. 1.2.2. HTML结构标签(部分)
      3. 1.2.3. HTML移动端的基本结构(部分)
      4. 1.2.4. HTML 列表
      5. 1.2.5. HTML 超链接
      6. 1.2.6. HTML 表格
        1. 1.2.6.1. 表格的基本常用标签
        2. 1.2.6.2. 表格table,tr,td标签的常用属性
        3. 1.2.6.3. 表格的行、列合并
      7. 1.2.7. HTML 图像
      8. 1.2.8. HTML 表单
        1. 1.2.8.1. 1.表单的组成
        2. 1.2.8.2. 2.表单属性
        3. 1.2.8.3. 2.使用 <input> 标签创建表单控件
        4. 1.2.8.4. 3.使用 <select> 标签创建表单控件
        5. 1.2.8.5. 4.创建文本域
      9. 1.2.9. HTML 视频及音频
        1. 1.2.9.1. WEB视频
        2. 1.2.9.2. WEB音频
    3. 1.3. CSS
    4. 1.4. JavaScript
      1. 1.4.1. javaScript输出
      2. 1.4.2. 使用 window.alert()
      3. 1.4.3. 操作 HTML 元素
      4. 1.4.4. 写到 HTML 文档
      5. 1.4.5. 写到控制台

更新中……

这是以我的笔记来写的，可能不全哦~

详细WEB可以去RUNOOB.COM看。

WEB的基础教程

1
超文本标记语言（英语：HyperText Markup Language，简称：HTML）

是一种用于创建网页的标准标记语言。

1
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

编辑器OR文本编辑器

1
编写HTML可以使用普通的文本编辑器来进行编写，为了方便便携，将推荐以下编辑器。
  1. VS Code ：https://code.visualstudio.com/
  2. IntelliJ IDEA ：Download IntelliJ IDEA

HTML基础

是最简单的大致基本架构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<!-- 这只是随便写的 -->
<html>
    <head> <!--头部一般JS和CSS-->
        <meta charset="utf8">
        <title>这是个HTML的格式</title>
    </head>
    <body> <!--主要可视内容-->
        <p>F12 pls</p>
        <h1 style="text-align:center;">这是个HTML的格式</h1> <!--一个标题-->
        <p>awa<br>awa</p>
        <a href="https://www.runoob.com/html/html-links.html"><p>WCAO</p></a>
        <h2 style="background-color: aqua;">WCAOOOOOO</h2>
        <p style="font-family:arial;color: red;font: size 20px;">RED</p>
        <a href="https://www.runoob.com/html/html-images.html"><img src="//cdn.jsdelivr.net/gh/XKLibra/image@main/source/images/thumb/thumb_24.webp"></a>
        <table border="1">
            <tr>
                <th>H1</th>
                <tr>H2</tr>
            </tr>
            <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
            </tr>
        </table>
        <a href="https://www.runoob.com/html/html-tables.html">TR</a>
        <div>
            <a href="https://www.runoob.com/html/html-layouts.html"><h1 style="text-align: center;"></h1></a>
        </div>
        <form action=""> <!--表单！！-->
            Username: <input type="text" name="user"><br>
            Password: <input type="password" name="password">
            <input type="submit" value="Submit">
        </form>

    </body>
</html>

HTML 段落与文字

标题

HTML 标题（Heading）是通过

<h1> - <h6> 标签来定义的。

1
2
3
4
5
6
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>

段落

HTML 段落是通过标签元素

1
2
3
4
5
6
7
8
<p>这是一个段落。</p> <!-- 段落标签 -->
<p>这是另外一个段落。</p>

<p> <!-- <br/> 用于换行的标签 -->
    I am you<br/>
    you is me<br/>
    AHHHHHHH
</p>

通用内联元素

1
2
3
4
5
6
7
8
9
10
<span>要修样式改的文字<span>

<div>
    <h2>T1</h2>
    <p>text1 <span>span</span></p>
</div>
<div>
    <h2>T2</h2>
    <p>text2 <span>span</span></p>
</div>

其他常见元素

1
2
3
4
5
<strong>内容</strong><!-- 加粗 -->
<em>内容</em><!-- 斜体 -->
<sup>上标</sup><!-- 上标标签 -->
<sub>下标</sub><!-- 下标标签 -->
<mark>内容</mark><!-- 高亮 -->

HTML结构标签(部分)

  1. article
    代表文档，包括header,section等元素
  2. section
    区块元素，建议与article搭配使用
  3. nav
    导航区块元素，用于导航栏等
  4. aside
    附属文章元素，用于主要文章相关内容的引用，侧边栏，广告等
  5. time
    这个懂的都懂，用于定义日期或时间
  6. header
    用于定义文档的页眉
  7. footer
    用于标记文档的脚注
  8. hgroup
    用于将标题及子标题进行分组的元素
  9. address
    呈现用户的联系方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 头部 -->
<header>
    <nav></nav>
</header>
<!-- 主体部分 -->
<div class="main">
    <article>
        <section></section>
        <section></section>
    </article>
    <aside></aside>
</div>
<!-- 底部 -->
<footer></footer>

HTML移动端的基本结构(部分)

1
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

width: 控制 viewport 的大小

height: 和width相对应，指定高度

inital-scale: 初始缩放比例

maximum-scale: 允许用户缩放到的最大比例

minimum-scale: 允许用户缩放到的最小比例

user-scalable: 是否禁用缩放(zoomin)功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <!-- 如你所见，以下是标题 -->
    <title>哈？我还要想标题? 哼！我才不干呢！</title>
</head>
<body>
    <!-- 头部 -->
    <header>
        <nav></nav>
    </header>
    <!-- 主体部分 -->
    <div class="main">
        <article>
            <section></section>
            <section></section>
        </article>
        <aside></aside>
    </div>
    <!-- 底部 -->
    <footer></footer>
</body>
</html>

HTML 列表

1.无序列表

1
2
3
4
5
<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
</ul>

效果

2.有序列表

1
2
3
4
5
<ol>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
</ol>

效果

当然制作部分详细列表时，就需要嵌套一个列表，如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ol>
    <li>RTS类
        <ol>
            <li>RA2,RA3</li>
            <li>c&c</li>
            <li>ST2</li>
        </ol>
    </li>
    <li>4X
        <ol>
            <li>Stellaris</li>
            <li>Sid Meier’s Civilization</li>
        </ol>
    </li>
</ol>

HTML 超链接

<a> 来定义的

href用于创建指向另一个文档的链接来跳转桃新的文档

name用于创建文档内的书签来跳转到文档中的某个部分

1
2
3
4
5
6
7
8
9
10
11
<a href="链接地址 或 其他标签的ID，name所定义的值" target="目标网页打开方式的值">链接文字内容</a>
<a href="https://xklibra.cloud">超这是一个链接</a>

<!-- href -->
<p><a href="https://cn.bing.com">bing--本绝对链接</a>是一个指向万维网上的网页链接
</p>
<p><a href="min-TEST.html">本相对链接</a>是一个指向本网站的一个网页的链接
</p>
<!-- name or id -->
<a name="锚点名称">锚点所在位置文字</a>
<a id="锚点名称">锚点所在位置文字</a>

target 属性的值有4个

1
2
3
4
<a href="链接地址" target="_blank">链接文字内容</a><!-- 在新窗口中打开目标页面 -->
<a href="链接地址" target="_self">链接文字内容</a><!-- 默认值，在当前页面打开目标页面 -->
<a href="链接地址" target="_parent">链接文字内容</a><!-- 在父框架中打开目标页面 -->
<a href="链接地址" target="_top">链接文字内容</a><!-- 在整个窗口中打开目标页面 -->

HTML 表格

表格的基本常用标签

1.<table>:表格元素，用于定义表格外框

2.<tr>:定义表格行

3.<th>:定义表格的表头

4.<td>:定义单元格

5.<tr>:表示多行

6.<caption>:表格标题

语法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
    <caption>标题</caption><!-- 标题并不一定需要 -->
    <tr>
        <th>表头 1</th>
        <th>表头 2</th>
    </tr>
    <tr>
        <td>单元格1-1</td>
        <td>单元格1-2</td>
    </tr>
    <tr>
        <td>单元格2-1</td>
        <td>单元格2-2</td>
    </tr>
</table>

表格table,tr,td标签的常用属性

1.<table>标签的常用属性

属性 说明
width 定义表格的总宽度
height 定义表格的总高度
border 定义表格边框的宽度，默认值为0，值为0时边框线隐藏，值越大边框线越粗
bordercolor 定义表格边框的颜色
cellpadding 定义单元格的补白，即单元格内容与单元格边框线之间的距离
cellspacing 定义单元格的边界，即单元格与单元格之间的间距
align 定义整个表格的水平对齐方式，参数有left、center、right
bgcolor 定义表格整体的背景颜色 
1
<table border="1" width="300" height="100" bordercolor="#FFF" cellpadding="5" cellspacing="5" align="center" bgcolor="#CCC">

2.<tr>标签的常用属性

属性 说明
height 定义表格行的高度
bgcolor 定义表格行的背景颜色
align 定义行内文字的水平对齐方式，参数有left、center、right
valign 定义行内文字的垂直对齐方式，参数有top、middle、bottom 
1
2
3
4
5
6
7
8
<tr bgcolor="#FFCCFF" height="50" valign="bottom">
    <th colspan="3">AHH</th><!-- 合并 -->
</tr>
<tr align="center">
    <td>NAME</td>
    <td>WEB</td>
    <td>PS</td>
</tr>

3.<td>标签的常用属性

属性 说明
width 定义单元格的宽度，设置后对当前一列的单元格都有效
height 定义单元格的高度，设置后对当前一行的单元格都有效
bgcolor 定义单元格的背景颜色
align 定义单元格的文字水平对齐方式，参数有left、center、right
valign 定义单元格的文字垂直对齐方式，参数有top、middle、bottom
colspan 合并水平方向的单元格，即列合并
rowspan 合并垂直方向的单元格，即行合并 
1
<td width="80" height="30" bgcolor="#aa00ff" align="left" valign="top">

表格的行、列合并

表格中经常会有行、列合并进行数据输入的情况

1.rowspan：行合并，指定单元格所占的行数

语法如下:

1
<td rowspan="跨的行数">

2.colspan：列合并，指定单元格所占的列数

语法如下:

1
<td colspan="跨的列数">

HTML 图像

HTML 图像是通过标签

<img> 标签来定义的

IMG标签常用常用的图片格式GIF、JPEG、PNG

1.IMG标签图片插入语法如下：

1
<img src="图片文件的地址" />

2..IMG标签图片的常用属性

属性 说明
width 图片的宽度
height 图片的高度
title 对图片的文字说明
alt 将无法加载的图片替换为文本 
1
2
<img src="图片文件的地址" width="宽度" height="高度" title="对图片的文字说明" alt="图片替换文本">
<img src="img/2233.png" width="22" height="33" title="22 and 33" alt="22 and 33的图片">

HTML 表单

1.表单的组成

通常用 <from></form>来定义表单，通过action、name、method等常用属性等内容来对表单信息进行收集和传递

创建表单的基本语法如下：

1
2
3
<form 常用属性及值>
    提示信息及各种表单类容
</form>

2.表单属性

1.action

action属性定义在提交表单时的动作，action属性后面的值是提交的地址，表单会被提交到Web服

务器的页面上。语法为：

1
<form action="表单提交的地址">

例如，<formaction="book_page.php">，当点击提交按钮时，表单会提交到book_page.php这

个页面进行处理

2.method

method属性规定在提交表单时所用的HTTP方法。它的取值有 get 和 post

语法为：

1
<form method="get/post"><!-- / is RO -->

PS: get速度快但安全性不如post

3.name

name属性用于表单的命名。有时候一个页面可能存在多个表单，为表单进行命名是为了进行区分。虽

然name属性不是必要属性，但是为了防止多个表单数据提交到服务器引起数据混乱，最好还是根据

表单内容为每个表单进行命名。例如，联系我们页面的表单一般可以命名为”contact”

name属性的语法是：

1
<form name="用户自定义表单命">

4.autocomplete

autocomplete属性用来规定所设置的表单是否具有自动完成功能

语法为：

1
<form autocomplete="on/off"><!-- / is RO -->

5.target

target属性规定 action 属性中地址的目标。表单提交的信息通过 action 属性传输给服

务器，服务器往往会返回提交信息，该提交信息就是通过目标窗口来进行显示的

语法为：

1
<form target="目标窗口的打开方式">

在该语法中，目标窗口的打开方式有4种，分别是 _selt、_blank、_parent、_top ,

默认值是 _selt。

6.novalidate

在表单中，默认状态下是要验证表单录入内容的有效性的,novalidate属性规定表

单提交时取消对表单进行有效性的检查。如果表单设置了该属性，则关闭了表单的

验证，表单内所有的控件都不被验证。

语法为：

1
<form novalidate>

2.使用 <input> 标签创建表单控件

input是表单中最常见的标签之一，文本框、密码框、单选按钮、复选框等表单

控件都可以通过input标签来进行定义。

以下是常见属性及新增属性:

常见：

属性值 功能描述
text 文本框
password 密码域，输入的内容用*代替
radio 单选按钮
checkbox 复选框
button 普通按钮
reset 重置按钮，数据重置
submit 提交按钮，将表单数据发送给服务器
image 图像域，也称为提交图像按钮
file 文件域，用于上传文件

新增：

属性值 功能描述 说明
color 用于应该包含颜色的输入字段 若浏览器支持，日期选择器会出现在输入字段中
date 用于应该包含日期的输入字段 若浏览器支持，日期选择器会出现在输入字段中
datetime 允许用户选择日期和时间（有时区) 若浏览器支持，日期选择器会出现在输入字段中
datetime-local 允许用户选择日期和时间（无时区) 若浏览器支持，日期选择器会出现在输入字段中
email 用于应该包含电子邮件地址的输入字段 若浏览器支持，能够在被提交时自动对电子邮件地址进行验证
month 允许用户选择月份和年份 若浏览器支持，日期选择器会出现在输入字段中
number 用于应该包含数字值的输人字段 可以对数字做出限制；同时根据浏览器支持，限制可应用到输入字段
range 用于应该包含一定范围内的值的输入字段 若浏览器支持，输入字段能够显示为滑块控件
search 用于搜索字段（搜索字段的表现类似常规文本字段) 无
tel 用于应该包含电话号码的输入字段 目前只有Safari浏览器支持tel类型
time 允许用户选择时间（无时区） 若浏览器支持，时间选择器会出现在输入字段中
url 用于应该包含URL地址的输人字段 若浏览器支持，在提交时能够自动验证URL字段
week 允许用户选择周和年 若浏览器支持，日期选择器会出现在输入字段中

早期WEB可能不支持以上的输入的类型

  1. 文本框 text

    文本框常用于输人简短的文字信息，如用户名、账号、身份证号码、学号等，
    常见搭配的属性有name、value、maxlength。

    语法如下：

    1
    2
    <!-- / is RO -->
    <input type="text" name="控件名称" size="控件长度" maxlength="允许最多的字符数" value="该文本框的默认值" autocomplete="on/off" placeholder="提示信息">

  2. 密码域 password

    在网页表单信息录入中，往往会录入一些私密的信息，如密码等，这时可以采用
    密码域password属性创建一个密码文本框。它在网页中的效果和文本框(text)
    是一样的只不过在录入时，录入的信息由“*”代替。
    语法如下：

    1
    <input type="password" name="控件名称" size="控件长度" maxlength="允许最多的字符数" value="该文本框的默认值" placeholder="提示信息">

  3. 单选按钮 radio

    表单中的单选按钮一般用于只选择一个选项的情况。在页面中，以圆圈表示每个选
    项。单选按钮的属性中，value属性是必须设置的。
    其语法格式如下：

    1
    <input type="radio" name="单选按钮的名称" value="单选按钮的取值" checked="checked">

    在该语法中，单选按钮的每个选项中name的取值必须一致。value的取值一般情况
    下不同。checked:=”checked’”可以不设置或只在选项中出现一次，
    如果不设置，则没有默认选项；如果某个选项设置了该属性，则该选项被作为
    默认选项。

  4. 复选框 checkbox

    表单中的复选框一般用于内容可以有多种选择的情况。在页面中，以方框表示每
    个选项。复选框的属性中，value属性是必须设置的。
    其语法格式如下：

    1
    <input type="checkbox" name="复选框的名称" value="复选框的取值" checked="checked">

    在该语法中，单选按钮的每个选项中name的取值必须一致。value的取值一般情况
    下不同。checked:=”checked’”可以不设置或只在选项中出现一次，
    如果不设置，则没有默认选项；如果某个选项设置了该属性，则该选项被作为
    默认选项。(和上面一样)

  5. 普通按钮 button

    在表单中，type属性的值为button时，就创建了一个普通按钮。普通按钮经常会搭
    配JavaScript脚本来一起使用。
    其语法格式如下：

    1
    <input type="button" name="普通按钮的名称" value="按钮的取值" checked="点击按钮时的处理程序">

    在该语法中，不同按钮的name一般要有所区分；value的值为按钮上的文字内容；
    onclick为鼠标点击按钮时的处理程序，可搭配JavaScript脚本。

  6. 重置按钮 reset

    重置按钮在表单中的作用是重置已经录入的表单内容。当用户录入的表单信息有误
    时，可单击重置按钮，重新录入。
    其语法格式如下：

    1
    <input type="reset" name="重置按钮的名称" value="重置按钮的取值">

  7. 提交按钮 submit
    通过提交按钮，可以将表单录入的全部数据提交到服务器。服务器的地址为事先
    设置好的fom属性action值中的地址。
    其语法格式如下：

    1
    <input type="submit" name="提交按钮的名称" value="提交按钮的取值">

    说明：一般需要手动录入信息的表单中都包含提交按钮。

  8. 图形域 image
    图像域也称为插入图像按钮，用于将图像文件作为按钮来使用。
    其语法格式如下：

    1
    <input type="image" src="图形地址" name="图形域名称">

  9. 文件域 file

    文件域也称为文件上传按钮，它可以将本地的某个文件作为表单数据进行上传。
    其语法格式如下：

    1
    <input type="file" name="文件域的名称" multiple="multiple">

    该语法中，multiple为非必要属性，该属性规定输入字段可选择多个值。如果使用
    该属性，则字段可接受多个值，即multiple=”multiple”相当于允许同时上传多个文件

3.使用 <select> 标签创建表单控件

  1. 下拉菜单
    下拉菜单是表单中一种由用户进行选择的录入方式，在正常状态下只能看到一个选项
    单击旁边的三角形箭头时，会展开全部的选项。<select>标签需搭配 <option>标签来使用
    其语法格式如下：

    1
    2
    3
    4
    5
    6
    <select name="下拉菜单的名称">
        <option value="选项1" selected="selected">选项显示内容</option>
        <option value="选项 2">选项显示内容</option>
        <option value="选项 3">选项显示内容</option>
        .....
    </select>

    在该语法中，每一对 <option></option>表示一个选项；每个选项的value取值为选
    择该项内容需提交给服务器的信息；selected=”selected”表示该选项是默认选中的，该
    设置只能在下拉菜单出现一次，并且如果没有该设置，则默认为选中第一项

  2. 列表项
    列表项的设置和下拉菜单类似，区别是列表项没有下拉菜单的三角形箭头，它可以
    同时显示多个选项。一旦选项数量超出信息量长度，在列表的右方就会出现滚动条。
    其语法格式如下：

    1
    2
    3
    4
    5
    6
    <select name="select" size="显示的选项列数" multiple="multiple">
        <option value="选项1" selected="selected">选项显示内容</option>
        <option value="选项 2">选项显示内容</option>
        <option value="选项 3">选项显示内容</option>
        .....
    </select>

    在该语法中，multiple=”multiple”表示可以同时选中多个选项；每一对
    ‘<option></option>‘表示一个选项；每个选项的value取值为选择该项内容需提交给服务器的信息；selected=”selected”表示该选项是默认选中的，该设置可以在该列表项出现一次或
    多次，如果没有该设置，则默认不选中。

4.创建文本域

除了 <input>和 <select>标签外，还有一种特殊的文本样式，称为文本域。文本域和文本框的区别是：文本框一般只用于录入少量的文字信息，而文本域可以录人更多的文字。文本域在网页中常用于填写留言信息等。
其语法格式如下：

1
2
<textarea name="文本域名称" rows="行数" cols="列数" placeholder="提示信息">
</textarea>

该语法中，rows是指文本域的行数，也就是高度，文本内容如果超出范围将会出现滚动条；cols是指文本域的列数，也就是宽度。在文本域中，设置的rows和cols在浏览器显示中并不固定，用户可以随意拖动大小。如果要固定大小，需要用到CSS样式中的width、height等进行设置。placeholder的值为提示信息文字，当开始录人文字时，该提示信息就会消失。

HTML 视频及音频

WEB视频

  1. 嵌入视频

    在HTML5中，<video>标签用于定义视频的标准，它支持Ogg格式、MPEG4格式、WebM格式，其基本语法格式如下：

    1
    <video src="视频文件的路径"></video>

  2. video 属性

    video除了必备的src属性外，还有autoplay、loop、preload、controls、width和height几个属性。

    1
    2
    3
    4
    5
    <video src="视频文件的路径" autoplay="autoplay"></video><!-- 表示当页面加载完成后自动播放 -->
    <video src="视频文件的路径" loop="loop"></video><!-- 是视频结束时重新开始播放，即循环播放 -->
    <video src="视频文件的路径" preload="auto"></video><!-- 表示视频在网页页面加载的过程中也进行加载，并预备播放 -->
    <video src="视频文件的路径" controls="controls"></video><!-- 用于显示播放控件，如按钮等 -->

WEB音频

  1. 嵌入音频

    在HTML5中，<audio>标签用于定义音频的标准，它支持Ogg Vorbis格式、MP3格
    式、Wav格式，其基本语法格式如下：

    1
    <audio src="音频文件的路径"></audio>

  2. audio 属性
    audio除了必备的src属性外，还有autoplay、loop、preload、controls四个属性，其用法和video中的属性一致。

CSS

CSS

JavaScript

JavaScript 是 Web 的编程语言

现代的 HTML 页面都使用 JavaScript

JS

javaScript输出

JavaScript 可以通过不同的方式来输出数据：

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

1
你可以弹出警告框来显示数据
1
2
3
<script> 
        window.alert('NMSL'); //警告框来显示数据('nmsl')
    </script>

操作 HTML 元素

1
使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容
1
2
3
4
<p id="#ZF0001">エロ~</p>
    <script> //这是一JavaScript的个注释哟~
        document.getElementById("#ZF0001").innerHTML = "エロすぎる"; //修改标签为IDNUM的字符串为[字符串]
    </script>

写到 HTML 文档

使用 document.write() 仅仅向文档输出写内容

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

1
2
3
4
5
6
<button onclick="CK0001()">TIMENOW</button> <!--这是个触发按钮-->
<script>
    function CK0001() {
        document.write(Date()); //如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。 可以只留下这一条
    }
</script>

写到控制台

1
2
3
4
5
6
7
<p>使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单</p>
<script>
    a = 5;
    b = 6;
    out = a + b;
    console.log(out);
</script>

SOOOOOOON

≧ ﹏ ≦
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
, , , ,