HTML & CSS 学习总结

芭芭拉向前冲

于 2023-06-25 19:05:03 发布

阅读量163

点赞数

分类专栏： Java 文章标签： html css 学习

本文链接：https://blog.csdn.net/qq_62911298/article/details/131288229

版权

Java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

HTML & CSS 学习总结

HTML
CSS

HTML

1.HTML是什么

HTML（超文本标记语言） 是一种用于创建网页结构和内容的标记语言。它是构建互联网世界的基础，被用于描述网页的结构和语义。HTML使用 标签（tag） 来定义文档中的各个元素，比如标题、段落、链接、图像等。通过使用不同的HTML标签和属性，可以指定文本的样式、布局和交互行为。

HTML文档 由一系列的标签组成，这些标签可以嵌套在彼此之中形成层次结构。每个标签都有一个开始标签和结束标签，开始标签用于标识元素的开始，结束标签用于标识元素的结束。

HTML还支持添加超链接、图像、表格、表单等交互元素，以及通过CSS（层叠样式表）来定义网页的外观和样式。最终，浏览器会根据HTML代码解析网页并呈现出可视化的内容。

HTML是一种用于创建网页结构和内容的标记语言，它定义了网页的结构、样式和交互元素，是构建网页的基础。

2.HTML的一个基本示例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML示例</title>
  <style>
    /* CSS样式可以放在<style>标签中 */
    body {
      font-family: Arial, sans-serif;
      background-color: #f1f1f1;
    }

    h1 {
      color: #333;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>HTML示例</h1>
    <p>这是一个包含 HTML 的示例文档。</p>
    <ul>
      <li><strong>HTML</strong> - 超文本标记语言</li>
      <li><em>CSS</em> - 层叠样式表</li>
      <li><a href="https://www.example.com">链接</a> - 这是一个链接示例</li>
    </ul>
    <img src="example.jpg" alt="示例图片">
    <form>
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name" required>
      <br>
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" required>
      <br>
      <input type="submit" value="提交">
    </form>
  </div>
</body>
</html>

!DOCTYPE html: 声明文档类型为 HTML5。
html: HTML 根元素。
head: 文档头部，包含元数据和引用的外部资源。
meta: 定义元数据，如字符集和视口设置。
title: 定义文档标题，显示在浏览器的标题栏或标签页上。
style: 内部 CSS 样式定义。
body: 文档主体内容。
div: 块级容器，用于组织内容。
h1: 标题级别 1。
p: 段落。
ul: 无序列表。
\li: 列表项。
strong: 强调文本。
em: 斜体文本。
a: 链接。
img: 图像。
\form: 表单。
label: 表单标签。
input: 输入字段。
id 和 name 属性: 用于标识和引用元素。
br: 换行。
required 属性: 表示输入字段必填。
submit: 表单提交按钮。## 3.HTML的基础知识

3.html的基础知识

标签：HTML使用尖括号（<>）来定义标签。标签通常成对出现，包括一个开始标签和一个结束标签。开始标签使用尖括号括住，并以尖括号中的标签名开始，结束标签类似，但在标签名前加上斜杠（/）。例如，< tag>…< /tag>。
元素：一个元素由一个开始标签、内容和一个结束标签组成，它们一起定义了网页中的一个部分。元素的内容可以是文本、图像、链接等。
属性：标签可以包含属性，属性提供了有关元素的额外信息。属性位于开始标签中，并以名称=值的形式给出。例如，< tag attribute=“value”>…< /tag>。
标题：HTML中有六个级别的标题，从< h1>到< h6>，< h1>表示最高级别的标题，< h6>表示最低级别的标题。标题用于定义文档的结构和层次。
段落：使用< p>标签来创建段落。它会自动在段落前后添加一些空白。
链接：使用< a>标签创建链接。在开始标签的href属性中指定链接的URL。例如，< a href=“https://www.example.com”>链接文本。
图像：使用< img>标签插入图像。在开始标签的src属性中指定图像的URL。例如，< img src=“image.jpg” alt=“图像”>。
列表：HTML支持有序列表（< ol>）和无序列表（< ul>）。在列表中，使用< li>标签创建列表项。
表格：使用< table>标签创建表格。使用< tr>标签定义表格行，使用< td>标签定义单元格。表头可以使用< th>标签定义。
表单：HTML提供了创建交互式表单的元素，如< input>、< textarea>和< select>。这些元素允许用户输入数据或进行选择。

CSS

1.CSS是什么

CSS（层叠样式表，Cascading Style Sheets） 是一种用于描述网页上元素外观和样式的标记语言。它被用于控制网页的布局、字体、颜色、背景、边框和其他视觉效果，使得网页能够呈现出丰富多样的样式。

CSS通过选择器和属性来定义元素的样式。选择器用于选择要应用样式的HTML元素，而属性用于指定元素的样式规则。通过将CSS样式应用于HTML文档，可以使得所有使用相同样式的元素具有一致的外观。

CSS的主要优势是将样式和内容分离。这意味着可以单独编辑和管理样式，而不需要修改HTML标记。这样可以提高开发效率并实现网页样式的重用。此外，CSS还支持层叠和继承机制，使得样式可以按照一定的优先级和继承规则进行组合和应用。

CSS是Web开发中的核心技术之一，与HTML和JavaScript一起构成了现代网页的基础。它为网页设计者和开发者提供了强大的控制和灵活性，使得他们能够创建出各种各样的精美和交互式的网页界面。

2.CSS的一个基本示例

在这里插入图片描述

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>CSS基本示例</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>Hello, CSS!</p>
</body>
</html>

CSS:

p {
    color: blue;            /* 设置文字颜色为蓝色 */
    background-color: gray; /* 设置背景颜色为灰色 */
  }

在这个示例中，我们使用了 < link> 标签将外部的CSS样式表文件引入到HTML文档中。CSS样式表文件的路径是style.css，它与HTML文件位于同一个目录下。

在CSS代码中，我们使用了选择器p来选中所有的段落元素。然后，通过设置color属性为blue，将文字颜色设置为蓝色；通过设置background-color属性为gray，将背景颜色设置为灰色。

当浏览器加载HTML文件时，会同时加载并应用该CSS样式表文件。这样，所有的段落元素都会继承这些样式规则，并显示出蓝色的文字和灰色的背景。

3.CSS的基础知识

选择器（Selectors）：选择器用于选择要应用样式的HTML元素。常见的选择器包括元素选择器（如p选择所有段落元素）、类选择器（如.container选择具有container类的元素）和ID选择器（如#header选择具有header ID的元素）等。
属性（Properties）：属性用于指定元素的样式规则。每个属性都有一个对应的值，用于描述要应用的样式。例如，color属性用于指定文字颜色，font-size属性用于指定字体大小。
值（Values）：属性的值用于定义样式的具体特性。例如，color: blue中的blue就是一个值，表示文字颜色为蓝色。CSS支持各种类型的值，包括颜色值（如red、#FF0000）、长度值（如10px）、百分比值（如50%）等。
盒模型（Box Model）：盒模型是CSS布局的基础概念。每个HTML元素都可以看作是一个矩形的盒子，包括内容区域、内边距、边框和外边距。CSS中的属性（如width、height、padding、border、margin）用于控制盒子的尺寸、间距和边框样式。
层叠和继承（Cascading and Inheritance）：CSS中的样式可以通过层叠和继承机制进行组合和应用。层叠指的是当多个样式规则应用于同一个元素时，它们按照特定的优先级和规则进行叠加。继承指的是某些样式属性可以从父元素继承到子元素，简化了样式的定义和维护。
媒体查询（Media Queries）：媒体查询允许根据设备的特性（如屏幕尺寸、分辨率）应用不同的样式。通过媒体查询，可以创建响应式的网页布局，以适应不同设备上的展示效果。

芭芭拉向前冲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML & CSS 学习总结

开始标签使用尖括号括住，并以尖括号中的标签名开始，结束标签类似，但在标签名前加上斜杠（/）。标题：HTML中有六个级别的标题，从< h1>到< h6>，< h1>表示最高级别的标题，< h6>表示最低级别的标题。在开始标签的src属性中指定图像的URL。表单：HTML提供了创建交互式表单的元素，如< input>、< textarea>和< select>。这样，所有的段落元素都会继承这些样式规则，并显示出蓝色的文字和灰色的背景。通过使用不同的HTML标签和属性，可以指定文本的样式、布局和交互行为。
复制链接

扫一扫