Java 二阶段 html

最新推荐文章于 2023-02-05 17:28:15 发布

菜鸡的程序猿

最新推荐文章于 2023-02-05 17:28:15 发布

阅读量188

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/m0_45196258/article/details/108220499

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

书写规范

在这里插入图片描述

排版标签

在这里插入图片描述

Font

在这里插入图片描述

文本格式化标签

在这里插入图片描述

无序列表

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020082514480810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MTk2MjU4,size_16,color_FFFFFF,t_70#pic_center) ## 有序列表

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200825144853855.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MTk2MjU4,size_16,color_FFFFFF,t_70#pic_center)

<!-- img标签
   src:图片的地址
   地址有两种表示方式：
   （1）相对路径，同一个网站使用，图片和网页在同一个网站中
   （2）绝对路径。不同网站之间，图片和网页不在网站中。
   width:宽度
   height:高度
   align:对其方式
   alt:替换信息，当图片不显示，会显示该信息
   title:鼠标悬停信息
   -->
   <img src="img/1.png" width="500" height="200" align="middle" title="啊哈哈" alt="aha"/>这是一个照片
   <img src="img/6.png" width="500" height="200" title="啊哈哈" alt="aha" align="top"/>这是一个照片

 <!-- target:
   _blank:新窗口打开
   _self:自身窗口打开(默认)
   _top:在顶部窗口打开
   _parent:在父窗口中打开
   href:在同一个网站中，用相对路径
   不再同一个网站中，用绝对路径
   _search:可以是任何名字，如果有该网页，不会再创建新的网页。
    -->
   <a href="http://www.baidu.com" target="_search">这是个连接</a>
   
   <!-- 实现锚链接 -->
   
   <a href="#top">回到顶部</a>
   <a href="#touch">回到中间</a>
   <a href="123.html#skip">跳转</a>

表格标签

<!-- 表格标签
   table:定义表格
     width:宽度
     height:高度
     border:边框
     align:表格在页面的水平的位置。
     bgColor:背景颜色
   tr:定义行
    align:内容水平对齐方式
    valign:内容垂直对齐方式。
   td:定义列
    align:内容水平对齐方式
    valign:内容垂直对齐方式。
   th:定义列（加粗居中显示，定义标题）
    -->
  <table border="1" width="500" height="300" align="center" bgcolor="aqua">
   <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>地址</th>
   </tr>
   <tr align="center" valign="middle" bgcolor="azure">
    <td>小轩</td>
    <td>男</td>
    <td>北京</td>
   </tr>
   <tr align="center" valign="middle">
    <td>小轩</td>
    <td>男</td>
    <td>北京</td>
   </tr>
   <tr align="center" valign="middle" bgcolor="azure">
    <td>小轩</td>
    <td>男</td>
    <td>北京</td>
   </tr>
  </table>

<!-- 列合并，行合并 把自己的单元格也要算上
   colspan:列合并 是针对单元格
   rowspan：行合并 是针对单元格
    -->
<table border="1" width="500" height="300" align="center" bgcolor="aqua">
   <tr>
    <th colspan="3"></th>
   </tr>
   <tr align="center" valign="middle" bgcolor="azure">
    <td rowspan="3"></td>
    <td></td>
    <td></td>
   </tr>
   <tr align="center" valign="middle">
    <td></td>
    <td></td>
   </tr>
   <tr align="center" valign="middle" bgcolor="azure">
    <td></td>
    <td></td>
   </tr>
  </table>

表单

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <!-- 定义表单
   form:
    action:表单提交的服务器的地址，默认当前页面
    method:调教方式 get post
    enctype:编码类型 application/x-www-form-urlencoded
      multipart/form-data 文件上传
    补充两个属性：
    readonly:"readonly" 只读
    disabled:disabled 禁用
    type:表单元素的类型
     text:文本框
     password:密码框
     radio:单选按钮
     checkbox:复选框
     button：普通按钮
     submit：提交按钮
     reset:重置按钮
     img：图片提交按钮
     file:文件
     hidden:隐藏
     
     name:表示提交给服务器的名称,要想把数据发给服务器必须写name属性
     value:表示发给服务器的数据，文本框，密码框输入内容
     checked:checked表示默认选中
     selected:selected="selected" 表示下拉框默认选择
     multiple="multiple" :表示可以多选
   -->
  <form action="" method="post">
   <!-- text -->
   用户名：<input type="text" name="username" /><br/>
   <!-- password -->
   密码：<input type="password" name="password"/><br/>
   <!-- submit -->
   提交：<input type="submit" /><br/>
   <!-- radio -->
   <input type="radio" name="gender" value="man" checked="checked"/>男<br/>
   <input type="radio" name="gender" value="woman" />女<br/>
   <!-- checkbox  -->
   <input type="checkbox" name="hoppy" value="code" />打代码<br />
   <input type="checkbox" name="hoppy" value="tea" />喝茶<br />
   <input type="checkbox" name="hoppy" value="basketball" />篮球<br />
   <!--file  -->
   <input type="file" name="photo" /><br />
   <!-- hidden 隐藏-->
   <input type="hidden" name="id" value="2333333" /><br />
   <!-- emil -->
   邮箱：<input type="email" name="emil" /><br />
   <!-- number -->
   年龄：<input type="number" name="age" value="1" />
   <!-- range -->
   评分：<input type="range" name="level"value="0" min="1" max="10" />
   <!-- color -->
   颜色：<input type="color" name="color"  />
   <!-- date -->
   出生日期：<input type="date" name="born" /><br/>
   <!-- 日期加时间 -->
   出生日期：<input type="datetime-local" name="date" /><br/>
   <!-- select option -->
   <select name="city" multiple="multiple"  >地区
    <option name="beijing">北京</option>
    <option name="shanghai" selected="selected">上海</option>
    <option name="nanjing">南京</option>
    <option name="nanjing">南京</option>
    <option name="nanjing">南京</option>
    <option name="nanjing">南京</option>
   </select>
   <!-- comment -->
   自我评价：<textarea name="comment" cols="20" rows="5"></textarea>
   <!-- button -->
   <input type="button" name="button" value="普通按钮" />
   <input type="submit" name="submit"value="提交按钮" />
   <input type="reset" value="重置按钮" name="reset" />
   <button type="button">普通按钮</button>
   <button type="reset">重置按钮</button>
   <button type="submit">提交按钮</button>
   <!-- image -->
   <input type="image" src="img/1.png" height="40" />
  </form>
 </body>
</html>

框架标签(frameset &frame)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <frameset rows="20%,*" border="2" bordercolor="skyblue" frameborder="1">
  <frame noresize="noresize" name="top" src="top.html" />
  <frameset cols="30%,*">
  <frame noresize="noresize" name="left" src="left.html" />
  <frame name="right" noresize="noresize" src="right.html"/>
  </frameset>
 </frameset>
</html>

left:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <a href="shuma.html" target="right">数码</a><br />
  <a href="lingshi.html">零食</a><br />
  <a href="wanju.html" >玩具</a><br />
  <a href="shechi.html" target="right">奢侈品</a><br />
  <a href="qiuxie.html" target="right">球鞋</a><br />
 </body>
</html>