前端学习笔记

计算机开发 htmlcssjavascript

一、HTML5 学习

1. HTML5 的基础骨架

HTML 是一种超文本标记语言，不是编程语言。

一个最基本的 HTML5 页面结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
</head>
<body>
</body>
</html>

说明

  • <!DOCTYPE html>：声明当前文档为 HTML5
  • <html>：整个 HTML 文档的根标签
  • <head>：文档头部，用于放置元信息
  • <body>：文档主体，用于放置页面中实际显示的内容

2. <head> 中常见标签

① meta 标签

meta 标签用于描述网页文档的元信息，例如字符编码、页面描述、关键词等。

最常见的是字符编码设置：

<meta charset="UTF-8">

说明：

  • UTF-8 是最常用的编码格式
  • 实际开发中通常优先使用 UTF-8

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>itbaizhan</title>
</head>
<body>
</body>
</html>

② title 标签

用于设置网页标题，即浏览器标签页上显示的名称。

<title>百度一下，你就知道</title>

3. <body> 中常见标签

① 段落标签 p

<p>这是一个段落</p>

② 换行标签 br

<br> 是单标签，用于在不新建段落的情况下换行。

第一行<br>
第二行

③ 水平线标签 hr

用于创建水平分割线。

<hr>

早期 HTML 中常见的 color、align 等属性现在通常不推荐直接使用，实际开发中一般用 CSS 控制样式。

4. 标题标签 h1 ~ h6

HTML 用 <h1> 到 <h6> 表示六级标题：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

使用建议

  • <h1> 一般作为页面主标题
  • <h2>、<h3> 等依次向下表示层级
  • 不要只为了“变大变粗”而使用标题标签
  • 正确使用标题结构有利于 SEO 和页面语义化

5. 图片标签 img

<img> 用于在页面中插入图片，是单标签。

<img src="图片地址" alt="替代文本" title="提示文字" width="300" height="200">

常用属性

  • src：图片路径
  • alt：图片无法显示时的替代文本
  • title：鼠标悬停时的提示文字
  • width：宽度
  • height：高度

路径的三种表示方式

① 相对路径

相对于当前文件的位置，例如：

<img src="./images/a.png">
<img src="../images/a.png">

② 绝对路径（本地路径）

例如：

C:\Users\xxx\Desktop\a.png

本地绝对路径一般不用于网页部署。

③ 网络路径

例如：

<img src="https://example.com/a.png">

6. 常用文本标签

标签说明
<em>强调，通常表现为斜体
<strong>强调，通常表现为粗体，语义更强
<b>粗体，偏样式
<i>斜体，偏样式
<del>删除线
<span>无特殊语义的行内容器

实际开发中，em 和 strong 比 i 和 b 更强调语义。

7. 超链接标签 a

<a> 用于定义超链接。

<a href="https://www.baidu.com">百度</a>

常用属性

  • href：跳转地址
  • target="_blank"：在新标签页打开链接

示例：

<a href="https://www.baidu.com" target="_blank">打开百度</a>

8. 列表标签

① 有序列表 ol

<ol>
  <li>尚学堂</li>
  <li>百战程序员</li>
</ol>

② 无序列表 ul

<ul>
  <li>尚学堂</li>
  <li>百战程序员</li>
</ul>

③ 列表嵌套

<ul>
  <li>尚学堂</li>
  <li>
    企业
    <ul>
      <li>阿里</li>
      <li>京东</li>
    </ul>
  </li>
  <li>百战程序员</li>
</ul>

早期的 type 属性现在较少直接使用，通常通过 CSS 控制列表样式。

9. 表格标签 table

表格由：

  • 表格：<table>
  • 行：<tr>
  • 单元格：<td>

组成。

示例：

<table border="1">
  <tr>
    <td>尚学堂</td>
    <td>百战程序员</td>
  </tr>
  <tr>
    <td>阿里</td>
    <td>京东</td>
  </tr>
</table>

单元格合并

  • 横向合并：colspan
  • 纵向合并：rowspan

示例：

<table border="1">
  <tr>
    <td colspan="2">合并两列</td>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

表格适合展示表格式数据，不建议用来做页面整体布局。

10. 表单 form

表单用于提交用户输入的数据。

一个基本表单示例：

<form action="url" method="get">
  <input type="text" name="user">
  <input type="submit" value="提交">
</form>

表单的组成

  1. 表单标签：<form>
  2. 表单控件：如 input
  3. 提交按钮：如 input type="submit" 或 button

常见表单控件

① 文本框

<input type="text" name="username">

② 密码框

<input type="password" name="pwd">

③ 提交按钮

<input type="submit" value="提交">

或：

<button type="submit">提交</button>

11. 元素的分类

HTML 元素常分为：

  • 块级元素
  • 行内元素
  • 行内块元素

① 块级元素

特点：

  • 独占一行
  • 一般可以设置宽高

常见块级元素：

  • div
  • form
  • h1 ~ h6
  • hr
  • p
  • table
  • ul

② 行内元素

特点：

  • 不独占一行
  • 默认不能直接设置宽高

常见行内元素：

  • a
  • b
  • em
  • i
  • span
  • strong

③ 行内块元素

特点：

  • 不独占一行
  • 可以设置宽高

常见行内块元素：

  • img
  • input
  • button

元素的显示类型也可以通过 CSS 的 display 属性修改。

二、CSS 学习

1. CSS 的基本语法

CSS 规则由两部分组成：

  • 选择器
  • 声明块

示例：

<style>
  h1 {
    color: blue;
    font-size: 12px;
  }
</style>

其中：

  • h1 是选择器
  • color: blue; 和 font-size: 12px; 是声明
  • 每条声明由“属性: 值”构成

若写在 HTML 文件中，通常放在 <head> 中的 <style> 标签内。

2. CSS 的引入方式

① 行内样式

通过元素的 style 属性直接书写：

<p style="background: orange; font-size: 24px;">CSS</p>

特点：

  • 书写方便
  • 维护性差
  • 不适合大型项目

② 内部样式表

在 HTML 文件头部使用 <style>：

<head>
  <style>
    h1 {
      background: red;
    }
  </style>
</head>

特点：

  • 适合单个页面
  • 页面间复用较差

③ 外部样式表（推荐）

把 CSS 写到独立的 .css 文件中，再通过 <link> 引入：

<link rel="stylesheet" href="style.css">

特点：

  • 便于维护
  • 便于复用
  • 实际开发中最常用

3. 选择器

① 通配符选择器

用 * 表示，匹配所有元素。

* {
  margin: 0;
  padding: 0;
}

常用于初始化样式。

② 元素选择器

直接写标签名，作用于所有该类元素。

p {
  font-size: 14px;
}

示例：

<p>学完了<span>前端</span>，继续学 Java</p>
<style>
span {
  color: red;
}
</style>

特点：

  • 能匹配页面中所有对应标签
  • 适合写共性样式

③ 类选择器

用 . 定义，通过 class 属性使用。

<h2 class="oneclass">你好</h2>

<style>
.oneclass {
  width: 800px;
}
</style>

class 的特点

  1. 一个类可以给多个标签使用
  2. 一个标签可以同时有多个类名
  3. 类名一般由字母、数字、短横线、下划线组成
  4. 类名通常不要以数字开头

示例：

<div class="content size"></div>

④ ID 选择器

用 # 定义，通过 id 属性使用。

<h2 id="mytitle">你好</h2>

<style>
#mytitle {
  border: 3px dashed green;
}
</style>

id 的特点

  • 通常在同一个页面中应保持唯一
  • 通常不要以数字开头

⑤ 合并选择器

当多个选择器使用相同样式时，可以合并书写。

p, h3 {
  font-size: 30px;
  color: red;
}

也可以用于类选择器：

.text, .title {
  font-size: 30px;
  color: red;
}

作用：

  • 减少重复代码
  • 提高可维护性

⑥ 选择器优先级

常见权重可粗略记为：

  • 元素选择器：1
  • 类选择器：10
  • ID 选择器：100
  • 行内样式：1000

优先级从高到低：

行内样式>ID选择器>类选择器>元素选择器\text{行内样式} > \text{ID选择器} > \text{类选择器} > \text{元素选择器}

注意

  • 通配符选择器优先级最低
  • 如果优先级相同，通常后写的生效
  • 实际 CSS 中还会受到继承、来源顺序和更复杂选择器组合影响

4. 学习建议

入门阶段建议按这个顺序掌握：

  1. HTML 基本结构
  2. 常见文本与媒体标签
  3. 列表、表格、表单
  4. 块级元素与行内元素
  5. CSS 三种引入方式
  6. 常见选择器与优先级

5. 易错点总结

① HTML 不是编程语言

HTML 负责结构和内容，不负责逻辑控制。

② img、br、hr 是单标签

它们不需要包裹内容。

③ 表格不用于页面整体布局

表格主要用于展示数据。

④ class 可重复，id 一般唯一

  • class：适合复用样式
  • id：适合标识唯一元素

⑤ 行内元素默认不能直接设置宽高

如 span、a 等通常需要配合 CSS 调整显示方式。

⑥ 外部样式表最适合真实项目

更利于维护和复用。

Linked Notes

No outgoing note links.

Referenced By

No backlinks yet.