前端HTML+CSS全套课堂笔记

一、HTML 基础入门（3.13笔记）

1. 网页本质

网页 = HTML 文件

HTML：超文本标记语言，由一套标签组成

编写工具：DW、HBuilder、记事本

创建方式：新建文本文档 → 修改后缀 .txt → .html

2. 标签关系规则

标签之间：可并列、可包含、不可交叉

3. HTML 基础骨架结构

<html></html> 最外层根标签，浏览器从此解析文档
  <head></head> 头部区域
    <title></title> 页面标题，必须放在head内
  <body></body> 页面主体，所有可见内容写这里

编码设置：<meta http-equiv="content-type" content="text/html; charset=utf-8">

二、基础文本、排版标签（3.18 / 3.16）

1. 排版标签

<center></center> 内容居中

<hr /> 水平线（单标签）

<h1>~<h6> 一级至六级标题，字号逐级减小

<p></p> 段落标签，自带上下间距

<br /> 强制换行

2. 文本样式标签

<b></b> 加粗

<i></i> 倾斜

<s></s> 删除线

<font color="green" size="14"></font> 文字颜色、字号

3. HTML 标签语法

双标签：<标签属性="值">内容</标签>

<body bgcolor="pink" background="bg.jpg"></body>
bgcolor 设置背景色，background 设置背景图片

单标签：<标签属性="值" />

<hr width="300" size="5" align="left" />
width宽度、size粗细、align对齐方式

4. 超链接 a 标签

href：跳转地址
target="_self" 默认当前页打开
target="_blank" 新空白窗口打开
示例：<a href="https://www.baidu.com" target="_blank">百度网</a>

三、图片、路径、列表、表格（3.25）

1. 图片标签 img

<img /> 单标签
src：图片路径
width/height：宽高
alt：图片加载失败提示文字
align：对齐 top/middle/bottom/left/right
border：图片边框

2. 路径分类

相对路径：文件与图片的相对位置，/ 下一级，../ 上一级

绝对路径：本地完整盘符路径 / 网络完整URL地址

3. 列表

无序列表 ul + li：type可选 disc实心圆、circle空心圆、square方块

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

有序列表 ol + li：type 1/a/A/I/i，start设置起始数字

4. 表格 table

<table> 表格容器
    border 边框宽度 width宽 height高 align对齐
    cellspacing 单元格间距 cellpadding 单元格内边距
    <caption>表格标题</caption>
    <tr> 一行
        <th>表头单元格（加粗居中）</th>
        <td>普通单元格</td>
    </tr>
</table>

5. 单元格合并

跨行合并：rowspan="数字"

跨列合并：colspan="数字"

操作步骤：确定合并方向 → 目标单元格写合并属性 → 删除多余单元格

四、表单 form（收集用户数据）

1. 表单三部分

表单域 <form></form>、表单元素、文字提示

form 属性：
action：提交数据的后端地址
method：提交方式 get / post
name / id：表单标识

2. input 输入框 type 类型

text：普通文本框 size显示长度 maxlength最大输入字符
password：密码框
radio：单选框 同一组name必须相同，value不同，checked默认选中
checkbox：复选框
submit：提交按钮 value自定义按钮文字
reset：重置按钮
file：文件上传域

3. 其他表单元素

<textarea rows="行数" cols="列数"></textarea> 多行文本域

<select>下拉列表
    <option selected="selected">默认选中项</option>
    <option>选项2</option>
</select>

五、CSS 基础（4.20 / 5.10 / 5.13）

1. CSS 介绍

全称：层叠样式表，作用：美化网页

核心价值：HTML结构与CSS样式分离，HTML做结构，CSS做美化

CSS组成：选择器 + 样式声明 {属性:值;}

2. 文本样式属性

color：文字颜色
font-size：字号 px/em
font-family：字体
font-weight:bold; 加粗
font-style:italic; 倾斜
text-indent:2em; 首行缩进
line-height：行高
text-decoration：文本修饰
    underline 下划线 / overline 上划线 / line-through 删除线 / none 无

3. 网页背景全套属性

1. background-color：背景色 关键字/十六进制/RGB
    opacity:0~1; 整体透明，文字同步透明
    rgba(r,g,b,a); a=透明度，仅背景透明文字不受影响
2. background-image:url(图片路径); 背景图
3. background-repeat：
    repeat 默认平铺 / no-repeat 不平铺 / repeat-x 水平平铺 / repeat-y 垂直平铺
4. background-position：定位 left/center/top/数值/百分比
5. background-attachment：scroll滚动 / fixed固定背景
6. background-size：背景图尺寸 100% 100%全屏拉伸
7. 简写：background: pink url(bg.jpg) no-repeat center fixed;

4. 元素显示模式

块级元素：独占一行，可设宽高 p h1~h6 div

行内元素：一行多个，不能设置宽高 a span

行内块元素：一行多个，可设宽高 img input td

display:block; 转为块级
display:inline; 转为行内
display:inline-block; 转为行内块

5. 基础选择器

标签选择器：直接写标签名 {}，缺点无法差异化设置

类选择器：.类名{} 页面 class="类名"，开发最常用

6. 链接伪类选择器

:link 链接访问前
:visited 访问后
:hover 鼠标悬停
:active 鼠标点击按住
:focus 输入框获得光标焦点

六、CSS 盒子模型

1. 盒子四部分

content 内容区、padding 内边距、border 边框、margin 外边距

2. 边框 border

border-width 粗细
border-style 样式 solid实线 dashed虚线 dotted点线
border-color 颜色
简写：border:1px solid #ccc;
单边：border-top / border-bottom / border-left / border-right

3. 内边距 padding（内容到边框距离）

padding:5px; 上下左右全部5px
padding:5px 10px; 上下5 左右10
padding:5px 10px 15px; 上5 左右10 下15
padding:5px 10px 15px 20px; 上右下左

4. 外边距 margin（盒子与盒子间距）

简写规则同padding

盒子水平居中：margin:0 auto; 前提盒子必须设置宽度

前端 HTML + CSS 课堂完整笔记汇总