冯娜_20210111冯娜

知识点总结(复习)

网页三要素:

HTML:网页骨架。

CSS:设置html元素样式。

JavaScript:控制页面的行为。

一、什么是HTML

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

2、网页结构

<!-- 标准的网页结构 -->
<!-- 文档声明,用于声明网页的类型  -->
<!DOCTYPE html>
<!-- 网页根节点 -->
<html>
    <!-- 网页信息,比如:标题、图标、编码 -->
    <head>
        <!-- 网页编码, utf-8、gb2312/gbk (简体中文) big5 (繁体) iso-8859-1 -->
        <!-- 属性 attribute,标签属性用来描述标签特性。格式: 属性名="属性值"多个属性间用 空格 隔开-->
        <meta charset="utf-8" />
        <!-- 网页标题 -->
        <title>标题</title>
        <!-- 网页图标  在线制作网址:https://tool.lu/favicon/ -->
        <link rel="shortcut icon" href="img/favicon.ico" />
        <!-- 引入外部样式 -->
        <link href="#" type="text/css"/>
        <!-- 内部样式 -->
        <style type="text/css">
        </style>
        <!-- 引入外部js -->
        <script src="#"></script>
        <!-- 内部 js -->
        <script type="text/javascript"></script>

        <!-- SEO 搜索排名 --> 
        <!-- 网页作者 -->
        <meta name="author" content="云创动力"/>
        <!-- 关键字 -->
        <meta name="keywords" content="" />
        <!-- 网页描述 -->
        <meta name="description" content="" />
    </head>
    <!-- 网页中显示的内容 -->
    <body>
        页面内容
        
        <!-- 
            网页标签:使用<>括起来有特殊意义关键字,通常成对出现的
               成对出现的标签 <span></span>
               有开始标记(标签)  <span>
               有结束标记(标签)  </span>
               
               自结束/自封闭标签
                  <meta />  <hr />
                  
             注意: 网页的标签不区分大小写,但是通常建议使用小写
             
             元素: 标签以及标签中的内容
               例如: <p>这是一个段落</p>
               
             元素间的关系:  dom 树
                <html>
                  <head>
                      <meta charset="utf-8" />
                      <title>标题</title>
                  </head>
                 ...
                </html>  
                  
                  title 元素是 head元素的 直接子元素
                  head 元素是 title 元素的 直接父元素
                  
                  title 和 meta元素有共同的直接父元素,
                  title 和 meta 就是兄弟关系(同级元素)
                  
                  head 是 html 元素的直接子元素
                  那么 title以及 meta 和 html 的关系是什么?
                  后代元素, 只要是 当前元素内的标签都是它的 后代元素
         -->
         
    </body>
</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属性定义名称

同一页面的使用

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

不同页面的使用

<!--页面1-->
<p>
    this is index01
</p>
<a name="bottom"></a>
<!--页面2-->
<p>
    this is index02
</p>
<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控制音频视频:

<script type="text/javascript">
            //获取 音频元素
            var audio=document.querySelector("#audio");
            //获取 播放按钮
            var btn=document.querySelector("#btn");
            function play(){
                var videoStatus = video.paused;
                if(videoStatus){
                    video.play();
                    btn.innerText='暂停';
                }else{
                    video.pause();
                    btn.innerText='播放';
                }
            }
            
            function listen(e){
                var code=e.keyCode;
                if(code==32||code==13){
                    play();
                }
            }
            window.addEventListener("keydown",listen,false)
        </script>

9、img 图片

(1)属性:src 图片源地址

(2)图片格式:jpg/jpeg 它支持极高的压缩率,因此JPEG图像的下载速度大大加快

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

(3)方式:本地图片、在线图片、加密图片(Base64)

二、CSS

1、css的用法:

(1)内联样式

<div style="width: 200px; height: 20px;"></div>

(2)内部样式

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

(3)外部样式表

<link rel="stylesheet" type="text/css" href=""/>

(4)@import

import url() 

样式优先级:内联样式>内部样式>外部样式表

1、选择器:

(1)class选择器 .class名 。注意:区分大小写

(2)属性选择器 [ 属性名] 注意:属性选择器使用时要一一匹配,使用~=时不用一一匹配。

<style type="text/css">
            [type]{
                color: red;
            }
            
            [class~=wrapper]{
                color: blue;
            }
            
        </style>
    </head>
    <body>
        <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>

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1