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等技术来进一步美化网页和增加交互性。


    相关文章
    |
    10天前
    |
    编解码 前端开发
    编写代码中常见问题汇总(html和css)
    text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
    32 5
    |
    14天前
    |
    存储 JavaScript 前端开发
    HTML标签data-属性的作用
    HTML标签data-属性的作用
    |
    14天前
    |
    移动开发 HTML5 前端开发
    【网页搭建基石】:揭秘HTML标签的魔法世界
    【网页搭建基石】:揭秘HTML标签的魔法世界
    |
    17天前
    |
    前端开发 JavaScript
    HTML情人节爱心代码
    HTML情人节爱心代码
    21 2
    |
    23天前
    |
    数据采集 移动开发 搜索推荐
    HTML基础-HTML5新增语义标签:解锁网页结构新维度
    【6月更文挑战第5天】本文介绍了HTML5的语义标签,旨在提升网页结构化和可访问性。核心语义标签包括`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`、`&lt;section&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`、`&lt;figure&gt;`和`&lt;figcaption&gt;`。常见问题包括滥用标签作布局工具、忽略`&lt;main&gt;`、不恰当嵌套和忽视辅助功能。
    |
    22天前
    |
    Web App开发 移动开发 前端开发
    Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
    Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
    22 1
    |
    22天前
    |
    移动开发 前端开发 HTML5
    Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
    Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
    30 1
    |
    3天前
    |
    移动开发 前端开发 搜索推荐
    HTML5飞跃指南:基础标签元素,网页设计的第一步
    HTML5飞跃指南:基础标签元素,网页设计的第一步
    |
    3天前
    |
    前端开发
    常用 HTML 标签元素(表格、表单)
    常用 HTML 标签元素(表格、表单)
    |
    3天前
    HTML中如何插入空格,HTML空格代码,多种HTML空格写法
    HTML中如何插入空格,HTML空格代码,多种HTML空格写法
    6 0