自定义列表
问题 1:
请写出列表项为"这是dt标签"且列表项内容也为"这是dd标签"的自定义列表。
解答:
<dl> <!-- 补全代码 --> <dt>这是dt标签<dt/> <dd>这是dd标签<dd/> <dd>这是第二个dd标签<dd/> </dl>
有没有发现dd相比于dt缩进了一段距离。dd和dt在开发商还是很常见的,这两个标签只需要记住就好。
总结:
🥭🥭1、dl是自定义列表的整体,用于包裹dt和dd
🥭🥭2、dt是表示自定义列表的主题
🥭🥭3、dd是表示针对自定义列表主题的每一项内容
语义化标签
问题 2:
请使用语义化标签创建头部标签且包含导航标签。
注意:只需在html模块填写标签结构,有且仅有一个头部标签和一个导航标签。
解答:
<!-- 补全代码 --> <html> <head><head> <title>标题</title> <body> <header> <nav>导航栏</nav> </header> </body> <html>
总结:
🥭🥭这个语义化标签大家自由发挥,很简单就不做总结了。
音频媒体标签属性
问题 3:
请写出具有控件功能的音频媒体标签
<!-- 补全代码 --> <figure> <figcaption>Listen to the T-Rex:</figcaption> <audio controls src="https://y.qq.com/n/ryqq/songDetail/002iaZUX0Uo1O2"> </audio> </figure>
怎么样,是不是特别酷,点击播放按钮就可以播放音乐了。因为牛客这个不支持,所以无法播放,感兴趣思维小伙伴可以那专门写前端的工具(Vscode、Webstorm等等)试一试,感受一把前端的魅力。
总结:
🥭🥭1、audio是音频,看成视频了,视频是video,图片是Img。
🥭🥭2、src可以使用在线地址,也可以使用本地的音频地址。
🥭🥭3、,核心代码。
视频媒体标签属性
问题 4:
请写出具有当视频的媒体数据加载期间发生错误时执行某个方法事件的视频媒体标签。
<!-- 补全代码 --> <video src="movie.mp4" onerror="myFunction()" controls="controls"> 抱歉,加载视频失败 </video>
CSS选择器——标签、类、ID选择器
问题 4:
请将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{ font-size:20px; color:rgb(255,0,0); } .green{ color:rgb(0, 128, 0) } #black{ color:rgb(0, 0, 0) } </style> </head> <body> <div>红色</div> <div class='green'>绿色</div> <div id='black'>黑色</div> </body> </html>
<html> <head> <meta charset=utf-8> <style type="text/css"> /*补全代码*/ div{ font-size:20px; color:rgb(255,0,0); } .green{ color:rgb(0, 128, 0) } #black{ color:rgb(0, 0, 0) } </style> </head> <body> <div>红色</div> <div class='green'>绿色</div> <div id='black'>黑色</div> </body> </html>
CSS选择器——伪类选择器
问题 4:
请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)",“绿色"设置为"rgb(0, 128, 0)”,“黑色"设置为"rgb(0, 0, 0)”,且字体大小都为20px。
<html> <head> <meta charset=utf-8> <style type="text/css"> /*补全代码*/ ul li:nth-child(2n) { background-color: rgb(255,0,0); } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>
总结:
🥭🥭CSS有以下十一种选择器。
1、元素选择器; 2、id选择器; 3、类选择器; 4、分组选择器(并集选择器); 5、复合选择器(交集选择器); 6、通配选择器; 7、后代元素选择器; 8、子元素选择; 9、伪类选择器; 10、属性选择器; 11、兄弟元素选择器。
🥭🥭css选择器就是用于指向需要css作用的标签,让css样式知道自己需要到那个标签上去;所以想要用css为html页面中的元素添加样式,就需要用到css选择器,而css设置样式都是通过css选择器进行控制。