• web基础学习之(二)HTML介绍

    代码详解

    1. <html>
    2.  
    3. <head>
    4.  
    5.     <title>Documenttitle>
    6.  
    7. head>
    8.  
    9. <body>
    10.  
    11.     测试页面    
    12.  
    13. body>
    14.  
    15. html>

    网页中固定结构是通过HTML标签进行描述的

    每一个页面都有固定的结构,如：整体、头部、标题、主体

    html是整体、head是头标签、标题是title、主体是body　

    标签

    标签的类型

    标签由<、>、/、英文单词组成的，并且把标签中<>包裹起来的英文单词或者字母成为标签名

    常见标签由两部分组成的，我们称为双标签，前面部分成为开始标签，后面的部分叫结束标签、两部分包裹内容

    少数标签由一部分组成、我们称为单表签。自成一体，无法包裹内容。

    标题标签

    代码

    1. <h1>1级标签h1>
    2. <h2>2级标签h2>
    3. <h3>3级标签h3>
    4. <h4>4级标签h4>
    5. <h5>5级标签h5>
    6. <h6>6级标签h6>　
    特点
        1.文字都有加粗
        2.文字都有变大、并且从h1-h6文字逐渐变小
        3.独占一行

    P标签段落标签

    代码

    <p>我是一段文字p>
    特点
        1.段落之间存在间隔
        2.独占一行

    HTML注释

    background标签(背景图片)

    1. <style> 
    2.  body {
    3.    background:url("zz.jpeg")  no-repeat center center;   /*加载背景图*/   /* 背景图不平铺 */
    4.    background-size:cover;  /* 让背景图基于容器大小伸缩 */
    5.    background-attachment:fixed;        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */    //此条属性必须设置否则可能无效/
    6.    background-color:#CCCCCC;   /* 设置背景颜色，背景图加载过程中会显示背景色 */
    7.    background-image: url("/test/img/154e.png");
    8.    background-repeat: no-repeat; /*属性设置是否及如何重复背景图像*/
    9. }
    10. style>

    Audio标签(音频标签)

    controls是显示播放的控件
    src是音频的路径
    autoplay是自动播放
    loop是循环播放 
    提示:
     MP3、Wav、Ogg

    全局属性 

     br换行标签

    代码:

    <br>

    单标签

    让文字强制转换

    hr标签

    代码:

    <hr>
    属性:
Width:宽
size:高
noshade="noshade" 去除水平线阴影
特点:
　　单标签
　　在页面中显示一条水平线

    垂直线

    1.   <style> 
    2.    .vertical-line{
    3.         display: inline-block;
    4.         border-left: 2px solid rgb(7, 189, 71);
    5.         margin: 0 40px;
    6.         height: 25px;
    7.     }
    8.  
    9.  
    10.    style>

    使用

    1.   <span class="vertical-line"/>  
    2.  
    3.  
    4. span>

    自定义网页头部小图标

    首先图标必须是xxx.ico格式的图片，假定你的图标命名为为 favicon.ico 且和html页面在同一个根目录下，实现代码为：

    <link rel="icon" type="image/x-icon" href="favicon.ico"/>

    文本格式化标签　

    场景:需要让文字加粗、下划线、倾斜、删除线等效果

    代码都是双标签:

    1. <b> 加粗  <strong> 加粗
    2. <u>下划线 <ins>下划线
    3. <i>倾斜 <em>倾斜
    4. <s>删除线 <del>删除线　
    突出重要性的强调语境

    图片标签

    <img src="" alt="">
    alt是替换文本
title是提示文本当鼠标悬停时、才显示的文本
width是宽度
height是高度
注意:
 如果只设置width和height中的一个，另一个没设置的会自动等比例缩放
 如果同时设置width和height两个，若设置不当此时图片可能会变形

    单标签　

    img标签需要展示对应的效果、需要借助标签的属性进行设置

     全局属性

     属性注意点:

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

            2.标签上可以同时存在多个属性

            3.属性之间以空格隔开

            4.标签名与属性之间必须以空格隔开

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

    路径的介绍

    绝对路径:

    绝对路径:指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

    例如:

            1.盘符

            2.完整的网络地址

    相对路径

    概念普及
     当前文件:当前的html网页
     目标文件:要找到的图片
    相对路径:从当前文档开始出发目标文件的过程
    相对路径分类:
      同级目录
      下级目录
      上级目录

    1. 同级目录代码:
    2. #方法一
    3. <img src="目标图片">
    4. #方法二
    5. <img src="./目标图片>
    6. 下级目录:目标文件在下级目录中 
    7. 代码:
    8. 上级目录:目录文件在上级目录中
    9. <img src="../目录/图片" alt="">　

    视频标签

    代码:

    <video src="./MP4" controls>video>
    src是视频的路径
controls是显示播放的控件
autoplay是自动播放  配合muted实现静音播放
loop是循环播放

     全局属性

     连接标签

    　代码

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

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

             2.如果需要a标签之后去指定页面，需要a标签的href属性

    列表

    无序列表

    示例：

    1. <ul>
    2.   <li>Coffeeli>
    3.   <li>Teali>
    4.   <li>Milkli>
    5. ul>

    场景:在网页中表示一组无顺序之分的列表，如:新闻列表

    组成标签:

    标签名说明
    ul表示无序列表的整体、用于包裹标签
    li表示无序列表的每一项、用于包含每一行的内容

    显示特点:

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

    注意点:

            Ul标签中只包含li标签

            li标签可以包含任意内容

    小结

            无序列表由几个标签组成？分别是什么？

                    ui标签表示无序列表的整体

                    li标签:表示无序列表的每一项

            无序列表标签的嵌套规范是什么？

                    ui标签只允许嵌套li标签

                    li标签可以嵌套任意内容

    有序列表

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

    标签组成:

    标签名说明
    ol表示有序列表的整体，用于包裹标签
    li表示有序列表的每一项，用于包含每一行的内容

    显示特点:

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

    注意点:

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

            li标签可以包含任意内容

    小结

            有序列表由几个标签组成？分别是什么？

                    ol标签表示无序列表的整体

                    li标签:表示无序列表的每一项

            有序列表标签的嵌套规范是什么？

                    ol标签只允许嵌套li标签

                    li标签可以嵌套任意内容

    自定义列表

    标签组成

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

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

    显示特点

            dd前会默认显示缩进效果

    注意点:

     dl标签页只允许包含dt/dd标签

      dt/dd标签可以包含任何内容’、

    小结

       自定义列表由几个标签组成？分别是什么？

                    dl标签表示自定义列表的整体

                    dt标签:表示自定义列表的主题

                    dd标签:表示对于主题的每一项内容

          自定义列表标签的嵌套规范是什么？

                    dl标签只允许嵌套dt/dd标签

                    dt/dd标签可以嵌套任意内容

    表格标签

    基本标签

    标签名说明
    table表格整体，可用于包裹多个tr
    tr表格每行可用于包裹td
    td

    表格单元格，可用于包裹内容

    注意点:

     嵌套关系:table>tr>td

    相关属性

    属性名属性值效果
    border数字边框宽度
    width数字表格官渡
    height数字表格高度

    注意点:

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

    表格标题和表格单元格标签

    其他标签:

    属性名属性值效果
    caption表格大标题表示表格整体大标题，默认在表格整体顶部居中位置显示
    th表格单元格表示一列表标题通常用于表格第一行，默认内部文字加粗并居中显示

    注意点

    caption标签书写在table标签内部

    th标签书写在tr标签内部

    表格的结构标签

    场景:让表格的内容结构分组，突出不同部分，使语句更加清晰

    标签

    标签名名称
    thead表格头部
    thody表格主题
    tfoot表格底部

    注意点:

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

            表格的结构可以省略

    合并单元格-代码实现

    合并单元格步骤:

    1.明确合并那几个单元格

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

            上下合并一只保留最上，删除其他

            左右合并—只保留最左，删除其他

    3.给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

    属性名属性值效果
    rowspan表格大标题表示表格整体大标题，默认在表格整体顶部居中位置显示
    colspan表格单元格表示一列表标题通常用于表格第一行，默认内部文字加粗并居中显示

    注意点:

    只有一个结构标签中的单元格才可以合并，不能跨结构合并

  • 相关阅读:
    CVE-2021-42287&CVE-2021-42278 域内提权
    HAL库配置通用定时器TIM触发ADC采样，然后DMA搬运到内存空间。
    【知识专栏丨python数分实战】电商数据分析案例
    FPGA零基础学习：IIC协议驱动设计
    内网渗透之Windows认证（二）
    Midjourney绘画参数设置详解
    Towards Interpretable Video Anomaly Detection 论文阅读
    网页数据采集系统-怎样利用爬虫爬网站数据
    Web Component -- 即将爆发的原生的 UI 组件化标准
    Java 中 Volatile 关键字
  • 原文地址：https://blog.csdn.net/weixin_53998054/article/details/126193943