1.HTML

1、HTML

1.1介绍

HTML(HyperText Markup Language)：超文本标记语言：

• 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

  如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制。

• 标记语言：由标签构成的语言

之前学习的XML就是标记语言，由一个一个的标签组成，HTML 也是由标签组成 。

总结：

• HTML 文件以.htm或.html为扩展名

• HTML 结构标签
  

• HTML 标签不区分大小写

  如上案例中的 font 写成 Font 也是一样可以展示出对应的效果的。

• HTML 标签属性值 单双引皆可

  如上案例中的color属性值使用双引号也是可以的。

1.2 基础标签

基础标签就是一些和文字相关的标签，如下：

注意：特殊字符，需要使用转义字符。有如下转义字符：

1.3 图片、音频、视频标签

• img：定义图片

  • src：规定显示图像的 URL（统一资源定位符）

  • height：定义图像的高度

  • width：定义图像的宽度

• audio：定义音频。支持的音频格式：MP3、WAV、OGG

  • src：规定音频的 URL

  • controls：显示播放控件

• video：定义视频。支持的音频格式：MP4, WebM、OGG

  • src：规定视频的 URL
  • controls：显示播放控件

尺寸单位：

height属性和width属性有两种设置方式：

• 像素：单位是px
• 百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

资源路径：

图片，音频，视频标签都有src属性，而src是用来指定对应的图片，音频，视频文件的路径。此处的图片，音频，视频就称为资源。资源路径有如下两种设置方式：

• 绝对路径：完整路径

  这里的绝对路径是网络中的绝对路径。 格式为： 协议://ip地址:端口号/资源名称。

相对路径：相对位置关系

找页面和其他资源的相对路径。

./ 表示当前路径

…/ 表示上一级路径

…/…/ 表示上两级路径

1.4 超链接标签

在网页中可以看到很多超链接标签，如下

上图红框中的都是超链接，当我们点击这些超链接时会跳转到其他的页面或者资源。而超链接使用的是 a 标签。

a 标签属性：

• href：指定访问资源的URL

• target：指定打开资源的方式

  • _self：默认值，在当前页面打开
  • _blank：在空白页面打开

1.5 列表标签

HTML 中列表分为

• 有序列表

  如下图，页面效果中是有标号对每一项进行标记的。

  

• 无序列表

  如下图，页面效果中没有标号对每一项进行标记，而是使用 点 进行标记。
  

标签说明：

有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）

无序列表中的 type 属性用来指定标记的形状

1. 咖啡
2. 茶
3. 牛奶

• 咖啡
• 茶
• 牛奶

1.6 表格标签

如上图就是一个表格，表格可以使用如下标签定义

• table ：定义表格

  • border：规定表格边框的宽度

  • width ：规定表格的宽度

  • cellspacing：规定单元格之间的空白

• tr ：定义行

  • align：定义表格行的内容对齐方式

• td ：定义单元格

  • rowspan:规定单元格可横跨的行数

  • colspan:规定单元格可横跨的列数

• th：定义表头单元格

代码演示：

## 1.7 布局标签

序号	品牌logo	品牌名称	企业名称
010		三只松鼠	三只松鼠
009		优衣库	优衣库

这两个标签，一般都是和css结合到一块使用来实现页面的布局。

div标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果。

1.8 表单标签概述

1.8.1 表单标签概述

表单：在网页中主要负责数据采集功能，使用标签定义表单

表单项(元素)：不同类型的 input 元素、下拉列表、文本域等

1.8.2 form标签属性

• action：规定当提交表单时向何处发送表单数据，该属性值就是URL

  以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。

• method ：规定用于发送表单数据的方式

  method取值有如下两种：

  • get：默认值。如果不设置method属性则默认就是该值
    • 请求参数会拼接在URL后边
    • url的长度有限制 4KB
  • post：
    • 浏览器会将数据放到http请求消息体中
    • 请求参数无限制的

1.8.3 代码演示

由于表单标签在页面上没有任何展示的效果，所以在演示的过程是会先使用 input 这个表单项标签展示输入框效果。

代码如下：

1.9 表单项标签

表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：

• <input>：表单项，通过type属性控制输入形式

  input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样

• <select>：定义下拉列表，<option> 定义列表项

  如下图就是下拉列表的效果：
  

• <textarea>：文本域

  如下图就是文本域效果。它可以输入多行文本，而 input 数据框只能输入一行文本。

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iVQDvfjr-1666069957557)(D:\typora\java路线学习\java Web\图片\image-20210812223744522.png)]

注意：

• 以上标签项的内容要想提交，必须得定义 name 属性。
• 每一个标签都有id属性，id属性值是唯一的标识。
• 单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

708205" style=“zoom:80%;” />

• <textarea>：文本域

  如下图就是文本域效果。它可以输入多行文本，而 input 数据框只能输入一行文本。

  [外链图片转存中…(img-iVQDvfjr-1666069957557)]

注意：

• 以上标签项的内容要想提交，必须得定义 name 属性。
• 每一个标签都有id属性，id属性值是唯一的标识。
• 单选框、复选框、下拉列表需要使用 value 属性指定提交的值。