用记事本自学HTML+JS-初步认识

最新推荐文章于 2024-06-10 21:57:03 发布

kyoysy135

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量112

点赞数

分类专栏：菜鸟自学文章标签：前端 html5 js

本文链接：https://blog.csdn.net/kyoysy135/article/details/131810079

版权

菜鸟自学专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：

自己是个菜鸟，只有基础的MS EXCEL的VBA脚本编制经验。非IT行业从业者。只是在工作过程中感觉会一些代码脚本的常识，有利于工作效率的提升。

希望通过这里，能够记录一些自学的经验，作为自己的记录，也作为和大家的分享。

学习的工具：

学习材料：以MDN的学习材料为主，中间也找了一些其他的内容做补充学习。
练习工具：就一个windows+自带的记事本+自带的edge浏览器。可以说近乎无门槛了。

初步认识

建立一个HTML。原先，笔者概念还停留在上个世纪dreamwaver、用Word画表格的年代。

然后看了MDN的材料，才知道，现在时代不一样了，用个记事本就搞定的事情。

主要有三样东西学习：HTML、CSS、JS。

HTML：主体文件，记录承载页面的主要标签。

CSS：给HTML做格式化妆用的。

JS：让浏览器能实现各种程序脚本功能的。

初始建立一个，如下：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>日期生成</title>
        <h1>点击<strong>按钮</strong>生成日期。</h1>
        <style>

        //这里可以放CSS的描述，后面说
        //或者像这样引用外部的文件：<link rel="stylesheet" href="css/mystyle.css">
        </style>

    </head>

    <body>
        <h1>JavaScript练习002</h1>
        <p><button type="button" onclick="document.getElementById('demo').innerHTML = Date()">点击我来显示日期和时间</button></p>
        <p id="demo"></p>


        <p id="test">脚本执行后的文本：</p>

        <script>
                 //也可将下面的脚本套一个函数，放到上面的onclick后面，用函数调用的方式
	//document.getElementById("test").innerHTML="啊啊啊啊啊啊啊啊啊啊本";
        </script>

    </body>
</html>

学习小结：

CSS的描述放在Head里。或者使用引用，链接外部的文件。
JS的内容，一般放最后。可以放在body里面，也可以放body外面。
JS取HTML的标签对象方式：
1. document.getElementById("XXX")，这种方式相对靠谱。
2. document.querySelecotr("XXX")，这种方式返回符合条件的第一个。没必要不建议使用。
在HTML中的标签显示内容，使用innerHTML和textContent基本都可以。两者稍有差别，初学还没深切体会。网上有专门的文章说明，不再补充。
用记事本保存时，注意保存文件扩展名：html。就能用浏览器打开。

光靠一个记事本，码出一个按钮响应的感觉还是很不错的。为后面学习其他玩意，提供了动力。

关键，就靠一个记事本，简直无门槛。