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

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

  1. <html>
  2. <head>
  3. <title>Hello Page</title>
  4. </head>
  5. <body>
  6. Hello Word!
  7. </body>
  8. </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>

2、HTML 基础知识的更多相关文章

  1. .NET面试题系列[1] - .NET框架基础知识(1)

    很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...

  2. RabbitMQ基础知识

    RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...

  3. Java基础知识(壹)

    写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...

  4. selenium自动化基础知识

    什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...

  5. [SQL] SQL 基础知识梳理(一)- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  6. [SQL] SQL 基础知识梳理(二) - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  7. [SQL] SQL 基础知识梳理(三) - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  8. [SQL] SQL 基础知识梳理(四) - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  9. [SQL] SQL 基础知识梳理(五) - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

  10. APP测试入门篇之APP基础知识(001)

    前言        最近两月比较多的事情混杂在一起,静不下心来写点东西,月初想发表一遍接口测试的总结,或者APP测试相关的内容,一晃就月底了,总结提炼一时半会也整不完.放几个早年总结内部培训PPT出来 ...

随机推荐

  1. 【java开发】数据类型

    ok,为期两天的ubuntu常用命令学习结束,现在开始java语言的学习. 上篇结尾说了ubuntu下的jdk文件安装,现在顺便说一下win下的jdk环境变量配置 在官网下载符合系统的jdk文件,可以 ...

  2. monkeyrunner之坐标或控件ID获取方法(六)

    Monkeyrunner的环境已经搭建完成,现在对Monkeyrunner做一个简介. Monkeyrunner工具提供了一套API让用户/测试人员来调用,调用这些api可以控制一个Android设备 ...

  3. HTML5中支持新的媒体元素有这些

    HTML5对媒体的支持性很强,支持以下媒体元素: · audio  定义音频 · video  定义视频 · embed  作为外部应用的容器 · source  多种媒体源的支持 · track   ...

  4. 不封装ajax 带url参数调用接口

    html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. 银行卡BIN: Bank Identification Number

    What is a 'Bank Identification Number - BIN'A bank identification number (BIN) is the initial four t ...

  6. 数据表格 - DataGrid - 查询

    toolbar头部工具栏 <script type="text/javascript"> $(function () { $("#datagrid" ...

  7. 利用DotSpatial发布WMS, WFS服务

    我们遇到的几个给政府部门做的GIS系统,一般都只要面子,只要好看,领导高兴得不得了,点点这里点点那里,哟,这按钮一点还会转,领导开心得跟朵花似的...要是搞个各种分析什么的全堆上来,他就嫌烦了...这 ...

  8. 了解 JS 原型

    原型概念 当创建了一个函数时,就会根据一组特定的规则为该函数创建一个 prototype 属性,这个属性指向函数的原型对象.在默认情况下,所有原型对象都会自动获得一个constructor 的属性 这 ...

  9. oracle误删表解决方案

    ·delete(删除一条记录)·drop或truncate删除表格中数据 1.delete误删除的解决方法原理:利用oracle提供的闪回方法,如果在删除数据后还没做大量的操作(只要保证被删除数据的块 ...

  10. Freemarker判断是否为空

    1.判断对象是否为空 freemarker中显示某对象使用${name}. 但如果name为null,freemarker就会报错.如果需要判断对象是否为空: <#if name??> - ...