富文本编辑器实现音频视频的插入以及表格隔行换色

富文本编辑器实现音频视频的插入以及表格隔行换色

知识需求：html，css
操作工具：http://summernote.org(这里我用的是在线富文本编辑器，链接奉上）
学习途径：菜鸟教程，学习猿地（官网上有一系列的知识）

表格隔行换色

这里要用到html标签和css样式。呼吁大家，要用语义化标签（div和span做出来的网站盲人不能正常使用[手动严肃表情]）
进入正题，打开网站（上图！上图！）

点击代码块标志，进入源码模式开始写表格

创建表格

<table class="table">
		<tbody><tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>2</td>
			<td>2</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>3</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>4</td>
			<td>4</td>
		</tr>

</tbody></table>

再次点击代码块标志看下效果
这里数字的排列跟我们写的表格一致，要体现有线条和隔行换色，我们还需要添加一些css样式

添加css样式

再次进入源码模式开始写css样式

<style>
table{
	border-collapse:collapse;
  	border:1px solid;
}
 th , td {
  	color:#000
	border:1px solid #333;
  	font-size:15px;
  	line-height:30px;
  	padding: 0 15px;
  	box-sizing:border-box;
	
}
tbody tr:nth-child(odd){
  background:rgba(204,255,255,.6);

}
</style>

添加好css样式以后，用类别选择器来应用到表格，这里我用了class

<style>
table{
	border-collapse:collapse;
  	border:1px solid;
}
 th , td {
  	color:#000
	border:1px solid #333;
  	font-size:15px;
  	line-height:30px;
  	padding: 0 15px;
  	box-sizing:border-box;
	
}
tbody tr:nth-child(odd){
  background:rgba(204,255,255,.6);

}


</style>


	<table class="table">
		<tbody><tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>2</td>
			<td>2</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>3</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>4</td>
			<td>4</td>
		</tr>

</tbody></table>

退出源码模式看下效果

成功（代码没有注释是希望大佬们通过自己学习掌握哦）

插入视频

这里插入音频视频我只写了插入视频，因为两者区别不大
上代码

<video width="320" height="240" controls>
  <source src="视频地址" type="video/mp4（视频类型）">
</video>

这里因为用的是网页在线编辑，所以本地的地址插入到视频地址的位置没有效果，这里说一下找网页上视频地址的方法。
首先点看一个可以看视频的网页

F12或FN+F12，在network下，点击播放视频，在size下选择最大的文件，右键，单击open in new teb


上面的地址就是视频地址啦，全选复制，粘贴到视频地址的位置，因为视频来源于网页，所以视频类型为webm

<video width="320" height="240" controls>
  <source src="https://vd2.bdstatic.com/mda-kgash5yewn5jr60q/hd/mda-kgash5yewn5jr60q.mp4?v_from_s=gz_haokan_4469&auth_key=1618755816-0-0-09fd2bdb4f09b6bd5423aef8e617ae89&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=3000156_3" type="video/webm">
</video>

以上是全部内容，如有不对，还请斧正

标签：视频,文本编辑,表格,音频视频,插入,隔行,border,css
来源： https://blog.csdn.net/weixin_46395403/article/details/115839780