训练营"/>
百度前端实战训练营
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=".jpeg?token=98eac0d5f10e3043580add02ff8c06e7" alt="san logo"/><!-- 超链接属性a标签:href表示超文本引用，不可改成别的名字 --><a href="/">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>
更多推荐
百度前端实战训练营
发布评论