zoukankan      html  css  js  c++  java
  • html 主要标签总结

    基础结构标签:html,head,body。

    1 <html>
    2     <head></head>
    3     <body></body>
    4 </html>

    1.换行符

    1 <br/>

    2.段落

    对齐属性:align。属性值:left,center,right。

    1 <p align="center">这是一个段落</p>

     3.标题标签 h1~h6。

    1 <h1>这是h1标签</h1>
    2 <h2>这是h2标签</h2>
    3 <h3>这是h3标签</h3>
    4 <h4>这是h4标签</h4>
    5 <h5>这是h5标签</h5>
    6 <h6>这是h6标签</h6>

    4.文本修饰标签,其用途类似于word的字体变化。

    1 <b>定义粗体文本</b>
    2 <i> 定义斜体文本 </i>
    3 <del>定义删除文本</del>
    4 <sup>定义上标字</sup>
    5 <sub>定义下标字</sub>

    5.链接标签。

    1 <a href="url" title="_title" target="_blank">
    2     href:跳转地址;
    3     title:连接提示;
    4     target:跳转的方式;可选值:_blank,_parent,_self,_top;
    5 </a>
    6 <a href="#">用于跳转页面内部位置</a>

    6.图片引入标签。

    1 <img src="url" alt="img-title" width="100" height="100"/>
    2 src:图片的地址;
    3 alt:图片的提示文本;
    4 width:宽;
    5 height:高;

    7.文件路径规范。

    1 ./ 当前目录;
    2 ../ 上层目录;
    3 address / 子层目录;
    4 ../address/ 结合性目录;

    8.图像热区。在一张图片上定义一些特定的区域来实现链接。

    1 <img src="url" usemap="_map"/>
    2 <map name="_map">
    3     <area shape="rect" coords="0,0,10,10" href="url"/>
    4     <area shape="circle" coords="50,50,10" href="url"/>
    5     <area shape="poly" coords="50,50,10,10,80,80" href="url"/>
    6 </map>

    9.字符实体。使浏览器显示html中的格式符号。

    1 <
    2 >
    3 &

    10.无序列表。以符号开头的列表。

    1 <ul type="disc">
    2     <li>这是第1行</li>
    3     <li>这是第2行</li>
    4     <li>这是第3行</li>
    5     <li>这是第4行</li>
    6     <li>这是第5行</li>
    7     type:定义列表开头符号的样式;
    8 </ul>

    11.有序列表。以序号开头的列表。

    1 <ol type="A">
    2     <li>这是第1行</li>
    3     <li>这是第2行</li>
    4     <li>这是第3行</li>
    5     <li>这是第4行</li>
    6     <li>这是第5行</li>
    7     type:用来定义开头序号的样式;
    8 </ol>

    12.定义列表。有标题的列表。

    1 <dl>
    2     <dt>列表标题</dt>
    3     <dd>列表项1</dd>
    4     <dd>列表项2</dd>
    5     <dd>列表项3</dd>
    6     <dd>列表项4</dd>
    7     <dd>列表项5</dd>
    8 </dl>

    13.表格。

    1 <table>
    2     <tr>行1
    3         <td>单元格1</td>
    4         <td>单元格1</td>
    5         <td>单元格1</td>
    6         <td>单元格1</td>
    7         <td>单元格1</td>
    8     </tr>
    9 </table>

    合并单元格:colspan="number":合并列;rowspan="number":合并行;在合并单元格后,需删除多余的单元格。

     

    15.内嵌框架。它可以把一个网页显示在另一个网页中。

    1 <iframe src="url" frameborder="0" width="100" height="100" scrolling="yes"></iframe>
    2 scrolling可选项:yes,no,auto。设置是否显示滚动条。

    16.form表单。

    1 <form action="url" method="post" enctype="multipart/form-data" target="_blank"></form>
    2 属性        说明
    3 name    表单的名称
    4 action    表单提交地址
    5 method    表单数据提交的方式 (get ,post)
    6 enctype    MIME类型        
    7 target     打开方式 

    17.input类型。

     请移步 “input 类型 总结”

    18.文本域。

    1 <textarea name="_text" id="_text" cols="30" rows="10"></textarea>
    2 cols:每一行可容纳的字符个数;rows:容器可容纳的行数。

    19.下拉菜单框。

    1 <select name="" id="" size="1">
    2     <optgroup label="group_1">
    3         <option value="1">opt_1</option>
    4         <option value="2">opt_2</option>
    5     </optgroup>
    6 </select>
    7 optgroup:分组;
    8 option:选项;
    9 size:选框可显示的选项的个数;

    扩展:

    1.label标签。

    1 跨度写法;
    2 <label for="input_1"></label>
    3 <input type="text" id="input_1">
    4 非跨度写法;
    5 <label><input type="text"></label>

    The end.

    by Little

  • 相关阅读:
    设备上下文-CDC绘图细节
    程序设计思想-1
    消息反射--针对通知消息
    R语言-数据类型与运算符
    背景色与WM_ERASEBKGND
    IDEA 2017.3 新版本中创建 JSF Web 应用程序缺少 web.xml 的解决办法
    在 Fedora 26/27 GNOME 3.24/3.26 环境中安装 FCITX 小企鹅输入法(修订)
    Linux 环境下安装配置 TigerVNC Server 并启用当前会话远程服务(X0VNC)
    关于 gstreamer 和 webrtc 的结合,有点小突破
    VMware Workstation/Fusion 中安装 Fedora 23/24 及其他 Linux 系统时使用 Open VM Tools 代替 VMware Tools 增强工具的方法
  • 原文地址:https://www.cnblogs.com/darcrand-blog/p/5737949.html
Copyright © 2011-2022 走看看