姜玉琪_20210111-姜玉琪

知识点总结:

一、html

  网页标签:使用<>括起来有特殊意义关键字,通常成对出现的
               成对出现的标签 <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 的关系是什么?
              后代元素, 只要是 当前元素内的标签都是它的 后代元素

        元素根据特点分为 两大类: 内联(行)元素   块元素   
            内联(行)元素: span  a  input strong em button                         img
                         u i s b
                        默认情况下,不能独立占父元素一行空间的                            元素
            块元素:     p div ul ol dl hn form table hr
                        默认情况下,能够独立占父元素一行空间的                         元素

1.!DOCTYPE html

​ 标准的网页结构
​ 文档声明,用于声明网页的类型

2.html

​ 网页根节点

3.head

​ 网页编码, utf-8、gb2312/gbk (简体中文) big5 (繁体) iso-8859-1
4.meta
​ 属性 attribute,标签属性用来描述标签特性。格式: 属性名="属性值"
​ 多个属性间用 空格 隔开

5.SEO

meta : author(作者) keywords(关键字) description(网页描述)

6.a

<body>
        <!-- 锚点,可以使用 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>
        
        
        <!--
            target:
                _blank   新窗口打开链接
                _parent  父页面打开链接
                _self    本页面打开链接(默认)
                _top     最外层页面打开
            download 下载,值是下载文件的名称
         -->
         <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>
         
         
         <a href="others/zhuiguangzhe.mp3" download="1.mp3">追光者</a>
    </body>

7.音/视频

​ audio 音频标签
​ controls 控制按钮
​ autoplay 自动播放 chrome 在65之后禁止音/视频自动播放
​ muted 静音
​ preload 加载
​ auto 自动 默认
​ none 不预加载
​ metadata 预加载
​ loop 循环播放

​ video 视频控件
​ controls 控制按钮
​ poster 视频封面
​ (其他 audio 标签属性也生效)

<!-- 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>

二、CSS

1.1 定义

层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表语言, 用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。 CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

​ 网页三要素:

  • HTML标签决定页面上元素的基本结构

  • CSS 用于设置HTML元素的样式

  • JavaScript 用于控制页面上的行为

1.2 语法

​ CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

ector {declaration1; declaration2; ... declarationN }

​ 选择器通常是您需要改变样式的 HTML 元素。

​ 每条声明由一个属性和值组成。

​ 属性(property)是您希望设置的样式属性(style property)。每个 属性有一个值。属性和值被冒号 分开。

1.3 用法

在 HTML 文档中使用 CSS 有四种不同的用法,这里分别予以简单介绍。

1.3.1 内联样式

直接通过元素的 style 属性(attribute)来指定的样式被称作内联样式 (也有人称作 行内样式 )。

1.3.2 内部样式

所谓内部样式,就是在 HTML 文档中,通过 style 元素来嵌入CSS样式。

1.3.3 外部样式表

单独的 CSS (后缀是 .css )文件,当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用 外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链 接到样式表。 标签在(文档的)头部。

1.4 选择器

选择器是用来决定要改变谁的样式,选择器可以分为四类十七种,我们将其简化。我们接下来要介绍几 种,标签选择器、ID选择器、class选择器、子元素选择器、后代选择器、伪类、通配选择器、组合选择 器。

1.4.1 标记(标签)选择器: 网页标签名与选择器同名

标记选择器 也称作 标签选择器 ,英文中写作 tag selector ,其基本用法为:

Name {
propertyName : propertyValue ;
<body>
<head>
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p>
</body>

1.4.2 Class选择器:网页哪个标签使用Class选择器,就在标签添加 class属性,值就是Class选择器名称

class 选择器 也称作 class 选择符,英文中称作 class selector。

1.4.3 属性选择器

属性选择器 也称作 属性选择符,英文中称作 attribute selector 。其基本用法为:

<div class="success">
在 div 元素的 class 属性中仅使用单个 className
</div>
<p class="first success">
在 p 元素的 class 属性中指定两个 className
</p>
<span class="flag success test">
在 span 元素的 class 属性中指定三个 className
</span>

我们仅学习较为常用的三种: [attributeName] 、 [attributeName=value] 、 [attributeName~=value] 。

心得体会

好好学习,能有一个好的开始!

标签

评论

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