初识HTML

发布时间：2024年01月15日

HTML（Hypertext Markup Language）是用于构建网页结构的标记语言，HTML中文全名叫做：超文本标记语言。超文本的意思就是不止是文本，还可以包含图片，链接，音乐，等非文字元素。

1.HTML的基础结构

  1. <!DOCTYPE html>：

    • 作用：声明文档类型和HTML版本，帮助浏览器正确渲染页面。
    • 示例：

      <!DOCTYPE html>

  2. <html>：

    • 作用：定义HTML文档的根元素。
    • 示例：

      <!DOCTYPE html> <html> <!-- 内容 --> </html>

  3. <head>：

    • 作用：包含关于文档的元信息，如标题、字符集、样式链接等。
    • 示例：

      <!DOCTYPE html> <html> <head> <!-- 元信息 --> </head> <!-- 内容 --> </html>

  4. <body>：

    • 作用：包含文档的主要内容，如文本、图片、链接等。
    • 示例：

      <!DOCTYPE html> <html> <head> <!-- 元信息 --> </head> <body> <!-- 主要内容 --> </body> </html>

2.

  1. 段落标签 <p>：

    图片示例：
    • 一段文字被包裹在<p>标签中，展示段落的效果。

  2. 标题标签 <h1> - <h6>：

    • 图片示例：
    • 展示不同级别标题的样式，如一个页面标题使用<h1>，子标题使用<h2>等。

  3. 链接标签 <a>：

    • 图片示例：? ? ?
    • 一个超链接的样例，包含链接文本和链接目标。

  4. 图片标签 <img>：

    • 图片示例：
    • 展示如何使用<img>标签插入图片，并包含src和alt属性。

  5. 列表标签 <ul>、<ol> 和 <li>：

    • 图片示例：
    • 展示无序列表和有序列表的外观，包含列表项。乍一看好像差不多，确实确实差不多qwq，无序列表也能通过样式改变为有序的样子，不过那都是后话

  6. 表格标签 <table>、<tr> 和 <td>：

    • 图片示例：
    • 这是一个普通的表格，我在table标签中加入了?border="1"所以表格的边框就有了长度

  7. 表单标签 <form>、<input> 和 <button>：

    • 图片示例：
    • 其中具体代码

      ?<form>

      ? ? <!-- 文本输入框 -->

      ? ? <label for="username">用户名:</label>

      ? ? <input type="text" id="username" name="username" placeholder="请输入用户名">

      ? ? <br>

      ? ? <!-- 密码输入框 -->

      ? ? <label for="password">密码:</label>

      ? ? <input type="password" id="password" name="password" placeholder="请输入密码">

      ? ? <br>

      ? ? <!-- 提交按钮 -->

      ? ? <input type="submit" value="登录">

      ? </form>

  8. 注释 <!-- 注释内容 -->：

    • 按住ctrl加/就可以把你的代码注释掉，就是让你的代码不起作用或者说是一个提醒作用
    • 一个HTML文件中包含注释的示例。

? ?感谢您的阅读，若有不足，恳请您对我提出宝贵的建议和意见。我非常重视您的反馈，并感谢您愿意指出我的问题所在。

文章来源:https://blog.csdn.net/uuukkyo/article/details/135590702
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章