HTML基本文件结构和元素

简介: HTML基本文件结构和元素

HTML

HyperText Markup Language

超文本标记语言

文件结构

<!DOCTYPE html> // 起始行

<html>   // 开始标签  

<head>  // 文档描述信息
<title></title>
</head>

<body>  // 网页内容

</body>

</html>  // 结束标签

常用标签

1、标题标签

<h1>一级标题</h1>

<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

2、段落标签

<p>这是一段正文</p>

这是一段正文

3、文本样式标签

<b>加粗</b>
<i>斜体</i>
文本<sub>下标</sub>
<del>删除线</del>
<br />换行

加粗

斜体

文本下标

删除线


换行

4、列表标签

无序列表

<ul>
<li>苹果</li>
<li>橙子</li>
</ul>
  • 苹果
  • 橙子

有序列表

<ol>
<li>苹果</li>
<li>橙子</li>
</ol>
  1. 苹果
  2. 橙子

5、超链接标签

<a href="http://www.baidu.com";>百度</a>

百度

6、图片标签

<img src="./image.jpg" />


7、多媒体标签

视频标签

<video src="./video.mp4" controls></video>

8、音频标签

<audio src="./music.mp3" controls></audio>

9、div标签

<div>
<h3>标题</h3>
<p>内容</p>
</div>

标题

内容

10、布局标签

<header>头部信息</header>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<main>内容区域</main>
<footer>底部信息</footer>
<article>文章详情</article>
<section>页面分区</section>

更多内容

HTML 教程- (HTML5 标准)

            </div>
目录
相关文章
|
9月前
|
人工智能 Python
【02】做一个精美的打飞机小游戏,python开发小游戏-鹰击长空—优雅草央千澈-持续更新-分享源代码和游戏包供游玩-记录完整开发过程-用做好的素材来完善鹰击长空1.0.1版本
【02】做一个精美的打飞机小游戏,python开发小游戏-鹰击长空—优雅草央千澈-持续更新-分享源代码和游戏包供游玩-记录完整开发过程-用做好的素材来完善鹰击长空1.0.1版本
275 7
|
网络协议 编译器 Linux
【C语言】结构体内存对齐:热门面试话题
【C语言】结构体内存对齐:热门面试话题
423 0
|
9月前
|
人工智能 自然语言处理 算法
AI 对研发流程的变革
AI编程助手通过自然语言生成代码、解释复杂算法、优化代码等,极大提升了开发效率与代码质量。开发者可利用通义灵码进行代码解释、生成注释及单元测试,简化开发流程。在需求分析、设计、编码、测试到部署的全流程中,AI助手表现优异,尤其在编码和测试阶段显著提高工作效率。尽管目前AI助手在需求分析方面尚需改进,但其未来发展潜力巨大,有望逐步替代部分人力工作。体验地址:[阿里云智能编码](https://www.aliyun.com/solution/tech-solution/intelligent-coding)。
|
安全 Java 网络安全
Java Socket编程教程:构建安全可靠的客户端-服务器通信
【6月更文挑战第21天】构建安全的Java Socket通信涉及SSL/TLS加密、异常处理和重连策略。示例中,`SecureServer`使用SSLServerSocketFactory创建加密连接,而`ReliableClient`展示异常捕获与自动重连。理解安全意识,如防数据截获和中间人攻击,是首要步骤。通过良好的编程实践,确保网络应用在复杂环境中稳定且安全。
276 0
|
关系型数据库 开发者
|
数据采集 算法 搜索推荐
R语言营销数据分析:使用R进行客户分群的实践探索
【9月更文挑战第1天】R语言以其强大的数据处理和统计分析能力,在金融数据分析、营销数据分析等多个领域发挥着重要作用。通过R语言进行客户分群,企业可以更好地理解客户需求,制定精准的营销策略,提升市场竞争力和客户满意度。未来,随着大数据和人工智能技术的不断发展,R语言在营销数据分析中的应用将更加广泛和深入。
|
机器学习/深度学习 Linux TensorFlow
【Tensorflow+keras】用代码给神经网络结构绘图
文章提供了使用TensorFlow和Keras来绘制神经网络结构图的方法,并给出了具体的代码示例。
270 0
|
机器学习/深度学习 数据采集 算法
图像处理神经网络数据预处理方法
图像预处理步骤对于图像处理神经网络至关重要。这些步骤不仅保证了数据的一致性和质量,还可以通过数据增强等技术提高模型的泛化能力,从而提升模型的整体性能。每一步骤的选择和应用都基于具体任务和数据集的特性,并在模型训练和测试过程中起到关键作用。
382 0
|
人工智能 搜索推荐 物联网
高通正式推出高通AI Hub,支持超过75款AI大模型
【2月更文挑战第9天】高通正式推出高通AI Hub,支持超过75款AI大模型
577 2
高通正式推出高通AI Hub,支持超过75款AI大模型
|
网络虚拟化
以太网链路聚合与交换机堆叠、集群
以太网链路聚合与交换机堆叠、集群