关于html:HTML基础知识2

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/

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据