【星海随笔】前端HTML+CSS+JS记录

置顶活跃的煤矿打工人

已于 2023-02-28 15:29:15 修改

阅读量414

点赞数

文章标签：前端学习 javascript

于 2022-10-09 18:06:52 首次发布

本文链接：https://blog.csdn.net/weixin_41997073/article/details/127223448

版权

HTML 指的是超文本标记语言: HyperText Markup Language

在这里插入图片描述
<!DOCTYPE html> 声明为 HTML5 文档。
<html> 元素是 HTML 页面的根元素。
<head> 元素包含了文档的元（meta）数据
<meta charset=“utf-8”> 定义网页编码格式为 utf-8。编码格式。
<title> 元素描述了文档的标题。
<body> 元素包含了可见的页面内容。
<h1> 元素定义一个大标题。
<p> 元素定义一个段落。
<br> 换行

例如：

<html>
    <head>
        <meta charset="utf-8">
        <title>抬头纹</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

在这里插入图片描述

<html>
        <head>
                <meta charset="utf-8">
                <title>英雄联盟官网</title>
                <meta name="viewport"
                        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
                <link href="css/bootstrap.css" rel="stylesheet" /><!-- 引入bootstrap样式文件 -->
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"><!-- 引入bootstrap图标库 -->
        <link rel="stylesheet" type="text/css" href="css/index.css"/>           <!-- 引入我自己写的样式文件 -->
        </head>
        <body>
            <div class="xxx" style="xxxx">
                <p><i class="xxxx" style="xxxx">
                    <img src="img/xxx.png" width="30px">XXXX<<a href="#login" class="login"  data-toggle="modal">登录</a>>
                </p>
            </div>
        </body>
</html>

结果：
[X]XXXX 登录

加一些JS代码的<script>字段
JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义网站</title>
        <script>
            function displayDate(){
                document.getElementById("demo").innerHTML=Date();
            }
            //script getElementById() 是多个 JavaScript HTML 方法之一。
            
        </script>
    </head>
    <!-- main part -->
    <body>
        <h1> Display Time 程序</h1>
        <p id="demo">这是一个Test</p>
        <button type="button" onclick="displayDate()">显示日期</button>
        <!-- 也可以直接设置转换的文本内容 而不用提前定义函数后调用。
        οnclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button> -->
    </body>
</html>

resul：

加入图片

src=“xxx” 后面跟的是图片。需要在同级目录下创建一个文件夹 i ，然后往里面放需要的图片。
以下是用到的两个图片，可以自行下载。

https://www.w3school.com.cn/i/eg_bulbon.gif
https://www.w3school.com.cn/i/eg_bulboff.gif

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义网站</title>
        <script>
            function displayDate(){
                document.getElementById("demo").innerHTML=Date();
            }
            function wordSize(){
                document.getElementById("demo").style.fontSize='35px';
            }
            //script getElementById() 是多个 JavaScript HTML 方法之一。
        </script>
    </head>

    <body>
        <h1>JavaScript 能做什么？</h1>
        <img src="/i/W3C.png" width="258" height="39" />
        <a href="https://www.w3school.com.cn/js/js_intro.asp">教学</a>
        <p> JavaScript 能够改变 HTML 属性值。 </p>
        <p> 在本例中，JavaScript 改变了图像的 src 属性值。 </p>
        <button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
            <img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
        <button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
        <p id="demo"> GOD! </p>
        <button type="button" onclick="wordSize()">35Size</button>
    </body>
</html>

result:

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义网站</title>
        <script>
            function displayDate(){
                document.getElementById("H1time").innerHTML=Date();
            }
            function wordSize(){
                document.getElementById("demo").style.fontSize='35px';
            }
            function viewTime(){
                document.getElementById("H1time").style.display='block';
                document.getElementById("H1time").innerHTML=Date();
            }
            function concealTime(){
                document.getElementById("H1time").style.display='none';
            }
            //document.getElementById("H1time").innerHTML=Date();
            //script getElementById() 是多个 JavaScript HTML 方法之一。
        </script>
    </head>

    <body>
        <h1>JavaScript 能做什么？</h1>
        <p id="H1time" style=display:none>Date</p>
        <br>
        <img src="/i/W3C.png" width="258" height="39" />
        <a href="https://www.w3school.com.cn/js/js_intro.asp">教学</a>

        <button type="button" onclick="displayDate()">Time</button>
        <button type="button" onclick="viewTime()">ON</button>
        <button type="button" onclick="concealTime()">OFF</button>

        <p> JavaScript 能够改变 HTML 属性值。 </p>
        <p> 在本例中，JavaScript 改变了图像的 src 属性值。 </p>
        <br>
        <button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
            <img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
        <button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
        <p id="demo"> GOD! </p>
        <button type="button" onclick="wordSize()">35Size</button>
    </body>
</html>

再加一个隐藏按钮
在这里插入图片描述

还可以精简一下index.html。这个看起来会舒服一点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义网站</title>
    </head>

    <body>
        <h1>JavaScript 能做什么？</h1>
        <p id="H1time" style=display:none>Date</p>
        <br>
        <img src="/i/W3C.png" width="258" height="39" />
        <a href="https://www.w3school.com.cn/js/js_intro.asp">教学</a>

        <button type="button" onclick="displayDate()">Time</button>
        <script src="/demo/myScript.js"></script>

        <button type="button" onclick="viewTime()">ON</button>
        <button type="button" onclick="concealTime()">OFF</button>

        <p> JavaScript 能够改变 HTML 属性值。 </p>
        <p> 在本例中，JavaScript 改变了图像的 src 属性值。 </p>
        <br>
        <button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
            <img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
        <button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
        <p id="demo"> GOD! </p>
        <button type="button" onclick="wordSize()">35Size</button>
    </body>
</html>

没有函数了，但是还是可以正常使用，因为增加了这句话

        <script src="/demo/myScript.js"></script>

同级目录下创建了demo目录，并创建了JS脚本文件 myScript.js

function displayDate(){
    document.getElementById("H1time").innerHTML=Date();
}
function wordSize(){
    document.getElementById("demo").style.fontSize='35px';
}
function viewTime(){
    document.getElementById("H1time").style.display='block';
    document.getElementById("H1time").innerHTML=Date();
}
function concealTime(){
    document.getElementById("H1time").style.display='none';
}