html语法
文章目录
html语言介绍
HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。以下是关于 HTML 的详细介绍：
一、基本概念
HTML 由一系列的标签组成，通过这些标签可以将文本、图像、音频、视频等内容组织和展示在网页上。它不是一种编程语言，而是一种标记语言，用于描述网页的结构和内容。
二、主要作用
1.结构搭建
定义网页的整体框架，包括标题、段落、列表、表格等元素的布局。例如，<h1>到<h6>标签用于定义不同级别的标题，<p>标签用于定义段落。
划分页面的不同区域，如<header>表示网页的头部，<nav>用于导航栏，<main>表示主要内容区域，<footer>表示网页的底部。
2.内容展示
插入文本内容，使网页具有可读性。可以设置文本的格式，如字体、大小、颜色等。
展示图像、音频、视频等多媒体内容，使用<img>标签插入图像，<audio>和<video>标签分别用于插入音频和视频文件。
三、特点
1.简单易学
HTML 的语法相对简单，容易上手。即使没有编程经验的人也可以快速学习并创建基本的网页。
有大量的在线教程和资源可供参考，方便初学者学习和使用。
2.跨平台性
由于 HTML 是一种标准的标记语言，几乎所有的浏览器和操作系统都支持它。这使得网页可以在不同的设备和平台上显示，具有很高的通用性。
3.可扩展性
HTML 可以与其他技术（如 CSS 和 JavaScript）结合使用，实现更丰富的网页效果和交互功能。
不断有新的 HTML 版本和规范推出，以适应不断发展的互联网技术和用户需求。
四、发展历程
1.早期阶段
HTML 于 1991 年由蒂姆・伯纳斯 - 李（Tim Berners-Lee）发明，最初的目的是为了方便科学家之间共享研究成果。
早期的 HTML 版本功能比较简单，主要用于展示文本内容。
2.发展阶段
随着互联网的普及和发展，HTML 不断更新和完善。HTML 2.0、HTML 3.2、HTML 4.0 等版本陆续推出，增加了更多的标签和功能，如表格、表单、图像映射等。
同时，浏览器厂商也在不断改进对 HTML 的支持，使得网页的显示效果和交互性得到了很大的提升。
3.现代阶段
HTML5 是目前最新的 HTML 版本，于 2014 年正式发布。HTML5 引入了许多新的特性，如语义化标签、本地存储、多媒体支持、Canvas 绘图等，使得网开发更加高效和便捷。
HTML5 还加强了对移动设备的支持，适应了移动互联网的发展趋势。
总之，HTML 是网页开发的基础，它为网页提供了结构和内容。通过学习 HTML，你可以创建自己的网页，并与世界分享你的信息和创意。
标签
(1)文本
<br>：换行
<hr>：水平线
<!..-->：注释
h1~h6：标题（h1在页面只出现一次；h2~h6没有使用限制）
<p></p>：段落标签(独占一行、段落之间有间隙)
| 强调 | 普通 | 作用 |
|---|---|---|
strong | b | 加粗 |
em | i | 倾斜 |
ins | u | 下划线 |
del | s | 删除线 |
注意：p标签不要嵌套div、p、h等块级元素
上下标签
特点：
①宽度由内容撑开，不可以设置宽高
②根据书写顺序逐个在一行显示
| 标签 | 作用 | 说明 |
|---|---|---|
sup | 上标签 | 会使文本在一行文本垂直一般的靠上方显示 |
sub | 下标签 | 会使文本在一行文本垂直一般的靠下方显示 |
<p>x<sub>3</sub></p>
<p>x<sup>2</sup></p>
结果：
(2)链接
<a href="https://www.baidu.com">跳转到百度</a>
<a href="./lainjie.html">跳转到页面</a>
target属性 | 作用 |
|---|---|
_self | 在当前网页中跳转，覆盖原网页(默认值) |
_blank | 在新网页中跳转，保留原网页 |
blank效果：
注意：
①a标签不能嵌套a标签
②当没有地址跳转啊时，地址写#
<a href="#l">跳转到页面</a>
锚点定位
创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置
方法：
①给标题添加id名
②p标签内部添加a链接，并在链接内部href指定id名
注意：长段英文网页显示时不会自动换行，中文可以
媒体文件
(1)图片(转新增标签——figure插图)
插入：<img src="pic.png" width="237" height="140" alt=""/>
| 属性 | 作用 | 说明 | 效果 |
|---|---|---|---|
alt | 替换文本 | 图片无法显示时显示的文字 |  |
title | 提示文本 | 鼠标停在图片上时显示的文字 | |
width | 宽度 | - | |
height | 高度 | - |
图片居中
<p style="text-align:center;">
<img src="pic.png" width="237" height="140" alt=""/>
</p>
(2)音频
支持：MP3、wav、ogg
插入：<audio src="C:\25.mp3" controls autoplay loop></audio>
| 属性 | 作用 | 说明 | 效果 |
|---|---|---|---|
controls | 播放控件 | - |  |
autoplay | 自动播放 | 部分浏览器不支持 | |
loop | 循环播放 | - |
(3)视频
支持：MP4、WebM、ogg
插入：<video src="C:\25.mp4" controls autoplay muted loop></video>
| 属性 | 作用 | 说明 | 效果 |
|---|---|---|---|
controls | 播放控件 | - |  |
autoplay | 自动播放 | 部分浏览器不支持(谷歌可以但需muted静音播放) | |
loop | 循环播放 | - | |
muted | 静音 | - |
原文地址：https://blog.csdn.net/zhang1379/article/details/142849485
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！