HTML基础教程

AI摘要
坤少博客

HTML基础教程

HTML(HyperText Markup Language,超文本标记语言)是构建网页的基础语言。本教程将带你了解HTML的基础知识。

 什么是HTML?

HTML是一种标记语言,用于创建和设计网页。它由一系列元素组成,这些元素告诉浏览器如何显示内容。

 基本HTML文档结构

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

<!DOCTYPE html>` 声明文档类型为HTML5

– `<html>` 是HTML页面的根元素

– `<head>` 包含文档的元信息

– `<title>` 指定浏览器工具栏中的标题

– `<body>` 包含可见的页面内容

 

 常用HTML元素

 标题

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>

段落

 

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

链接

<a href="https://www.example.com">这是一个链接</a>

图像

<img src="image.jpg" alt="图片描述" width="200" height="100">

列表

无序列表

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

表格

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

表单

<form>
    <label for="fname">名字:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">姓氏:</label><br>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="提交">
</form>

HTML属性

HTML元素可以拥有属性,属性提供了关于元素的额外信息

<a href="https://www.example.com" target="_blank">在新窗口打开链接</a>

常见属性:

– `href` – 指定链接的目标URL

– `src` – 指定图像的路径

– `width` 和 `height` – 指定图像的尺寸

– `alt` – 指定图像的替代文本

– `style` – 指定元素的CSS样式

– `class` – 指定元素的类名(用于CSS和JavaScript)

– `id` – 指定元素的唯一ID

 

HTML注释

<!-- 这是一个注释,不会在浏览器中显示 -->
<p>这是一个段落。</p>

 

HTML5新元素

 

HTML5引入了许多新的语义元素:

 

– `<header>` – 定义文档或节的页眉

– `<nav>` – 定义导航链接

– `<section>` – 定义文档中的节

– `<article>` – 定义独立的自包含内容

– `<aside>` – 定义内容之外的内容(如侧边栏)

– `<footer>` – 定义文档或节的页脚

– `<figure>` 和 `<figcaption>` – 定义图像及其标题

文章最后更新时间:2025-06-11 05:19:28,若有错误或已失效,请在下方 留言
© 版权声明
THE END
喜欢就支持一下吧
点赞169 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容