HTML标签导读及实用代码实例

简介: HTML标签导读及实用代码实例

HTML(HyperText Markup Language)是网页开发的基础,通过一系列的标签来定义网页的结构和内容。这些标签不仅使网页具有可读性,还使浏览器能够正确地解析和显示网页。本文将介绍HTML中一些常用的标签,并通过代码实例来展示它们的使用方法和效果。

一、HTML文档结构

一个基本的HTML文档通常包括以下几个部分:`<!DOCTYPE html>`声明、`<html>`根元素、`<head>`头部元素和`<body>`主体元素。

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <!-- 其他头部信息,如CSS链接、JavaScript脚本等 -->
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>


二、常用HTML标签

 1.标题标签      `<h1>` - `<h6>`用于定义网页中的标题或子标题,

`<h1>`表示最大号的标题 ,`<h6>`表示最小号的标题

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<!-- 以此类推,到h6 -->


  1. 段落标签   `<p>`

用于定义网页中的段落。

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


  1. 超链接标签 `<a>`

用于创建链接到其他网页或资源的链接。

<a href="https://www.example.com">访问示例网站</a>


 4. 图像标签

用于在网页中插入图像。

<img src="image.jpg" alt="示例图片">


  1. 列表标签

- 无序列表 `<ul>` 和 `<li>`

- 有序列表 `<ol>` 和 `<li>`

- 定义列表 `<dl>`、`<dt>` 和 `<dd>`

<!-- 无序列表 -->
<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>
<!-- 有序列表 -->
<ol>
    <li>步骤1</li>
    <li>步骤2</li>
</ol>
<!-- 定义列表 -->
<dl>
    <dt>术语1</dt>
    <dd>定义1</dd>
    <dt>术语2>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>30</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>25</td>
    </tr>
</table>


  1. 表单标签

    - 表单 `<form>`

    - 输入框 `<input>`

    - 按钮 `<button>`

    - 选择框 `<select>`

    - 复选框 `<input type="checkbox">`

    - 单选按钮 `<input type="radio">`

    - 文本域 `<textarea>`

    <form action="/submit_form" method="post">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name">
    
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age">
    
        <input type="submit" value="提交">
    </form>


    三、HTML属性

    HTML标签还可以带有属性,用于提供关于HTML元素的额外信息。例如,`<a>`标签的`href`属性定义了链接的目标地址,`<img>`标签的`src`属性定义了图像的来源地址。


    四、总结

    本文介绍了HTML中的一些常用标签及其使用方法和效果。这些标签是构建网页的基本元素,通过组合和嵌套这些标签,我们可以创建出结构清晰、内容丰富的网页。同时,我们也提到了HTML标签可以带有属性来提供额外信息。在实际开发中,我们还需要结合CSS和JavaScript等技术来进一步美化网页和增加交互性。


    相关文章
    |
    1月前
    |
    移动开发 HTML5
    HTML5标签的类型
    HTML5标签的类型。
    56 5
    |
    18天前
    |
    移动开发 编解码 UED
    除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
    【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
    |
    23天前
    |
    JSON 移动开发 数据格式
    html5+css3+js移动端带歌词音乐播放器代码
    音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
    75 6
    |
    27天前
    |
    XML 数据格式
    HTML 实例解析
    本文介绍了HTML中常见元素的使用方法,包括`&lt;p&gt;`、`&lt;body&gt;`和`&lt;html&gt;`等。详细解析了这些元素的结构和作用,并强调了正确使用结束标签的重要性。此外,还提到了空元素的使用及大小写标签的规范。
    |
    1月前
    |
    Java BI API
    spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
    这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
    432 0
    spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
    |
    18天前
    |
    存储 移动开发 前端开发
    |
    1月前
    |
    JavaScript 前端开发
    电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
    电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
    103 1
    |
    1月前
    |
    前端开发
    【HTML】img标签和超链接标签
    【HTML】img标签和超链接标签
    43 2
    |
    1月前
    |
    移动开发 前端开发 JavaScript
    【HTML】HTML页面和常见标签
    【HTML】HTML页面和常见标签
    34 1
    |
    2月前
    |
    前端开发
    前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
    本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
    113 1

    热门文章

    最新文章