HTML基础结构和常用标记的例子

简介: HTML基础结构和常用标记的例子

HTML基础结构和常用标记的例子

HTML的基本结构包括<head>、<body>等标记,基本语法包括属性、空标记等。常用的可视化标签包括div、span、p、img等,可以用css来改变它们的样式。文件路径需要用相对路径表示。例如,以下是一个简单的HTML文档:

```html
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<p>This is my first web page!</p>
</body>
</html>
```

在这个HTML文档中,我们使用了DOCTYPE声明来声明文档类型,使用了<html>、<head>、<title>等标签定义文档的头部结构,使用了<body>标签定义文档的主体结构,并在主体结构中使用了<h1>和<p>标签定义了标题和段落文本。

常用的可视化标签还包括<ul>和<li>,用于定义无序列表,<ol>和<li>用于定义有序列表。例如:

```html
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<p>This is my first web page!</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
</body>
</html>
```

如果你想创建一个更加复杂的网页,你可以使用<table>标签创建表格,使用<img>标签插入图片,使用<a>标签添加链接,使用<form>标签创建表单等。

在这个例子中,我们使用了`<h1>`标签来创建一个标题,使用了`<p>`标签来创建一个段落。这是 HTML 中的基本结构。你还可以使用`<ul>`和`<li>`标签创建无序列表,使用`<ol>`和`<li>`标签创建有序列表。

如果你想要创建一个复杂的网页,你还可以使用`<table>`标签创建表格,使用`<img>`标签插入图片,使用`<a>`标签添加链接,使用`<form>`标签创建表单等。

 

相关文章
|
5天前
|
数据安全/隐私保护
7.常用的HTML标记
7.常用的HTML标记
14 0
|
5天前
|
移动开发 HTML5
HTML发展史和HTML结构
【2月更文挑战第17天】HTML发展史和HTML结构。
19 2
|
5天前
|
移动开发 搜索推荐 开发者
HTML基础结构
HTML基础结构
|
5天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
44 1
|
8月前
HTML table 标准结构
HTML table 标准结构
32 0
|
3天前
|
前端开发 JavaScript
React中渲染html结构---dangerouslySetInnerHTML
React中渲染html结构---dangerouslySetInnerHTML
10 0
|
5天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
5天前
|
移动开发 前端开发 JavaScript
【专栏:HTML基础篇】深入HTML元素:理解结构与内容
【4月更文挑战第30天】本文探讨了HTML在构建网页中的核心作用,HTML元素构成网页结构与内容,包括`&lt;!DOCTYPE html&gt;`、`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`等基本元素及`&lt;div&gt;`、`&lt;span&gt;`、`&lt;a&gt;`、`&lt;img&gt;`等丰富标签。理解并恰当使用这些元素能创建清晰结构、优化SEO、增强交互性,并实现语义化,为打造功能强大且美观的网站奠定基础。进一步学习CSS和JavaScript将提升网页视觉效果和互动性。
|
5天前
vscode快捷HTML结构 | Emmet
vscode快捷HTML结构 | Emmet
12 1
|
5天前
|
搜索推荐 索引
HTML的基本结构
HTML的基本结构
26 2