day5
计划
- HTML入门基础学习
笔记
1.HTML基础结构
- 文档声明：
<!DOCTYPE html>，声明文件类型为HTML5 - 根元素：
<html>，包含整个HTML文档 - 头部：
<head>，存放页面元信息<title>：页面标题，显示在浏览器标签栏<meta>：元数据，如字符集<meta charset="UTF-8">、视口设置<meta name="viewport"><style>：内部样式表<link>：引入外部样式表
- 主体：
<body>，页面可见内容区域
2.常用HTML标签
文本标签
<h1>-<h6>：标题标签，h1最大，h6最小<p>：段落标签<span>：行内容器，不换行<div>：块级容器，独占一行<b>：加粗文本
媒体标签
<img>：图片标签src：图片路径（相对路径如./img/1.png或绝对路径）alt：图片加载失败时的替代文本
<video>：视频标签src：视频路径controls：显示播放控制条
链接标签
<a>：超链接标签href：目标URLtarget="_blank"：在新窗口打开
3.CSS样式
三种引入方式
- 行内样式：通过标签的
style属性直接设置，优先级最高1
<span style="color: red;">红色文字</span>
- 内部样式：在
<style>标签内定义，作用于当前页面 - 外部样式：通过
<link>标签引入外部CSS文件，可复用1
<link rel="stylesheet" href="css/test01.css">
CSS选择器
- 元素选择器：直接使用标签名，选中所有该标签
1
span { color: red; }
- 类选择器：使用
.类名，可选中多个元素（类名可重复）1
.time { color: #b7b7b7; }
- ID选择器：使用
#ID名，只能选中一个元素（ID唯一）1
#a001 { text-decoration: none; }
4.盒子模型
- 核心概念：每个元素都是一个盒子，由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成
- box-sizing：控制盒子尺寸计算方式
content-box（默认）：width/height仅包含内容border-box：width/height包含内容+内边距+边框，便于布局计算
- margin：外边距，控制元素间距
margin: 0 auto;：上下边距为0，左右自动，实现块级元素居中
5.Flexbox弹性布局
- 开启方式：父元素设置
display: flex; - 主轴方向：
flex-directionrow（默认）：水平方向column：垂直方向
- 主轴对齐：
justify-contentspace-between：两端对齐，项目之间间距相等center：居中对齐space-around：均匀分布，项目两侧间距相等
- 交叉轴对齐：
align-itemscenter：垂直居中flex-start：顶部对齐flex-end：底部对齐
6.表单与表单项
表单结构
<form>：表单容器action：提交地址method：提交方式（get/post）
表单项类型
文本输入类
text：单行文本password：密码输入（隐藏内容）email：邮箱输入（自动验证格式）tel：电话输入url：网址输入textarea：多行文本
数字输入类
number：数字输入（带上下箭头）range：范围滑块
日期时间类
date：日期选择器time：时间选择器
选择类
select：下拉列表（配合<option>使用）radio：单选按钮（同一组name相同，互斥）checkbox：复选框（可多选）
文件上传
file：文件选择，multiple属性支持多文件
按钮类
submit：提交表单reset：重置表单button：普通按钮
7.表格
<table>：表格容器<thead>：表头区域<tbody>：表体区域<tr>：表格行<th>：表头单元格（默认加粗居中）<td>：表格数据单元格- 边框合并：
border-collapse: collapse;
8.综合页面实践
- 页面布局：使用
div划分区域（导航栏、内容区、页脚） - 响应式设置：
<meta name="viewport">适配移动端 - 样式优先级：行内样式 > ID选择器 > 类选择器 > 元素选择器
- 常用CSS属性
text-indent: 2em;：首行缩进2个字符line-height：行高text-decoration: none;：取消下划线border-radius：圆角cursor: pointer;：鼠标悬停显示手型transition：过渡动画效果