乐趣区

关于html:HTML基础知识2

jiezi

HTML 基本知识（2）

表格

创建表格

表格是用来展现数据的 使数据更加参差标准

  • table: 表格标签
  • tr: 行标签 只能嵌套在表格标签内
  • td: 单元格标签 用来存储数据 只能嵌套在 tr 中 td 能够嵌套任何标签

表格属性 


    <table border="1" height="200" width="200" cellspacing="0" cellpadding="5">
        <tr>
            <td> 姓名 </td>
            <td> 性别 </td>
            <td> 年龄 </td>
        </tr>
        <tr>
            <td> 尧子陌 </td>
            <td> 男 </td>
            <td>24</td>
        </tr>
        <tr>
            <td> 惊鸿 </td>
            <td> 男 </td>
            <td>24</td>
        </tr>
    </table>

表头单元格标签

表头单元格标签个别位于表格的第一行或第一列，用标签 th 示意，th 和 td 一样但会让字体加粗并居中。

<body>
    <table border="1" height="200" width="200" cellspacing="0" cellpadding="5">
        <tr>
            <th> 姓名 </th>
            <th> 性别 </th>
            <th> 年龄 </th>
        </tr>
        <tr>
            <td> 尧子陌 </td>
            <td> 男 </td>
            <td>24</td>
        </tr>
        <tr>
            <td> 惊鸿 </td>
            <td> 男 </td>
            <td>24</td>
        </tr>
    </table>
</body>

表格题目

表格题目必须位于表格中才有意义 用 caption 示意 且表格题目会追随表格一起挪动 

<table height="315"  width="500"  border="1"  cellspacing="0" cellpadding="2"   align="center">
       <caption> 个人信息表 </caption>
        <tr>
            <th> 姓名 </th>
            <th> 性别 </th>
            <th> 年龄 </th>
        </tr>
        <tr>
            <td> 尧子陌 </td>
            <td> 男 </td>
            <td>24</td>
        </tr>
        <tr>
            <td> 惊鸿 </td>
            <td> 男 </td>
            <td>24</td>
        </tr>
    </table>

表格案例 

<body>
    <table border="1" cellspacing="0"  cellpadding="0" align="center" height="300"              width="500">
        <caption><h2> 小说排行耪 </h2></caption>
        <tr>
            <th> 排名 </th>
            <th> 关键词 </th>
            <th> 趋势 </th>
            <th> 今日搜寻 </th>
            <th> 最近七日 </th>
            <th> 相干链接 </th>
        </tr>
        <tr>
            <td>1</td>
            <td> 鬼吹灯 </td>
            <td><img src="./images/down.jpg" alt=""></td>
            <td>345</td>
            <td>123</td>
            <td>
                <a href="#"> 贴吧 </a>
                <a href="#"> 百度 </a>
                <a href="#"> 图片 </a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td> 盗墓笔记 </td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>34555</td>
            <td>123444</td>
            <td>
                <a href="#"> 贴吧 </a>
                <a href="#"> 百度 </a>
                <a href="#"> 图片 </a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td> 西游记 </td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>24555</td>
            <td>13444</td>
            <td>
                <a href="#"> 贴吧 </a>
                <a href="#"> 百度 </a>
                <a href="#"> 图片 </a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td> 东游记 </td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>3455</td>
            <td>3444</td>
            <td>
                <a href="#"> 贴吧 </a>
                <a href="#"> 百度 </a>
                <a href="#"> 图片 </a>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td> 甄嬛传 </td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>3555</td>
            <td>1444</td>
            <td>
                <a href="#"> 贴吧 </a>
                <a href="#"> 百度 </a>
                <a href="#"> 图片 </a>
            </td>
        </tr>
        <tr>
            <td>6</td>
            <td> 水浒传 </td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>355</td>
            <td>12344</td>
            <td>
                <a href="#"> 贴吧 </a>
                <a href="#"> 百度 </a>
                <a href="#"> 图片 </a>
            </td>
        </tr>
        <tr>
            <td>7</td>
            <td> 三国演义 </td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>3555</td>
            <td>13444</td>
            <td>
                <a href="#"> 贴吧 </a>
                <a href="#"> 百度 </a>
                <a href="#"> 图片 </a>
            </td>
        </tr>


    </table>

单元格合并

单元格合并的程序：先上 后下 先左 后右

单元格合并三部曲

  • 先确定是跨行合并 跨列合并
  • 依据先上 后下 先左 后右的程序找到合并的指标单元格
  • 删除多余的单元格 
  <table border="1" cellspacing="0" cellpadding="0" width="500" height="300" align="center">
        <caption> 个人信息表 </caption>
            <tr>
                <td colspan="3" rowspan="3"></td>
                
                <td></td>
                <td></td>
            </tr>
            <tr>
              
                <td></td>
                <td></td>
            </tr>
            <tr>
                
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
    </table>
复制代码

表格划分构造 

<body>
    <table border="1" cellspacing="0" cellpadding="0" width="600" height="200">
        <thead>
            <tr>
                <th> 姓名 </th>
                <th> 性别 </th>
                <th> 年龄 </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td> 尧子陌 </td>
                <td> 女 </td>
                <td>26</td>
            </tr>
            <tr>
                <td> 惊鸿 </td>
                <td> 男 </td>
                <td>28</td>
            </tr>
        </tbody>


        <tfoot>
            <tr>
                <td> 地址 </td>
                <td colspan="2"> 地球村 </td>

            </tr>

        </tfoot>

    </table>
</body>

表格总结

列表

列表用来布局 让布局形式更加参差对立 自在搭配更高

容器外面装载着构造 款式统一的文字或图片的一种模式 叫做列表

无序列表 

 无序列表指的是没有程序的列表     由 <ul></ul>  <li><li> 两组标签组成

注意事项

  • ul 标签中只能寄存 li 标签
  • li 标签就像一个容器 能够寄存任意的标签
  • 列表领有本人的款式 交给 css 来解决 
  <ul>
        <li> 香蕉 </li>
        <li> 凤梨 </li>
        <li> 苹果 </li>
        <li> 火龙果 </li>
        <li> 丑橘 </li>
        <li> 菠萝 </li>
    </ul>
复制代码

有序列表 

 有程序的列表  简称有序列表  由 <ol></ol>   <li></li> 两组标签组成
复制代码 
   <h2> 国家排行榜 </h2>
    <ol>
        <li> 美国 </li>
        <li> 中国 </li>
        <li> 俄罗斯 </li>
        <li> 英国 </li>
        <li> 法国 </li>
        <li> 意大利 </li>
    </ol>

自定义列表 

 对术语或者名词进行解释的列表  简称自定义列表   由 <dl></dl>    <dt></dt>   <dd></dd> 组成
复制代码 
 <dl>
        <dt> 名词 </dt>
        <dd> 名词解释 1 </dd>
        <dd> 名词解释 2 </dd>
        <dd> 名词解释 3 </dd>
  </dl>

表单

表单的作用：收集用户信息

表单三局部：表单 提示信息 表单域

input 类型

注意事项 

1.  <input /> 标签为单标签
2. type 属性设置不同的属性值示意不同的控件类型
3. 除了 type 属性外  input 还有别的属性
4. value 指表单关上要显示的文字

value

表单值 表单默认显示的文本

name

name: 表单的名字 为了区别不同的表单

checked 属性

checked 属性示意默认选中状态

总结 

<body>
    <p> 账号：<input type="text" value="请输出账号"  name="username"></p>
    <p> 明码：<input type="password" value="请输出明码" name="password"></p>
    <p> 性别：<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女 <input type="radio" name="sex"> 人妖 </p>
    <p> 喜好：<input type="checkbox" name="hobby"> 篮球 <input type="checkbox" name="hobby"> 足球 <input type="checkbox" name="hobby"> 乒乓球 </p>
    <p> 搜寻：<input type="button" value="搜寻"></p>
    <p> 文件：<input type="file"></p>
    <pre><input type="submit">     <input type="reset"> </pre>
</body>

lable 标签

点击 lable 标签的文字时 光标会跳往被绑定的表单元素外面

第一种办法

间接用 lable 来包裹 

 <label > 账号：<input type="text" value="请输出账号"> </label>

第二种办法

间接用 for id 来实现 

<label for="password"> 账号：</label>    <input type="text" name="password" id="password">

文本域 textarea

textarea: 文本域 用来输出多行文字的 属于双标签 能够当留言板应用 

     <h2> 留言板 </h2>
        <textarea name=""id="" cols="30" rows="10">

        </textarea>

下拉菜单

select: 下拉菜单

注意事项

  • select 标签至多蕴含一对 option 标签
  • option 标签定义 selected 标签即为选中的默认值 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name=""id="">
        <option value="" > 请抉择以后的省 </option>
        <option value="" selected> 北京 </option>
        <option value=""> 上海 </option>
        <option value=""> 浙江 </option>
        <option value=""> 广东 </option>
        <option value=""> 河南 </option>
    </select>



    <select name=""id="">
            <option value=""> 请抉择以后的市 </option>
            <option value=""> 南阳市 </option>
            <option value=""> 商丘市 </option>
            <option value=""> 驻马店市 </option>
            <option value=""> 信阳市 </option>
            <option value=""> 郑州市 </option>
    </select>
</body>

</html>

form 表单域

form：表单域 对用户信息进行收集和传递 form 会将表单的所有内容提交到服务器 

   <form action="Yao.PHP" method="POST" name="sheet">
        <p> 账号:<input type="text" name="username"/></p>
        <p> 账号:<input type="password" name="password"/></p>
        <pre><input type="submit">    <input type="reset"></pre>
    </form>

综合案例 

<body>
    <table  width="600" align="center">
        <caption>
            <h4> 青春不常在 放松谈恋爱 </h4>
        </caption>
        <!-- 第一行 -->
        <tr>
            <td> 性别 </td>
            <td>
                <img src="./images/man.jpg" />
                <input type="radio" name=sex /> 男
                <img src="./images/women.jpg" alt="">
                <input type="radio" name="sex"> 女
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td> 生日 </td>
            <td>
                <select name=""id="">
                    <option value=""> 请抉择年 </option>
                    <option value="">1996</option>
                    <option value="">1997</option>
                    <option value="">1998</option>
                </select>

                <select name=""id="">
                    <option value=""> 请抉择月 </option>
                    <option value="">12</option>
                    <option value="">11</option>
                    <option value="">10</option>
                </select>

                <select name=""id="">
                    <option value=""> 请抉择日 </option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td> 所在地区 </td>
            <td>
                <lable> <input type="text"></lable>
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td> 婚姻状况 </td>
            <td>
                <input type="radio" name="matrimony"> 未婚
                <input type="radio" name="matrimony"> 已婚
                <input type="radio" name="matrimony"> 离异
            </td>
        </tr>

        <!-- 第五行 -->
        <tr>
            <td> 学历 </td>
            <td><input type="text" value="高中"></td>
        </tr>

        <!-- 第六行 -->
        <tr>
            <td> 月薪 </td>
            <td><input type="text" value="5000~10000"></td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td> 手机号 </td>
            <td><input type="text" value=""></td>
        </tr>

        <!-- 第八行 -->
        <tr>
            <td> 呢称 </td>
            <td><input type="text" value=""></td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td> 喜爱的类型 </td>
            <td>
                <input type="checkbox" name="genre"> 御姐
                <input type="checkbox" name="genre"> 萝莉
                <input type="checkbox" name="genre"> 宅女
                <input type="checkbox" name="genre"> 傻白甜
            </td>
        </tr>

        <!-- 第十行 -->
        <tr>
            <td> 自我介绍 </td>
            <td><textarea name=""id="" cols="30" rows="10"></textarea></td>
        </tr>

        <!-- 第十一行 -->
        <tr>
            <td></td>
            <td><img src="./images/btn(1).png" alt=""></td>
        </tr>

        <!-- 第十二行 -->
        <tr>
            <td></td>
            <td><input type="checkbox" name="agree"> 我批准注册条款和会员退出规范 </td>
        </tr>

        <!-- 第十三行 -->
        <tr>
            <td></td>
            <td><a href="#"> 我是会员  立刻登录 </a></td>
        </tr>

        <!-- 第十四行 -->
        <tr>
            <td></td>
            <td>
                <h5> 我承诺 </h5>
                <ul>
                    <li> 未满 18 岁 </li>
                    <li> 抱着恋爱的态度 </li>
                    <li> 真挚为了另一半 </li>
                </ul>
            </td>
        </tr>
    </table>

查阅材料

  • w3c :www.w3school.com.cn/
  • MDN:developer.mozilla.org/zh-CN/
退出移动版