HTML5基础知识

HTML 5

头部信息

• 网页标题

  • <title> 标题 <title>
    

• 网页图标

  • <link rel="shortcut icon" href="img/图片名"/>
    

  • 网页图标制作网址：https://tool.lu/favicon

• 引入外部样式

  • <link href="#" type="text/css"/>
    

• 内部样式

  • <style type="text/css">  </style>
    

• 引入外部 js

  • <script src="#"></script>
    

• 内部js

  • <script type="text/javascript">
    </script>
    

• 网页作者

  • <meta name="author" content="云创动力"/>
    

• 关键字

  • <meta name="keywords" content="" />
    

• 网页描述

  • <meta name="description" content="" >
    

网页中显示的内容

标签

• 网页标签：使用<>括起来有特殊意义关键字,通常成对出现的

  • 1. 成对出现的标签
    2. 有开始标记(标签)
       有结束标记(标签)
    3. 自结束/自封闭标签
    4. 注意：网页的标签不区分大小写，但是通常建议使用小写

• 元素：标签以及标签中的内容

  • 元素 间的关系： dom树

    • 1. title 元素是 head元素的 直接子元素
         head 元素是 title 元素的 直接父元素
      2. title 和 meta元素有共同的直接父元素，
         title 和 meta 就是兄弟关系（同级元素）
      3. head 是 html 元素的直接子元素
         后代元素, 只要是 当前元素内的标签都是它的 后代元素

  • 元素根据特点分为 两大类： 内联（行）元素 块元素

  • 内联(行)元素:

    • span  a  input strong em button im u i s b
      

      默认情况下，不能独立占父元素一行空间的元素

  • 块元素：

    • p div ul ol dl hn form table hr
      

      默认情况下，能够独立占父元素一行空间的元素

超链接

• 锚点：可以使用 name 或者 id属性定义其名称

• 例如

  • <a name="top"></a>
    		<a href="https://www.baidu.com">百度一下，你啥都不知道</a>
    		<a href="01.html">01.html</a>
    
    		<div style="height: 1000px;"></div>
    
    		底部
    		<a name="bottom"></a>
    		<a href="#top">回到顶部</a>
    

• 超链接

  • 类别

  • 1. _blank 新窗口打开链接
    2. _parent 父页面打开链接
    3. _self 本页面打开链接(默认)
    4. _top 最外层页面打开

  • <a href="https://www.baidu.com" target="_blank">新窗口</a>
    		 <a href="https://www.baidu.com" target="_self">本页面</a>
    		 <a href="https://www.baidu.com" target="_parent">父页面</a>
    		 <a href="https://www.baidu.com" target="_top">最外层页面</a>
    

  • download 下载,值是下载文件的名称

  • <a href="others/zhuiguangzhe.mp3" download="1.mp3">追光者</a>
    

音/视频

• 音频标签：audio

  • 1. controls 控制按钮

    2. autoplay 自动播放 chrome 在65之后禁止音/视频自动播放

    3. muted 静音

    4. preload 加载

       auto 自动 默认

       none 不预加载

       metadata 预加载

    5. loop 循环播放

  • 示例

    • <audio id="audio"  controls autoplay muted preload="none" loop>
      			<source src="others/zhuiguangzhe.mp3"></source>
      			<source src="others/chuanqi.mp3"></source>
      			不支持 audio 标签
      		</audio>
      

• 视频标签：video

  • 1. controls 控制按钮

    2. poster 视频封面

       （其他 audio 标签属性也生效）

  • 代码示例

    • <video id="video" src="others/tb.mp4" controls poster="img/kedaya.jpeg">
      			不支持 video 标签
      		</video>
      

• 滚动字幕

  • <marquee>冲冲冲</marquee>
    

• js脚本

  • 代码示例

  • <script type="text/javascript">
    			// 获取 视频 元素
    			var video = document.querySelector("#video");
    			// 获取到 播放 按钮
    			var btn = document.querySelector("#btn");
    			// 定义一个函数
    			function play(){
    				// 向控制台输出
    				// console.log(video);
    				// 获取视频是否暂停
    				var videoStatus = video.paused;
    
    				if(videoStatus){
    					// 如果是暂停的,就播放
    					video.play();
    					// 修改按钮文字
    					btn.innerText = '暂停';
    
    					// video.muted = true; 静音 video.volume = (0~1) 音量
    				}else{
    					// 如果是暂停的,就暂停
    					video.pause();
    					// 修改按钮文字
    					btn.innerText = '播放';
    				}
    			}
    			function listen(e){
    				var code = e.keyCode;
    				// 判断 如果是 空格或者 回车按钮 调用 play()
    				if (code == 32 || code == 13) {
    					play();
    				}
    			}
    			// 添加监听事件
    			window.addEventListener("keydown", listen, false);
    		</script>
    

图片

• 图片格式支持

  • 1. jpg/jpeg 它支持极高的压缩率，因此JPEG图像的下载速度大大加快
    2. png 支持背景透明
    3. gif 动图
    4. bmp 位图 几乎不进行压缩

  • 1. title 几乎所有的html标签都有此属性，当鼠标悬停在标签上时显示其值
    2. alt 如果图片不能正常显示时，显示其值

• 本地图片

  • <img src="img/kedaya.jpeg" title="这是只可达鸭"/>
    

• 在线图片

  • <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2754047318,4189079953&fm=26&gp=0.jpg" />
    

• 加密后的图片

  • <img src="img/kedaya1.jpeg" title="这是只可达鸭" alt="可达鸭"/>
    

内部样式

• 代码示例

  • <style type="text/css">
    			/* class 选择器， 区分大小写 */
    			.success{
    				color: red; /* 文字颜色 */ 
    			}
    		</style>
    

• 1. <div class="success">
     		    在 div 元素的 class 属性中仅使用单个 className 
     		</div>
     

  2. <p class="first success"> 
     		    在 p 元素的 class 属性中指定两个 className
     		</p>
     

  3. <span class="flag success test">
     		    在 span 元素的 class 属性中指定三个 className
     		</span>
     

属性选择器

• 代码示例

• <style type="text/css">
  			[type]{
  				color: red;
  			}
  
  			[class~=wrapper]{
  				color: blue;
  			}
  		</style>
  

• <form action="http://www.baidu.com/s">
  			<input type="text" name="wd">
  			<input type="submit" value="百度一下">
  		</form>
  		<div class="wrapper first odd">wrapper first odd</div>
  		<div class="wrapper second even">wrapper second even</div>
  		<div class="wrapper">wrapper</div>