首页 > 其他分享 >html代码 新手教学

html代码 新手教学

时间:2024-03-08 15:25:15浏览次数:14  
标签:网页 HTML 标签 教学 #### html 新手 标题

HTML 是超文本标记语言(HyperText Markup Language)的缩写,是用来描述网页结构的标记语言。在这篇教学中,我们将介绍一些 HTML 基础知识,帮助新手快速学习并掌握如何编写简单的网页。

### 第一部分:HTML 基础

#### 1. 标签(Tags)

HTML 使用标签来描述页面的结构,每个标签由尖括号包围,如`<tagname>`。标签通常是成对出现的,包括开始标签和结束标签,如`<tagname>内容</tagname>`。有些标签是自闭合的,不需要结束标签,如`<br>`用来表示换行。

#### 2. 基本结构

一个最简单的 HTML 页面结构如下:
```html
<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
</body>
</html>
```

- `<!DOCTYPE html>`:声明文档类型为 HTML5。
- `<html>`:HTML 页面的根元素。
- `<head>`:包含页面的元信息,如标题、样式表和脚本等。
- `<title>`:定义页面标题,显示在浏览器标签上。
- `<body>`:包含页面的内容。
- `<h1>`:定义标题级别为一级标题。
- `<p>`:定义段落。

#### 3. 常用标签

以下是一些常用的 HTML 标签:
- 标题:`<h1>` 到 `<h6>`,分别表示一级标题到六级标题。
- 段落:`<p>`。
- 链接:`<a>`,用来创建超链接。
- 图像:`<img>`,用来显示图片。
- 列表:`<ul>`、`<ol>`、`<li>`,分别表示无序列表、有序列表和列表项。
- 表格:`<table>`、`<tr>`、`<td>`,分别表示表格、表格行和表格单元格。
- 表单:`<form>`、`<input>`、`<button>`,用来创建表单及输入框。

### 第二部分:实例演示

#### 1. 创建一个简单网页

让我们一起创建一个简单的网页,包含标题、段落和链接。

```html
<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页!</h1>
    <p>这是一个使用 HTML 创建的简单网页。</p>
    <a href="https://www.example.com">点击访问示例网站</a>
</body>
</html>
```

#### 2. 插入图片

让我们再给网页添加一张图片。

```html
<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页!</h1>
    <p>这是一个使用 HTML 创建的简单网页。</p>
    <a href="https://www.example.com">点击访问示例网站</a>
    <img src="image.jpg" alt="示例图片">
</body>
</html>
```

#### 3. 创建表格

最后,我们来创建一个简单的表格。

```html
<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页!</h1>
    <p>这是一个使用 HTML 创建的简单网页。</p>
    <a href="https://www.example.com">点击访问示例网站</a>
    <img src="image.jpg" alt="示例图片">
    
    <table>
        <tr>
            <th>项目</th>
            <th>描述</th>
        </tr>
        <tr>
            <td>项目1</td>
            <td>这是项目1的描述。</td>
        </tr>
        <tr>
            <td>项目2</td>
            <td>这是项目2的描述。</td>
        </tr>
    </table>
</body>
</html>
```

### 结语

通过这篇教程,你应该已经掌握了如何使用 HTML 创建一个简单的网页,并了解了一些基本的 HTML 标签和结构。继续练习和深入学习,你将能够编写更复杂和丰富的网页内容。祝你在学习 HTML 的过程中取得成功!

标签:网页,HTML,标签,教学,####,html,新手,标题
From: https://www.cnblogs.com/qsz666/p/18061044

相关文章

  • python代码 新手教学
    #Python新手教学##简介Python是一种简单易学的编程语言,广泛应用于各个领域,包括Web开发、数据科学、人工智能等。本文将为新手程序员提供Python基础知识的教学,包括变量、数据类型、条件语句、循环、函数等内容。##变量和数据类型在Python中,变量用于存储数据,而数据类型则定义了......
  • 在HTML界面显示图片略缩图 , 点击图片放大显示
    HTML样式 <divid="outerdiv"style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"> <divid="innerdiv"style="position:absolute;"> <imgid=&......
  • 在Html界面上显示当前時間 , 使用js获取.
    为什么现在不能展开显示代码,只能折叠了,用行内代码把code贴上也显示不出来.点击查看代码<spanid="timenow"style="float:left;"></span><script>setInterval(functiongetNowTime(){varnowTime=newDate();varnowYear=nowTime.......
  • html5的学习
    HTML5基本标签<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>基本标签学习</title></head><body><!--标题标签--><h1>一级标签</h1><h2>二级标签</h2>......
  • HTML+CSS 实现简单打印页
    代码:<!DOCTYPEhtml><html><head><title>分页打印示例</title><style>/*打印样式*/@mediaprint{.page{page-break-after:always;/*每个.page元素后都分页*/}}</style>......
  • HTML开发工具和环境介绍,内附超详细的VS code安装教程!
    工欲善其事必先利其器,一款好的开发工具可以让我们事半功倍。前面我们对HTML的相关概念和基本结构已经有了基本的了解,下面我们就来安装在前端开发中的需要使用的开发工具及环境。在众多HTML编辑器中,选择一个适合自己的工具至关重要。今天我们就来认识一下前端开发工作中使用的最广......
  • html标签快速回顾
    html标签快速回顾html一篇搞定***补充:书写习惯,1不会写就是拼音全称,不要写拼音简写.2能展开写的代码就不要写一行,看起来麻烦<h1>标题,一个标签独占一行</h1> <p>段落,里面的文字会自适应浏览器大小换行</p> <br>强制换行 <strong>加粗</strong> <em>倾斜</em> <div>一个标签......
  • 开发了一个用于新手学针灸的小程序
    年前群里小伙伴宋工承担起开发工作,为大家带来了一个新年礼物——针灸速用通小程序!这个小程序解决的问题是针灸初学者或者非专业常遇到的:1、根据症状不知道下哪些穴位2、不知道如何取穴和定位穴位;所以第一版主要实现的功能:1、根据病症按照倪师的取穴原则自动推荐选用的下针穴位2、......
  • 青少年CTF-Crypto(新手版本2.0,无factor1)
    凯撒大帝的征讨之路题目:lnixoa{1x2azz7w8axyva7y1z2320vxy6v97v9a}知识点:凯撒加密我的题解:importbase64#shift得出移位多少,移位后的字母-移位前的字母defcaesar_decrypt(ciphertext,shift=ord('l')-ord('q')):str_list=list(ciphertext)i=0whilei......
  • 前端基础学习1 | Web、Html、CSS
    前端基础学习1|Web、Html、CSS1、Web基础知识Web(wwwWorldWideWeb),全球广域网,也称万维网,能够通过浏览器访问的网站Web网站的工作流程Web标准,也称为网页标准,由一些列的标准组成,大部分由W3C(WorldWideWebConsortium,万维网联盟)负责制定。Web标准由三个部分组成:HTML:......