在线编程 - 0基础 入门前端
HTML
FED 01 表单类型
请依次写出 以下类型 的 输入框.
- 类型为密码, 默认值为 "nowcoder"
- 类型为复选框, 且状态为 已勾选
<form>
<!-- 补全代码 -->
<input type="password" value="newcoder">
<input type="checkbox" checked>
</form>
FED2 表格结构
请写出具有 表格标题 为 "nowcoder" 的 2行3列 表格结构.
<table border="1px" height="100px" width="100px">
<!-- 补全代码 -->
<caption>nowcoder</caption>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>JavaScript</td>
</tr>
<tr>
<td>Vue</td>
<td>React</td>
<td>Webpack</td>
</tr>
</table>
FED3 图像标签属性
请写出具有 标题属性 和 代替文本属性 的 图片标签.
<!-- 补全代码 -->
<img src="图片地址" title="标题属性" alt="代替文本属性">
FED4 新窗口打开文档
请写出可以在 新窗口 打开文档 的 a标签.
<!-- 补全代码 -->
<a href="#" target="_blank">
<!-- href 属性 代表 你想要把 超链接 连接到那个位置, # 为空 -->
<!-- target 属性用来规定 在何处 打开 链接文档 -->
<!-- _blank 这个属性是在 你点击后 使用 新窗口 打开 -->
FED5 自定义列表
请写出 列表项 为 "nowcoder" 且 列表项内容 也为 "nowcoder" 的 自定义列表.
<dl>
<!-- 补全代码 -->
<dt>nowcoder</dt>
<!-- dt 用来定义 列表项 -->
<dd>nowcoder</dd>
<!--dt 用来描述 列表项内容 -->
</dl>
FED6 语义化标签
请使用 语义化标签 创建 头部标签 且包含 导航标签。 注意: 只需在 html模块 填写 标签结构, 有且仅有 一个头部标签 和 一个导航标签
<!-- 补全代码 -->
<header>
<nav></nav>
</header>
<!-- header 头部标签, nav 导航标签 -->
FED7 音频媒体标签属性
请写出具有 控件功能 的 音频媒体标签.
<!-- 补全代码 -->
<!-- controls 控件的功能-->
<audio src="#" controls></audio>
FED8 视频媒体标签属性
请写出具有 当视频的媒体数据 加载期间 发生错误时 执行某个方法事件 的 视频媒体标签.
<!-- 补全代码 -->
<video src="" controls onerror="myFunction()">
</video>
FED73 加粗文字
使用一个标签将 "牛客网" 三个字 加粗显示 (给定 html 文件)
<p> 牛客网, 程序员必备求职神器 </p>
-
html 修改解决
p 标签 中间 加上 strong 标签 -
css 解决
<p><span> 牛客网, 程序员必备求职神器 </p>
通过 span标签 + p标签 加粗
span {
font-weight: bold;
}
- js 解决
let p = document.getElementsByTagName("p")[0];
// 获取 第一个 p 元素
p.innerHTML = p.innerText.replace("牛客网", "<strong>牛客网</strong>");
// 用 加上 <strong> 标签 的文本 替换
FED9 CSS选择器 - 标签、类、ID选择器
请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)", "绿色"设置为"rgb(0, 128, 0)", "黑色"设置为"rgb(0, 0, 0)", 且字体大小都为20px
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div {
color: red;
font-size: 20px;
}
div.green {
color: green;
}
div#black {
color: black;
}
</style>
</head>
<body>
<div>红色</div>
<div class='green'>绿色</div>
<div id='black'>黑色</div>
</body>
</html>
CSS选择器 - 伪类选择器
请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)".
京公网安备 11010502036488号