HTML学习

        一、标题栏的图标设置有5种方法：
            1、在网站的根目录下放一张favicon.ico的图标文件。浏览器会自动显示在标题栏中。
            2、使用ico图标作用标题栏图标，用link标签引入。
                 <link rel="icon" type="image/x-icon" href=""/>
                可以使用工具将其它图片生成ico图标。图标一般设置为16X16.
            3、使用jpg图片作用标题栏图标，用link标签引入。
                <link rel="icon" type="image/jpg" href=""/>
            4、使用png图片作用标题栏图标，用link标签引入。
                <link rel="icon" type="image/png" href=""/>
            5、使用gif图片作用标题栏图标，用link标签引入。
                <link rel="icon" type="image/gif" href=""/>
                
        二、关键字与描述    
             关键字与描述是网页优先很重要的部分，它不是给人看的，是供搜索引擎使用的。如果你要被百度网站搜索到，首先在被百度网收录才可以。这里
             涉及到SEO搜索优化。
            1、设置关键字：
            <meta name="Keywords" content=" "/>  
                content:要设置的关键字，可以使用多个关键字，用英文逗号分隔,建议不要超过5个。
            2、设置描述内容：    
                <meta name="Description" content=""/>    
                content:要设置的描述内容，建议不要超过提要100字。
            关键字与描述不要乱写，一定要与网站内容相符合。    
                
        三、页面跳转
            设置页面自动跳转
            <meta http-equiv="refresh" content="5; http://www.yiyun668.com" /> 
            设置页面自动刷新
            <meta http-equiv="refresh" content="5" /> 
                
        四、定义样式和引入样式 
                1、设置样式语法（所设置的样式仅限当前页面有效）
                <style type="text/css">
                    中间是设置css样式内容。
                </style>
                
                2、设置样式引入文件 href=" "里面是样式文件地址。
                <link rel="stylesheet" type="text/css" href="css/3-6.css"/>
        五、超链接
                1、语法实例：
                <a href="指定需要链接的地址">这里是显示的内容</a>
                target="_blank" 
                target这个属性指定是在哪一个页面显示。
                _blank是指在新窗口中打开页面。
                _self是指在当前窗口中显示打开页面。这个参数可以不写，它属于默认参数。
                _parent则表示，将链接的文件载入含有该链接框架的父框架集或父窗口中。
                     如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。
                _top 在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架.
                    不写的话就是表示默认值，默认值一般跟浏览器有关。
                    
                2、超链接的四种状态：
                    a:未被访问的链接，link状态，默认文字颜色为蓝色，并且有下划线。
                    b:已被访问的链接，visited状态，默认文字颜色为紫色，并且有下 划线。  
                    c:鼠标移动到链接上的状态，hover状态，有下划线，鼠标变成的手形。 
                    d:鼠标正在点击的状态，activer状态，文字红色，有下划线
                    注：默认的这四种状态没有实用价值，通常我们在通过css对这四种状态重置。
                    
        六、绝对路径   相对路径
                1、完整的地址，叫绝对路径(外部路径)。网络中带有域名的完整路径，如  https://www.baidu.com
                    主要用来链接外部资源。
                2、相对路径是内部路径
                    以当前文档所在目录为参考。在本目录中可以直接输入链接文档路径
                    不在同一目录下，一个../表示返回一层目录，如果需要返加两层目录，
                    则需要两个../以返加两层目录，再输入链接文档路径，以此类推。
        七、ID属性
            元素的属性分标准属性与特殊属性
                标准属性：几乎所有元素都拥有的属性为标准属性。                
                特殊属性：指元素特有的属性。                
                ID属性，属于标准属性：
                1、是元素的唯一标识。
                2、同一个页面中，不能有相同的id.
                3、同一个页面中，不同元素有相同的id也不行.
                4、ID调用用“#ID值”。
        八、class属性    
                1、相同的元素，不同的元素，可以使用相同的class名称。
                2、class调用用“.class值”。
                3、class值相同则为同一类。
                4、同一个元素可以有多个class名，中间为空格隔开
                5、class主要用来选择一堆元素，主要用来定义样式。规定类名时不能以数字开头。
                
                实例：
                <a class="dyz" href="http://www.yiyun668.com" target="_blank">依云科技</a>
                <a class="dyz" href="https://www.baidu.com" target="_blank">百度搜索</a>
                <p class="dyz">段落标签测试</p>
        九、title和style属性
                title 属性示例：
                <a href="http://www.yiyun668.com" title="依云科技">点击进入</a>
                在这个示例中，title是标准属性，即所有元素都拥有的属性.
                作用：当鼠标放在超链接上时，会显示提示文字。
                
                style属性
                    1、style作用属性使用时，规格元素的行内样式。
                    2、style属性样式会履盖其它方式设置的样式。
                    3、可设置多个属性值，用“;”隔开。
                    例：
                    <a href="http://www.yiyun668.com" title="依云科技" style="color:fuchsia;font-weight: 600;">点击进入</a>
        十、自定义属性
                    1、自定义属性与标准属性一样，几乎所有元素都可以使用用。    
                    2、自定义属性可以自已定义属性名与属性值。
                    实例：<a href="https://www.51zxw.com" zxw="51zxw">我要自学网</a>
                    这里的zxw="51zxw" zxw就是自定义属性，51zxw是自定义属性值。
                    3、自定义属性用得比较少。
                    例：<a href="https://www.51zxw.com" zxw="51zxw">我要自学网</a>
                自定义数据属性                    
                    1、用于存储页面或应用程序的私有自定义数据。
                    2、data-"*"属性包含两部分：
                        a、"*表示自定义数据属性名。在data-之后必须包含至少一个字符。
                        b、属性值可以为任何字符串。
                    3、自定义数据属性在微信小程序中用得比较多。
                    后续在微信小程序开发中再详细讲解。
                    例   <a href="https://www.51zxw.com" data-zxw="51zxw">我要自学网</a>
        十一、文件下载：
                    1、    格式：<a href="文件路径">文件下载</a>
                        href属性指定文件下载路径。
                        例 <a href="download/laolitoolk.8.9.rar">文件下载</a>
                        
                        download属性指定文件下载名称。
                        不添加download属性,如果浏览器不能识别下载文件，则可以直接下载
                        如果浏览器可以识别下载文件，则浏览器直接打开文件显示，不下载。
                        如果添加了download属性,不管浏览器能否识别下载文件，都会下载。
                        download属性值则为下载文件名称。                    
                        例：
                        <a href="download/课堂笔记.png">图片下载</a>
                        <a href="download/课堂笔记.png" download="图片">图片下载</a>
                        
                        Download属性的兼容性不怎么样，只有 Firefox 和 Chrome 支持 download 属性。
 
        十二、锚链接与空链接：
                    1、当前页面内容太长需要跳转到具体位置时就可以使用锚链接。
                        实例如mao.html
                        格式如下：
                        <a href="#one">第一章</a>
                        <a href="#two">第二章</a>
                        <a href="#three">第三章</a>
                        <p id="one"> 第一章内容</p>
                        <p id="two">第二章内容</p>
                        <p id="three">第三章内容</p>
                    2、当前页面跳转到其它页面锚点。
                        目标页面的具体位置要先设置好锚点；
                        用a标签中的href属性指定目前页面路径+指定位置
                        实例:
                        <a href="mao.html/#one">第一章</a>
                        或<a href="mao.html#one">第一章</a>
                        <a href="mao.html/#two">第二章</a>
                        <a href="mao.html/#three">第三章</a>
                    3、空链接
                    当页面内容太长，浏览到底部时需要快速度返回当前页顶部时可以使用空链接。
                        <a href="#">返回顶部</a>
                        空链接实际应用使用较多    

        （十三）网页中引入图片
            1、网页中引入图片需使用img标签。
                <img src="图片路径"/>
                实例：<img src="image/favicon.jpg"/>
            2、src属性用来指定图片所在文件的路径，图片路径可以是相对路径，也可以绝对路径。
            3、当图片路径不正确无法显示，可以用alt="文字提示信息"。
                输入方法:img+Tab键
                <img src="https://www.51zxw.net/6380.jpg" alt="无法显示，请检查图片路径" />
                alt属性是当图片无法正常显示时替换文本，路径不对，网速过慢，浏览器版本过低，图片格式不对，都可能造成图片无法显示。
            4、width height属性
                a、width属性，设置图片的宽度。height属性，设置图片的高度。
                b、如果不设置，图片会按原始尺寸显示。
                c、如果只设置其中一个属性，另一个会根据已设置的属性等比例缩放。
                语法实例：    <img src="image/favicon.jpg" width="300" height="200">
                d、宽度与高度的设置，单位默认是象素，也可以设置为百分比。
        （十四）音频的引入
                IE8之前的浏览器不支持。
                1 、audio标签在网页中引入音频，使用<audio src="音频路径"></audio>
                2、src属性，指定音频文件路径，必须要有。
                3、controls属性，显示播放控件。
                4、autoplay属性，音频准备就绪后马上手播放。
                5、loop属性，音频播放结束后重新播放。                
                controls autoplay 属性名loop与属性值一样，可以只写属性名。
                6、muted属性：音频输出时静音。                 
                preload页面开始加载时就加载音频，并预备播放。如果使用了autoplay属性，preload属性不会失效。
               实例： <audio src="download/DJ我是不是你最疼爱的人.mp3" controls loop autoplay="autoplay">你的浏览器不支持音频播放</audio>
         （十五）视频的引入
                IE8之前的浏览器不支持。
                1 、video标签在网页中引入音频，使用<video src="视频路径"></video>
                2、src属性，指定视频文件路径，必须要有。
                3、controls属性，显示播放控件。
                4、autoplay属性，视频准备就绪后马上手播放。
                5、loop属性，视频播放结束后重新播放。                
                controls autoplay 属性名loop与属性值一样，可以只写属性名。
                6、muted属性：视频输出时静音。     
                以上同音频的属性是一样的。
                
                *7、poster属性：用于在视频加载时或者用户在点击播放前显示的图片。
                 它的属性值就是你需要加载图片的路径。这个图片通常用于广告。                 
                preload页面开始加载时就加载视频，并预备播放。如果使用了autoplay属性，preload属性不会失效。    
                
                *width height属性
                a、width属性，设置视频窗口的宽度。height属性，设置视频窗口的高度。
                b、如果不设置，视频会按原始尺寸显示。
                c、如果只设置其中一个属性，另一个会根据已设置的属性等比例缩放。
                例:<video src="download/1d.mp4" height="400" controls poster="image/favicon.jpg"></video>
            
             （十六）定义媒质资源
                 source标签：用来为video和audio标签，定义媒介资源。
                 src属性：定义资源的路径。
                type属性用来定义媒介资源的类型。
                浏览器会自动从上往下找能识别的资源类型。
                <video width="200" height="300" controls>
                    <source src="download/1d.mp4" type="video/mp4"></source>
                    <source src="myvideo.ogv" type="video/ogg"></source>
                当前浏览器不支持 video直接播放，点击这里下载视频： <a href="download/1d.mp4">下载视频</a>
                </video>
                
            （十七）标题元素
                1、h1—h6标签可以用来定义标题。
                2、标题标签有强调作用，有确切的语言义，h1—h6按重要性递减速。
                3、h1定义最大的标题,h6定义最小的标题。
                4、h1标记在同一个页面只能使用一次h1标记。h2—h6可以多次使用。
                5、不要利用h标签来改变文字大小，使用CSS更方便更美观。
                
            （十八）段落元素
                1、浏览器忽略代码中的格式，多个空格符、回车符、制表符会解析成一个空格（非常重要）。
                2、P标签用来标记一个段落，是常见的一个标记。
                3、P标签会独占一行。
                
                扩展知识：
                text-align: center;  //文字居中显示
                text-indent:2em ;     //文字缩进2个字符
                
            （十九）斜体标签
                1、i标签：单纯显示斜体文本效果。
                2、em标签：显示斜体文本效果。另有强调作用。
                如果仅需要单纯的斜体，强调太多，有些重要的语句会被漏掉，不要滥用强调。
                
            （二十）粗体标签
                1、b标签：单纯显示加粗的文本效果。
                2、strong标签：显示加粗文本效果。另有强调作用。比em标签强调作用更强。
                如果仅需要单纯的粗体，请使用b标签，不要使用strong标签，不要滥用强调。    
            （二十一）换行标签
                换行标签<br />：
                1、在不另起一段的情况下强制换行。
                2、一次<br />标签表示换一行，连续多个标签可以实现多次换行。
                3、br标签不仅对文本可以换行，其它元素也可以用br标签强制换行。
                
            （二十二）水平分隔线
                水平分隔线hr单标签：
                1、在视觉上将文档分隔成几个部分，使得文档结档清晰，层次分明。
                2、hr标签可以在网页上画出一条水平分隔线。
                3、hr标签的所有属性都不赞成使用，不要试图使用属性改变标签的样式。
                4、 应该使用css来修改hr标签的样式。
            （二十三）span标签与字符实体。
                span标签：
                1、没有任何样式，是为了给文本增加额外的结构。
                2、使用css给span元素中的内容添加丰富的样式。
                3、span标签是使用最多的文本标签。
                字符实体：
                html中预留字符必须替换成字符实体，才能被浏览器正常识别。
                常风的字符实体：
                小于号：&lt;
                大于号：&gt;
                空格：&nbsp;
                其它的可以百度搜索，不用死记硬背。
            （二十四）其它的文体标签    
                ins标签：定义下划线；
                del标签：定义删除线；
                sup标签：定议上标文体，高度为当前文本的一半；
                sub标签：定议下标文体，高度为当前文本的一半；
                mark标签：为文本添加黄色背景，突出显示文本。
                以上标签仅作了解，基本不用。css可以很好实行相应的功能。