百度前端实战训练营

最新推荐文章于 2023-01-05 21:53:04 发布

Love Summer~

最新推荐文章于 2023-01-05 21:53:04 发布

阅读量1.6k

点赞数

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

本文链接：https://blog.csdn.net/m0_56475481/article/details/125613043

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Homework_Day1

姓名：zx

QQ：2247711653

预习作业：

学习 html、css、js 并尝试实现一个 hello world 页面，在页面中显示“Hello World！”以及两个按钮，点击“变为红色”按钮可以改变文字颜色为红色，点击“复原”按钮颜色恢复为默认颜色。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <script>
        //需求：在页面中显示“Hello World！”以及两个按钮，
        //点击“变为红色”按钮可以改变文字颜色为红色，点击“复原”按钮颜色恢复为默认颜色。
        function red(){
            document.getElementById("col").style.color="red";
            console.log(1)
        }
        function black(){
            document.getElementById("col").style.color="black";
        }
    </script>
    <div>
        <p id="col">Hello World!</p>
        <input onclick="red()" type="button" value="变为红色" />
        <input onclick="black()" type="button" value="复原" />
    </div>
</body>
</html>

实现效果：
在这里插入图片描述

html基础知识

//VS Code：
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    你好！
    <!-- 设置了一个helloword的段落，并且设置了一个名字为hi的类属性 
    Ctrl+K+C加注释，Ctrl+K+U取消注释 -->
    <p class="hi">helloworld</p>

    <!-- h1-h6标签的使用 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- 列表标签 -->
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

    <!-- 图片标签 
    <img src="被引用图片的地址" alt="图片的代替文本">
    -->
    <img 
      width="300" 
      height="250" 
      src="https://pics6.baidu.com/feed/0b46f21fbe096b63df379948e1a0b943ebf8ac13.jpeg?token=98eac0d5f10e3043580add02ff8c06e7" 
      alt="san logo"
    />
    <!-- 超链接属性a标签:href表示超文本引用，不可改成别的名字 -->
    <a href="https://www.csdn.net/">CSDN</a>
    
    <!-- 被强调的文本内容一般用斜体 -->
    <p>
        我是普通文本<em>我是被强调的内容</em>
    </p>

    <!-- 实现加粗效果的标签 -->
    <p>
        我是普通文本<strong>我是被强调的内容</strong>
    </p>
    <!-- 输入文本框 默认吞掉换行-->
    <input type="text"/>
    <!-- 换行标签br -->
    <br>
    <!-- placeholder用来显示输入框中的提示信息 -->
    <input type="text" placeholder="请填写文本信息" />
    
    <br>
    <!-- 文件选择控件 -->
    <input type="file" />
    <br>

    <!-- 单选框 -->
    <label>
        <input type="radio" id="radio1" />
        first radio
    </label>
    <br>

    <label>
        <input type="radio" name="radio" id="radio2" />
        second radio
    </label>

    <!-- 控制范围:进度条拖动 -->
    <br>
    <input type="range" />
    
    <!-- 复选框 -->
    <br>
    <input type="checkbox"/>first checkbox
    <input type="checkbox"/>second checkbox
    <br>
    <!-- 点击文字也可选中 -->
    <label>
        <input type="checkbox"
        id="cboxl-pro"
        value="first_checkbox"
        />first_checkbox
    </label>
    <!-- 头部header标签包裹，导航栏nav标签，整体内容区域main标签
        article标签
    侧边栏aside标签 ，下部footer标签-->
    <!-- 标签有利于搜索引擎搜索，每个标签都有一个权重 -->
</body>
</html>