前端与 HTML | 青训营笔记

小小760
75 阅读2分钟

前端与 HTML - 青训营笔记

一、HTML基础

  1. 标签和属性

    • HTML文档的基本结构包括<!DOCTYPE>, <html>, <head>, 和 <body>。
    • 常用的标签有段落<p>，标题<h1>-<h6>，链接<a>，图像<img>，以及列表<ul>和<ol>。
    • 属性用于提供关于HTML元素的附加信息，例如链接的目标地址(href)或图像的源文件(src)。
    • HTML文档的基本结构包括声明、标签、标签和标签。标签内可以包含文档的元数据，如字符集声明（）和语言设置（），而标签则包含网页的实际内容。

  2. 语义化标签

    • 使用如<article>, <section>, <nav>, 和 <footer>等标签可以提高页面内容的可读性和可访问性。

  3. 表单元素

    • 包括输入框<input>（类型为text, password, email等），下拉菜单<select>，单选按钮<radio>，复选框<checkbox>，以及提交按钮<button>。

二、CSS基础

  1. 选择器

    • 元素选择器、类选择器、ID选择器和属性选择器等。 元素选择器： 选择基于元素名的所有元素。 语法：element { property: value; } 示例：如果你想要为所有的

      标签设置字体颜色为蓝色，你可以写 p { color: blue; } 类选择器 (Class Selector)： 选择具有特定class属性的元素。 语法：.classname { property: value; } 示例：给所有拥有highlight类的元素添加背景色，可以这样写 .highlight { background-color: yellow; } HTML示例：

      这段文字将有黄色背景。

      ID选择器 (ID Selector)： 选择具有特定id属性的单个元素。由于ID在一个页面中应该是唯一的，所以这种选择器通常用来选择某个特定的元素。 语法：#idname { property: value; } 示例：若要仅对一个特定的段落设置样式，比如ID为intro的段落，可以写 #intro { font-weight: bold; } HTML示例：

      这是介绍部分。

      属性选择器 (Attribute Selector)： 选择具有特定属性或属性值的元素。 语法：[attribute], [attribute=value], [attribute~=value], [attribute|=value], [attribute^=value], [attribute$=value], [attribute*=value]

  2. 布局

    • 盒模型是理解CSS布局的核心，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。
    • 常见的布局技术有浮动(float)，定位(positioning)，以及较新的Flexbox和Grid系统。

  3. 响应式设计

    • 使用媒体查询(media queries)来创建适应不同屏幕尺寸的设计。

三、JavaScript入门

  1. 基本语法

    • 变量声明、数据类型、运算符、控制结构（if语句、for循环、while循环）。

  2. DOM操作

    • 如何使用JavaScript来添加、修改和删除HTML元素，以及如何改变样式和处理事件。

  3. 异步编程

    • 理解回调函数、Promises和async/await的使用。

因此，前端技术离不开HTML，HTML是前端技术的基础，HTML、CSS和JavaScript三者紧密结合，共同构成了Web页面的三大组成部分。

avatar
文章
阅读
粉丝