• 常用标签


    • 图形标签: <img> 

    '''
    src: 要显示图片的路径.
    
    alt: 图片没有加载成功时的提示.
    
    title: 鼠标悬浮时的提示信息.
    
     图片的宽
    
    height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
    
    '''

     案例:

    <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2846773786,1909168706&fm=58"
         alt="红烧肉" title="红烧肉" width="100px" height="100px">

    红烧肉

    • 超链接标签(锚标签): <a> </a>

    '''
    
    <a href="" target="_blank" >click</a>
    
    href属性指定目标网页地址。该地址可以有几种类型:
    
        绝对 URL - 指向另一个站点(比如 href="http://www.jd.com)
        相对 URL - 指当前站点中确切的路径(href="index.htm")
        锚 URL - 指向页面中的锚(href="#top")
    
    '''

    案例及效果:

    <a href="https://www.baidu.com/" target="_blank">点击</a>

    点击

    • 列表标签

    '''
    <ul>: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
    
    <ol>: 有序列表
             <li>:列表中的每一项.
    
    <dl>  定义列表
    
             <dt> 列表标题
             <dd> 列表项
    
    '''

    案例及效果:

    <!--unorder list 无序-->
    
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    • 111
    • 222
    • 333
    <!--order list 有序-->
    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>
    1. 111
    2. 222
    3. 333
    <dl>
        <!--dd-->
        <dt>河北省</dt>
        <dd>保定市</dd>
        <dd>石家庄</dd>
        <dd>邯郸</dd>
    </dl>
    河北省
    保定市
    石家庄
    邯郸
    • 表格标签: <table>

    表格概念
    表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
    表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
    表格的基本结构:

    <table>
             <tr>
                    <td>标题</td>
                    <td>标题</td>
             </tr>
             
             <tr>
                    <td>内容</td>
                    <td>内容</td>
             </tr>
    </table>

    属性:

    '''
    
    <tr>: table row
    
    <th>: table head cell
    
    <td>: table data cell
    
    
    属性:
    
        border: 表格边框.
    
        cellpadding: 内边距
    
        cellspacing: 外边距.
    
         像素 百分比.(最好通过css来设置长宽)
    
        rowspan:  单元格竖跨多少行
    
        colspan:  单元格横跨多少列(即合并单元格)
    
    '''

    案例及效果:

    <table border="1px" cellpadding="10px" cellspacing="2px">
    
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
         <tr>
            <td colspan="2">111</td>
            <td>111</td>
            <td>111</td>
        </tr>
         <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td rowspan="2">111</td>
        </tr>
    
         <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
    
        </tr>
    
    </table>
    111 111 111 111
    111 111 111
    111 111 111 111
    111 111 111
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2846773786,1909168706&fm=58"
         alt="红烧肉" title="红烧肉" width="100px" height="100px">
    
    <h3 style="background-color: aqua;font-weight: 100"></h3>
    
    <a href="https://www.baidu.com/" target="_blank">点击</a>
    <!--<a href="基本标签.html" target="_blank">点击2</a>-->
    
    
    <!--<a href="基本标签.html" target="_blank">-->
        <!--<img src="http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg" alt="egon" title="egon" width="100px" height="100px">-->
    <!--</a>-->
    
    <!--unorder list 无序-->
    
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    
    
    
    <!--order list 有序-->
    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>
    
    
    <!--定义 define list-->
    
    <dl>
        <!--dd-->
        <dt>河北省</dt>
        <dd>保定市</dd>
        <dd>石家庄</dd>
        <dd>邯郸</dd>
    </dl>
    
    <table border="1px" cellpadding="10px" cellspacing="2px">
    
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
         <tr>
            <td colspan="2">111</td>
            <td>111</td>
            <td>111</td>
        </tr>
         <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td rowspan="2">111</td>
        </tr>
    
         <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
    
        </tr>
    
    </table>
    
    </body>
    </html>
    练习代码
  • 相关阅读:
    .Net Core 静态文件跨域访问
    SQL Server查看锁表与解锁表
    C# 获取Bilibili网站中的视频信息
    C# 生成条形码、二维码
    HttpWebRequest 远程服务器返回错误: (403) 已禁止
    C# NPOI导出Excel以及动态设置列宽
    【c++设计模式】观察者模式
    【c++设计模式】状态模式
    【c++设计模式】职责链模式
    【c++设计模式】命令模式
  • 原文地址:https://www.cnblogs.com/litzhiai/p/8267493.html
Copyright © 2020-2023  润新知