zoukankan      html  css  js  c++  java
  • [HTML]锚点、表格、列表、HTML5结构标记、表单

    一、定义锚点

    1 <a name="锚点名称">内容</a> //只适用于链接,使用name属性定义
    2 
    3 <ANY id="N锚点名称"></ANY> //任意标签使用id属性
    二、链接锚点
    1 <a href="#锚点名称">内容</a> //同一页面锚点
    2 <a href="页面URL#锚点名称">内容</a>
    三、表格
    1.基本结构:
     1 <!doctype html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>table</title>
     6     </head>
     7     <body>
     8         <table align="center" border="1px" cellpadding="10px" cellspacing="10px" width="300px">
     9             <caption>成绩表</caption>
    10             <tbody bgcolor="red" align="center">
    11                 <tr>
    12                     <th>序号</th>
    13                     <th>姓名</th>
    14                     <th>成绩</th>
    15                 </tr>
    16                 <tr>
    17                     <th>1</th>
    18                     <td>张三</td>
    19                     <td>100</td>
    20                 <tr>
    21                 <tr>
    22                     <th>2</th>
    23                     <td>李四</td>
    24                     <td>90</td>
    25                 <tr>
    26                 <tr>
    27                     <th>3</th>
    28                     <td>王五</td>
    29                     <td>80</td>
    30                 <tr>
    31             </tbody>
    32         </table>
    33     </body>
    34 </html>
     
    2.跨行/列:
     1 <!doctype html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>table</title>
     6     </head>
     7     <body>
     8         <table border="1px" width="400px" height="400px" align="center">
     9         <tbody align="center">
    10             <tr>
    11                 <td colspan="2">a</td>
    12                 <td rowspan="2">b</td>
    13             </tr>
    14             <tr>
    15                 <td rowspan="2">c</td>
    16                 <td>d</td>
    17             </tr>
    18             <tr>
    19                 <td colspan="2">e</td>
    20             </tr>
    21         </tbody>
    22         </table>
    23     </body>
    24 </html>
     
    四、.列表
     1 <!doctype html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>table</title>
     6     </head>
     7     <body>
     8         <ol>
     9             <li>HTML文档片段
    10                 <ul>
    11                     <li>
    12                         <a href="#">问题</a>
    13                     </li>
    14                     <li>
    15                         <a href="#">方案</a>
    16                     </li>
    17                     <li>
    18                         <a href="#">实现</a>
    19                     </li>
    20                     <li>
    21                         <a href="#">拓展</a>
    22                     </li>
    23                 </ul>
    24             </li>
    25             <li>我的第一个HTML文档
    26                 <ul>
    27                     <li>问题</li>
    28                     <li>方案</li>
    29                     <li>实现</li>
    30                 </ul>
    31             </li>
    32         </ol>
    33     </body>
    34 </html>
     
    定义列表:
    1. <dl></dl>
    2. <dt></dt>
    3. <dd></dd>
     
    五、HTML结构标记
    1. <header>:定义文档头部
    2. <nav>:导航
    3. <section>:定义文档中具体组成部分
    4. <article>:论坛帖子、新闻信息、博客条目
    5. <footer>:页脚
    6. <aside>:边栏
     
    六、表单
    1.语法:
    1. <form></form>
     
    2.属性:
    action:表单提交时发生的动作、提交地址,为url值,默认提交给本页
    1. action="xxx.php" //服务器端地址
    method:表单提交数据时的方式
    1. a.get:向服务器要数据时使用(默认值)
    2. b.post:将数据交给服务器处理(有保密数据时)
    enctype:编码类型
    1. a.application/x-www-form-urlencoded:默认值,允许将普通字符、特殊字符交给server,但不允许提交文件
    2. b.multipart/form-data:允许将文件提交给server
    3. c.text/plain:只允许提交普通字符。特殊字符和文件都无法提交
    name:定义当前表单的名称
  • 相关阅读:
    多线程-死锁代码示例
    区块链技术:以太方学习文档
    svn 不能校验路径“XXX”的锁;没有匹配的可用锁令牌 故障解决方法
    Oracle ORA-27102的解决办法(out of memory)
    Linux常用命令语法+示例
    Java如何实现form表单提交的数据自动对应实体类(源码)
    Java分布式锁看这篇就够了
    quartz时间配置
    volatile 实现原理
    == 和 equals()的区别
  • 原文地址:https://www.cnblogs.com/enginex/p/6805275.html
Copyright © 2011-2022 走看看