由于此前有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等数十种,感兴趣的童鞋可以自行了解。