HTML5学习笔记

我该早点睡的

已于 2022-07-13 13:58:45 修改

阅读量9.2k

点赞数 9

CC 4.0 BY-SA版权

文章标签：前端 html5

于 2022-03-08 18:49:59 首次发布

本文链接：https://blog.csdn.net/m0_61721166/article/details/123351827

这篇博客详细介绍了HTML5的基础知识，包括网页、HTML的概念，Web标准的三个方面，以及HTML5的语法规范、标签关系、常用标签如注释、图像、超链接、表格、列表和表单的使用。特别强调了HTML5的骨架格式、开发工具VSCode的使用，以及文档标签声明的重要性。此外，还深入讲解了图像和路径、视频音频标签的插入方法，提供了丰富的练习帮助读者巩固学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、网页

1.什么是网页

网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。

2.什么是HTML

HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言(markup language)。标记语言是一套标记标签(markup tag)

3.Web标准

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准	用于对网页元素进行整理和分类，主要指HTML
表现标准	用于设置网页元素的版式、颜色、大小等外观属性，主要指CSS
行为标准	用于对网页模型的定义及交互的编写，主要指JavaScript

Web 标准提出的最佳体验方案：结构、样式、行为相分离。

简单理解：结构写到HTML 文件中，表现写到CSS 文件中，行为写到JavaScript 文件

二、认识HTML

1. HTML 语法规范

1.HTML 标签是由尖括号包围的关键词，例如<html>。

2.HTML 标签分为双标签和单标签。标签对中的第一个标签是开始标签，第二个标签是结束标签（例如<html> 和</html> ），我们称为双标签；有些特殊的标签必须是单个标签（例如<br />）我们称为单标签。

2.标签关系

双标签关系可以分为两类：包含关系和并列关系

<!-- 包含关系 -->
<head>
    <title> </title>
</head>

<!-- 并列关系 -->
<head> </head>
<body> </body>

3.HTML骨架格式

<!-- 页面中最大的标签 根标签 -->
<html>
<!-- 头部标签 -->

<head>
    <!-- 标题标签 -->
    <title>我的第一个页面</title>
</head>
<!-- 文档的主体 -->

<body>
    大家好！这是我的第一个页面。
</body>

</html>

注意：HTML 文档的的后缀名必须是.html 或.htm，浏览器的作用是读取HTML 文档，并以网页的形式显示出它们。此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML 文件了。

4.开发工具VSCode

1. 双击打开软件。

2. 新建文件（Ctrl+N ）。

3. 保存（Ctrl+S）,注意移动要保存为.html 文件

4. Ctrl+ 加号键，Ctrl + 减号键可以放大缩小视图

5. 生成页面骨架结构。输入! 按下Tab键。

6. 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”

5.文档标签声明

1.<!DOCTYPE > 文档类型，声明你用的XHTML或者HTML是什么版本。

<!DOCTYPE html>
<!-- 当前页面采取的是 HTML5 版本来显示网页. -->

注意： <!DOCTYPE> 声明位于文档中的最前面的位置，处于<html> 标签之前。

<!DOCTYPE>不是一个HTML 标签，它就是文档类型声明标签

2.lang页面语言，根据根据lang属性来设定不同语言的css样式，或者字体。

<html lang="en">
<!-- en 定义语言为英语 zh-CN定义语言为中文 -->

3.字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。在<head>标签内，可以通过<meta> 标签的charset属性来规定HTML 文档应该使用哪种字符编码。

<meta charset="UTF-8" />

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的"UTF-8"，不要写成 "utf8" 或"UTF8"。

6.特殊字符

三、常用标签

1.注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中的注释以“”结束快捷键Ctrl+/

2.排版标签

1.标题标签h(h1~h6)

2.段落标签p,为HTML 文档分为若干段落

3.水平线标签hr

4.换行标签br

5.div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。

3.文本格式化标签

语义	标签	说明
加粗	<strong></strong>或<b></b>	<strong>语义更强烈
倾斜	<em></em>或<i></i>	<em>语义更强烈
删除线	<del></del>或<s></s>	<del>语义更强烈
下划线	<ins></ins>huo<u></u>	<ins>语义更强烈

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。

<标签名属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机颜色="红色" 大小="5寸"> </手机>

4.<div> 和<span>标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的

<div></div>用来布局，但是现在一行只能放一个<div>。大盒子
<span></span>用来布局，一行上可以多个<span>。小盒子

5.图像标签和路径

（一）、图像标签

<img>是一个自闭合标签。

语法：<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">

属性	属性值	说明
src	图片路径	必须属性
alt	文本	图像不能显示时替换文本
title	文本	鼠标停留时提示文本
width	像素	图像的宽度
height	像素	图像的高度
border	像素	图像的边框宽度

注意：1.图像标签可以拥有多个属性，必须写在标签名的后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.属性采取键值对的格式，即key=“value" 的格式，属性=“属性值”

（二）、相对路径和绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说，图片相对于HTML 页面的位置

相对路径	符号	说明
同一级路径		图像文件位于HTML同一级，<img src="baidu.gif"/>
下一级路径	/	图像文件位于HTML下一级，<img src="images/baidu.gif"/>
上一级路径	../	图像文件位于HTML上一级，<img src="../baidu.gif"/>

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”

练习：

<form>
        <img src="tp/hh.jpg.jpg" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）" width="800px">
    </form>

浏览器的效果：

6.超链接标签

（一）、链接的语法格式：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

（二）、链接分类：

1.外部链接: 例如< a href="http:// www.baidu.com "> 百度</a >。

2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如< a href="index.html"> 首页</a >。

3.空链接:如果当时没有确定链接目标时，< a href="#"> 首页</a > 。

4.下载链接: 如果href里面地址是一个文件或者压缩包，会下载这个文件。

5.网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置

7.表格标签

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

Pink老师总结: 表格不是用来布局页面的,而是用来展示数据的

（一）表格的基本语法

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

<table>: 定义一个表格标签

<tr>: 定义表格中的行，必须嵌套在 table标签中

<td>: 定义表格中的单元格，必须嵌套在<tr></tr>标签中

<th>(table head）: 表头标签，一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

<thead>: 用于定义表格的头部。<thead> 内部必须拥有<tr> 标签。一般是位于第一行。

<tbody>: 用于定义表格的主体，主要用于放数据本体。

(二）、完整结构

<table>

        <caption>标题</caption>

        <!--表头-->

        <thead>

            <tr>

                <th>表头1</th>

                <th>表头2</th>

            </tr>

        </thead>

        <!--表身-->

        <tbody>

            <tr>

                <td>标准1</td>

                <td>标准2</td>

            </tr>

            <tr>

                <td>标准1</td>

                <td>标准2</td>

            </tr>

        </tbody>

        <!--表脚-->

        <tfoot>

            <tr>

                <td>标准1</td>

                <td>标准2</td>

            </tr>

        </tfoot>

    </table>

(三）、表格属性

表格标签属性我们实际开发我们不常用，后面通过CSS 来设置。

属性名	属性值	描述
align	left.center、right	设置表格在周围元素中的对齐方式
border	像素值	设置表格的边框(默认border="0”无边框)
cellpadding	像素值	设置单元格内容与单元格边沿之间的空白间距
cellspacing	像素值	设置单元格与单元格之间的空白间距
width	像素值或百分比	设置表格的宽度

（四）、合并单元格

跨行合并：rowspan="合并单元格的个数" 最上侧单元格为目标单元格

跨列合并：colspan="合并单元格的个数" 最左侧单元格为目标单元格

表格标签合并单元格三步曲：

1.先确定是跨行还是跨列合并。

2.找到目标单元格. 写上合并方式= 合并的单元格数量。比如：<td colspan=“2”></td>。

3.删除多余的单元格

8.列表标签

（一）、无序列表

<ul> 标签表示HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li> 标签定义。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

1.无序列表的各个列表项之间没有顺序级别之分，是并列的。

2.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

3.<li>与</li>之间相当于一个容器，可以容纳所有元素。

4.无序列表会带有自己的样式属性，但在实际使用时，我们通常会使用CSS来设置。

（二）、有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用<li> 标签来定义列表项。

<ol> 
  <li>列表项1</li>
  <li>列表二</li>
  <li>列表三</li>
  ......
</ol>

1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。

2.<li>与</li>之间相当于一个容器，可以容纳所有元素。

3.有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

（三）、自定义列表

在HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ......
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ......
</dl>

1.<dl></dl> 里面只能包含<dt> 和<dd>。

2.<dt> 和<dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

9.表单标签

在HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成

表单域是一个包含表单元素的区域。在HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器.

表单控件包含了具体的表单功能项，如单行文本输入框、密码输入框、提交按钮等。

提示信息是表单中包含的一些说明性的文字，提示用户进行填写和操作。

（一）<input>

表单元素<input> 标签用于收集用户信息。在<input> 标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）

<input /> 标签为单标签

type属性设置不同的属性值用来指定不同的控件类型

<input type="属性值" value="请输入文本">

value 用于设置为默认的文本。

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JavaScrlpt 启动脚本)
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符

除type 属性外，<input>标签还有其他很多属性

属性	属性值	描述
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认文本值
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

1.name 和value 是每个表单元素都有的属性值,主要给后台人员使用

2.name 表单元素的名字, 要求单选按钮和复选框要有相同的name值

3.checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素

4.maxlength是用户可以在表单元素输入的最大字符数, 一般较少使用

（二）、<label>

<label>标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

<label for="sex">
        男
        </label>
    <input type="radio" name="sex" id="sex" />

注意<label> 标签的for 属性应当与相关元素的id 属性相同。

练习：

  <h3>账号登陆</h3>

    <form action="">
        账号：<input type="text" value="请输入账号">
        </br> 密码：<input type="password" value="请输入密码">
        <p>
            <input type="checkbox" value="checked" checked="checked"><label for="">下次自动登录</label>
            <a href="">登录遇到问题</a>
        </p>
        <a href="#">登录</a>
        <a href="#">返回主页</a>
    </form>

浏览器的效果

（三）<select>下拉列表

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表

<select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        </select>

1.<select> 中至少包含一对<option>。

2.在<option> 中定义selected =“selected " 时，当前项即为默认选中项。

（四）<textarea>文本域

1.通过<textarea> 标签可以轻松地创建多行文本输入框。

2.cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS 来改变大小

    <textarea rows="3" cols="20">
        文本内容
        </textarea>

10.视频音频标签

（一）插入视频

<video> 标签定义了一个视频或者影片.

<video> 元素在所有现代浏览器中都支持。

<video src="文件地址" controls="controls"></video>

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

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频) none(不应加载视频)	规定是否预加载视频(如果有了autoplay就忽略该属性)
src	url	视频url地址
poster	Imgurl	加载等待的画面图片
muted	muted	静音播放

（二）插入音频

语法：

<audio src="文件地址" controls="controls"></audio>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
src	url	要播放的音频的 URL

练习：

 <h1>视频-库里vs骑士42+9+7集锦</h1>
    <div>
        <video src="vedio/【原声】勇士129-105骑士 库里斩获42分9记三分轻取骑士 标清(270P).mp4" width="640" height="457" controls></video>
    </div>

浏览器的效果：