PixelByte
不畏过往,不惧将来
PixelByte's Blog

HTML-构建万维网的基石,HTML基础

HTML-构建万维网的基石,HTML基础

HTML(全称HyperText Markup Language)是构建网页的基础语言,它使用标签来定义网页的结构和内容。这篇文章将介绍HTML的基础语法和一些常用代码示例

一、HTML文档结构

每个HTML文档都由以下基本结构组成:

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <!-- 网页内容 -->
  </body>
</html>
  • <!DOCTYPE html>: 声明文档类型为HTML5
  • <html>: HTML文档的根元素,所有内容都包含在其中
  • <head>: 包含网页的元信息,例如标题、字符编码、样式表链接等
  • <title>: 定义网页的标题,显示在浏览器标签栏中
  • <body>: 包含网页的可见内容,例如文本、图片、链接等

二、常用HTML标签

以下是一些常用的HTML标签及其功能:

  • 标题: <h1><h6> 定义不同级别的标题,<h1> 最大,<h6> 最小
  • 段落: <p> 定义一个段落
  • 链接: <a> 定义超链接,href 属性指定链接地址
  • 图片: <img> 插入图片,src 属性指定图片路径,alt 属性提供替代文本
  • 列表:
    • <ul> 定义无序列表
    • <ol> 定义有序列表
    • <li> 定义列表项
  • 表格:
    • <table> 定义表格
    • <tr> 定义表格行
    • <td> 定义表格单元格
  • 表单:
    • <form> 定义表单
    • <input> 定义输入框,type 属性指定输入类型(例如文本、密码、按钮等)
    • <label> 定义表单控件的标签
    • <button> 定义按钮

三、HTML代码示例

以下是一些简单的HTML代码示例:

  1. 标题和段落:
<h1>这是一个标题</h1>
<p>这是一个段落</p>
  1. 图片和链接:
<a href="https://www.example.com">
  <img src="photo.jpg" alt="示例图片">
</a>
  1. 无序列表:
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
  1. 表格:
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>
  1. 表单:
<form action="/submit" method="post">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">
  <button type="submit">提交</button>
</form>

四、文末总结

HTML是构建网页的基础,掌握其基础语法和常用标签是学习网页开发的第一步

如果您觉得我的文章对您有帮助,可考虑支持我!

捐赠支持

感谢您的支持!

发表回复

textsms
account_circle
email

PixelByte's Blog

HTML-构建万维网的基石,HTML基础
HTML(全称HyperText Markup Language)是构建网页的基础语言,它使用标签来定义网页的结构和内容。这篇文章将介绍HTML的基础语法和一些常用代码示例 一、HTML文档结构 每个HTML文…
扫描二维码继续阅读
2025-03-02