zoukankan      html  css  js  c++  java
  • HTML基础——HTML基本要素(二)

    1、水平线标记——hr

      水平线用于段落与段落之间的分隔,可使得文档结构清晰明白,使文字编排更为整齐。水平线自身包括很多属性:宽度、高度、颜色、排列对齐等。

      语法:<hr>  (添加一条默认的水平线)

    <html>
    <head>
    <title>添加水平线</title>
    </head>
    <body>
    
    <center><h4>七步诗(曹植)</h4></center>
    <hr>
    <center>煮豆持作羹, 漉菽以为汁。</center><br/>
    <center>萁在釜下燃, 豆在釜中泣。</center><br/>
    <center>本自同根生, 相煎何太急。</center>
    
    </body>
    </html>
    • 水平线宽度与高度——width、height

      默认情况下,插入的水平线是100%宽度,1像素高度。

      语法:<hr width=水平线宽度 height=水平线高度>

    水平线宽度可以是确定的像素值,也可以是窗口的百分比;而水平线高度值则只能是像素数。如果在设置水平线时只设置一个值,那另一个则为默认值。

    <html>
    <head>
    <title>添加水平线</title>
    </head>
    <body>
    
    <center>
    <font face="隶书" size="+3">七步诗</font>
    <hr width="130">
    <font size="+1">曹植</font>
    </center>
    
    <hr width="60%" height = "4">
    <center>煮豆持作羹, 漉菽以为汁。</center><br/>
    <center>萁在釜下燃, 豆在釜中泣。</center><br/>
    <center>本自同根生, 相煎何太急。</center>
    <hr width="80%" height = "6">
    
    </body>
    </html>
    • 水平线颜色——color

      语法:<hr color="颜色代码">

    <html>
    <head>
    <title>添加水平线</title>
    </head>
    <body>
    
    <center>
    <font face="隶书" size="+3">七步诗</font>
    <hr width="130" color="#FF0066">
    <font size="+1">曹植</font>
    </center>
    
    <hr width="60%" height = "4" color="#33FFFF">
    <center>煮豆持作羹, 漉菽以为汁。</center><br/>
    <center>萁在釜下燃, 豆在釜中泣。</center><br/>
    <center>本自同根生, 相煎何太急。</center>
    <hr width="80%" height = "6">
    
    </body>
    </html>
    • 去掉水平线阴影——noshade

      默认情况下,水平线是空心带阴影的立体效果,通过设置noshade参数可以将水平线的阴影去掉。

      语法:<hr noshade>

    <html>
    <head>
    <title>添加水平线</title>
    </head>
    <body>
    
    <center>
    <font face="隶书" size="+3">七步诗</font>
    <hr width="130" color="#FF0066">
    <font size="+1">曹植</font>
    </center>
    
    <hr width="60%" height = "4" color="#33FFFF">
    <center>煮豆持作羹, 漉菽以为汁。</center><br/>
    <center>萁在釜下燃, 豆在釜中泣。</center><br/>
    <center>本自同根生, 相煎何太急。</center>
    <hr size="+5" noshade="noshade">
    
    </body>
    </html>
    • 水平线对齐方式——align

      默认居中对齐。

      语法:<hr align="对齐方式">    left、right、center

    2、其他文字标记

    • 文字标注标记——ruby

      在默认情况下,标注文字很小,但是在HTML中也可以像设置其他文字一样调整标注文字的各种属性,包括大小、颜色等。

    语法:

    <ruby>
      被说明的文字
      <rt>
      文字标注
      </rt>
    </ruby>

    <html>
    <head>
    <title>添加文字标注</title>
    </head>
    
    <body>
    <ruby>
    有情芍药含春泪,无力蔷薇卧晓枝。<br/><br/>
    <rt>
    作者秦观
    </rt>
    </ruby>
    </body>
    
    </html>
    • 声明变量标记——var

      为突出变量,将其设置为斜体。

      语法:<var> 变量 </var>

    <html>
    <head>
    <title>声明变量标记</title>
    </head>
    
    <body>
    <p>定义变量<var>x</var>的值为<var>y+6</var><br/><br/>
    </body>
    
    </html>
    • 设置地址文字标记——<address>

      用于显示E-Mail、地址等文字内容,主要用于英文字体的显示中。

      语法:<address> 文字 </address>

    <html>
    <head>
    <title>页面地址文字</title>
    </head>
    
    <body>
    <p>请在上面的文本框中编辑您的代码,然后单击提交按钮测试结果。<address>www.w3school.com.cn</address>
    </body>
    
    </html>
  • 相关阅读:
    linux 免交互状态下修改用户密码
    Sqlmap基础(一)
    cmd命令行指定系统延迟关机时间
    Shell 是个什么玩意
    Linux Shell脚本入门:tee命令
    shell脚本 -d 是目录文件,那么-e,-f等说明
    修改linux终端命令行颜色
    Linux 动画显示
    OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务
    Curl命令使用
  • 原文地址:https://www.cnblogs.com/zyf2014/p/5774028.html
Copyright © 2011-2022 走看看