您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > HTML

一篇文章带你学会HTML以及最常用的标签

时间:2023-05-16 12:42:10  来源:今日头条  作者:你的老师父

html是一种标记语言,用于创建网页。在本文中,我们将介绍HTML的基础知识,代码写入到本地文件,并以.html结尾,双击浏览器打开就可以查看效果。

HTML文档结构

HTML文档由标签组成,每个标签可以包含文本和其他标签。一个HTML文档通常包括以下几个部分:

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        页面主体内容
    </body>
</html>
  • <!DOCTYPE html>:声明文档类型为HTML5。
  • <html>:HTML文档的根元素。
  • <head>:包含页面的元数据,如页面标题、css样式表和JAVAScript代码等。
  • <title>:定义页面的标题,会显示在浏览器的标题栏中。
  • <body>:包含页面的主体内容,如文本、图片、链接等。

HTML标签和属性

HTML标签用于定义页面的结构和样式,每个标签都有相应的属性用于设置标签的属性和样式。

下面是一些常用的HTML标签和属性:

  • <h1>-<h6>:定义标题,数字越小表示标题级别越高。
  • <p>:定义段落。
  • <a>:定义链接,href属性用于设置链接目标。
  • <img>:定义图片,src属性用于指定图片地址。
  • <ul>和<li>:定义无序列表,<ul>表示列表,<li>表示列表项。
  • <ol>和<li>:定义有序列表,<ol>表示列表,<li>表示列表项。
  • <table>、<tr>、<td>:定义表格,<table>表示表格,<tr>表示表格中的行,<td>表示表格中的单元格。
  • <div>:定义文档中的区块,用于组合其他元素。
  • <span>:定义文档中的行内元素,用于设置文本样式。

下面是一个HTML代码示例:

<!DOCTYPE html>
<html>
    <head>
        <title>我的网页</title>
        <style>
            h1 {color: red;}
            p {font-size: 18px;}
            a {text-decoration: none;}
            img {width: 100px;}
            table {border-collapse: collapse;}
            td {border: 1px solid black; padding: 5px;}
        </style>
    </head>
    <body>
        <h1>欢迎访问我的网页</h1>
        <p>这是一个段落。</p>
        <a href="https://www.example.com">这是一个链接</a>
        <br>
        <img src="https://t7.bAIdu.com/it/u=3085466652,3804111837&fm=193&f=GIF">
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
        </ul>
        <ol>
            <li>列表项1</li>
            <li>列表项2</li>
        </ol>
        <table>
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
            </tr>
            <tr>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
        </table>
    </body>
</html>

在这个示例代码中,<style>标签用于设置样式,<h1>标签用于定义标题,<p>标签用于定义段落,<a>标签用于定义链接,<img>标签用于定义图片,<ul>和<ol>标签用于定义列表,<table>、<tr>和<td>标签用于定义表格,<div>标签用于定义文档中的区块,<span>标签用于定义文档中的行内元素。

 

 

 

a标签

a标签用于定义链接,其中最重要的属性是href,用于指定链接目标。a标签可以包含文本或图片,也可以用于创建锚点链接。下面是一个a标签的示例:

<a href="https://www.example.com">这是一个链接</a>

在这个示例中,href属性指定了链接的目标为https://www.example.com,a标签包含了文本“这是一个链接”。

br标签

br标签用于在文本中创建换行符。它是一个空标签,不需要闭合。下面是一个br标签的示例:

这是第一行<br>
这是第二行

在这个示例中,br标签用于在第一行和第二行之间创建一个换行符。

div和span标签

div和span标签都是用于定义文档中的区块或行内元素,它们本身没有特定的含义,但可以用于组织和样式化HTML文档。div标签用于定义块级元素,通常用于组合其他元素,而span标签用于定义行内元素,通常用于设置文本样式。下面是div和span标签的示例:

<div>
    <h1>这是一个区块</h1>
    <p>这是区块中的段落</p>
</div>
<span style="color: red;">这是一段红色文本</span>

在这个示例中,div标签用于定义一个区块,包含了一个标题和一个段落,而span标签用于定义一段红色文本。

h1到h6标签

h1到h6标签用于定义标题,数字越小表示标题级别越高。通常,h1用于页面的主标题,h2用于页面的次级标题,以此类推。下面是h1到h6标签的示例:

<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>

在这个示例中,h1到h6标签分别用于定义不同级别的标题。

img标签

img标签用于定义图片,其中最重要的属性是src,用于指定图片的地址。img标签也可以包含alt属性,用于在无法加载图片时显示替代文本。下面是img标签的示例:

<img src="https://www.example.com/image.jpg" alt="这是一张图片">

在这个示例中,src属性指定了图片的地址为
https://www.example.com/image.jpg,`alt`属性指定了替代文本为“这是一张图片”。

li标签和ul标签

li标签用于定义列表项,ul标签用于定义无序列表。无序列表中的每个列表项通常用一个符号或图标表示。下面是li和ul标签的示例:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

在这个示例中,ul标签定义了一个无序列表,包含了两个列表项。

li标签和ol标签

li标签用于定义列表项,ol标签用于定义有序列表。有序列表中的每个列表项通常用数字或字母表示。下面是li和ol标签的示例:

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

在这个示例中,ol标签定义了一个有序列表,包含了两个列表项。

p标签

p标签用于定义段落。下面是p标签的示例:

<p>这是一个段落。</p>

在这个示例中,p标签用于定义一个段落。

table、tr和td标签

table、tr和td标签用于定义表格。table标签定义了表格,tr标签定义了表格中的行,td标签定义了表格中的单元格。table标签可以包含多个tr标签,而tr标签可以包含多个td标签。下面是table、tr和td标签的示例:

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

在这个示例中,table标签定义了一个表格,包含了两行两列的单元格。

总结

HTML是创建网页的基础,掌握了HTML标签的使用,就可以创建各种各样的网页。在本文中,我们详细介绍了HTML中常用的标签的使用,包括a、br、div、span、h1到h6、img、li和ul、li和ol、p以及table、tr和td标签。同时,我们也提供了代码和效果演示的示例,希望能够帮助您更好地理解和掌握HTML的基础知识。



Tags:HTML   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
如何使用 templ 在 Go 中编写 HTML 用户界面?
简介templ[1] 是一个在 Go 中编写 HTML 用户界面的语言。使用 templ,我们可以创建可呈现 HTML 片段的组件,并将它们组合起来创建屏幕、页面、文档或应用程序。安装我们可以通...【详细内容】
2023-12-21  Search: HTML  点击:(168)  评论:(0)  加入收藏
前端工作方式要换了?HTMX简介:无需JavaScript的动态HTML
HTMX允许你使用扩展的HTML语法代替 JavaScript 来实现交互性。HTMX 在标记中直接为你提供HTTP 交互,并支持许多其他交互需求,无需求助于 JavaScript。这是一个有趣的想法,可能...【详细内容】
2023-10-19  Search: HTML  点击:(292)  评论:(0)  加入收藏
解密前端三巨头:HTML、CSS和JavaScript的关系
如果你想成为一名Web开发者,或者只是想了解网页是如何构建的,那么你一定会遇到这三个词:HTML、CSS和JavaScript。它们是构建现代网页的三大核心技术,它们虽然看似不同,但在实际中...【详细内容】
2023-10-07  Search: HTML  点击:(235)  评论:(0)  加入收藏
HTMX简介:无需借助JavaScript的动态HTML
译者 | 布加迪审校 | 重楼HTML让您可以使用扩展的HTML语法而不是JavaScript来实现交互性。HTMX直接在标记中为您提供了HTTP交互,它支持其他许多交互要求,无需借助JavaScript。...【详细内容】
2023-10-07  Search: HTML  点击:(369)  评论:(0)  加入收藏
htmx:增强版 HTML 来了!
如今,Web 用户期望得到单页应用(SPA)提供的流畅、动态的体验。然而,创建 SPA 往往需要使用复杂的框架,如 React 和 Vue,学习和使用起来可能比较困难。这就是htmx的用武之地:一种通...【详细内容】
2023-09-03  Search: HTML  点击:(221)  评论:(0)  加入收藏
加入GitHub Accelerator,htmlx 2.0 要来了!
本文主要向大家介绍 htmlx 加入 GitHub Accelerator,关于 htmlx 的原理,以前有单独发表过文章介绍: 让 React 代码行数减少78%的 htmlx 有这么神?大家有感兴趣的可以阅读,话不多...【详细内容】
2023-08-25  Search: HTML  点击:(362)  评论:(0)  加入收藏
爬虫解析HTML动态JS,技术应用揭秘
在当今互联网时代,大量的信息都储存在了各种网页中。而对于开发者、数据分析师和研究人员来说,获取并分析这些网页中的数据是非常重要的任务之一。然而,随着技术的不断发展,许多...【详细内容】
2023-06-29  Search: HTML  点击:(219)  评论:(0)  加入收藏
利用ChatGPT辅助处理Html数据
使用chatgpt进行辅助编程首先要清晰描述自己需求,生成代码通过不断调试及优化,最终完成任务。有它,对程序员是好事也是坏事。一、确认功能请编程实现以下功能:1.所有html保存在a...【详细内容】
2023-05-31  Search: HTML  点击:(422)  评论:(0)  加入收藏
HTMLUnit无法抓取Vue页面,前端开发者困扰
最近,很多前端开发者在使用 HTMLUnit 进行页面爬取时,发现无法抓取到 Vue 生成的页面。这是一个普遍的问题,许多人都在寻找解决方案。本文将对这个问题进行详细分析,并提供解决...【详细内容】
2023-05-23  Search: HTML  点击:(294)  评论:(0)  加入收藏
一篇文章带你学会HTML以及最常用的标签
HTML是一种标记语言,用于创建网页。在本文中,我们将介绍HTML的基础知识,代码写入到本地文件,并以.html结尾,双击浏览器打开就可以查看效果。HTML文档结构HTML文档由标签组成,每个...【详细内容】
2023-05-16  Search: HTML  点击:(374)  评论:(0)  加入收藏
▌简易百科推荐
Htmx,它到底是框架还是库?
在最近的前端开发技术的探讨中,htmx经常成为热议的话题。一些人批评它,认为尽管htmx批评现代前端框架过于复杂,但它自己却似乎也是一个复杂的框架。这种看法值得我们深入思考。...【详细内容】
2024-03-28  前端达人  今日头条  Tags:Htmx   点击:(16)  评论:(0)  加入收藏
前端工作方式要换了?HTMX简介:无需JavaScript的动态HTML
HTMX允许你使用扩展的HTML语法代替 JavaScript 来实现交互性。HTMX 在标记中直接为你提供HTTP 交互,并支持许多其他交互需求,无需求助于 JavaScript。这是一个有趣的想法,可能...【详细内容】
2023-10-19  大迁世界  微信公众号  Tags:HTMX   点击:(292)  评论:(0)  加入收藏
HTMX简介:无需借助JavaScript的动态HTML
译者 | 布加迪审校 | 重楼HTML让您可以使用扩展的HTML语法而不是JavaScript来实现交互性。HTMX直接在标记中为您提供了HTTP交互,它支持其他许多交互要求,无需借助JavaScript。...【详细内容】
2023-10-07    51CTO  Tags:HTML   点击:(369)  评论:(0)  加入收藏
htmx:增强版 HTML 来了!
如今,Web 用户期望得到单页应用(SPA)提供的流畅、动态的体验。然而,创建 SPA 往往需要使用复杂的框架,如 React 和 Vue,学习和使用起来可能比较困难。这就是htmx的用武之地:一种通...【详细内容】
2023-09-03  前端充电宝  微信公众号  Tags:htmx   点击:(221)  评论:(0)  加入收藏
加入GitHub Accelerator,htmlx 2.0 要来了!
本文主要向大家介绍 htmlx 加入 GitHub Accelerator,关于 htmlx 的原理,以前有单独发表过文章介绍: 让 React 代码行数减少78%的 htmlx 有这么神?大家有感兴趣的可以阅读,话不多...【详细内容】
2023-08-25  高级前端进阶  今日头条  Tags:htmlx   点击:(362)  评论:(0)  加入收藏
爬虫解析HTML动态JS,技术应用揭秘
在当今互联网时代,大量的信息都储存在了各种网页中。而对于开发者、数据分析师和研究人员来说,获取并分析这些网页中的数据是非常重要的任务之一。然而,随着技术的不断发展,许多...【详细内容】
2023-06-29  反方向的鱼    Tags:HTML   点击:(219)  评论:(0)  加入收藏
利用ChatGPT辅助处理Html数据
使用chatgpt进行辅助编程首先要清晰描述自己需求,生成代码通过不断调试及优化,最终完成任务。有它,对程序员是好事也是坏事。一、确认功能请编程实现以下功能:1.所有html保存在a...【详细内容】
2023-05-31    51CTO  Tags:Html   点击:(422)  评论:(0)  加入收藏
一篇文章带你学会HTML以及最常用的标签
HTML是一种标记语言,用于创建网页。在本文中,我们将介绍HTML的基础知识,代码写入到本地文件,并以.html结尾,双击浏览器打开就可以查看效果。HTML文档结构HTML文档由标签组成,每个...【详细内容】
2023-05-16  你的老师父  今日头条  Tags:HTML   点击:(374)  评论:(0)  加入收藏
HTML代码混淆技巧:让爬虫无法抓取,保护你的网页!
随着互联网的发展,越来越多的网站开始使用爬虫技术来获取数据。但是,有些网站为了保护自己的数据安全,会对HTML代码进行混淆处理,使得爬虫无法直接抓取数据。本文将介绍HTML代码...【详细内容】
2023-04-13  倪沛童    Tags:HTML   点击:(238)  评论:(0)  加入收藏
HTML5第三节 初学者接触列表标签和div标签以及span标签
<ul> <li>为列表标签此为无序列表<type=“?”> <apuare>正方形<circle>空心圆环 <disc>默认 实心园 <ol> <li>为列表标签此为有序列表<type=“?”> <1> <a> <A>等 <dl> <dt>...【详细内容】
2023-02-07  那般热衷是你  今日头条  Tags:HTML5   点击:(226)  评论:(0)  加入收藏
站内最新
站内热门
站内头条