• 2、HTML 基础知识


    一、HTT(PHyper Text Markup Language)即超文本语言。

      特点:
        1、通过标签来定义的语言,代码都是由标签所组成
        2、不区分大小写
        3、由<html>开始</html>结束,里面由头部分<head></head>和体部分<body></body>两部分组成,例如

    <html>
      <head>
        <title>Hello Page</title>
      </head>
      <body>
         Hello Word!
      </body>
    </html>

        4、多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能(如<br/>、<hr/>),或者没有要修饰的内容可以在标签内结束。

        5、标签中的属性:属性名与属性值之间用"="连接,属性值可以用双引号或单引号或都不用引号,一般会用双引号

          <标签名 属性名="属性值"> 数据内容 </标签名>
          <标签名 属性名="属性值" />

    二、HTML常用标签

      1、<font>:字体标签

        <font size=5 color="red">内容</font>

      2、<h1><h2><h3>...<h6>:标题标签

        <h1>Hello Word!<h1>

      3、<img>:图像标签

        <img src="图片路径" alt="图片说明文字" height="" width="" />  

      4、<table>:表格标签

          a)、组成:

            标题标签:<caption>
            表头标签:<th> 本身有居中、加粗特性
            行标签:<tr>
            单元格标签:<td>
          b)、合并行:rowspan="2"
          c)、合并列:colspan="2"

      5、<a>:超链接标签

         <a href="http://www.baidu.com" target="_blank">百度</a>

          href属性:可以是url,也可以是本地文件
          target属性:指定在哪个窗口打开(本窗口或新建窗口),默认为本窗口中打开

        <a name="top">顶部位置</a> 定义一个标记
        <a href="#top">回到顶部位置</a> #标记
        【注】在使用定位标记时一定要在href值的开始加入"#"

      6、<form>:表单。用于与服务器端进行交互

        <form method="" action=""></form>

        a)、method:属性指定表单提交方式(get或post)默认为get;

          aa)、如请求方式为GET方式,则可以在请求的URL地址后以?的形式带上提交给服务器的数据,多个数据之间以&进行分隔,例如:GET /mail/1.html?name=abc&password=xyz
          bb)、GET方式的特点:在URL地址后附带的参数是有限制的,其数据容量通常不能超过1K
          cc)、如请求方式为POST方式,则可以在请求的实体内容中向服务器发送数据,Post方式的特点:传送的数据量无限制
          dd)、Get对于敏感信息不安全; POST对于敏感信息安全。表单提交尽量使用POST

        b)、action:属性指定表单提交地址

      7、<input>:<input type="" name="" id="" value="" />

        a)、type属性:值不同,对应的组件不同

          text:          文本框,输入的文本可见
          password: 密码框,输入的文本不可见
          radio           单选框,当有多个单框时,只能有一个被选中,那么这些单框的name值必须相同
          checkbox:  复选框
          file:            文件上传,可以进行文件选择的组件
          button:      按钮
          submit:      提交按钮
          reset:        重置按钮
          hidden:     隐藏标签,在页面不显示,但在提交的时候随其他内容一起提交至服务端

        b)、name属性:指定标签的名称,多个标签可以重名,一般只有radio、checkbox同名

        c)、id属性:指定标签的唯一名称,一个页面中每个标签的id不能重名

      8、<select>:下拉框标签

        <select name="" multiple="multiple" size="">
          <option value=""></option>
        </select>

        每个下拉菜单项由option进行封装。multiple属性可以指定下拉框的显示方式。当使用multiple属性时,size属性可以指定显示数量

      9、<textarea>多行文本框:

        <textarea name="" id="" cols="30" rows="10"></textarea>

      10、<div>:层标签

      11、其他:

        <p>标签:段落标签
        <pre>标签:可以保留数据的原有格式
        <b>标签:加粗
        <i>标签:斜体
        <u>标签:下划线
        <sub>标签:下标
        <sup>标签:上标

          ……

               更多查找《java web程序开发参考手册 》的第二章目录,里面列得很全,或上 w3school 查询。 

      【注】表单组件通常都需要定义name和value属性,因为要将数据发送至服务端,服务端只有知道了该name的值才可以对提交的数据进行分别获取。

    三、特殊字符:

      1、&lt;(<)

      2、&gt;(>)  

      3、&amp;(&)  

      4、&quot;(")  

      5、&nbsp;(空格)

     四、实例:

     1 <html>
     2   <head>
     3     <title>HTML练习</title>
     4   </head>
     5   
     6   <body>
     7       <form action="">
     8           <table border="1" cellspacing="0">
     9               <caption><b>注册信息</b></caption>
    10               <tr>
    11                   <td>用户名:</td>
    12                   <td>
    13                       <input type="text" name="userName" id="userName" value="" />
    14                   </td>
    15               </tr>
    16               <tr>
    17                   <td>密码:</td>
    18                   <td>
    19                       <input type="password" name="pwd" id="pwd" value="" />
    20                   </td>
    21               </tr>
    22               <tr>
    23                   <td>性别:</td>
    24                   <td>
    25                       <label><input type="radio" name="sex" value="nan" /></label>  
    26                       <label><input type="radio" name="sex" value="nv" /></label>
    27                   </td>
    28               </tr>
    29               <tr>
    30                   <td>爱好:</td>
    31                   <td>
    32                       <label><input type="checkbox" name="hobby">旅行</label>
    33                       <label><input type="checkbox" name="hobby">运动</label>
    34                       <label><input type="checkbox" name="hobby">听歌</label>
    35                       <label><input type="checkbox" name="hobby">看书</label>
    36                   </td>
    37               </tr>
    38               <tr>
    39                   <td>身份证号:</td>
    40                   <td>
    41                       <input type="text" name="cId" id="cId" />
    42                   </td>
    43               </tr>
    44               <tr>
    45                   <td>手机号:</td>
    46                   <td>
    47                       <input type="text" name="phone" id="phone" />
    48                   </td>
    49               </tr>
    50               <tr>
    51                   <td colspan="2" style="text-align: center;">
    52                       <input type="submit" value="注册" />
    53                       <input type="reset" value="重置" />
    54                   </td>
    55               </tr>
    56           </table>
    57       </form>
    58   </body>
    59 </html>
  • 相关阅读:
    VS密钥
    继承中delelte对象子类析构函数不被执行
    [LeetCode] Merge k Sorted Lists
    [LeetCode] Spiral Matrix II
    [LeetCode] Multiply Strings
    [LeetCode] Valid Number
    [LeetCode] Search Insert Position
    [LeetCode] Spiral Matrix
    [LeetCode] Valid Parentheses
    [LeetCode] Rotate List
  • 原文地址:https://www.cnblogs.com/czj-zhm/p/5839393.html
Copyright © 2020-2023  润新知