HTML基本知识

一、基本结构

1、网页根节点

2、>包含网页信息，比如：标题、图标、编码（1）网页编码

<meta charset="uft-8">

(2)网页标题

<title>网页标题</title>

（3）网页图标

<link rel="shortcut icon" href="">

(4)引入外部样式

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

(5)内部样式

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

(6)引入外部js

<script type="#"></scrip>

(7)内部js

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

(8)网页作者

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

（9）关键字

<meta name="keywords" content>

(10)网页描述

<meta name="description" content>

3、网页中显示的内容

1、元素：标签以及标签中的内容

例如：

这是一个段落

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

​ 内联（行）元素：span、a、input、strong、em、button、

​ img、u i s b

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

块元素：p div ul ol dl hn form table hr

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

二、锚点

1、锚点，可以使用name或者id属性定义其名称

<a name="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>

三、音/视频

1、音频

         <!--
                   audio  音频标签
                controls  控制按钮
                autoplay  自动播放 chrome 在65之后禁止音/视频自动播放
                    mute  静音
                 preload  加载
                    auto  自动 默认
                    none  不预加载
                metadata  预加载
                    loop  循环播放
         -->
        <audio id="audio"  controls autoplay muted preload="none" loop>
            <source src="others/zhuiguangzhe.mp3"></source>
            <source src="others/chuanqi.mp3"></source>
            不支持 audio 标签
        </audio>

2、视频

         <!--
                   video    视频控件
                controls    控制按钮
                  poster    视频封面
                autoplay    自动播放 chrome 在65之后禁止音/视频自动播放
                    mute    静音
                 preload    加载
                    auto    自动 默认
                    none    不预加载
                metadata    预加载
                    loop    循环播放
               
         -->
        <video id="video" src="others/tb.mp4" controls poster="img/kedaya.jpeg">
            不支持 video 标签
        </video>

3、添加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>

四、图片

<!-- 
            图片, 使用 src 属性 设置其图片源地址
            图片格式支持：  jpg/jpeg png  gif  bmp
           jpg/jpeg      它支持极高的压缩率，因此JPEG图像的下载速度大大加快
                png      支持背景透明
                gif      动图
                bmp      位图 几乎不进行压缩
              title      几乎所有的html标签都有此属性，当鼠标悬停在标签上时显示其值
                alt      如果图片不能正常显示时，显示其值
             
        -->
        <img src="img/img2.jpeg" title="这是只可达鸭"/>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2754047318,4189079953&fm=26&gp=0.jpg" />
        <img src="img/img2.jpeg" title="这是只可达鸭" alt="可达鸭"/>

CSS

一、class选择器

        <style type="text/css">
            /* class 选择器， 区分大小写 */
            .success{
                color: red; /* 文字颜色 */ 
            }
        </style>
        <div class="success">
            在 div 元素的 class 属性中仅使用单个 className 
        </div>
        <p class="first success"> 
            在 p 元素的 class 属性中指定两个 className
        </p>
        <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>