html学习笔记

 P8:摁ctrl+/便可生成注释

    再摁一次ctrl+/便可取消注释

     P9:需要确定开始和结束，则使用双标签。开始标签与结束标签之间包裹内容。

     单标签，自成一体，无法包裹内容。如："<br>换行"和"<hr>加一横线".

     标签的关系：父子关系（嵌套关系）：head里面嵌套title。

     兄弟关系（并列关系）：head和body。

     P10:（1）：标题标签

    h系列：h1~h6（最多到h6）,重要程度依次递减。

    <h1>一级标题</h1>

    <h2>二级标题</h2>

    <h3>三级标题</h3>

    <h4>四级标题</h4>

    <h5>五级标题</h5>

    <h6>六级标题</h6>

    *注意：选中一个数字之后，摁“CTRL+D”可以实现同时选中下一个该数字，对于文字也同样适用 

    特点：1>文字都有加粗

    2>字体由大到小（从h1->h6）

    3>独占一行

    （2）段落标签（p标签）：用于分段显示

    如：

    <p>我是一段文字</p>

    特点：独占一行

    段落间存在间隙

    P11:（3）换行标签（br标签）：单标签

    （4）水平线标签（hr标签）：单标签

    P12:文本格式化标签

    使用场景：让文字有加粗、加下划线、倾斜、删除线等效果

    一>加粗标签：

    <b>加粗</b>

    <strong>加粗</strong>

    二>下划线标签：

    <u>下划线</u>

    <ins>下划线</ins>

    三>倾斜标签：

    <i>倾斜</i>

    <em>倾斜</em>

    四>删除线标签：

    <s>删除线</s>

    <del>删除线</del>

一>媒体标签

    (1):图片标签（img标签）

        特点:单标签

        img标签需要展示对应的效果，需要借组标签的属性进行设置！

        标签属性（如：src=""）

        属性名（如：src）

        属性值为""内的内容

        特点：

        1.标签的属性写在开始标签的内部

        2.标签上可以同时存在多个属性，但是不同的属性中间需要用空格隔开

        3.标签名src与属性之间必须用空格隔开

        4.属性之间没有顺序之分

       

        属性名：alt

        属性值：替换文本

        *当图片加载失败时，才显示alt的文本

        title属性

        属性名：title

        属性值：提示文字

        *当鼠标悬停在图片上时，才会显示的文字

        注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

        width和height属性

        属性值：宽度和高度(数字)

        注意点：

        *如果只设置width或height中的一个，另一个没设置的会等比例缩放（图片不会变形）

        *如果同时设置了width和height两个，若设置不当此时图片可能会变形

    （2）：路径

    （3）：音频标签(在页面中加入音频)

        特点：双标签

        标签名：audio

        常见属性：

        src属性：音频的路径

        controls属性：显示播放的控件

        autoplay属性：自动播放（部分浏览器不支持）

        loop属性：循环播放

        注意点：音频标签目前支持三种格式：MP3、Wav、Ogg

    （4）：视频标签

        标签名：video

        特点：双标签

        src属性：视频的路径

        controls属性：显示播放的控件

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

        loop属性：循环播放

       

        二>相对路径（常用）

        概念普及：

        *当前文件：当前的html网页

        *目标文件：要找到的图片

        相对路径：从当前文件开始出发找目标文件的过程

        相对路径的分类：

        *同级目录

        *下级目录

        *上级目录

        （1）：同级目录：当前文件和目标文件在同一个目录中

        代码步骤：直接写目标文件的名字即可

        *方法一：scr属性中的属性值为“目标图片.gif”

        *方法二：scr属性中的属性值为“./目标图片.gif”

        注意：“./”的意思是当前

        （2）：下级目录：目标文件在下级目录中

        代码步骤：

        1.先知道在哪个文件夹里面-> 文件夹名字

        2.进入这个文件夹-> /

        3.直接写目标文件名字

        scr属性中的属性值为“文件夹名字/目标图片.gif”

        （3）：上级目录：目标文件在上级目录中

        代码步骤：

        1.先出当前文件夹，到上一级目录-> ../

        2.直接写目标文件

        三>链接标签

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

        称呼：a标签，超链接，锚链接

        标签名：a

        特点：

        *双标签，内部可以包裹内容

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

        href属性:用来跳转地址的

        如：

        <a href="超链接的网址">超链接的名字</a>

        <a href="./某个地址（此处用法与src属性的用法相同）">超链接名字</a>

        当开发网站初期，我们还不知道跳转地址的时候，href的值书写#（空链接）

        如：

        <a href="#">空链接，不知道跳到哪里去</a>

       

        <a href="https://www.youku.com/">优酷视频</a>

        target属性：

        属性值：目标网页的打开形式

        取值：-self  效果：默认值，在当前窗口中跳转（覆盖原网页）

        取值：-blank 效果：在新窗口中跳转（保留原网页）

      如：  <a href="https://www.youku.com/" target="-blank">优酷视频</a>

列表：

无序列表：在网页中表示一组无顺序之分的列表，如：新闻列表。

标签组成：

标签名：ul

说明：表示无序列表的整体，用于包裹li标签

标签名：li

说明：表示无序列表中的每一项，用于包含每一项的内容

显示特点：

*列表的每一项前默认显示圆点标识

注意：

*  ul标签中只允许包含li标签

*  li标签可以包含任意内容

代码示例：

<h1>水果列表</h1>

    <ul>

        <li>榴莲</li>

        <li>香蕉</li>

        <li>苹果</li>

        <li>哈密瓜</li>

        <li>火龙果</li>

    </ul>

有序列表：在网页中表示一组有顺序之分的列表，如：排行榜

标签组成：

标签名：ol

说明：表示有序列表的整体，用于包裹li标签

标签名：li

说明：表示有序列表中的每一项，用于包含每一行的内容

显示特点：

*列表的每一项前默认显示序号标识

注意：

*  ol标签中只允许包含li标签

*  li标签可以包含任意内容

代码示例：

 <h1>成绩排行榜</h1>

    <ol>

        <li>张三：100</li>

        <li>李四：80</li>

    </ol>

自定义列表：在网页的底部导航中通常会使用自定义列表实现

标签组成：

标签名：dl

说明：表示自定义列表的整体，用于包裹dt/dd标签

标签名：dt

说明：表示自定义列表中的主题

标签名：dd

表示自定义列表的针对主题的每一项内容

显示特点：

dd前会默认缩进效果

注意点：

*  dl标签中只允许包含dt/dd标签

*  dt/dd标签可以包含任意内容

代码示例：

<dl>

        <dt>

            帮助中心

        </dt>

        <dd>账户管理</dd>

        <dd>购物指南</dd>

        <dd>订单操作</dd>

    </dl>

表格标签：

在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

基本标签：

标签名：table

说明：表格整体，可以用于包裹多个tr

标签名：tr

说明：表格每行，可以用于包裹td

标签名：td

说明：表格单元格，可以用于包裹内容

注意点：

*  标签的嵌套关系：table  >  tr  >  td

表格相关属性：设置表格基本展示效果

常见相关属性：

属性名：border

属性值：数字

效果：边框宽度

属性名：width

属性值：数字

效果：表格宽度

属性名：height

属性值：数字

效果：表格高度

注意点：

*  实际开发时针对样式效果推荐用css设置

代码示例：

 <table border="1" width="600" height="400">

        <tr>

            <td>姓名</td>

            <td>年龄</td>

            <td>性别</td>

        </tr>

        <tr>

            <td>张三</td>

            <td>20</td>

            <td>男</td>

        </tr>

        <tr>

            <td>李四</td>

            <td>18</td>

            <td>女</td>

        </tr>

    </table>

表格标题和表头单元格标签：在表格中表示整体大标题和一列小标题

其他标签：
标签名：caption

名称：表格大标题

说明：表示表格整体大标题，默认在表格整体顶部居中位置显示

标签名：th

名称：表头单元格

说明：表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点：

*  caption标签书写在table标签内部

*  th标签书写在tr标签内部（用于替换td标签）

代码示例：

 <table border="1">

        <caption><strong>学生成绩单</strong></caption>

        <tr>

            <th>姓名</th>

            <th>成绩</th>

            <th>评语</th>

        </tr>

        <tr>

            <td>张三</td>

            <td>100分</td>

            <td>优秀</td>

        </tr>

        <tr>

            <td>李四</td>

            <td>80分</td>

            <td>良好</td>

        </tr>

    </table>

表格的结构标签（了解）

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

结构标签：
标签名：thead       名称：表格头部

标签名：tbody       名称：表格主体

标签名：tfoot         名称：表格底部

注意点：

*  表格结构标签内部用于包裹tr标签

*  表格的结构标签可以省略

代码示例：

<table border="1" width="400" height="200">

        <caption><strong>学生成绩单</strong></caption>

        <thead>

        <tr>

            <th>姓名</th>

            <th>成绩</th>

            <th>评语</th>

        </tr>

        </thead>

        <tbody>

        <tr>

            <td>张三</td>

            <td>100分</td>

            <td>优秀</td>

        </tr>

        <tr>

            <td>李四</td>

            <td>80分</td>

            <td>良好</td>

        </tr>

        </tbody>

        <tfoot>

            <td>*</td>

            <td>*</td>

            <td>棒！</td>

        </tfoot>

    </table>

合并单元格

步骤：1.明确合并哪几个单元格

2.通过左上原则，确定保留谁，删除谁

*  上下合并  —> 只保留最上的，删除其他

*  左右合并  —> 只保留最左边的，删除其他

3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

属性名：rowspan 

属性值：合并单元格的个数

说明：跨行合并，将多行的单元格垂直合并

属性名：colspan 

属性值：合并单元格的个数

说明：跨列合并，将多列的单元格水平合并

注意点：

只有同一个结构标签中的单元格才能合并，不能跨结构标签合并 （不能跨：thead、tbody、tfoot）

代码示例：

<table border="1" width="400" height="200">

        <caption><strong>学生成绩单</strong></caption>

        <thead>

        <tr>

            <th>姓名</th>

            <th>成绩</th>

            <th>评语</th>

        </tr>

        </thead>

        <tbody>

        <tr>

            <td>张三</td>

            <td rowspan="2">100分</td>

            <td rowspan="2">优秀</td>

        </tr>

        <tr>

            <td>李四</td>

        </tr>

        </tbody>

        <tfoot>

            <td colspan="3">成绩十分优异！</td>

        </tfoot>

    </table>

摁Tab可以向后缩进

摁Shift+Tab可以向前缩进