HTML表单实战

       

代码如下

<from>
 <input type="text">
 <input type="text" value="昼白">
 <input type="text" placeholder="昼白">
 <input type="text" placeholder="限制输入最多6位" maxlength="6">
 <input type="password" placeholder="密码" maxlength="16">
 <input value="只读" readonly>
<input type="text" placeholder="表格长度增加"  size="30">
 <textarea>下方为代码对照</textarea>
 </from>

 


  1. 1.爱国
  2. 2.民主
  3. 3.自由
  4. 4.和谐

代码如下

<ol>
<li>爱国</li>
<li>民主</li>
<li>自由</li>
<li>和谐</li>
</ol>

 

标题文字

内容文字

 

对照

<fieldset>
<legend>标题文字</legend>
内容文字
</fieldset>

    网页 ,就是存储在服务器上的由HTML标签组成的文件,这个文件可以通过网络传输给客户端的浏览器,在浏览器中能够显示出对应视图(界面)

    3.1 HTML网页文件

    • 网页文件:就是一个后缀名为.htm或者.html的文件

    • HTML标签:由尖括号和特定的单词组成的组合,能够被浏览器解析的标记

      • 单标签

        <input/>
      • 双标签

        <html>
            子标签
        </html>
    • HTML网页文件基本结构

      • 第一行通过doctype声明HTML文档规范

        <!DOCTYPE html>
      • 网页文件有一对根标签 html

      • html根标签包含两对子标签: head 和 body

        • head 声明页面相关的属性

        • body 用于定义网页中的内容

      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="UTF-8">
              <title>WITPT</title>
          </head>
          <body>  
              
          </body>
      </html>

    3.2 常用的HTML标签

    3.2.1 显示标签
    用于将文本、图片、声音、视频显示在网页中
    • 文本

      <label style="color:orange;font-size:25px;font-family: 华文行楷;">武汉工程大学</label>
    • 图片

      <img width="300" height="100" src="img/d.jpg"/>
    • 声音

      <audio controls="controls" autoplay="autoplay" src="http://music.163.com/song/media/outer/url?id=1359595520"></audio>
    • 视频

      <video controls="controls" width="400" height="300"  src="http://music.163.com/song/media/outer/url?id=1359595520"></video>
    3.2.2 输入标签
    在网页中提供各种输入视图(文本框、单选按钮、复选框...)供用户输入数据
    • input

      <!--HTML4-->
      文本输入框:<input type="text"/><br/>
      密码输入框:<input type="password"/><br/>
      文件选择框:<input type="file"/><br/>
      单选按钮:<input type="radio"/><br/>
      复选框:<input type="checkbox"/><br/>
      普通按钮:<input type="button" value="点我呀"/><br/>
      提交按钮:<input type="submit"/><br/>
      重置按钮:<input type="reset"/><br/>
      图片按钮:<input type="image" src="img/btn.bmp"/><br/>
      
      <!--HTML5-->
      颜色:<input type="color"/><br/>
      日期:<input type="date"/><br/>
      数字:<input type="number"><br/>
    • select 下拉菜单

      <select>
          <option value="">武汉</option>
          <option value="">北京</option>
          <option value="">上海</option>
          <option value="">深圳</option>
          <option value="">广州</option>
      </select>
    • textarea 文本域 多行输入框

      <textarea rows="4" cols="20"></textarea>
    3.2.3 功能标签

    在网页中,没有特定的显示效果,但是能够实现特定的功能

    • 表单 form

      • form用于提交数据,当点击form中的submit按钮时,会将输入框的值提交到form表单action属性置顶的url

      • action属性,指定提交数据的目标地址

      • method属性,指定提交数据的方式,如果不指定默认为get;可选post(提交数据隐藏提交)

      • form表单中的输入框需要name属性

      <form action="https://www.baidu.com/s" method="get">
          <input type="text" name="wd" placeholder="请输入关键字">
          <input type="submit" value="百度一下"/>
      </form>
    • 超链接 a

      • 点击文字跳转到href属性指向的地址(URL)

      <a href="page1.html">注册</a>
    3.2.4 布局标签
    • 换行 br

    • 表格 table

    本站部分文章资源来源于互联网,仅供学习交流,如若要商用,请购买正版!
    若不听劝告,网友造成出现一切后果,与本站本人无关
    本站有些资源未经测试,请注意网络安全,本站不对下载的资源造成的后果负责
    免责声明
    作者:昼白
    转载请注明来源:https://www.zhoubaiwl.club/1699.htm
    THE END
    分享
    二维码
    打赏
    < <上一篇
    下一篇>>