📌  相关文章
📜  html 示例代码 - Html (1)

📅  最后修改于: 2023-12-03 15:31:17.627000             🧑  作者: Mango

HTML 示例代码 - HTML

HTML是用于创建网页的标记语言。本文将介绍一些HTML示例代码，可以作为程序员快速入门HTML的指南。

HTML 基础
HTML 页面模板

以下是一个简单的HTML页面模板。可以在 <!DOCTYPE html>标签后面添加内容来构建页面。

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>
HTML 标题

一个HTML文件通常需要一个标题。标题可以通过 h1 至 h6 标签创建，其中 h1 是最高级别的标题，h6 是最低级别的标题。

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML 段落

可以使用 <p> 标签创建一个段落。

<p>This is a paragraph.</p>
HTML 链接

可以使用 <a> 标签创建链接。href 属性指定链接目标的URL。

<a href="https://www.example.com/">Link text</a>
HTML 图片

可以使用 <img> 标签在HTML中添加图片。src 属性指定图片的URL，alt 属性为图片添加一个描述性文本。

<img src="example.png" alt="Description of example.png">
HTML 样式
HTML CSS 样式表

可以使用CSS来设置HTML元素的样式。可以将样式集中在长度名为 .css 的文件中，然后使用 <link> 标签将其引用到HTML文件中。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Heading</h1>
  </body>
</html>
HTML 内联样式

可以使用内联样式直接为HTML元素定义样式。可以使用 style 属性来添加CSS属性。

<h1 style="color: blue;">Blue heading</h1>
HTML 表格

可以使用 <table> 标签创建HTML表格。可以使用 <tr> 定义行，<td> 定义单元格。

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>
HTML 表单

可以使用HTML表单收集用户输入。可以使用 <form> 标签创建表单，可以使用 <input> 标签创建各种类型的输入字段，包括文本框、复选框和单选按钮。

<form action="/example.php">
  <label for="text">Text Input:</label>
  <input type="text" id="text" name="text"><br><br>
  <label for="checkbox">Checkbox:</label>
  <input type="checkbox" id="checkbox" name="checkbox"><br><br>
  <label for="radiobutton1">RadioButton1:</label>
  <input type="radio" id="radiobutton1" name="radiobutton" value="1"><br><br>
  <label for="radiobutton2">RadioButton2:</label>
  <input type="radio" id="radiobutton2" name="radiobutton" value="2"><br><br>
  <input type="submit" value="Submit">
</form>

以上是HTML示例代码的部分内容。通过学习这些示例代码，程序员可以快速掌握HTML的基础知识，构建出美观、有效的网站。