C1认证任务3 Web相关知识学习

最新推荐文章于 2024-06-16 22:13:37 发布

专剥火龙果的皮

最新推荐文章于 2024-06-16 22:13:37 发布

阅读量261

点赞数 2

文章标签： css html javascript

本文链接：https://blog.csdn.net/CXNing/article/details/115673192

版权

由于此前有web基础，所以本次未使用富文本编辑器。

1 HTML、CSS与JS

1.1 Web语言介绍

1.1.1 HTML

HTML(Hyper Text Markup Language)，超文本标记语言，是一种标记语言（或者标签语言）。顾名思义，HTML用于标记并展示页面的内容，内容包括文本、图片、音频、视频等。每一个内容都由一对（有的时一个）标签包裹。经过浏览器的编译之后，展示在页面上。
超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

1.1.2 CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
简单来说，CSS样式表，是用于控制HTML页面上内容的展示方式，如字体大小、颜色，以及如何布局等等。层叠样式，顾名思义，不同的样式可以叠加，最终显示由样式的权重来控制。

1.1.3 JS（Javascript）

javascript是一门具有函数优先的轻量级，解释型或即时编译脚本语言（无需预编译）。js作为Web页面开发语言而广为人知，但其作用不仅限于web开发。在Web开发中，js主要用于为页面添加交互行为（如点击事件，页面跳转，后台数据交互等等）。

1.1.4 总结

HTML、CSS、Js三者共同协作进行Web开发，缺一不可。HTML负责展示内容，CSS控制内容的样式，JS控制页面交互，缺一不可。

2 本次任务内容

1、在富文本编辑器源码模式下插入一个表格
2、使这个表格实现隔行换色的功能
3、插入音频，并且能够播放
4、尝试插入视频

3 任务操作

3.1 代码

在HTML文件中使用CSS和JS文件有多钟方法，不在此处赘述。为了方便查看，本次任务都采用嵌入法来操作。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.CSDN_Table{
			margin: 0 auto;
			margin-top: 50px;
			border: 1px solid;
			border-collapse: collapse;
		}
		.CSDN_Table tr{
			min-width: 60px;
			text-align: center;
		}
		.CSDN_Table td{
			border: 1px solid;
			min-width: 100px;
		}
		.CSDN_Table tr:nth-child(odd){
			background-color: gray;
		}
		.CSDN_Table tr:nth-child(even){
			background-color: white;
		}

		#btn1{
			display: block;
			margin: 10px auto;
		}
	</style>
	
</head>
<body>
	<table class="CSDN_Table">
		<tr>
			<td>CSDN工程师认证</td>
			<td>C1</td>
			<td>C4</td>
		</tr>
		<tr>
			<td>认证度</td>
			<td>强</td>
			<td>很强</td>
		</tr>
		<tr>
			<td>难度</td>
			<td>难</td>
			<td>很难</td>
		</tr>
		<tr>
			<td>花钱么</td>
			<td>花</td>
			<td>都花</td>
		</tr>
		<tr>
			<td>需要么</td>
			<td>需要</td>
			<td>很需要</td>
		</tr>
		<tr>
			<td>赚钱么</td>
			<td>赚</td>
			<td>很赚</td>
		</tr>
	</table>
	<button id="btn1" onclick="ChangeColor()">改变行色</button>
	<button id="btn2">显示/隐藏视频控件</button>
	<button id="btn3">显示/隐藏音频控件</button>
	<!-- <audio src="./youranser.mp3" autoplay="autoplay" loop="loop" controls="controls"></audio> -->
	<audio src="./youranser.mp3" autoplay="autoplay" loop="loop" controls="controls" hidden="true"></audio>
	<video src="./test.avi"  autoplay="autoplay" controls="controls" hidden="hidden"></video>
	<script type="text/javascript">
		function ChangeColor(){
			var tb = document.getElementsByClassName("CSDN_Table")[0]
			var tb_tr = tb.getElementsByTagName("tr")
			for(i=0;i<tb_tr.length;i++){
				var sty = document.defaultView.getComputedStyle(tb_tr[i],null)
				if (sty.backgroundColor=="rgb(128, 128, 128)"){
					tb_tr[i].style.backgroundColor="rgb(255, 255, 255)"
				}else{
					tb_tr[i].style.backgroundColor="rgb(128, 128, 128)"
				}
			}
		}
		document.getElementById("btn3").onclick = function(){
			d = document.getElementsByTagName("audio")[0].getAttribute("hidden")
			if(d){
				document.getElementsByTagName("audio")[0].removeAttribute("hidden")
			}else{
				document.getElementsByTagName("audio")[0].setAttribute("hidden","hidden")
			}
			
		}
		document.getElementById("btn2").onclick = function(){
			d = document.getElementsByTagName("video")[0].getAttribute("hidden")
			if(d){
				document.getElementsByTagName("video")[0].removeAttribute("hidden")
			}else{
				document.getElementsByTagName("video")[0].setAttribute("hidden","hidden")
			}
			
		}
	</script>
</body>
</html>

3.2 实现效果

在这里插入图片描述

3.3 综述

以上通过css实现了table的居中显示以及隔行换色（用到了nth:child选择器），用<audio>和<video>标签完成插入音频和视频的操作。并且利用js实现table的行色切换以及视音频空间的显示和隐藏。

html

从上面的例子以及源码我们可以看出，HTML页面上的内容都由一对（或一个标签）包裹起来，每个标签都代表着不同的含义，如<table>表示表格，<button>表示按钮，<audio>表示音频，<video>表示视频等。而标签内部又可以使用标签，如<table>里面有<tr>和<td>标签，前者表示表格的行，后者表示表格的列。

css

在HTML代码的头部（<head>标签里，还有<style>标签，这是在html代码中嵌入了CSS代码），里面是一个个名称+{}+键值对的形式。这就是CSS文件的基本形式。最前面的名称是选择器（相当于门牌），{}里的键值对，是你对html文件样式的修改，比如backgroundColor：white，是指将标签背景颜色设置为白色。除了再<head>内定义<style>标签外，还可以直接在标签上面添加style属性进行控制。（还有引用外部文件等方法，此处不展开）

js

而在HTML文件尾部，有一个<script>标签，此标签内部放的就是与页面进行交互的逻辑。上面的例子中，定义了三个按钮的点击事件。第一个按钮点击改变表格的行色，另外两个用于控制音视频文件的显示和隐藏。

html、css、js的相关知识还有很多，远不止此。感兴趣的可以自行学习。

4 拓展

完成以下盒子布局：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>盒模型</title>
	<style type="text/css">
		body{
			overflow: auto;
		}
		div{
			text-align: center;
			font-size: 24px;
			font-weight: bold;
			border-radius: 4px;
			background-color: yellow;
			border: 1px solid;
			margin: 15px;
			vertical-align: middle;
			position: relative;
		}
		.div1{
			width: 400px;
			height: 200px;
			float: left;
		}
		.div2{
			width: 400px;
			height: 650px;
			float: left;
			margin-top:-87px;
		}
		.div3{
			width: 1423px;
			height: 300px;
			float: left;
		}
		.div4{
			width: 700px;
			height: 550px;
			float: left;
		}
		.div5{
			width: 690px;
			height: 259px;
			float: left;
		}
		p{
			position: absolute;
			top: 50%;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
		}
	</style>
</head>
<body>
<div class="div1"><p>1</p></div>
<div class="div3"><p>3</p></div>
<div class="div2"><p>2</p></div>
<div class="div4"><p>4</p></div>
<div class="div5"><p>5</p></div>
<div class="div5"><p>6</p></div>
</body>
</html>

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

5 自测

HTML5为了使img元素可拖放，需要增加什么属性？

添加了draggable属性。需要使元素能够拖放，需要设置draggable=“true”

HTML5哪⼀个Input类型可以选择⼀个⽆时区的⽇期选择器？

input type=“date”,可以选择一个无时区的日期

CSS盒⼦模型中的Margin、Border、Padding都是什么意思？

在这里插入图片描述

padding是内容与边框的距离，border是内容边框的宽度，margin是内容框（包含了border和padding）与父级元素的距离。就好比，一张照片，用相框裱起来挂在一面墙上。如果相框比照片大，padding就是照片与相框内边缘的距离。border就是相框镶边的宽度，margin就是相框外边缘与墙壁边缘的距离。

说出⾄少五种常⻅HTML事件

HTML事件分为：窗口事件、表单事件、键盘事件、鼠标事件多媒体事件和其他事件。
有诸如：onload,onkeydown,onclick,ondrag,onfocus等数十种，感兴趣的童鞋可以自行了解。

专剥火龙果的皮

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
C1认证任务3 Web相关知识学习

由于此前有web基础，所以本次未使用富文本编辑器。1 HTML、CSS与JS1.1 Web语言介绍1.1.1 HTMLHTML(Hyper Text Markup Language)，超文本标记语言，是一种标记语言（或者标签语言）。顾名思义，HTML用于标记并展示页面的内容，内容包括文本、图片、音频、视频等。每一个内容都由一对（有的时一个）标签包裹。经过浏览器的编译之后，展示在页面上。超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各.
复制链接

扫一扫