HTML 基础标签学习

最新推荐文章于 2025-12-01 21:03:28 发布

原创最新推荐文章于 2025-12-01 21:03:28 发布 · 146 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

Visual Studio Code (VS Code) 是编写 HTML 的常用工具，支持语法高亮、代码提示和扩展插件。以下是常见的 HTML 基础标签及其用途：

文档结构标签
- <!DOCTYPE html>：声明 HTML5 文档类型。
- <html>：HTML 文档的根元素。
- <head>：包含元数据（如标题、CSS 链接）。
- <body>：定义文档的主体内容。
内容标签
- <h1> 到 <h6>：标题标签，数字越小级别越高。
- <p>：段落标签。
- <a href="url">：超链接标签。
- <img src="image.jpg" alt="描述">：图片标签。
表单标签（基础登记表）
- <form>：表单容器。
- <input type="text">：文本输入框。
- <input type="password">：密码输入框。
- <input type="submit">：提交按钮。
- <textarea>：多行文本输入框。
- <select> 和 <option>：下拉选择框。

示例 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>学习记录</title>
</head>
<body>
    <h1>HTML 基础标签</h1>
    <p>这是一个段落。</p>
    <a href="https://example.com">示例链接</a>
    <form>
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码">
        <input type="submit" value="提交">
    </form>
</body>
</html>

CSS 基础学习

CSS（层叠样式表）用于控制 HTML 的样式和布局。在 VS Code 中，可以通过 .css 文件或 <style> 标签嵌入 CSS。

CSS 基础语法
- 选择器：指定要样式化的 HTML 元素（如 p, .class, #id）。
- 声明块：包含属性和值（如 color: red;）。

示例 CSS 代码：

/* 标签选择器 */
p {
    color: blue;
    font-size: 16px;
}

/* 类选择器 */
.form-input {
    border: 1px solid #ccc;
    padding: 8px;
}

/* ID 选择器 */
#submit-btn {
    background-color: green;
    color: white;
}

CSS 引入方式
- 内联样式：直接在 HTML 标签中使用 style 属性。
- 内部样式：在 <style> 标签中定义样式。
- 外部样式：通过 <link rel="stylesheet" href="styles.css"> 引入外部 CSS 文件。
常用 CSS 属性
- color：文本颜色。
- font-size：字体大小。
- margin 和 padding：外边距和内边距。
- background-color：背景颜色。
- border：边框样式。