从HTML开始接触前端Day01

目录

1、基础认知

2、HTML标签学习

 2.1排版标签

  2.1.1 标题标签

  2.1.2 段落标签

  2.1.3 换行标签

  2.1.4 水平线标签

 2.2文本格式化标签

 2.3媒体标签

  2.3.1图片标签

  2.3.2路径

  2.3.3音频标签

  2.3.4视频标签

 2.4链接标签

  2.4.1链接标签的介绍

  2.4.2链接标签属性

---

1、基础认知

        (1)网页有哪些部分组成的？
                文字、图片、音频、视频、超链接
        (2)网页背后的本质是前端程序员写的代码
        (3)前端的代码用过浏览器转化（解析和渲染）成为用户可以看到的

2、HTML标签学习

 2.1排版标签

  2.1.1 标题标签

        h系列标签
        <h1>1级标签</h1>
        .......
        <h6>6级标签</h6>
        特点：
                (1)文字都有加粗
                (2)文字都有变大，文字从h1到h6文字逐渐减小
                (3)独占一行

  2.1.2 段落标签

        在新闻和文章的页面中，用于分段的显示
        <p>我是一段文字<p>
        特点：
                (1)段落之间存在间隔
                (2)独占一行

  2.1.3 换行标签

        让文字强制换行显示
        <br>
        特点：
                (1)单标签
                (2)让文字强制换行

  2.1.4 水平线标签

        分割不同主题内容的水平线
        <hr>
        主题的分割切换
        特点：
                （1）单标签
                （2）在页面中显示一条水平线

 2.2文本格式化标签

        需要让文字加粗、下划线、倾斜、删除等效果(后者强调更加突出)
        <b> 加粗  ==><strong>
        <u> 下划线==><ins>
        <i> 倾斜    ==><em>
        <s> 删除线==><del>

 2.3媒体标签

  2.3.1图片标签

        在网页中显示图片
        <img src="" alt="">

        src=""标签属性 src标签是属性名，""内属性值：目标图片的路径
        注：
                (1)单标签
                (2)img标签需要展示对应的效果，需要借助标签的属性进行设置！

        alt=""标签属性 alt标签是属性名，""内属性值：替换文本
        注：
                只有图片加载失败才会显示alt的文本
                当图片加载成功时不会显示alt的文本

        title=""标签属性 title标签是属性名，""内是属性值：提示文本
        注：
                等鼠标悬停时，才显示文本

        width和height属性
        属性值：宽度和高度（数字）
        注：
                如果只设置其中一个，另一个没设置的会自动等比例缩放（此时图片不变形）
                如果同时设置了高度与宽度，若设置不当此时图片可能会变形

  2.3.2路径

        页面需要加载图片，需要先找见对应的图片
        路径分为：
                绝对路径：指相对目录下的绝对位置，可直接到达目标的位置，通常从盘符开始的路径
                相对路径：从当前文件开始出发找目标文件的过程
        相对路径的分类：
                同级目录：当前文件和目标文件在同一目录中<img src="./目标文件.png">或<img src="目标图片.png">
                下级目录：目标文件在下级目录中<img src="images/目标文件.gif">
                上级目录：目标文件在上级目录中<img src="../images/目标文件.gif">

  2.3.3音频标签

        在页面中插入音频
        <audio src="./music.mp3" controls></audio>
        常见的属性：
                src：音频的路径
                controls：显示播放的控件
                autoplay：自动播放
                loop：循环播放

  2.3.4视频标签

        在页面中插入视频

        <video src=“.video,mp4” controls></video>\

        常见的属性：

                src：视频的路径

                controls：显示播放的控件

                autoplay：自动播放（谷歌浏览器中需要配合muted实现静音播放）

                loop：循环播放

        注：

                视频标签目前支持三种格式：MP4、WebM、Ogg

 2.4链接标签

  2.4.1链接标签的介绍

        点击之后，从一个页面跳转到另一个页面

        <a href="./目标网页.html">超链接</a>

        特点：

                (1)双标签，内部可以包裹内容

                (2)如果需要a标签点击之后去指定页面，需要设置a标签的href属性

  2.4.2链接标签属性

        target：显示连接的窗口或框架；<a href="https://www.csdn.net/" target="_blank" >CSDN - 专业开发者社区</a>

                _blank：在新窗口中打开链接，保留原网页；

                _self：在当前窗口打开链接，覆盖原网页；

                _parent：在父窗口中打开链接；

                _top：在定级窗口中打开链接；

        framename：窗口名称；

        name：超链接，创建文档内的书签；

        title：设置超链接的文字说明（鼠标悬停时显示）。