Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML 常用标签学习一
Blogger Information
Blog 20
fans 0
comment 1
visits 13094
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML 常用标签学习一
zg的php学习
Original
467 people have browsed it

HTML 常用标签学习一

链接与图像

a 标签

  <a> 标签通过它的 href 属性创建通向其他网页、文件、邮箱或任何其他 URL 地址的超链接。

<a href="https://www.php.cn" target="_self">php中文网</a>
php 中文网

  其中 target 属性用来描述在什么位置显示链接资源。

  • _self   在当前页面显示
  • _blank  在新窗口显示
  • _parent  在父窗口显示
  • _top   显示到整个窗口，会清除窗口中包含的 frame
  • framename 在指定的框架中显示

  href 主要有以下几种链接形式。

  • 链接到外部地址

    <a href="https://www.php.cn">php中文网</a>

  • 链接到本页的某个部分

    <p id="m_title">菜单栏</p>
    <a href="#m_title">回到菜单栏</a>

  • 图片链接

    <a href="https://www.php.cn"><img src="php.jpg" alt="php中文网"></a>

  • email 链接

    <a href="mailto:zg@php.cn">send mail</a>

img 标签

  <img>标签是一个单标签，通过 src 属性来显示一个图片

<img alt="最牛的鹅!" src="qq.jpg">
最牛的鹅

列表

有序列表

  1. <ol>
  2.     <li>item1</li>
  3.     <li>item2</li>
  4.     <li>item3</li>
  5. </ol>

无序列表

无序列表

  1. <ul>
  2.     <li>辽宁女排尽遣主力横扫浙江</li>
  3.     <li>遭横扫无碍山东连胜</li>
  4.     <li>上海乒乓男团零封广东</li>
  5. </ul>

无序列表

自定义列表

  1. <dl>
  2.     <dt>邮箱：</dt>
  3.     <dd>zg@php.cn</dd>
  4.     <dt>qq：</dt>
  5.     <dd>270638433</dd>
  6. </dl>

自定义列表

列表嵌套

  1. <ul>
  2.     <li>浙江
  3.         <ul>
  4.             <li>杭州</li>
  5.             <li>宁波</li>
  6.         </ul>
  7.     </li>
  8.     <li>江苏
  9.         <ul>
  10.             <li>南京</li>
  11.             <li>无锡</li>
  12.         </ul>
  13.     </li>
  14. </ul>

嵌套列表

表格

  一个完整表格包含以下部分：

table - caption - thead - tbody - tfoot

  • 表格是二维的，由行(tr)和列(td)组成
  • 合并单元格时，rowspan 和 colspan 只能写在合并的初始单元格中

代码示例：

  1. <table border="1" cellspacing="0" cellpadding="2" width="50%" height="200px;">
  2.   <caption>
  3.     XXX申请表
  4.   </caption>
  5.   <thead></thead>
  6.   <tbody>
  7.     <tr row="1" align="center">
  8.       <td width="70px;" colspan="2">申请部门</td>
  9.       <!-- <td>item2</td> -->
  10.       <td width="70px;"></td>
  11.       <td>增补职称</td>
  12.       <td colspan="2"></td>
  13.       <!-- <td>item6</td> -->
  14.       <td>增补名额 __ 人</td>
  15.     </tr>
  16.     <tr row="2" align="center">
  17.       <td colspan="2">申请增补(招聘)<br />理由</td>
  18.       <!-- <td>item2</td> -->
  19.       <td colspan="2">扩大编制 储备人力</td>
  20.       <!-- <td>item4</td> -->
  21.       <td width="70px;">备注</td>
  22.       <td colspan="2">报到日期：&emsp;&emsp;年&emsp;月&emsp;日</td>
  23.       <!-- <td>item7</td> -->
  24.     </tr>
  25.     <tr row="3" align="center">
  26.       <td rowspan="2">拟定薪金<br />及待遇</td>
  27.       <td>试用期</td>
  28.       <td colspan="5">基本薪金：__元/月；职务工资：__元/月；津贴：__元/月;</td>
  29.       <!-- <td>item4</td> -->
  30.       <!-- <td>item5</td> -->
  31.       <!-- <td>item6</td> -->
  32.       <!-- <td>item7</td> -->
  33.     </tr>
  34.     <tr row="4" align="center">
  35.       <!-- <td>item1</td> -->
  36.       <td>转正后</td>
  37.       <td colspan="5">基本薪金：__元/月；职务工资：__元/月；津贴：__元/月;</td>
  38.       <!-- <td>item4</td> -->
  39.       <!-- <td>item5</td> -->
  40.       <!-- <td>item6</td> -->
  41.       <!-- <td>item7</td> -->
  42.     </tr>
  43.   </tbody>
  44.   <tfoot></tfoot>
  45. </table>

效果图：
表格

内联框架元素

iframe 标签

  <iframe>标签能够将另一个 HTML 页面嵌入到当前页面中。

  • src 属性：被嵌套的页面的 URL 地址。
  • name 属性：该名称可以用作 \<a\> 标签与 \<form\> 标签的 target 属性值，也可以用作 \<input\> 标签和 \<button\> 标签的 formtarget 属性值，还可以用作 window.open() 方法的 windowName 参数值。从而可以通过点击 a 标签或 button 按钮等方式将目标页面在指定为 name 的框架中打开。

示例代码：

  1. <body style="height: 95%">
  2.   <style>
  3.     nav {
  4.       border-bottom: 1px solid black;
  5.     }
  6.     .crumbs ul {
  7.       list-style-type: none;
  8.       padding-left: 0;
  9.     }
  10.     .crumb {
  11.       display: inline-block;
  12.     }
  13.     .crumb a::after {
  14.       display: inline-block;
  15.       color: #000;
  16.       content: " | ";
  17.       font-size: 80%;
  18.       font-weight: bold;
  19.       padding: 0 3px;
  20.     }
  21.   </style>
  22.   <nav class="crumbs">
  23.     <ul>
  24.       <li class="crumb">
  25.         <a href="http://www.jd.cn" target="frameMain">京东</a>
  26.       </li>
  27.       <li class="crumb">
  28.         <a href="http://www.taobao.com" target="frameMain">淘宝</a>
  29.       </li>
  30.       <li class="crumb">
  31.         <a href="http://www.tmall.com" target="frameMain">天猫</a>
  32.       </li>
  33.     </ul>
  34.   </nav>
  35.   <iframe
  36.     src=""
  37.     frameborder="0"
  38.     name="frameMain"
  39.     width="100%"
  40.     height="90%"
  41.   ></iframe>
  42. </body>

效果图：
内联框架

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post