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

最新推荐文章于 2024-04-26 20:24:24 发布

YinXinLion

最新推荐文章于 2024-04-26 20:24:24 发布

阅读量2.7k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_27602093/article/details/52254417

版权

JavaWeb 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

今天，又好开心～～是因为四级过啦～～然后呢
写一篇网页标签的简单总结，并且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>

YinXinLion

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JAVAWEB-表单标签及常用标签（HTML）

今天，又好开心～～是因为四级过啦～～然后呢写一篇网页标签的简单总结，并且QVQ好好准备6级。1.html操作思想使用标签把操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化。 2.font标签属性有size 1-7 —- color:英文单词或者十六进制数例如# 00FFFF(我挺喜欢的颜色)<h1>..<h1>到<h6>..</h6>越来越小且自动换行3ht
复制链接

扫一扫

专栏目录