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 可以与其他技术(如 CSSJavaScript)结合使用,实现更丰富的网页效果和交互功能。

不断有新的 HTML 版本和规范推出,以适应不断发展的互联网技术和用户需求。

四、发展历程

1.早期阶段

HTML1991 年由蒂姆・伯纳斯 - 李(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 下标签 会使文本在一行文本垂直一般的靠下方显示
python 复制代码
<p>x<sub>3</sub></p>
<p>x<sup>2</sup></p>

结果:

(2)链接

python 复制代码
<a href="https://www.baidu.com">跳转到百度</a>
<a href="./lainjie.html">跳转到页面</a>

结果:
跳转到百度
跳转到页面

target属性 作用
_self 在当前网页中跳转,覆盖原网页(默认值)
_blank 在新网页中跳转,保留原网页

blank效果:

注意:

a标签不能嵌套a标签

②当没有地址跳转啊时,地址写#

python 复制代码
<a href="#l">跳转到页面</a>

锚点定位

创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置

方法:

①给标题添加id

p标签内部添加a链接,并在链接内部href指定id

注意:长段英文网页显示时不会自动换行,中文可以

媒体文件

(1)图片(转新增标签------figure插图)

插入:<img src="pic.png" width="237" height="140" alt=""/>

属性 作用 说明 效果
alt 替换文本 图片无法显示时显示的文字
title 提示文本 鼠标停在图片上时显示的文字
width 宽度 -
height 高度 -

图片居中

python 复制代码
<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 静音 -
相关推荐
zhougl99611 分钟前
html处理Base文件流
linux·前端·html
花花鱼15 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_18 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript