HTML复习总结

网页三要素：

HTML：网页骨架。

CSS：设置html元素样式。

JavaScript:控制页面的行为。

一、什么是HTML

1、HTML是一种超文本标记语言。

2、网页结构

 1 <!-- 标准的网页结构 -->
 2 <!-- 文档声明，用于声明网页的类型  -->
 3 <!DOCTYPE html>
 4 <!-- 网页根节点 -->
 5 <html>
 6     <!-- 网页信息,比如：标题、图标、编码 -->
 7     <head>
 8         <!-- 网页编码， utf-8、gb2312/gbk (简体中文) big5 (繁体) iso-8859-1 -->
 9         <!-- 属性 attribute，标签属性用来描述标签特性。格式： 属性名="属性值"多个属性间用 空格 隔开-->
10         <meta charset="utf-8" />
11         <!-- 网页标题 -->
12         <title>标题</title>
13         <!-- 网页图标  在线制作网址：https://tool.lu/favicon/ -->
14         <link rel="shortcut icon" href="img/favicon.ico" />
15         <!-- 引入外部样式 -->
16         <link href="#" type="text/css"/>
17         <!-- 内部样式 -->
18         <style type="text/css">
19         </style>
20         <!-- 引入外部js -->
21         <script src="#"></script>
22         <!-- 内部 js -->
23         <script type="text/javascript"></script>
24 ​
25         <!-- SEO 搜索排名 --> 
26         <!-- 网页作者 -->
27         <meta name="author" content="啦啦啦"/>
28         <!-- 关键字 -->
29         <meta name="keywords" content="" />
30         <!-- 网页描述 -->
31         <meta name="description" content="" />
32     </head>
33     <!-- 网页中显示的内容 -->
34     <body>
35         页面内容
36         
37         <!-- 
38             网页标签：使用<>括起来有特殊意义关键字,通常成对出现的
39                成对出现的标签 <span></span>
40                有开始标记(标签)  <span>
41                有结束标记(标签)  </span>
42                
43                自结束/自封闭标签
44                   <meta />  <hr />
45                   
46              注意： 网页的标签不区分大小写，但是通常建议使用小写
47              
48              元素： 标签以及标签中的内容
49                例如： <p>这是一个段落</p>
50                
51              元素间的关系：  dom 树
52                 <html>
53                   <head>
54                       <meta charset="utf-8" />
55                       <title>标题</title>
56                   </head>
57                  ...
58                 </html>  
59                   
60                   title 元素是 head元素的 直接子元素
61                   head 元素是 title 元素的 直接父元素
62                   
63                   title 和 meta元素有共同的直接父元素，
64                   title 和 meta 就是兄弟关系（同级元素）
65                   
66                   head 是 html 元素的直接子元素
67                   那么 title以及 meta 和 html 的关系是什么？
68                   后代元素, 只要是 当前元素内的标签都是它的 后代元素
69          -->
70          
71     </body>
72 </html>

3、元素分类：

（1）内联（行）元素：span a em b br u i s img

（2）块级元素:p div ul ol dl hn form table hr nav aside section

4、a标签：

（1）属性：href:链接地址 target:链接打开方式（blank 新窗口，self 本页面，top最外层页面,parent 父页面）domnload 下载该文件的名称

（2）锚点：使用name或id属性定义名称

同一页面的使用

1 <a name="top"></a>
2 <div>
3     中间是很长的文字或图片
4 </div>
5 <a href="#top">回到顶部</a>

不同页面的使用

 1 <!--页面1-->
 2 <p>
 3     this is index01
 4 </p>
 5 <a name="bottom"></a>
 6 <!--页面2-->
 7 <p>
 8     this is index02
 9 </p>
10 <a href="index02.html#bottom">页面1的底部</a>

5、iframe 内联框架

6、audio 音频：

（1）属性：controls 控制按钮 autoplay 自动播放 muted 静音 preload 加载（auto 自动默认、none不预加载、metadata 预加载） loop 循环播放

7、video 视频：

（1）属性：poster 视频封面 controls 控制按钮 autoplay 自动播放 muted 静音 preload 加载（auto 自动默认、none不预加载、metadata 预加载） loop 循环播放

（2）滚动字幕：marquee

8、js控制音频视频：

 1 <script type="text/javascript">
 2             //获取 音频元素
 3             var audio=document.querySelector("#audio");
 4             //获取 播放按钮
 5             var btn=document.querySelector("#btn");
 6             function play(){
 7                 var videoStatus = video.paused;
 8                 if(videoStatus){
 9                     video.play();
10                     btn.innerText='暂停';
11                 }else{
12                     video.pause();
13                     btn.innerText='播放';
14                 }
15             }
16             
17             function listen(e){
18                 var code=e.keyCode;
19                 if(code==32||code==13){
20                     play();
21                 }
22             }
23             window.addEventListener("keydown",listen,false)
24         </script>

9、img 图片

（1）属性：src 图片源地址

（2）图片格式：jpg/jpeg 它支持极高的压缩率，因此JPEG图像的下载速度大大加快

png 支持背景透明 gif 动图 bmp 位图 几乎不进行压缩 alt 若图片不正常显示，显示其值

（3）方式：本地图片、在线图片、加密图片（Base64）

posted @ 2021-01-14 08:11  猫仔发发  阅读(73)  评论(0)    收藏  举报