HTML5学习笔记
目录
第一章 HTML5概述
1.1 前言
此篇学习笔记参考黑马程序员前端学习视频，使用的工具为Visual Studio Code
视频链接: 前端HTML5+CSS3+移动Web全套教程，零基础学前端web首选黑马程序员.
Visual Studio Code 官方网址：点击打开.
1.2 HTML介绍
HTML(Hyper Text Markup Language），超文本标记语言，是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
1.3 HTML5介绍
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式。被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
1.4 浏览器
- 五大浏览器：IE浏览器，FireFox浏览器，Google浏览器，Safari浏览器，Opera浏览器
- 渲染引擎：由于不同浏览器渲染引擎不同，解析时的效果存在差异，所以相同的网页在不同浏览器的显示效果不一样
1.5 Web标准
| Web标准的构成 | 语言表示 | |
|---|---|---|
| 结构 | HTML | 页面元素 |
| 表现 | CSS | 页面样式 |
| 行为 | JavaScript | 页面交互的动态效 |
第二章 HTML5标签 的介绍
2.1 HTML5标签基本认识
2.1.1 基本结构
- html标签：网页的整体
- head标签：网页的头部
- body标签：网页的身体
- title标签：网页的标题
<html><-- 网页的整体 -->
<head><-- 网页的头部 -->
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
2.1.2 标签规范
- 单标签
<标签名 [属性名1=属性值1 属性名2=属性值2...]>
例如：
<img src="" alt="">
- 双标签
<标签名 [属性名1=属性值1 属性名2=属性值2...]></标签名>
例如：
<a href="" class=""></a>
- 标签的属性
- 双标签的属性需要写在开始标签中
- 标签上可以同时存在多个属性
- 标签名与属性之间，属性与属性之间以空格隔开
- 标签的关系
- 标签之间的关系可分为：父子关系（嵌套关系）、兄弟关系（并列关系）
2.1.3 语法规范
- HTML中的注释不能嵌套
- HTML中不区分大小写，一般都使用小写
- HTML标签必须结构完整，要么成对出现，要么自结束标签
- HTML标签可以嵌套，但是不能交叉嵌套
- HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)
第三章 HTML5标签
3.1 标题标签
代码展示：
<body>
普通文字
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
运行结果：
3.2 段落标签
代码展示：
<body>
<h1>前端开发</h1>
<p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互</p>
<p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
<p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>
</body>
运行结果：
3.3 换行标签
代码展示：
<body>
<h1>前端开发</h1>
<p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互</p>
<p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
<p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。<br>HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>
</body>
运行结果：
3.4 水平线标签
代码展示：
<body>
<h1>前端开发</h1>
<hr>
<p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互</p>
<p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
<p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。<br>HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>
</body>
运行结果：
3.5 文本格式化标签
代码展示：
<body>
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<br>
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
</body>
运行结果：
3.6 img标签
代码展示：
<body>
<img src="img标签图片1.png" alt="我是替换文本" title="我是title的效果" width="500" height="300">
</body>
3.7 音频标签
代码展示：
<body>
<audio src="./岑宁儿 - 追光者.mp3" controls autoplay loop></audio>
</body>
运行结果：
3.8 视频标签
在这里插入代码片
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
