前端新手入门:HTML<body>详解及常用标记
需积分: 9 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是踏入前端开发的第一步,理解和掌握这些基本元素是成为一名合格前端开发者的必要条件。
2021-10-14 上传
2023-07-02 上传
2023-07-05 上传
2023-05-26 上传
2023-06-02 上传
2024-01-10 上传
2023-06-09 上传
2023-06-09 上传
2023-06-06 上传
猫腻MX
- 粉丝: 16
- 资源: 2万+
最新资源
- C++多态实现机制详解:虚函数与早期绑定
- Java多线程与异常处理详解
- 校园导游系统:无向图实现最短路径探索
- SQL2005彻底删除指南:避免重装失败
- GTD时间管理法:提升效率与组织生活的关键
- Python进制转换全攻略:从10进制到16进制
- 商丘物流业区位优势探究:发展战略与机遇
- C语言实训:简单计算器程序设计
- Oracle SQL命令大全:用户管理、权限操作与查询
- Struts2配置详解与示例
- C#编程规范与最佳实践
- C语言面试常见问题解析
- 超声波测距技术详解:电路与程序设计
- 反激开关电源设计:UC3844与TL431优化稳压
- Cisco路由器配置全攻略
- SQLServer 2005 CTE递归教程:创建员工层级结构