JAVAWEB-表单标签及常用标签（HTML）

今天，又好开心～～是因为四级过啦～～然后呢
写一篇网页标签的简单总结，并且QVQ好好准备6级。

1.html操作思想
使用标签把操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化。
2.font标签
属性有size 1-7 —- color:英文单词或者十六进制数例如# 00FFFF(我挺喜欢的颜色)

<h1>..<h1>到<h6>..</h6>越来越小且自动换行

3html注释

<!-- 注释内容 -->

4.列表标签

<dl>
<dt></dt>
<dd><dd>
</dl>

--有序
<ol>
<li>
</li>
</ol>
--无序
<ul>
<li>
</li>
</ul>

5.图像标签

<img src="图片路径" width="" height="" alt="图片上显示内容 （浏览器兼容性差 别用）">

6.路径
同一级目录：直接写
下一层目录：images/1.jpg
在上层目录： ../
7.超链接标签

<a href="#(路径)">显示在页面上的内容</a>
-打开方式
target="_self"(默认)
target="_blank"(新窗口打开)

表格标签

<table>
<tr>
<td></td>
<th><th>//有加粗和居中的特点
</tr>
</table>
技巧：数多少行，在数每行有多少个单元格

表单标签（important）很重要的～～～

<form> 表单的范围
-action  提交到的地址
-method  提交方式 1.get 2.post
get 和 post 的区别 要知道 //后面展示的代码中写到此区别
enctype属性（上传时候使用）

输入项
*输入项里面写name属性
*普通输入  <input type="text">
*密码输入项 password
*单选框  radio
*复选框  checkbos
*下拉框
<select name="">
<option value=""></option>
</select>
*文本域  <textarea cols="" rows=""></textarea>
*文件 file
*提交按钮 submit
*重置 reset
*使用图片提交 <input type="image" src="路径">
*隐藏项  type="hidden"
*普通按钮 button

div 和 span
div自动换行
span一行显示

框架标签

<frameset rows="80,*">
-rows:按行进行划分

-cols:按列进行划分
<frame name="frame" src="2.html">
<frame name="bottom" src="3.html">
      具体显示页面
      使用框架标签,不能写在body里面，需要去掉body标签
if(想让左边页面的超链接在右边页面显示)
      超链接属性target设置成 frame的名称

表单标签的实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--可以提交数据到开心网的服务器，这个过程可以使用表单标签 -->

<form class="" action="index.html" method="get"> <!-- 定义表单范围 -->
<!-- action:提交到地址，默认提交到当前页面 -->
<!-- method:表单的提交方式 -->
<!-- 常用的有两种1.get2.post 默认为get -->
<!-- enctype:文件上传需要设置此选项 -->
      手机号码:<input type="text" name="phone" value=""><br/>
      密码:<input type="password" name="pwd" value=""><br>
<!-- 默认选择属性 checked=checked-->
      男:<input type="radio" name="sex" value="" checked="checked">
      女:<input type="radio" name="sex" value="">

      爱好:<input type="checkbox" name="hobby" value="" checked="checked">篮球
<input type="checkbox" name="hobby" value="">羽毛球
<input type="checkbox" name="hobby" value="">乒乓球

<input type="file" name="file" value=""><!--文件上传 用post提交 get有大小限制-->
      生日:<!--下拉选项 不是input选项-->
<select class="" name="birth">
<option value="0">请选择</option>
<option value="1991" selected="selected">1991</option>
<!-- selected=selected 默认选择(下拉框)用selected -->
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
</select><br>
<!--文本域-->
      自我描述:<textarea name="des" rows="8" cols="40"></textarea>

<!-- 隐藏项 -->
      隐藏项:<input type="hidden" name="name" value=""><br>
<!-- 提交按钮 -->
<input type="submit" name="submit" value="注册" >

<!-- 使用图片来提交 -->
<!-- <input type="image" name="submitImage" src="图片路径" value=""> -->
</form>
</body>
</html>

常用标签的实例

<html>
<head>
<!-- head里头的标签是头标签 -->
<meta charset="utf-8">
<title></title>
<!-- title标识标签上显示的内容 -->
<!-- meta设置页面的相关内容 -->
<meta name="keywords" content="狮子">
<meta http-equiv="refresh" content="3;url=01-hello.html"> 
<!-- 页面定时跳转。 http-equiv模拟请求 3秒后 url跳转到的路径 -->
<base href="#" target="_blank" />
<!-- base标签 设置超链接的基本设置 target="" 此后所有a标签不同设置target都是此属性 -->
<!-- link 引入外部文件 可以引入 css文件-->
</head>
<body>
<h1>头标签</h1>
<a href="#" target="_blank">超链接</a>
<!-- _blank 新窗口打开 -->
<b>天之道</b>
<u>损有余而补不足</u>
<i>是故虚胜实</i>
<s>不足胜有余。</s>
<!-- b标签 加粗 -->
<!-- u标签 下划线 -->
<!-- i标签 斜体 -->
<!-- s标签 删除线 -->
<!-- pre标签 原样输出 -->
<hr/>
    3<sub>100</sub> <br>     
<!-- sub 下标 -->
    4<sup>200</sup> <br>
<!-- sup 下标 -->
<hr/>
<div class="">
      1
</div>
<div class="">
      2
</div>
<div class="">
      3
</div>
<!-- div会自动换行 span会在一行显示 -->
<hr>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>

秒客网

JAVAWEB-表单标签及常用标签（HTML）

相关文章