html标签学习与联系

<%@ page contentType="text/html;charset=UTF-8" language="java" %>jsp中将界面中的乱码调整为中文
<html>
  <head>头部标题，出现在最上面的标签上
    <title>不啻微茫</title>标题
  </head>
  <!--表单中name表示的是mysql的名称，提交的是value中的内容-->
  <h1>标签1</h1>标题，即为界面的大标题
  <h2>标签2</h2>副标题
  <h3>标签3</h3>
  <hr>
  <font face="宋体" size="5" color="#f0f8ff">font标签</font>font调整字体样式，颜色，大小
  <!--html 表示颜色：英文字母，rgb（值1，值2，值3），#值1值2值3 00~FF-->字体颜色的表示方法
  <hr>换行符
  <p>wojudingxihuanni</p> p 段落
  <p>buzhidaonishifouxihuanwo</p>
  wojuedigxihuanliuzijin<br>
  hsiahdihsdia<br>
<hr>
  <b>字体加粗</b>修改字体样式
  <i>字体倾斜</i>
  <u>字体下划线</u>
<hr>
  <center>将文字表示在文本中心
    <b>
      <font color="red" size="10" face="楷体">
        文字居中
      </font>
    </b>
  </center>
  <img src="123.jpg" width=100% height=100%>插入图片和调整图片的大小

<hr>
  <center>
    <font size="100">
  <a href="https://www.stdu.edu.cn/"_blank>石家庄铁道大学</a>跳转超链接
<!-- _blank跳转外部资源  _self默认值，在当前界面打开-->
    </font></center>
<hr>
  <!--有序列表(ol)和无序列表(ul),列表项(li)-->
  <ol type="A调整序列名">有序列表
    <li>one</li>
    <li>two</li>
    <li>there</li>
  </ol>
  <ul>无序列表
    <li>one</li>
    <li>two</li>
    <li>there</li>
  </ul>
<br>


  <table border="1" cellspacing="0" width="500">表格
    <tr align="center">
      <th>id序号</th>
      <th>品牌</th>
      <TH>总裁</TH>
    </tr>
    <tr align="center">
      <td>001</td>
      <td>华为</td>
      <td>孟晚舟</td>
    </tr>
    <tr align="center">
      <td>002</td>
      <td>华为2</td>
      <td>孟晚舟2</td>
    </tr>
    <tr align="center">
      <td>003</td>
      <td>华为3</td>
      <td>孟晚舟3</td>
    </tr>
  </table>
  <br>
  <hr>
  <br>

  <table border="1" cellspacing="0"无边框归零 width="500">将table中的表格，设置为无边框和特定大小
    <tr align="center">这一行的文字在表格中居中
      <th colspan="2">品牌</th>将表格中的这一行的两列合并
      <TH>总裁</TH>
    </tr>
    <tr align="center">
      <td>001</td>
      <td>华为</td>
      <td>孟晚舟</td>
    </tr>
    <tr align="center">
      <td rowspan="2">002</td>将表格中的这一列的两行合并
      <td>华为2</td>
      <td>孟晚舟2</td>
    </tr>
    <tr align="center">

      <td>华为3</td>
      <td>孟晚舟3</td>
    </tr>
  </table>

<!-- 表单标签制作-->
  <!--
  from:
    action:指定表单数据提交的URL
       *表单数据要想要被提交，则必须指定其name属性
    method:指定表单提交的方式
    1.get：默认值 *请求的参数会拼接在URL后面 *url的长度限制在请求体中
    2.post：      *请求参数会在http请求协议的请求体中
  -->

  <form action="#" method="get">
    表单1号
    <input type="text" name="username">
    <input type="submit">
  </form>
  <hr><br>
  <!-- select:定义下拉标签 option：定义列表项-->
  <!--textarea:文本域-->
  <!--type取值：text(默认值。定义输入字段)
               password：定义密码字段
               radio：定义单选按钮
               checkbox：定义复选框
               file：定义隐文件上传按钮
               hidden：定义隐藏的输入字段
               submit：定义提交按钮，把表单按钮发送到服务器
               reset：定义重置按钮，重置按钮会清除表单中的所有数据
               button：定义点击按钮
  -->
  <from action="#" method="post">
    <input type="hidden" name="id" value="123"><!--隐藏域-->

    <laber for="username">用户名:</laber><!--达到点击用户名，光标出现在输入框中-->
    <input type="text" name="username" id="username"><br>
    <laber for="password">密码:</laber>
    <input type="password" name="username" id="password"><br>

    性别:<input type="radio" name="gender" value="1" id="male"><laber for="male">男</laber>
    <input type="radio" name="gender" value="2" id="female"><laber for="female">女</laber>
    <br>
    <!--复选框-->
    <laber>爱好</laber>
    <input type="checkbox" name="hobby" value="1">旅游
    <input type="checkbox" name="hobby" value="2">电影
    <input type="checkbox" name="hobby" value="3">剑道
    <br>
    城市
    <select name="city">
      <option value="beijing">北京</option>
      <option >上海</option>
      <option >天津</option>
    </select>
    <br>   
    <!--文本域-->
    个人描述:
    <textarea cols="20" rows="20" name="desc"></textarea>
    <!--cols是列 rows是行-->
    <br>
    <br>
    <laber>头像</laber>
    <input type="file"><br>
    <br><input type="submit" value="免费注册">
    <br><input type="reset" value="重置">
    <br><input type="button" value="一个按钮">
  </from>
  </body>
</html>