前端新手入门:HTML<body>详解及常用标记

需积分: 9 4 下载量 67 浏览量 更新于2024-08-17 收藏 1.69MB PPT 举报
""> 此声明适用于HTML5,是最简洁且推荐的版本,告知浏览器使用标准模式解析页面。 HTML文档结构--HTML根元素 HTML文档的根元素是`<html>`,它包裹整个HTML文档,是所有其他元素的父元素。 HTML文档结构--HEAD元素 `<head>`元素包含非可视化的元数据,如`<title>`(定义网页标题)、`<meta>`(提供元信息,如字符编码)、`<link>`(引用外部资源,如CSS文件)和`<script>`(引入JavaScript代码或外部脚本文件)。 HTML文档结构--BODY元素 `<body>`元素包含网页的所有可见内容,如文本、图像、链接、表格、列表、段落、标题等。 文本标记 HTML提供了一系列文本标记来控制文本样式和结构,例如: - `<h1>`至`<h6>`定义了六个级别的标题。 - `<p>`用于创建段落。 - `<span>`是一个通用的容器,用于组合其他HTML元素。 - `<em>`用于强调文本,通常表现为斜体。 - `<strong>`强调文本,通常表现为粗体。 图像标记 `<img>`标记用于插入图像,其`src`属性指定图像源URL,`alt`属性提供替代文本。 超链接标记 `<a>`元素创建超链接,`href`属性定义链接的目标地址,`target`属性可指定打开链接的方式,如新窗口或当前窗口。 列表标记 - 有序列表`<ol>`和`<li>`用于创建带编号的列表。 - 无序列表`<ul>`和`<li>`用于创建项目符号列表。 分节标记 HTML5新增了`<header>`和`<footer>`等分节元素,用于组织页面的头部和尾部内容。 表格标记 `<table>`、`<tr>`(行)、`<td>`(单元格)和`<th>`(表头单元格)用于创建表格。 浮动框架标记 `<iframe>`元素用于在页面中嵌入另一个HTML文档,常用于实现页面内的小窗口或广告。 多媒体标记 HTML5引入了`<audio>`和`<video>`元素来嵌入音频和视频内容,支持不同格式的媒体源。 交互标记 `<progress>`元素用于创建进度条,展示任务的完成进度,HTML5新增。 此外,前端开发还包括CSS(层叠样式表)用于定义页面样式,JavaScript用于实现动态交互和功能,以及像jQuery这样的库和Bootstrap这样的框架简化开发工作,还有对开发者工具的熟练使用,如浏览器的控制台,帮助调试和优化代码。 总结起来,HTML作为前端开发的基础,通过不同的标记和属性构建网页结构,并通过CSS和JavaScript增强视觉效果和交互性。学习HTML是踏入前端开发的第一步,理解和掌握这些基本元素是成为一名合格前端开发者的必要条件。