zoukankan      html  css  js  c++  java
  • 网页开发学习笔记二: HTML常用标签

    文本格式化标签

    • 文本加粗标签: 工作中尽量使用 strong

        <strong></strong>

        <br></br>

    • 文本倾斜标签: 工作中使用 em

        <em></em>

        <i></i>

    • 删除线标签: 工作中尽量使用 del

        <del></del>

        <s></s>

    • 下划线标签: 工作中尽量使用 ins

        <ins></ins>

        <u></u>

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                
            </title>
        </head>
    
        <body>
            <!-- 文本加粗, 带有强调 -->
            <strong>瀑布鱼缸</strong>
            <!-- 文本加粗 -->
            <b>瀑布鱼缸</b>
    
            <br>
    
            <!-- 文本倾斜, 带有强调 -->
            <em>水幕墙</em>
            <!-- 文本倾斜 -->
            <i>水幕墙</i>
    
            <br>
    
            <!-- 删除线标签 -->
            <del>6688.00</del>
            <!-- 删除线标签 -->
            <s>6688.00</s>
    
            <!-- 下划线标签 -->
            <ins>AAAAA</ins>
            <!-- 下划线标签 -->
            <u>AAAAA</u>
    
            <!-- 上标 -->
            2<sup>3</sup>
    
            2<sub>3</sub>
    
        </body>
    </html>

    图片标签

    • 图片标签: <img src="1.jpg" alt="群" title="提示文字" width="300">
      • src      :    图片来源(必写属性)
      • alt       :   替换文本(图片不显示的时候显示的文字)
      • title     :   图片的提示文本
      • width   :   图片的宽度
      • height  :  图片的高度

      注意: 图片没有定义宽高的时候, 图片按照百分之百比例显示, 如果只更改图片的宽度或者高度, 图片等比例缩放

    • 路径
      • 文件和图片(html 文档)在同一级目录(文件夹), 直接写图片(html 文档)名称即可
        <img src="1.jpg">

      • 图片(html 文档)在文件下一级目录(文件夹), 文件夹名称 + / + 图片(html 文档)名称
        <img src="图片资源/10.jpg">

      • 图片(html 文档)在文件上一级目录(文件夹), .. + / + 图片(html 文档)名称
        <img src="../1.jpg">

      总结: 找到下一级文件夹的图片(文件)用 /
         找到上一级文件夹用 ../

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
    
        <body>
            <!-- src: 图片路径    alt:替换文本  title: 提示文本 -->
            <img src="1.jpg" alt="群" title="我的女神" width="300">
    
            <br>
    
            <img src="图片资源/10.jpg" width="300">
    
            <br>
    
            <img src="../1.jpg" width="300">
    
        </body>
    </html>

    超链接标签

    • 超链接标签: <a href="文本格式化标签.html" title="格式化标签" target="_blank">跳转到文本格式化标签</a>
      • href     :   去往的路径(跳转页面) 必写属性
      • title     :   提示文本(鼠标放到链接上显示的文字)
      • target  :   控制是否打开新的页面
        • "_self"      :   默认值   在自身页面打开(关闭自身页面, 打开链接页面)
        • "_blank"   :   打开新页面 自身页面不关闭
    • 锚链接
      • 先定义一个锚点   <p id="锚点"></p>
      • 超连接到锚点      <a href="#锚点"></a>

     

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <a href="文本格式化标签.html" title="格式化标签" target="_blank">跳转到文本格式化标签</a>
        <p id="sd">AAAAAAAAAA控制是否打开新的页面控制是否打开新的页面控制是否打开新的页面AAAAAAAAA</p>
        <p>控制是否打开新的页面控制是否打开新的页面控制是否打开新的页面</p>
        <p>控制是否打开新的页面控制是否打开新的页面控制是否打开新的页面</p>
        <p>控制是否打开新的页面控制是否打开新的页面控制是否打开新的页面</p>
        <a href="#sd">回到顶部</a>
    </body>
    </html>

     列表标签

    • 无序列表
    <ul type="square">
        <li></li>    
       <li></li>
        <li></li>
    </ul>

       type="square"    小方块

       type="disc"      实心小圆圈: 默认

       type="circle"    空心小圆圈

    • 有序列表
    <ol type="1" start="1">
        <li>AAAAA</li>
        <li>BBBBB</li>
        <li>CCCCC</li>
    </ol>

        type 的值可以为 1, a, A, i, I

       start="3" 决定了开始的位置

    • 自定列表
    <dl>
        <dt></dt>    小标题
        <dd></dd>    解释标题
    </dl>

     meta标签

    <!DOCTYPE html>
    <html>
    <head>
        <!-- 编码 -->
        <meta charset="utf-8">
        <!-- 关键字: 给 SEO(搜索引擎)看 -->
        <meta name="keyword" content="Java, iOS, Android">
    
        <!-- 网页描述: 给 SEO(搜索引擎)看 -->
        <meta name="description" content="XXXXXXXXXXXXXXX">
    
        <!-- 网页重定向: 3秒之后跳转到百度页面 -->
        <meta http-equiv="refresh" content="3; http://www.baidu.com">
    
        <br>
    
        <!-- 图标 -->
        <link rel="stylesheet" href="1.jpg">
    
        <br>
    
        <title>Document</title>
    
    </head>
    <body>
    PPPPPP
    </body>
    </html>
  • 相关阅读:
    你说什么都不队 实验七 团队作业3:团队项目需求分析与原型设计
    你说什么都不队 实验六团队作业2:小型医疗机构诊疗管理系统
    你说什么都不队 实验五 团队作业1:软件研发团队组建与软件案例分析
    Java并发编程中的设计模式解析(二)一个单例的七种写法
    Java并发编程之ThreadGroup
    基于JVM原理、JMM模型和CPU缓存模型深入理解Java并发编程
    Java并发编程之线程安全、线程通信
    Java并发编程中的设计模式解析(一)
    Java并发编程之线程生命周期、守护线程、优先级、关闭和join、sleep、yield、interrupt
    Java并发编程之线程创建和启动(Thread、Runnable、Callable和Future)
  • 原文地址:https://www.cnblogs.com/fanxiaocong/p/6442972.html
Copyright © 2011-2022 走看看