返回

HTML、CSS学习笔记（三）：深入浅出，探索网页元素和构建基础

前端

HTML基本语法规范：网页元素的基石

  1. HTML概述：网页框架的奠基者
  • HTML作为超文本标记语言，是创建网页的骨架。
  • HTML标签用于定义网页元素，使其具有特定的含义和功能。
  • HTML元素的排列组合赋予了网页结构。
  1. 标签与属性：组成元素的语言
  • HTML标签由尖括号（<>）包裹，以代表不同的元素类型。
  • 属性指定了该元素的特性，以name="value"的形式出现。
  • 标签和属性的组合决定了元素的结构和表现。
  1. 元素层级：网页元素的层层递进
  • 元素之间存在着层级关系，称为元素嵌套。
  • 嵌套元素形成树状结构，称为DOM（文档对象模型）。
  • DOM元素树是网页结构的基础，决定了元素在页面中的位置和表现。
  1. 常用HTML标签：构建网页元素的工具箱
  • <head>和<body>是HTML中最基本的两个标签，用于划分网页头部和内容部分。
  • <div>是常用的容器元素，用于划分和组织网页内容。
  • <p>用于创建段落，<ul>和<ol>用于创建列表。
  • <a>用于创建超链接，<img>用于插入图像。
  1. 属性的意义：增强元素功能的定制器
  • 属性提供了定制元素行为和外观的方式。
  • 属性可以在标签中直接指定，也可以通过脚本动态修改。
  • 常用的属性包括id、class、style等。

CSS初识：开启网页美学与交互大门

  1. CSS概述：网页美学与交互的塑造者
  • CSS（层叠样式表）是用于控制网页元素外观的语言。
  • CSS可以改变元素的字体、颜色、背景、边框、布局等。
  • CSS可以提升网页的美观性和用户体验。
  1. 选择器：精确定位网页元素
  • CSS选择器用于匹配特定元素。
  • 选择器可以根据元素的名称、ID、类名、属性等条件进行匹配。
  • 选择器的使用决定了CSS规则作用的范围。
  1. CSS声明：元素外观的指令
  • CSS声明由属性名和值组成，用于定义元素的特定样式。
  • 声明以属性名:值;的形式出现。
  • 多个声明可以组合成CSS规则，用大括号{}括起来。
  1. CSS属性：网页元素外观的调色板
  • CSS属性是用于元素外观的具体特征。
  • CSS属性非常丰富，可以控制元素的字体、颜色、背景、边框、布局等各个方面。
  • 属性值可以是数值、颜色值、长度值、百分比等多种类型。
  1. CSS布局：网页元素排列的艺术
  • CSS布局用于控制网页元素在页面中的位置和排列方式。
  • CSS提供了多种布局方式，如流式布局、浮动布局、弹性布局等。
  • 布局方式的选择取决于网页的设计和需求。

结语：从基础迈向进阶，不断探索网页开发的精彩

在本次学习中，我们重点探索了HTML的基本语法和常用标签，并开启了CSS领域的初识之旅。这些知识为我们奠定了网页开发的基础，为进一步探索前端技术领域做好了准备。