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>
目录
相关文章
|
编解码 网络协议 Oracle
java网络编程入门以及项目实战
这篇文章是Java网络编程的入门教程,涵盖了网络编程的基础知识、IP地址、端口、通讯协议(TCP和UDP)的概念与区别,并提供了基于TCP和UDP的网络编程实例,包括远程聊天和文件传输程序的代码实现。
java网络编程入门以及项目实战
|
人工智能
好域名怎么选?总结15名网站大佬给我的8条建议!(精华)
写网站上线的文章中提到需要有域名,本来是想在百度里搜一篇“选域名方面”的文章链接过去就好,但是看了好几篇,讲的都太笼统了,看完不知所云,一看就是“互相借鉴”的文章。所以我问了身边的几十位大佬,让他们给我一些选域名建议。
9231 0
|
4天前
|
数据采集 人工智能 安全
|
13天前
|
云安全 监控 安全
|
5天前
|
自然语言处理 API
万相 Wan2.6 全新升级发布!人人都能当导演的时代来了
通义万相2.6全新升级,支持文生图、图生视频、文生视频,打造电影级创作体验。智能分镜、角色扮演、音画同步,让创意一键成片,大众也能轻松制作高质量短视频。
1094 152
|
18天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1772 9
|
10天前
|
人工智能 自然语言处理 API
一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸
一句话生成拓扑图!next-ai-draw-io 结合 AI 与 Draw.io,通过自然语言秒出架构图,支持私有部署、免费大模型接口,彻底解放生产力,绘图效率直接爆炸。
704 152
|
12天前
|
人工智能 安全 前端开发
AgentScope Java v1.0 发布,让 Java 开发者轻松构建企业级 Agentic 应用
AgentScope 重磅发布 Java 版本,拥抱企业开发主流技术栈。
664 13