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>
  • 相关阅读:
    流式布局思想 js函数的几种简写方式 面向对象 js vue引入bootstrap和jQuery环境
    04--CBV源码分析 Django的settings源码分析 模板层
    C#使用委托和事件来重写串口的接收数据方法DataReceived方法完成数据的接收处理
    自定义控件的封装、常用的鼠标事件的重载、定时器的使用、event事件以及事件过滤器、文件操作以及文本流和数据流的使用
    QT的优点、项目文件目录、main函数、QpushButton、对象树、Qt中坐标系、Qt中信号和槽、自定义信号和槽、信号和槽的拓展、Qt4版本中的信号和槽的缺点、Lambda表达式
    Stylet框架显示自定义界面的步骤
    MahApps.Metro使用
    async和await的使用
    第一个WPF程序(串口调试)
    结构、类、属性:以及面向对象的各种特性继承、封装、多态
  • 原文地址:https://www.cnblogs.com/fanxiaocong/p/6442972.html
Copyright © 2011-2022 走看看