HTML基本元素学习笔记

HTML元素

HTML 文档结构：HTML 文档由相互嵌套的 HTML 元素构成。
HTML 元素定义：
由一对双标记（如 <p></p>）或单标记（如 <br>）表示。
元素的内容是开始标签与结束标签之间的内容。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>HTML元素示例</title>
</head>
<body>
    <p>这是一个段落。</p>
    <br>
    <hr>
</body>
</html>

HTML元素的层级关系：
父元素：包含子元素的元素
子元素：嵌套在父元素内部的元素
兄弟元素：同级的元素
后代元素：父元素下的所有嵌套元素

HTML属性

属性的定义与使用：
提供附加信息的键值对，如 name="value"
必须写在开始标签内

示例代码：

<p lang="zh" align="center">中文段落</p>

常用属性：
lang: 指定语言
align: 文本对齐方式
注意：HTML5中部分属性已被废弃，如align、bgcolor。

图像元素

定义：使用<img>标签定义图像
常用属性：
src: 图像路径
alt: 替代文本
title: 鼠标悬停显示的文本
width 和 height: 设置图像宽高

示例代码：

<img src="image.jpg" alt="一张美丽的风景图" title="风景图示例" width="300" height="200">

路径类型：
相对路径：<img src="images/logo.png">
绝对路径：<img src="https://example.com/logo.png">

超链接元素

定义：超链接使用<a>标签定义
常用属性：
href: 链接地址
target: 链接打开方式
_self: 在当前窗口打开（默认）
_blank: 在新窗口打开

示例代码：

<a href="https://www.example.com" target="_blank">访问示例网站</a>

列表元素

无序列表 (<ul>)：
使用<li>定义列表项

示例代码：

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

有序列表 (<ol>)：
使用<li>定义列表项

示例代码：

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

定义列表 (<dl>)：
使用<dt>定义术语，<dd>定义描述

示例代码：

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

课程总结

掌握了HTML元素的定义、使用及其层级关系。
了解了HTML属性的设置与常用属性。
学会了图像元素、超链接元素与列表元素的使用。
能够编写基本的HTML页面。