Java-前端-HTML标签

内容以代码+运行效果图形式展现

目录

列表标签

表格标签

表单标签

表单标签

分组表单标签

内联框架标签

---

列表标签

<!-- 列表标签-->
    <!-- 无序-->
    <h3>列表标签</h3>
    <!-- type ----- disc（实心圆点）默认、circle（空心圆点）、square（实心方块）、none（无项目符号）-->
    <ul>
      <li>disc（实心圆点）默认 - 无序列表 - 第一条</li>
      <li>disc（实心圆点）默认 - 无序列表 - 第二条</li>
      <li>disc（实心圆点）默认 - 无序列表 - 第三条</li>
    </ul>
    <ul type="circle">
      <li>circle（空心圆点）- 无序列表 - 第一条</li>
      <li>circle（空心圆点）- 无序列表 - 第二条</li>
      <li>circle（空心圆点）- 无序列表 - 第三条</li>
    </ul>
    <ul type="square">
      <li>square（实心方块）- 无序列表 - 第一条</li>
      <li>square（实心方块）- 无序列表 - 第二条</li>
      <li>square（实心方块）- 无序列表 - 第三条</li>
    </ul>
    <ul type="none">
      <li>none（无项目符号）- 无序列表 - 第一条</li>
      <li>none（无项目符号）- 无序列表 - 第二条</li>
      <li>none（无项目符号）- 无序列表 - 第三条</li>
    </ul>
    <!-- 有序-->
    <!-- type ------ 1 (数字)默认、a	 (小写英文字母)、A (大写英文字母)、i (小写罗马数字)、I (大写罗马数字)-->
    <ol>
      <li>数字 - 有序列表 - 第一条</li>
      <li>数字 - 有序列表 - 第二条</li>
      <li>数字 - 有序列表 - 第三条</li>
    </ol>
    <ol type="a">
      <li>小写英文字母 - 有序列表 - 第一条</li>
      <li>小写英文字母 - 有序列表 - 第二条</li>
      <li>小写英文字母 - 有序列表 - 第三条</li>
    </ol>
    <ol type="A">
      <li>大写英文字母 - 有序列表 - 第一条</li>
      <li>大写英文字母 - 有序列表 - 第二条</li>
      <li>大写英文字母 - 有序列表 - 第三条</li>
    </ol>
    <ol type="i">
      <li>小写罗马数字 - 有序列表 - 第一条</li>
      <li>小写罗马数字 - 有序列表 - 第二条</li>
      <li>小写罗马数字 - 有序列表 - 第三条</li>
    </ol>
    <ol type="I">
      <li>大写罗马数字 - 有序列表 - 第一条</li>
      <li>大写罗马数字 - 有序列表 - 第二条</li>
      <li>大写罗马数字 - 有序列表 - 第三条</li>
    </ol>
    <!-- 自定义列表-->
    <!-- dl 父标签
         dt 标题子标签
         dd 内容子标签类似li
         dl 里只能是dt和dd
         1个dt多个dd
         -->
    <dl>
      <dt>管理学院</dt>
      <dd>统计学</dd>
      <dd>运筹学</dd>
      <dd>经济学</dd>
      <dt>信息学院</dt>
      <dd>计算机科学与技术</dd>
      <dd>大数据科学与技术</dd>
    </dl>

表格标签

    <!-- 表格标签-->
    <!-- 完整版-->
    <h3>表格标签</h3>
    <p>注：表格完整版</p>
    <table>
      <caption>歌手成绩表</caption>
      <thead>
        <tr>
          <th>姓名</td><th>分数</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>阳光</td><td>98</td>
        </tr>
        <tr>
          <td>灿烂</td><td>89</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>总成绩</td><td>187</td>
        </tr>
      </tfoot>
    </table>

    <!-- 简单版-->
    <p>注：表格简单版</p>
    <table>
      <tr>
        <td>姓名</td><td>分数</td>
      </tr>
      <tr>
        <td>阳光</td><td>98</td>
      </tr>
      <tr>
        <td>灿烂</td><td>89</td>
      </tr>
    </table>

    <p>注：表格默认无边框  在table标签上设置 border属性 值表示表格边框宽度 </p>
    <table border="1">
      <tr>
        <td>姓名</td><td>分数</td>
      </tr>
      <tr>
        <td>阳光</td><td>98</td>
      </tr>
      <tr>
        <td>灿烂</td><td>89</td>
      </tr>
    </table>

    <p>注：border值增加</p>
    <table border="5">
      <tr>
        <td>姓名</td><td>分数</td>
      </tr>
      <tr>
        <td>阳光</td><td>98</td>
      </tr>
      <tr>
        <td>灿烂</td><td>89</td>
      </tr>
    </table>

    <p>注：表格-单元格默认有间距 在table标签上设置cellspacing=“0” 去除单元格之间的间距</p>
    <table border="1"
           cellspacing ="0" >
      <tr>
        <td>姓名</td><td>分数</td>
      </tr>
      <tr>
        <td>阳光</td><td>98</td>
      </tr>
      <tr>
        <td>灿烂</td><td>89</td>
      </tr>
    </table>

    <p>注：在table标签上设置 width和height改变表格宽高度</p>
    <table border="1" cellspacing ="0"
          width="200" height="100">
      <tr>
        <td>姓名</td><td>分数</td>
      </tr>
      <tr>
        <td>阳光</td><td>98</td>
      </tr>
      <tr>
        <td>灿烂</td><td>89</td>
      </tr>
    </table>

    <p>注：在table标签上设置cellpadding=“x” 来增加单元格填充距离 默认为0</p>
    <table border="1" cellspacing ="0" width="200" height="100"
           cellpadding="10">
      <tr>
        <td>姓名</td><td>分数</td>
      </tr>
      <tr>
        <td>阳光</td><td>98</td>
      </tr>
      <tr>
        <td>灿烂</td><td>89</td>
      </tr>
    </table>

    <p>注：表格美化-属性</p>
    <table border="1" cellspacing ="0" width="500" height="500"
           cellpadding="10">
      <tr>
        <td>属性名</td><td>属性值</td><td>作用</td><td>可设置哪个标签上</td>
      </tr>
      <tr>
        <td>bgcolor</td><td>颜色英文或rgb值</td><td>表格背景颜色</td><td>table，tr，th，td</td>
      </tr>
      <tr>
        <td>align</td><td>left，center，right</td><td>设置单元格水平方向位置</td><td>th，td</td>
      </tr>
      <tr>
        <td>vlign</td><td>top，middle，bottom</td><td>设置单元格水平方向位置</td><td>th，td</td>
      </tr>
      <tr>
        <td>colspan</td><td>数字</td><td>跨列合并</td><td>td</td>
      </tr>
      <tr>
        <td>rowspan</td><td>数字</td><td>跨行合并</td><td>td</td>
      </tr>
      <tr>
        <td>align</td><td>center</td><td>居于浏览器中间</td><td>table</td>
      </tr>
    </table>

    <p>注：表格美化-全家桶例子</p>
    <table border="1" cellspacing ="0" width="200" height="100" cellpadding="0"
           align="center">
      <tr>
        <td align="center">姓名</td><td align="center">分数</td>
      </tr>
      <tr>
        <td bgcolor="orange">阳光</td><td>98</td>
      </tr>
      <tr valign="bottom">
        <td align="left">灿烂</td><td align="right">89</td>
      </tr>
      <tr >
        <td rowspan="2">4行1列和5行1列合并啦</td><td>4行2列</td>
      </tr>
      <tr >
        <td>5行2列</td>
      </tr>
      <tr >
        <td colspan="2">6行1列和6行2列合并啦</td>
      </tr>
    </table>

（在整个页面中间 放大看一下）

表单标签

表单标签

<!-- 表单标签-->
    <!-- 表单标签属性 action属性 提交表单要执行的操作 点击提交 表单数据发送到 action属性值的位置
                     target 规定提交表单后在何处显示响应
                               _blank	   新窗口。
                               _self	   当前窗口。
                               _parent	 父框架。
                               _top	     窗口的整个 body 中。
                               framename 命名的 iframe 中。-->
    <h3>表单标签</h3>
    <form>
    </form>
    <!-- 表单元素-->
    <form action="biaoqian.html">
      文本框：<input type="text"><br>
      密码框：<input type="password"><br>
      多选框：<input type="checkbox">苦瓜
              <input type="checkbox">甜瓜
              <input type="checkbox">吃瓜<br>
      单选框：<input type="radio" name="good">俊男
              <input type="radio" name="good">靓女
              <input type="radio" name="goods">因为我的name属性和俊男靓女不一样 所以我可以和俊男或是靓女一起被选择<br>
              <!-- name使用在type="radio"中进行归组 （所有表单元素都可以使用-->
      文件域：<input type="file"><br>
      时间域：<input type="date"><br>
              <input type="datetime"><br><!-- 格式自定 -->
              <input type="datetime-local"><br>
      颜色域：<input type="color"><br>
      邮箱域：<input type="email"><br><!-- 输入邮箱不符合规则无法提交 submit -->
      文本域：<textarea row="10" cols="30"></textarea><br />
      下拉列表：<select>
        <option>美酒</option>
        <option>咖啡</option>
        <option>美酒+咖啡</option>
      </select><br />
      普通按钮：<input type="button"><br>
      重置按钮：<input type="reset"><br>
      提交按钮：<input type="submit"><br>
      图片按钮：<input type="image" src="../assets/tupian.png"><br>

      <!-- 带点东西的表单元素-->
      <p>注：属性value---默认值</p>
      用户名：<input type="text" value="admin"><br>
      密&nbsp;码：<input type="password" value="123456"><br>
      按&nbsp;钮：<input type="button" value="我是个按钮"><br>

      <p>注：属性placeholder---文本框或密码框---提示输入</p>
      用户名：<input type="text" placeholder="请输入用户名"><br>

      <p>注：属性size---文本框或者密码框长度默认20<br />
             属性maxlength---文本框或者密码框输入值长度</p>
      用户名1：<input type="text" value="默认长度20"><br>
      用户名2：<input type="text" value="设置长度10" size="10"><br>
      用户名3：<input type="text"><br>
      用户名4：<input type="text" maxlength="5"><br>

      <p>注：属性checked---checked="checked" 简写 checked---单选或多选框，默认被选中</p>
      <input type="radio" name="good" checked>俊男
      <input type="radio" name="good">靓女<br />
      <p>注：属性disabled---disabled="disabled" 简写 disabled---禁用</p>
      用户名：<input type="text" value="admin" disabled><br>
      <p>注：属性readonly---readonly="readonly" 简写 readonly---只读</p>
      用户名：<input type="text" value="admin" readonly><br>
      <p>注：属性selected---selected="selected" 简写 selected---下拉列表某个option默认被选中</p>
      下拉列表：<select>
        <option>美酒</option>
        <option>咖啡</option>
        <option selected>美酒+咖啡</option>
      </select><br />
      <!-- label标签-->
      <!-- 属性 for 与 input标签的id关联-->
      <h3>label标签</h3>
      <p>注：label标签 对应for值=id值</p>
      选择：
      <input type="radio" name="good" id="nan"><label for="nan">俊男</label>
      <input type="radio" name="good" id="nv"><label for="nv">靓女</label><br />
      <label for="id">用户名：</label>
      <input type="text" value="admin" id="id"><br>
    </form>

分组表单标签

<h3>分组表单标签</h3>
     <form>
      <fieldset>
        <legend>个人基本信息</legend>
        姓名：<input type="text" placeholder="请输入姓名"><br />
        住址：<input type="text" placeholder="请输入住址">
      </fieldset>
      <fieldset>
        <legend>学校基本信息</legend>
        学校名称：<input type="text" placeholder="请输入学校名称"><br />
        学校地址：<input type="text" placeholder="请输入学校地址">
      </fieldset>
    </form>

内联框架标签

<h3>内联框架标签</h3>
    <p>注：在页面里嵌套一个页面，方便页面复用</p>
    <!--属性target的值 要与 iframe的name属性值保持一致 也就指定了要渲染的位置为此值的iframe框架里-->
    <p>
      <ul>
        <li>
          <a href="overview.html" target="kuangjia">首页</a>
        </li>
        <li>
          <a href="login.html" target="kuangjia">登录</a>
        </li>
      </ul>
    </p>
    <p>
      <iframe name="kuangjia" width="600" height="300"></iframe>
    </p>
    <p>
      页面底部
    </p>
<!--  补充：
      内联框架标签<iframe name="kuangjia" width="600" height="300"
                         frameborder="0" scrolling="auto"></iframe>
                         其中，属性frameborder指定框架边框的宽度
                         当设置frameborder="0"时 无边框
                         属性scrolling滚动条设置
                         当设置scrolling="auto"时 表示内容超出范围自动加上滚动条 -->

点击首页后

点击登录后

今日内容有点多 慢慢消化 ~

下期见✌