开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Java知识库 -> Java学习笔记-HTML与HTML5常用标签 -> 正文阅读

[Java知识库]Java学习笔记-HTML与HTML5常用标签

HTML与HTML5常用标签

1.概念

HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建页面的标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html、xml；标记语言不是编程语言
HTML运行在浏览器上，由浏览器来解析

2.快速入门

html文档的后缀名

.html和.htm都可以，没有区别，只是个人喜欢不同而已

标签的分类
- 围堵标签：有开始标签和结束标签，例如<html></html>
- 自闭和标签：开始标签和结束标签都在一个标签中

标签可以嵌套，但是嵌套的语法要正确

正确案例：
<p>
 ? ?<a></a>
</p>
错误案例:
<p>
    <a>
</p>
 ? ?</a>

标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开
- ```
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
<p id="p1" name="p1">
</p>
```
html标签不区分大小写，但是推荐全小写

3.开发工具-HBuilder

记事本、notepad都可以，但是开发效率低。所以我们直接选择更快捷更便利的开发工具HBuilder，也有其他的开发工具，就不一一赘述了。授课中使用的是HBuilder工具。

3.1HBuilder的介绍

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快、是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率

4.HTML文档的基本结构

HTML文档也叫web页面

4.1基本结构

<!-- 声明当前文档是html5文档-->
<!DCCTYPE html>
<!-- html，根元素，围堵标签-->
<html>
 ? ?<!--
        head,头元素：
        作用：
            1.用于指定HTML文章中的一些元数据
             ?例如元数据 meta:定义页面的编码格式
                     ? title：定义页面的标题
            2.引入外部的资源文件--后面讲
        -->
 ? ?<head>
 ? ? ? ?<meta charset="utf-8"/>
 ? ? ? ?<title>这是我的第一个HTML页面</title>
 ? ?</head>
 ? ?<!--
        body,主体：浏览器显示的内容都将在这里编写
        格式化代码的快捷键：ctrl+shift+f
    -->
 ? ?<body>
 ? ? ?  hello html 这是我的第一个HTML页面
 ? ?</body>
</html>

4.2HTML的注释

语法：
HTML注释以<!-- 开头 ，以-->结尾。
注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
<!--
    这里编写HTML注释，
    可以是一行，也可以是多行
-->

5.HTML中常用标签

5.1文本标签

5.1.1标题标签h1---h6：字体逐渐缩小

一般用在文章的标题上

5.1.2段落标签

一般用于正文

5.1.3换行标签

一般用在段落中强制换行

5.1.4水平线标签

一般用来分割内容

5.1.5范围标签

一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用
ps：不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容样子，我们才用过范围标签包裹，然后

5.2图片标签

5.2.1基本属性

5.2.2设置图片的热点区域--了解

5.3列表标签

一般用在导航上

5.3.1无序列表

5.3.2有序列表

5.4自定义描述标签

一般用在图文混编的场景中

5.5布局标签层div

一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局

5.6标签分类

html标签可以分为块状元素和行级元素两类
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素;
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素
PS：区分的简单方法：是否独占一行

5.7块状元素和行内元素的区别：

1. 块级元素会独占一行，其宽度自动填满其父元素宽度
   行内元素会排列到同一行里，其宽度随元素的内容变化而变化
2. 块级元素可以设置宽高;行内元素设置宽高无效
3. 块级元素可以设置margin，padding属性;行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果

把上面的标签归类一下：

1. 属于块状元素的：
   - 标题标签 h1-h6，
   - 段落标签 p，
   - 水平线标签 hr，
   - 有序列表标签 ol--li，
   - 无序列表标签 ul-li
   - 定义描述标签 dl-dt-dd
   - 容器标签
2. 属于行级元素的：
   - 范围标签：span
   - 图像标签：img

6.超链接

超链接标签一般有两个作用：
1、用来实现页面间的跳转
2、实现锚连接功能

6.1页面间的跳转

6.2锚连接

当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览页面的时候，滑动超过一屏，右下角经常会出现返回顶部连接，这个就是锚连接实现的。这个定位可以实现本页面间的锚连接也可以实现不同页面间的锚连接

6.2.1本页面的锚链接

6.2.2页面间的锚连接

7.表格标签

7.1规则表格

7.2不规则表格---跨行和跨列

7.3表格的高级标签--标题标签和逻辑分区标签

8.表单--非常重要

概念：用于采集用户输入的数据。用于和服务器进行交互

表单项中的一些属性

id：元素的唯一表示，不重复
name：表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称获取
value：表单项元素的值，服务器获取数据通过name获取到的就是value
type：表示表单项元素的呈现形式
class：表示样式名称

readonly：表示只读，用户只能看不能改
disable：表示禁用，该元素不能改而且背景是灰色

8.1文本框

8.2密码框

8.3单选按钮

8.4复选框

8.5文件域

8.6日期-h5中的新特性

8.7隐藏域

8.8下拉列表框

8.9文本域

8.10按钮

提交按钮
图片按钮
重置按钮
普通按钮

button标签可以与input实现的按钮相互替换

8.11标签

9.框架

9.1框架概念

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面

9.2框架语法

10.框架集--了解

11.常用的布局组合标签

- div-ul-li/div-oi-li：常用于导航布局
- div-dl-dt-dd:常用于图文混编布局
- div-form:常用于表单布局
- div-table:常用于局部规则数据展示布局

12.HTML4与HTML5的区别

12.1概念

HTML4和HTML5分别是超文本标记语言的第四次和第五次修改，他们分别是html语言的第四版和第五版。HTML4是为了适应pc时代产生的，HTML5是为了适应移动互联网时代，为了在移动设备上支持多媒体。

HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应于于互联网应用的开发。

HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范

HTML5技术在未来主要发展的市场还是在移动端互联网领域，现阶段移动浏览器有应用体验不佳、网页标准不统一的劣势，这两个方面是移动端网页发展的障碍，而HTML5技术能够解决这两个问题，并将劣势转化为有时，整体推动整个移动端网页方面的发展。

12.2一些主要标记区别

12.2.1DOCTYPE 不同

12.2.2指定字符编码语法不同

HTML4：使用meta元素的形式指定文件中的字符编码(通过content元素的属性来指定)
HTML5：使用对元素直接追加charset属性的方式来指定字符编码
参考上面两张图

注意：两种方法都有效，但是不能同时混合使用两种方式，从H5开始，对于文件的字符编码推荐使用UTF-8

12.3HTML5中新增的语义标签--了解

标签	描述
article	定义页面独立的内容区域。
article	定义页面的侧边栏内容。
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置。
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
header	定义了文档的头部区域
footer	定义 section 或 document 的页脚。
nav	定义导航链接的部分。
progress	定义任何类型的任务的进度。
section	定义文档中的节（section、区段）。
time	定义日期或时间。
wbr	规定在文本中的何处适合添加换行符。

12.4HTML5表单

12.4.1HTMl5新的表单属性

12.4.1.1form新属性

autocomplete属性
- autocomplete属性规定form或input域应该拥有自动完成功能当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。就是用户名的记录之类的，点击文本框会弹出记录点击自动填写
- 提示：autocomplete属性有可能在form元素中是开启的，而在input元素中是关闭的
- 注意: autocomplete 适用于 <input>标签，以及以下类型的<input>标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
- ```
<form action="" autocomplete="on">
    姓名:<input type="text" name="name"><br>
    电话: <input type="text" name="phone"><br>
    邮箱: <input type="email" name="email" autocomplete="off"><br>
    <input type="submit">
</form>
测试的时候需要先输入一遍，然后再刷新页面再次输入看到效果。
有些浏览器可能不自动支持，需要自己启用。
```

12.4.1.2input新属性

list属性

list属性规定输入域的datalist。datalist是输入域的选项列表可输入的下拉框

<input list="companys">
<datalist id="companys">
    <option value="alibaba">
    <option value="baidu">
    <option value="tencent">
    <option value="zijie">
    <option value="didi">
</datalist>

multiple
- multiple属性是一个boolean属性 multiple属性规定<input>元素中可选择多个值
- 注意：multiple属性适用于以下类型的<input>标签：email和file
- ```
上传多个文件: <input type="file" name="img" multiple>
```
placeholder
- placeholder属性提供一种提示(hint)，描述输入域所期待的值简短的提示在用户输入值前会显示在输入域上就是平时在用户名输入框上显示的用户名等字样
- 注意： placeholder 属性适用于以下类型的标签：text, search, url, telephone, email 以及 password。
- ```
<input type="text" name="userName" placeholder="请输入用户名">
```
required
- required属性是一个boolean属性 required属性规定必须在提交之前填写输入域(不能为空)
- 注意：required 属性适用于以下类型的标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
- ```
用户名: <input type="text" name="username" required>
```

12.4.2HTML5新的表单元素--了解

标签	描述
datalist	input标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
keygen	规定用于表单的密钥对生成器字段。
output	标签定义不同类型的输出，比如脚本的输出。

12.4.3HTML5中新的input类型

HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证
- color
- date
- datetime
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week

注意：并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

12.5HTML5中新增的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。大多数音频是通过插件(比如Flash)来播放的。然而，并非所有浏览器都拥有同样的插件
HTML5规定了在网页上嵌入音频元素的标准，即使用<audio>元素

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
    
PS：control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
    
目前，<audio>元素支持三种音频格式文件：MP3，Wav和Ogg
音频格式的MIME类型

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

12.6HTML5中新增的视频

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
    
当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

Format	MIME-type
MP4	video/mp4
Ogg	audio/ogg
WebM	video/webm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>视频音频</title>
    </head>
    <body>
        <h1>音频</h1>
        <audio controls>
            <source src="audio/wgs.ogg" type="audio/ogg">
            <source src="audio/zjl.mp3" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        </audio>
        <h1>视频</h1>
        <video width="1320" height="640" controls>
            <source src="audio/ruhai.mp4" type="video/mp4">
            <source src="audio/wgs.ogg" type="video/ogg">
            您的浏览器不支持Video标签。
        </video>
    </body>
</html>

12.7HTMl5中已经移除的元素

frame
frameset
noframes

13.补充--HTML中的转译符号bn N7

转译符号	描述
&nbsp	转义为空格
&lt	转义为小于号<
&le	转义为小于等于号≤
&gt	转义为大于号>
&ge	转义为大于等于号≥
&copy	转义为版权符号