学习WEB的第二天

学习WEB的第二天

2020年4月9日，打卡！

今天是学习前端的第二天，HTML已经学完了，自我感觉还行，大部分都是一些标签的使用，在课上讲的知识标签中的一小部分，其他的可以在W3School离线文档里面找到，不说要记住全部的标签，但是至少要知道怎么去查找这些标签，至少每个标签过两遍啥的吧，是不是，加深影响。
也没啥好推荐的，就给大家推荐一个vscode的插件吧，Dracula Official，这是一个vscode主题的插件，其中有一个颜色主题我很喜欢，紫色的外面，大气上档次。

今天学的主要就是标签，语义化标签、meta标签、列表、超链接、图片。音视频、还有内联框架等。下面就让我说说我今天学习的内容吧！

一、meta标签

meta主要用于设置网页的一些元数据，元数据不是给用户看的。
    charset：指定网页的字符集
    name：指定的数据名称
    content：指定的数据内容
    http-equiv：将一个网页重定向到另一个网页

<meta name="keywords" content="HTML5、CSS、前端">
<meta name="description" content="这是一个非常不错的网页！">
<meta name="http-equiv" content="3,url=https://www.baidu.com">

二、语义化标签

在网页中HTML专门来负责网页的结构，所以在使用HTML标签时，应该关注的是标签的语义，而不是它的样式。

(1)标题标签
    总共有六个标题标签：h1~h6
        ①从h1~h6重要性递减，h1最重要，h6最不重要。
        ②h1在网页中的重要性仅次于title，一般情况下一个页面只有一个h1。
        ③一般情况下，标题标签只会使用h1~h3，h4~h6很少使用。
        ④标题标签都是块元素。

        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>


(2)hgroup
    主要是标题分组，可以将一组相关的标题同时放入到hgroup标签中。
    
        <hgroup>
            <h1>回乡偶书二首</h1>
            <h2>其一</h2>
        </hgroup>


(3)em标签
    表示一个语音语气的加重。
        
        <p>今天天气<em>真</em>不错！</p>



(4)strong标签
    表示强调，重要的内容。

    <p>你今天必须<strong>完成作业</strong>！</p>


(5)blockquote标签
    表示长引

    鲁迅说：
    <blockquote>
        这句话我从来没说过！
    </blockquote>


(6)q标签
    表示一个短引

    子曰：<q>学而时习之，不亦说乎！</q>


(7)br标签
    表示换行


(8)布局标签
    header：表示网页的头部
    main：表示网页的主体部分
    footer：表示网页的底部
    nav：表示网页中的导航
    aside：和主体相关的内容
    acticle：表示一个独立的文章

    section：表示一个独立的区块，上面的标签都不能表示时，可以使用section。

    div：没有语义，就用来表示一个区块，目前主要用的是div
    span：没有语义，一般在网页中选中文字


还有很多的标签，这里就不一一说了，在W3School离线文档上面搜索就行了。

三、块元素和行内元素

(1)块元素：在网页中独占一行的元素称为块元素(block element)
    在网页中一般通过块元素来对网页进行布局
(2)行内元素:在网页中不会独占一行的元素称为块元素(inline

element)
行内元素主要用来包裹文字

①一般情况下就在块元素中放行内元素，不会在行内元素中放块元素。
②块元素基本上什么都能放。
③p元素不能放任何的块元素。

浏览器在解析网页时，会自动对网页中不符合规定的内容进行修正。
    比如：
        -标签写在了根标签的外面
        -p元素中嵌套了块元素
        -根元素中除了head和body以外的子元素
        ...

四、列表

在HTML中，有三种列表
    有序列表
    无序列表
    定义列表

(1)有序列表
    使用ol来创建有序列表
    使用li表示列表项
        <ol>
            <li>结构</li>
            <li>表现</li>
            <li>行为</li>
        </ol>

(2)无序列表
    使用ul来创建无序列表
    使用李表示列表项
        <ul>
            <li>结构</li>
            <li>表现</li>
            <li>行为</li>
        </ul>

(3)定义列表
    使用dl创建一个定义列表
    使用dt表示定义的内容
    使用dd来对定义的内容进行解释说明
        <dl>
            <dt>武松</dt>
            <dd>智斗猛虎</dd>
            <dd>战斗力：99+</dd>
        </dl>

注：列表之间是可以相互嵌套的
    <ul>
        <li>
            a-1
            a-2
            <ul>
                <li>
                    aa-1
                    aa-2
                    <ul>
                        <li>aaa-1</li>
                        <li>aaa-2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

五、超链接

(1)超链接可以让我们从一个页面跳转到另一个页面或者当前页面的其他位置。

(2)使用a标签来定义超链接
    属性：
        href：指定跳转的目标路径
            值可以是一个外部的网站地址，也可以是一内部的网页地址。
        targe:指定超链接打开的位置
            可选值：
                _self:默认值，在当亲页面打开超链接
                _blank：在一个新的页面打开超链接

(3)超链接是一个行内元素，在a标签中可以嵌套除它自身之外的任何元素。

(4)在超链接当中，可以使用相对路径，也可以使用绝对路径。
    ①相对路径
        是从当前路径开始的路径
            比如：./img/day01/01.jpg
    ②绝对路径
        是从盘符开始的路径或者具体的网址
            比如：C:\windows\system32\cmd.exe或者https://www.baidu.com
    ③使用相对路径一般都是以./或者../开头
        ./可以省略不写
    ./表示的是当前文件所在的目录
    ../表示当前目录的上一级目录

(5)回到顶部
    -将超链接的href属性设置为#，这样点击链接不会发生跳转，但是会回到页面的顶部。
    -也可以跳转到页面指定的位置，只需要将href属性设置为#目标元素的id属性值。
        id属性值：
            -每一个标签都可以添加一个id属性值
            -id属性值是一个唯一的标识，同一个页面中不能出现相同的id属性。

(6)在开发中，可以将#作为超链接的路径占位符使用。

(7)可以使用javascript:;来作为href的属性值，点击这个超链接什么都不会发生。

    <a href="#bottom">去到底部</a>
    <br>
    <a href="https://www.baidu.com">超链接</a>
    <br>
    <a href="https://www.baidu123.com">超链接</a>
    <br>
    <a href="05-列表.html">05-列表</a>
    <br>

    <a href="javascript:;">超链接</a>
    <br>
    <a href="#" id="bottom">回到顶部</a>

六、图片标签

图片标签用于向当前页面中引入一个外部图片
    -使用img标签来引入外部图片，img标签是一个自结束标签
    -img这种元素属于替换元素，(基于块元素和行内元素之间，具有两种元素的特点)
        属性：
            src：指定的是一个外部的图片
            alt：图片的描述
                -这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
                -搜索引擎会根据alt中的内容来识别图片
            width：指定图片的宽度(单位是像素)
            height：指定图片的高度(单位是像素)
                宽度和高度如果只修改了一个，另一个则会等比例缩放
        注意：
            -在pc端不建议修改图片的大小。
            -但是在移动端，经常需要对图片缩放。

图片的格式：
    JPEG(jpg)
        -支持度颜色比较丰富，不支持透明效果，不支持动图
        -一般用来显示照片
    gif
        -支持的颜色较少，支持简单的透明，支持动图
        -表示颜色单一的照片
    png
        -支持的颜色丰富，支持复杂透明，不支持动图
        -颜色丰富、复杂透明的图片(专为网页而生的)
    webp
        -这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
        -它具备了其他图片格式的所有优点，而且文件还特别小
        -但是它的兼容性不好

照片的选择：
    效果一样，用小的
    效果不一样，用效果好的

七、内联框架

用于向当前页面中引入一个其他页面
    src：指定要引入的网页的路径
    frameborder：指定内联框架的边框

<iframe src="https://www.qq.com" width="800px" height="600px" frameborder="0"></iframe>

八、音视频

(1)audio标签是用来向网页中引入一个外部的音频文件的
    音视频文件引入时，默认情况下是不允许用户自己控制播放暂停的
        属性：
            contrals：是否允许用户控制播放
            autopaly：音频文件是否自动播放
                如果设置了autopaly则音乐再打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放
            loop：音乐是否重复播放
        
        <audio src="source/audio.mp3" controls></audio>

    除了通过src来指定外部文件的路径以外，还可以通过source来指定一个文件的路径
        
        <audio controls>
            <!-- 对不起，您的浏览器不支持播放音频，请升级浏览器！ -->
            <source src="source/audio.mp3">
            <source src="source/audio.ogg">
            <embed src="source/audio.mp3" type="audio/mp3" width="300px" height="100px">
        </audio>

    注：embed是设置IE8及以下的浏览器的。


(2)使用video标签来向页面引入一个视频
    使用方法基本上和audio是一样的
        
        <video controls>
            <source src="source/flower.webm">
            <source src="source/flower.mp4">
            <embed src="source/flower.mp4" type="video/mp4">
        </video>

    引入外部的视频还可以上传到腾讯视频、爱奇艺等播放器上，然后引入。
        
        <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=l0033snfmsp" allowFullScreen="true" width="500px" height="300px"></iframe>

以上就是我今天的学习内容，明天继续加油！

九、最后

若是本文有错误的地方或者有需要修改的地方，现在这里谢谢各位朋友，谢谢你们会指出我的瑕疵，谢谢你们的贡献，也希望能和朋友一起交流学习，谢谢！