02_HTML5+CSS详解第三天

时间：2023-03-09 09:55:46
02_HTML5+CSS详解第三天
  1. WebStorage简单的网页留言板
    用到的函数有3个
    1、saveStorage函数
    使用"new Date().getTime()"语句来获取当前的日期和时间戳，然后使用localStorage.setItem()存储该时间戳和文本框中的数据
    2、loadStorage函数
    这个函数取得保存后的所有数据，然后以表格的形式进行显示
    两个重要的属性：
    loadStorage.length 所有保存在localStorage中的数据条数
    localStorage.key(index) 想到得到的数据的索引号作为index参数传入，得到该索引号对应的数据，默认为0
    3、clearStorage函数
    将保存在localStorage中的数据全部清除
    用法：localStorage.clear() 
    HTML代码
    
<h1>简单的网页留言板</h1>
    
<textarea id="dome" cols="60" rows="10"></textarea>
    
<hr>
    
<input type="button" name="save" value="保存" onclick="saveStorage('dome');">
    
<input type="button" name="save" value="清除" onclick="clearStorage();">
    
<input type="button" name="save" value="读取" onclick="loadStorage('_msg');">
    
<hr>
    
<p id="_msg"></p>

    js代码
    
function saveStorage(id){
    
	var data=document.getElementById(id).value;
    
	var time=new Date().getTime();
    
	localStorage.setItem(time,data);
    
	alert('数据保存成功');
    
}
    
function loadStorage(id){
    
	var result='<table border="1">';
    
	for(var i=0;i<localStorage.length;i++){
    
		var key=localStorage.key(i);
    
		var value=localStorage.getItem(key);
    
		var date=new Date();
    
		date.setTime(key);
    
		var datestr=date.toGMTString();//格式化时间戳
    
		result+='<tr><td>这是第'+i+'条数据</td><td>'+value+'</td><td>时间：'+datestr+'</td></tr>';
    
	}
    
	result+="</table>";
    
	var target=document.getElementById(id);
    
	// alert(target);
    
	target.innerHTML=result;

}

function clearStorage(){
    
	localStorage.clear();
    
	alert('数据清空成功！');
    
}
  2. video元素与audio元素 
    audio元素只要设定src属性（controls元素使用浏览器自带的控制条）【我忘了加controls,音频文件没有在浏览器显示】
    
<audio src="static/0.mp3" controls>
    
对于不支持的浏览器我们可以在元素之间假如提示语
    
<audio src="static/0.mp3" controls="controls">您的浏览器不支持audio元素</audio>

video元素要设定宽高和src属性,src属性，播放源，指定媒体数据的url
    
<video src="static/0.mp4" width="750" height="400"></video>
    
同样对于不支持的浏览器我们可以在元素之间假如提示语
    
<video src="static/0.mp4" width="750" height="400" controls>您的浏览器不支持video元素</video>

source元素可以指定多个播放格式与编码，选择顺序从上而下，直到选择到浏览器所支持的格式为止
    
<video>
    
 <source src="static/0.mp4" type="video/mp4">
    
 <source src="static/0.ogv" type="video/ogv">
    
 <source src="static/0.webm" type="video/webm">
    
</video>

常用属性：
    
1、autoplay - 指定是否自动播放

2、preload - 指定是否对数据进行预加载（即缓冲），value值为auto(默认缓冲，表示预加载全部的媒体文件)| none(表示不预加载)| metadata(表示只加载元数据)。如果是的话，浏览器会将媒体数据进行缓冲，这样可以加快播放速度

3、poster(video独有) - 当视频不可播放时，使用poster元素怒向用户展示一张图片代替视频
    
<video src="0.mp4" poster="images/0.jpg" ></video>

4、loop - 指定是否循环播放媒体文件
    
<video src="0.mp4" autoplay="autoplay" loop="loop"></video>

5、error - 读取过程中一旦发生错误，返回一个Media Error对象的状态码
    
1 = MEDIA_ERR_ABORTED - 取出过程中被用户终止
    
2 = MEDIA_ERR_NETWORK - 下载时发生错误
    
3 = MEDIA_ERR_DECODE - 解码时发生错误
    
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 媒体不可用或者不支持音频/媒体
    
读取错误代码示例：
    
<video id="my" src="o.mp4"></video>
    
<script type="text/javascript">
    
var video=document.getElementById('my');
    
video.addEventListener('error',function(){
    
	var errno=video.error;
    
	switch(errno){
    
		case 1:
    
			alert('取回过程中被用户终止');
    
			break;
    
		case 2:
    
			alert('当下载时发生错误');
    
			break;
    
		case 3:
    
			alert('当解码时发生错误');
    
			break;
    
		case 4:
    
			alert('媒体不可用或者不支持音频/视频');
    
			break;

	}
    
})
    
</script>

6、networkState - 返回媒体文件的当前网络状态
    
0 = NETWORK_EMPTY - 音频/视频尚未初始化
    
1 = NETWORK_IDLE - 音频/视频是活动（activity）的且已选取资源，但并未使用网络
    
2 = NETWORK_LOADING - 浏览器正在下载资源
    
3 = NETWORK_SOURCE - 未找到音频/视频来源
  3. HTML5的拖放
    直接贴个链接吧：https://www.cnblogs.com/moqiutao/p/6365113.html
    1. 对象元素的draggable属性设置为true(draggable="true"),还需要注意的是a元素和img元素必须指定href

css3部分

  1. css3新增的属性选择器 
    <style type="text/css">
    
	[id*='c']{background: green;}  //选择id中含c字符的元素
    
	[id^='c']{background: yellow;}    //选择id中含以c字符开头的元素
    
	[id$='c']{background: red;}   //选择id中以c字符结尾的元素
    
	</style>
    
注意：按尾字符选择元素时，如果是连接符+数字的形式要加反斜杠，如：[id$=\-1]{background: red;}

    　　

    <style type="text/css">
    
	/*表示选中a链接的href属性中以html结尾的元素*/
    
	a[href$=html]:after{
    
		content:'（这是网页文件）';
    
		color: green;
    
	}
    
	/*表示选中a链接的href属性中以jpg结尾的元素*/
    
	a[href$=jpg]:after{
    
		content:"（这是图片文件）";
    
		color: yellow;
    
	}
    
	</style>
    
</head>
    
<body>
    
<a href="demo.html">网站首页</a>
    
<a href="images/0.jpg">网站图片</a>
    
</body>

    　　

  2. 类选择器和伪类选择器
    1. p.left{}   类选择器-表示选中p元素下的left类
      伪类选择器和类选择器的区别在于，类选择器可以随意起名，而伪类选择器是css已经定义好的类
      最常见的伪类选择器：伪类的效果可以通过添加一个实际的类来达到
      a:link{} | a:visited{} | a:hover{} | a:active{}
      a:link会对拥有实际链接地址的a对象发生效果。而对直接使用a对象的内容不产生效果。实际上，大多数情况我们直接用a而不是a:link，一般情况下最终效果都会完全相同。
      在使用这些标签的时候我们一定要遵守LVHA（love hate）这个顺序
      a{ color:blue;}对应的是没有href的a标签，a:link{color:black;} 是带href的a标签
    2. 伪元素选择器 - 并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器
      first-line  - 选中元素内容的首行
      first-letter   - 选中元素内容的首字符
      before    - 在元素开头插入内容
      after    - 在元素末尾插入内容
      使用方法：选择器：伪元素{样式}
        p:first-letter{font-variant:small-caps;}
        p:forst-line{font-weight: bold;}
        p:before{content: 'before开头添加内容';color: red;}
        p:after{content:'末尾添加内容';color: green;}
    3. 结构性伪类选择器
            ·PartI  : 四个最基本的：root、not、empty、target    
      　　 
            root:将样式绑定到页面的根元素中。     
      
              所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的<html>部分
      
      not: 想对某个结构元素使用样式，但想排除这个结构元素下的子结构元素，就是用not样式
      
      empty:指定当元素内容为空白时使用的样式
      
      target:对页面中某个target元素指定样式，该样式只在用户点击了页面中的链接，并且跳转到target元素后生效

<style type="text/css">
      
		:root{background:gray;}
      
		body *:not(h1){background: white;}
      
		:empty{background: green;}
      
		:target{background: black;}

	</style>
      
</head>
      
<body>
      
<h1>结构性伪类选择器</h1>
      
<p class="">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      
<p>bbbbbbbbbbbbbbbbbbbbbb</p>

<hr>
      
<table border="1">
      
<tr>
      
	<td>1-1</td>
      
	<td>1-2</td>
      
	<td>1-3</td>
      
</tr>
      
<tr>
      
	<td>2-1</td>
      
	<td></td>
      
	<td>2-3</td>
      
</tr>
      
</table>

<hr>
      
<a href="#div1">A</a>
      
<a href="#div2">B</a>
      
<div id="div1">A……</div>
      
<div id="div2">B……</div>
      
</body>

      　　页面效果：
            02_HTML5+CSS详解第三天

      ·PartII : first-child、last-child、nth-child、nth-last-child（如果被选择元素后面有其他种类元素，不会自动跳过）

      用法：nth-child(n)、nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)

                     li:first-child{background: red;}    选择第一个li元素
      
		li:last-child{background: green;}
      
		li:nth-child(2){background: blue;}  选择第二个li元素
      
		li:nth-child(odd){background:darkred;}   /*奇数（注意起始值是1）*/
      
		li:nth-child(even){background: coral;}  /* 偶数*/
      
		li:nth-last-child(2){background:gray;}
      
		li:nth-last-child(odd){background: darkgreen;}
      
		li:nth-last-child(even){background: yellow;}

      　　

      ·PartIII: nth-of-type、nth-last-of-type    （统计时只针对同类型的子元素进行计算）
         

      <style type="text/css">
      
		h1:nth-of-type(odd){background: red;}
      
		h1:nth-of-type(1){background: green;}
      
		h1:nth-last-of-type(even){background: blue;}
      
	</style>
      
</head>
      
<body>
      
	<h1>h1</h1>
      
	<p>p1</p>
      
	<h1>h2</h1>
      
	<p>p2</p>
      
	<h1>h3</h1>
      
	<p>p3</p>
      
	<h1>h4</h1>
      
	<p>p4</p>
      
	<h1>h5</h1>
      
</body>

      　　

       

      ·PartIV : 循环使用样式    
             用法：nth-child(An+B），A表示每次循环*包括几种样式，B指定样式在循环中所处的位置

       ·PartV  : only-child   当只有一个子元素时应用

    4. UI元素状态伪类选择器
      懒了，直接贴链接：http://blog.****.net/u012859748/article/details/52612139

      read-only和disabled的区别？

      答：1、提交表单的时候read-only可以提交，但是disabled不可以。2、read-only只针对input/textarea这样的文本输入框，对select无效，disabled对所有表单元素有效。
      【火狐清空缓存快捷键：shift+ctrl+delete]

      1、input:checked{outline: 2px solid green;}
      2、input::-moz-selection{background: #f60;color: #fff;}
      3、input::-moz-read-only{background: #f60;color: #fff;}

      通用兄弟元素选择符
      <子元素>~<子元素之后的同级兄弟元素>{}

    5. 使用选择器在页面中插入内容
      http://blog.****.net/erdouzhang/article/details/70880531

      upper-roman  - 小写罗马文
      在字符串两遍嵌套文字符号
        h1:before{content: open-quote;}
        h1:after{content:close-quote;}
        h1{quotes: "("")";}  - 引号分隔开

      　　

    6. 文字阴影与自动换行
      http://blog.****.net/z983002710/article/details/76375374?locationNum=6&fps=1

       

相关文章