zoukankan      html  css  js  c++  java
  • 002.前端开发知识,前端基础HTML(2020-01-07)

    一、列表标签

    1.无序列表 ul

    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ul>

    2.有序列表 ol

    有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义

    <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ol>

    3.自定义列表

    <dl>
      <dt>名词1</dt>
      <dd>名词1解释1</dd>
      <dd>名词1解释2</dd>
      ...
      <dt>名词2</dt>
      <dd>名词2解释1</dd>
      <dd>名词2解释2</dd>
      ...
    </dl>

    二、表格 table

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
    
        </style>
    </head>
    <body>
    <!-- cellspacing 单元格和单元格之间的距离   -->
    <!-- cellpadding 单元格内容距离单元边框的距离   -->
        <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
            <caption>个人信息表</caption>  表格标题  
            <tr>  
                <th>姓名</th> 
                <th>性别</th>
                <th>电话</th>
            </tr>
            <tr>
                <td>小王</td>
                <td></td>
                <td>110</td>
            </tr>
            <tr>
                <td>小明</td>
                <td></td>
                <td>120</td>
            </tr>    
        </table>
    </body>
    </html>

    1.表格属性

     2.表格结构

    在使用表格进行布局时,可以将表格划分为头部、主体和页脚。

      <thead></thead>:用于定义表格的头部。

      <tbody></tbody>:用于定义表格的主体。

    3.表格标题

    <table>
       <caption>我是表格标题</caption>
    </table>

    4.合并单元格

      跨行合并:rowspan 跨列合并:colspan

      合并单元格的思想:将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。

      公式: 删除的个数 = 合并的个数 - 1

      合并的顺序 先上 先左

    <body>
        <table width="400" height="100" border="1">
            <tr>
                <td>123</td>
                <td>abc</td>
                <td>abc</td>
            </tr>
            <tr>
                <td colspan="2">123</td>
                
                <td>测试</td>
            </tr>
            <tr>
                <td>123</td>
                <td>abc</td>
                <td>abc</td>
            </tr>
    
        </table>
        1. 先确认跨列合并 colspan
        2. 先上后下  先左右后
        3. 删除的个数
    
        <table width="400" height="100" border="1">
            <tr>
                <td>123</td>
                <td>abc</td>
                <td rowspan="3">abc</td>
            </tr>
            <tr>
                <td>123</td>
                <td>123</td>
                
            </tr>
            <tr>
                <td>123</td>
                <td>abc</td>        
            </tr>
        </table>
        1. 先确认跨行合并 rowspan
        2. 先上后下  先左右后
        3. 删除的个数
    </body>

    三、表单——目的是为了收集用户信息。

      在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

      表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

      提示信息:一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

      表单域:他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

    1.input 控件

        <form action="" method="post">
            用户名: <input type="text" name="yonghuming" value="用户名"> <br /> <br />     --value是在输入框中显示提示信息
            密 码: <input type="password" name="mima"><br /> <br />
            性别: <input type="radio" name="sex">
            <input type="submit" value="提交所填">
            <input type="reset" value="重新填写">
        </form>

    显示效果如下:

    2.label标签

    作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" value="male">

    点击标题,焦点定位到后面的输入框 

            <tr height="60">
                <td>
                    <label for="suibian">密码</label>
                </td>
                <td><input type="password" value="110120" maxlength="6"id="suibian" /></td>
            </tr>

    3.textarea控件(文本域)

    通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:

    <textarea cols="每行中的字符数" rows="显示的行数">
      文本内容
    </textarea>

    4.下拉菜单

    <select>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
      ...
    </select>

    5.表单域

    <form action="url地址" method="提交方式" name="表单名称">
      各种表单控件
    </form>

    四、查文档

    经常查阅文档是一个非常好的学习习惯。

    W3C : http://www.w3school.com.cn/

    MDN: https://developer.mozilla.org/zh-CN/

    value
  • 相关阅读:
    Openlayer 3 的画图测量面积
    Openlayer 3 的画线测量长度
    屏幕尺寸
    px和em,rem的区别
    水平和垂直居中
    Flex布局
    继承的几种方法及优缺点
    call ,apply 和 bind的用法与区别
    mybatis springmvc velocity的demo
    正则同时包含两个关键字
  • 原文地址:https://www.cnblogs.com/hzjdpawn/p/12163673.html
Copyright © 2011-2022 走看看