HTML

今天我们来介绍javaweb前端技术之一的html。

1、认识html技术

  html是一种用于网页内容的载体，包括一些对网页的设计，主要是提供给用户使用的界面，是一种超文本的标签语言，所以，html是不需要编译器来编译，然后生成一个新的文件才运行的，它是直接由浏览器解析来的。

2、html的结构

html由head和body两个内容组成，head和body都是html的标签，html由许多种不同功能的标签组成的，下面我们会一一介绍

3、html的标签介绍

  在我们常见的html中所使用的标签有：div、p、form、h1、table，tr，td、span、ol，li、ul，li br/，a。下面我们逐一介绍

div：<div></div>标签，功能是自动将该文本内的前后内容隔开，使其形成独立的一个空间，这里需要注意的是，div标签是一个块级元素，而且div内部还可以嵌套其他类型的标签，在div标签内，我们可以使用一些属性来去修饰它，我们可以修饰div内的文本字体大小，修改其颜色，也就是在标签内部修改属性，这种修改我们叫做行内修饰。

p：p标签是应用在定义段落，会自动在文本前空出一些位置

br：该标签用于换行

h1：用于标题的文本，h1-h6都是用于标题的标签，从大到小

table，tr，td：table标签是标明是一个表格，tr表示表格中的一行，td表示表格中某一行的一列

 <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>

这里就表示了这是一个一行三列的表格。这里需要注意一下，表格还有一个特别的使用，就是可以合并列和合并行。什么意思呢？我们在写表格的时候，有时候第一行不一定有多个列，可能只需要一个列，这时我们就可以使用合并列的，就譬如我们上面代码所示，我们可以在td标签内，加上一条属性，colspan=3，就表示第一行的三个列都合并成一列，当然也可以合并两列，就是colspan=2，后面这个数字就表示你要合并几列或几行。

span：span标签是内联元素，不像div有换行的功能，该标签主要是为了强调和特别指出某一个文本内容，我们在需要强调的文本内容前可以加上这个span标签，同时在标签内写入样式属性。

ol，ul：这两个标签的功能都是列表，但是ol是会表明顺序，ul不会 li就是表面每一行的文本内容

a：超链接标签，在a标签内可以指定你要跳转的URL，href属性就是设置连接的地址

form：该标签是用于表单的操作，表单多用于用户提交的数据，比如账号，密码等。实现提交数据的功能，我们就需要在form标签内写入input这个标签，在input标签需要定义两个属性，一个是type，一个是name，type就表示你要传入的是哪种文本，如果是普通文本就传入text

 type="text"

如果是密码就传入password

type="password"

还可以选择复选框

type="checkbox"

这里需要注意的是，这里还有一个name属性，这个属性用于保存我们传入的数据，所以这个一定需要写上，而且需要注意的是，因为复选框有多个，所以要写多个input，这多个input的name需要保存一致，因为你传入的是同一个name，如果name写的不相同，最后传入的数据就会有误，这里还有一个是value属性，这个属性就是我们真正传入的数据了，不要和标签内写的文本搞混了，这里还需要多介绍一个form表格里面一个select标签，这个是多选框，需要配合option标签，select需要指定name属性，name=“XXX”，option需要指定value属性，value=“XXX”，传数据时，就是value的数据传入name了。

该type属性用于提交。

type="submit"

完成这些内容后，表单还有一个action属性，该属性表明如果提交成功会转跳到那个页面，这里不多做介绍。method属性，用于表明你提交该表单的方式，常见的有两种get/post，get请求，会在浏览器显示我们提交的数据，如果是一些重要信息，可能会不安全。而post的请求方式则不会显示，它将信息都隐藏在了http请求体后，因此post的请求会比较安全。