——HTML

最新推荐文章于 2023-03-04 15:31:42 发布

qq_37048214

最新推荐文章于 2023-03-04 15:31:42 发布

阅读量796

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/qq_37048214/article/details/120132434

版权

1 概念

HTML 是 HyperText Markup Language 的简称，中文名称： 超文本标记语言 ，它是一种用于创建网页的标准标记语言。

标记语言是由标签构成的语言。 < 标签名称 > 例如 html ， xml ；标记语言不是编程语言。

HTML 运行在浏览器上， 由浏览器来解析 。

2 快速入门

2.1. html文档的后缀名

.html 和 .htm 两种都可以，没有区别。授课中都是 .html 后缀名，个人习惯不同而已。

2.2. 标签的分

围堵标签：有开始标签和结束标签，例如 <html></html>

自闭和标签：开始标签和结束标签都在一个标签中 <br/>

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

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

2.4. 标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开

<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
<p id="p1" name="p1"> </p>

2.5. html标签不区分大小写，但是推荐全小写

3 开发工具-HBuilder

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

3.1 HBuilder的介绍

HBuilder 是 DCloud （数字天堂）推出的一款支持 HTML5 的 Web 开发 IDE 。 HBuilder 的编写用到了

Java 、 C 、 Web 和 Ruby 。 HBuilder 本身主体是由 Java 编写，它基于 Eclipse ，所以顺其自然地兼容了Eclipse的插件。快，是 HBuilder 的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、 js 、 css 的开发效率。

3.2 HBuilder的下载

我们已经给大家提供好了 Hbuilder 开发工具的安装包，如果所示根据自己的操作系统自行选择。

如果想要自己下载，以下是下载地址。注意下载步骤示例图中的内容不是固定不变的，因为

HBuilder 官网有时也会随时变更。如果同学自己下载的时候遇到不一样的部分，请根据官网内容

自行查找。

HBuilder 下载地址： https://www.dcloud.io/

3.3 HBuilder的安装与使用

HBuilder 是免安装的，解压之后即可使用。

3.4使用HBuilder创建项目

创建完毕之后自动生成目录结构

4 HTML文档的基本结构

HTML 文档也叫 web 页面。

4.1 基本结构

<!-- 声明当前文档是html5文档 -->
<!DOCTYPE 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.2 HTML的注释

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

5 HTML中常用标签

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: 区分的简单方法：是否独占一行。

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

1 、块级元素会独占一行，其宽度自动填满其父元素宽度；

行内元素会排列到同一行里，其宽度随元素的内容变化而变化。

2 、块级元素可以设置宽高；行内元素设置宽高无效。

3 、块级元素可以设置 margin ， padding 属性；行内元素的水平方向的 padding 会有边距效果，但是竖直方向的padding 没有效果。（此处的属性稍后介绍）

我们上面已经讲过的标签中归类一下：

属于块状元素的：

标题标签 h1-h6,

段落标签 p ,

水平线标签 hr,

有序列表标签 ol--li ，

无序列表标签 ul--li ，

定义描述标签 dl-dt-dd ，

容器标签 div ：

属于行级元素的：

范围标签：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: 表示只读，用户只能看不能改

disabled ：表示禁用，该元素不能改而且背景是灰色

8.1 文本框

8.2 密码框

8.3 单选按钮

8.4 复选框

8.5 文件域

8.6 日期-h5中的新特性

8.7 隐藏域

8.8 下拉列表框

8.9 文本域

8.10 按钮

8.10.1 提交按钮

8.10.2 图片按钮

8.10.3 重置按钮

8.10.4 普通按钮

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

8.11 标签

8.12 以上内容综合效果图

点击注册按钮或者图片按钮之后呈现的结果：主要看地址栏

地址栏内容：

dest.html?

userId=1001&

userName=lina&

password=12312&

gender= 女 &

statu=1&

hobby=swim&hobby=movie&

headImg=a.png&

birthday=2020-10-24T20%3A19&

month=3&x=25&y=46

9 框架

9.1 框架概念

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

例如大家可以观察一下自己的京东个人中心页面，点击左侧内容的时候，只有右边页面在变动。

9.2 框架语法

10 框架集--了解

了解即可，不做重点要求。

11 常用的布局组合标签

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

12 HTML4与HTML5的区别

12.1 概念

HTML4 和 HTML5 分别是超文本标记语言的第四次和第五次修改，他们分别是 html 语言第 4 和第 5 版

本 .HTML4 是为了适应 pc 时代产生的， HTML5 是为了适应移动互联网时代 , 为了在移动设备上支持多媒体。

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

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

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

12.2 一些主要标记区别

12.2.1 DOCTYPE 不同

12.2.2 指定字符编码语法不同

HTML4: 使用 meta 元素的形式指定文件中的字符编码 ( 通过 content 元素的属性来指定 )

HTML5: 使用对元素直接追加 charset 属性的方式来指定字符编码。

参考上面的两张图中的写法

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

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

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

12.4 HTML5表单

12.4.1 HTML5新的表单属性

12.4.1.1 form 新属性

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.1 input 新属性

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 和 fifile

上传多个文件 : <input type="file" name="img" multiple>

placeholder

placeholder 属性提供一种提示（ hint ），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意 : placeholder 属性适用于以下类型的 <input> 标签： text, search, url, telephone, email 以及

password 。

<input type="text" name="userName" placeholder="请输入用户名">

required

required 属性是一个 boolean 属性 .

required 属性规定必须在提交之前填写输入域（不能为空）。

注意 : required 属性适用于以下类型的 <input> 标签： text, search, url, telephone, email, password,

date pickers, number, checkbox, radio 以及 fifile 。

用户名: <input type="text" name="username" required>

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

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

12.4.3 HTML5中新的input类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

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

12.5 HTML5中新增的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。大多数音频是通过插件（比如 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.6 HTML5中新增的视频

<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.7 HTML5中已经移除的元素

frame
frameset
noframes

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

转移符号	描述
& nbsp;	转义为空格
<	转义为小于号 <
≤	转义为小于等于号 ≤
>	转义为大于号 >
≥	转义为大于等于号 ≥
©	转义为版权符号 ©