Java教程

[JavaWeb] HTML

本文主要是介绍[JavaWeb] HTML，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1 HTML的简述

1.1 概述

HTML：（Hyper Text Markup Language）超文本标记语言

文本：相当于记事本里写的文字。 展示信息

超文本：超越了文本仅仅展示信息的功能范畴。泛指：图片、有样式的文字、点击跳转页面的文字。

HTML是由标签所组成的语言，能展示超文本效果，是用来写网页的，是设计页面的基础。

1.2 语言特征

HTML代码是由头和体组成。

<html>
	<head>
		<title> 标题</title>
	</head>
	<body>需要展示给用户看的信息内容</body>
</html>
标签就相当于 java类 大括号
  • HTML文件的扩展名为html或者htm。Htm是老的命名规范，html的新的。
  • HTML文件由浏览器直接解析执行，无需编译，直接由上到下依次解析执行。
  • HTML标签通常由开始标签和结束标签组成。内容体开始标签和结束标签之间的内容叫做内容体
  • HTML没有内容体的标签叫做空标签。仅由一个标签组成。
  • HTML标签不区分大小写，为了方便阅读，建议使用小写。
  • HTML标签是有属性的，格式为：属性名=”属性值”，属性值用引号引起。引号包含单引号和双引号。
  • HTML标签建议包裹嵌套，不建议交叉嵌套。

2 HTML的基本标签

2.1 字体标签和格式化标签

  • <font 属性名=”属性值”>文字</font>

    字体标签，用于展示效果中修饰文字样式

    • size:控制字体大小.最小1 ~ 最大7。 如果设置范围不在1~7之间，设置无效。
    • color：控制字体颜色. 使用英文设置（例如：red,blue…）
    • face：控制字体类型，只能设置系统字库中存在的字体类型。
  • <br/>

    HTML源码中换行，浏览器解析时会自动忽略，展示效果中换行要用到此换行标签，

  • <p 属性名=”属性值”>文字</p>

    段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行

    • align:段落内容的对齐方式，默认是left，可选Right、Center
  • <h1>文字</h1>
    • 标题标签，用于展示效果中划分标题，其中 h1 最大， h6 最小
  • &nbsp;
    • HTML源码中的多个空格，效果中最终会合并成一个。此空格符号用于展示效果中显示一个空白的位置。

2.2 图片标签

<img src="../img.jpg" width="400" height="400"/>

用于在页面效果中展示一张图片。

  • src：指明图片的路径。（必有属性）可写上内网路径（绝对路径、相对路径）或互联网路径

  • alt属性用于指定图片的替换文字

  • title属性用于设置当前对象的说明信息

  • width：图片宽度

  • height：图片的高度

    宽度和高度的设置两种方式

    width=”400” 等同于 width=”400px”。默认单位是px（像素）

    width=”50%”，百分比设置，是父标签的百分比，是动态改变的。

2.3 列表标签

  • <ol></ol>

    有序列表标签，用于在效果中定义一个有序列表

  • <ul></ul>

    无序列表标签，用于在效果中定义一个无序列表

  • <li></li>

    列表条目项标签，用于在效果中定义一个列表的条目

2.4 超链接标签

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

​ 超链接标签，用于在效果中定义一个可以点击跳转的链接

  • href：超链接跳转的路径 (必有属性)
  1. a标签内容体，不仅仅是文字，也可以是其他内容，例如图片
  2. a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，例如图片

2.5 表格标签

  • <table></table>

    表格标签，用于在效果中定义一个表格

    • border：设置表格的边框粗细
    • width：设置表格的宽度
  • <tr></tr>

    表格的行标签，用于在效果中定义一个表格行

  • <td></td>

    表格的单元格标签，用于在效果中定义一个表格行中的单元格

  • <th></th>

    表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格

<th>和<td>唯一区别：<th>内容 居中加粗

示例

姓名 生日 身高
黑岛正义 3.29 171
泷本日富美 1.23 162

  • 单元格合并

    <td>或者<th>都有两个单元格合并属性：

    • colspan：跨列合并单元格
    • rowspan：跨行合并单元格

示例

8 8
8 8

2.6 块标签

  • <span></span>

    行级的块标签，用于在效果中 一行上定义一个块，进行内容显示。

    1. span有多少内容，就会占用多大空间。
    2. Span不会自动换行
    3. 适用于少量数据展示
  • <div></div>

    块级的块标签，用于在效果中 定义一块，默认占满一行，进行内容的显示

    1. 默认占满一行
    2. 会自动换行
    3. 适用于大量数据展示

3 HTML的表单标签

3.1 输入项标签

<input/>

表单输入项标签之一，用户可以在该标签上 通过填写和选择 进行数据的输入。

  • type:设置该标签的种类

    • text:文本框。 默认
    • password:密码框。 内容为非明文
    • radio:单选框。 在同一组内有单选效果
    • checkbox:复选框。 在同一组内有复选效果
    • submit:提交按钮。用于控制表单提交数据
    • reset:重置按钮。 用于将表单输入项恢复到默认状态
    • file:附件框。用于文件上传。
    • hidden:隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据。
    • button:普通按钮。需要和JS事件一起用

  • name: 单选框、复选框进行数据的分组。/ 设置该标签对应的参数名

    某个表单输入项需要通过参数列表提交，就必须设置name属性

  • value:设置该标签对应的参数值。 / 作为按钮的名字
    value属性的设置策略：

    1. 文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入
    2. 单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on

  • checked:设置单选框/复选框的默认选中状态

  • readonly:设置该标签的参数值只读，用户无法手动更改。数据是可以正常提交

  • disabled:设置该标签不可用，参数值无法更改，且参数值也无法提交

示例：

用户名：
密   码：
性别：

3.2 选择标签框

<select></select>

定义一个选择框

  • name: 设置该标签对应的参数名
  • multiple：设置该标签选项全部显示，并且可以进行多选提交。默认为单选。
<option></option>

选项标签，用于为一个选择框添加一个选项

  • value:设置需要提交的参数值。
  • selected:设置选项的默认选中状态

示例

3.3 文本域标签

<textarea></textarea>

表单输入项标签之一，用户可以在该标签上 通过输入进行数据的输入。

  • name: 设置该标签对应的参数名

文本域和文本框区别：

  1. 文本框不能换行，文本域可以
  2. 文本框参数值是value属性，文本域参数值是标签的内容体

3.4 表单标签

<form></form>

用于在效果中定义一个表单，用于提交用户填写的数据。

  • action:将数据提交到何处。

  • method:将数据以何种方式提交

    • Get提交：把数据拼接到地址栏上（默认）
    • Post提交方式特点：没有把提交数据拼接到地址栏上。请求体

    Get和post提交方式区别：

    • Post方式提交的数据较Get方式相对安全
    • Post方式从理论上提交的数据量无限大，Get方式有限

尽量使用post方式提交表单

3.5 绑定标签

<label></label>

常用于绑定内容与表单标签的关系

  • 方法一

    1. 使用label标签把内容包裹起来
    2. 在表单标签上添加id属性
    3. 在label标签的for属性中设置对应的id属性值

  • 方法二

    直接用label标签吧内容和表单一起包裹起来

这篇关于[JavaWeb] HTML的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航