第一章 网页制作相关概念
1.网页
1.1 什么是网页
网页是根据因特网上一定的规则，使用html等制作的用于展示特定内容的网页集合。
网页是构成网站的基本元素。
网页是图片、链接、文字、声音、视频等源深路组成，其实就是一个html文件。
1.2 什么是HTML
HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言（markup language）。
标记语言是一套标记标签（markup tag）。
超文本的含义：
它可以加入图片、声音、动画、多媒体等内容（超越文本限制）。 它可以从一个文件跳转到另一个文件，于世界各地主机的文件连接（超级链接文本）。
1.3 网页的形成
网页由网页元素组成，这些元素通过html标签描述出来，然后通过浏览器解析并显示出来。
2.常用浏览器及其内核
2.1 常用浏览器
浏览器是网页显示、运行的平台。
五大浏览器有 IE、Firefox、Chrome、Safari 和 Opera。
四大内核：Trident, Gecko, Webkit, Blink
2.2 浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360、百度浏览器 |
| firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | chrome/opera 浏览器内核 |
3.开发工具
3.1 文档类型声明标签
<!DOCTYPE> 文档类型声明，告诉浏览器使用何种 HTML 版本来显示网页。
这句话的意思是：当前页面采用的是 HTML5 版本来显示网页。
<!DOCTYPE>声明位于文档最前面的位置，处于<head>标签之前。
<!DOCTYPE>不是一个 HTML 标签，他就是文档类型声明标签。
3.2 lang 语言种类
用来显示当前文档显示的语言。
<html lang="zh-CN">
<html lang="en"></html>
</html>
en 定义语言为英文。 zh-CN 定义语言为中文。 这个属性对浏览器和搜索引擎（谷歌/百度）还是有作用的。
3.3 charset 字符集
<meta charset="UTF-8" />
字符集（character set）是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset 属性来设置文档使用何种字符编码。
charset常用的值有：GBK、UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
第二章 HTML入门
1.HTML 语法规范
1.1 基本语法规范
HTML 标签是由尖括号包围的关键词，例如<html>。 HTML 标签通常是成对出现的，例如<html>和<html/>，称为双标签。
第一个是开始标签，第二个是结束标签。 有些特殊标签必须是单个标签（极少情况），例如<br/>,我们称之为单标签。
1.2 标签关系
标签关系可以分为两类：包含关系和并列关系
2.HTML 基本结构标签
每个网页都会有一个基本的结构标签，页面内容都是在这些基本标签上书写。 HTML 页面也叫 HTML 文档。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
3.HTML 常用标签
3.1 标签语义
标签语义就是标签的含义。
根据标签的语义，再合适的地方给一个最合理的标签，可以让页面结构更清晰。
3.2 标题标签 h1-h6
为了使网页具有语义化，经常使用标题标签，HTML 提供 6 个等级的网页标题标签即 <h1>-<h6>。
单词为 head 简写，从 h1-h6 依据重要性递减。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
3.3 段落和换行标签
p 指paragraph，意为段落。把文字有条理的显示出来就需要将文字分段显示。在 html 中，<p> 标签用于定义段落，将整个网页分成若干个段落。
标签语义: 把 HTML 文档分割为若干段落。
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。
<p>我是一个段落标签</p>
<br/> 是 break 缩写，意为打断、换行。
标签语义： 强制换行
特点：
<br/> 是个单标签。
<br/> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
3.4 水平线标签
用于在页面中创建一条水平线，在视觉上将文档上下分开
属性：
1.size:水平线的高度(厚度),单位为px(像素)。
2.width:水平线的宽度(长度),单位为px(像素)。
3.color:水平线的颜色
<hr color="red" size="10px" width="500px"/>
3.5 font标签
用于规定文本的字体、字号、颜色
现在不推荐使用<font>标签
属性：
1.face:定义字体
2.size:定义字号
3.color:定义文本颜色
<font face="黑体“ color="green" size="24px">这是黑体24px绿色文本</font>
3.6 文本格式化标签
在网页中，有时候需要为文字设置粗体、斜体或下划线等效果，需要使用 HTML 中的文本格式化标签，使文字以特殊方式显示。
标签语义： 突出重要性，比普通文字重要。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong> </strong> 或<b> </b> | 更推荐<strong>，语义更强烈 |
| 斜体 | <em> </em>或<i> </i> | 更推荐使用<em>，语义更强烈 |
| 删除线 | <del> </del>或<s> <s/> | 更推荐使用<del>，语义更强烈 |
| 下划线 | <ins> </ins>或<u> </u> | 更推荐使用<ins>，语义更强烈 |
3.7 特殊字符
网页中常会包含一些特殊字符，例如版权符号、大于号、小于号等
| HTML源代码 | 显示结果 | 描述 |
|---|---|---|
< | 小于号 | |
> | 大于号 | |
" | 引号 | |
& | 可用于显示其他特殊字符 | |
® | 注册商标 | |
© | 版权 | |
| 不断行空白 |
第三章 图像、路径及超链接
1.图像标签
在 HTML 标签中，<img/>标签用于定义 HTML 标签页面中的图像。
<img src="图像url" />
单词 image 的缩写，意为图像。
src 是标签的 必须属性，用于指定图像文件的路径和文件名。
属性： 属于这个图像标签的特性。
| 属性 | 属性值 | 说明 |
|---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本，当图片不显示时显示文字 |
title | 文本 | 提示文本。鼠标放到图像上显示文字 |
width | 像素 | 图像宽度 |
height | 像素 | 图像高度 |
border | 像素 | 图像边框粗细 |
注意：width 和 height 一般只需要写一个，另外一个会自适应。
2.路径
2.1相对路径
相对路径： 以引用文件位置为参考基础，而建立出来的目录路径。是相对于 HTML 页面的位置。
| 分类 | 符号 | 说明 |
|---|---|---|
| 同级路径 | ./ | 同一级 |
| 下一级路径 | / | 位于 HTML 文件上一级 |
| 上一级路径 | ../ | 位于 HTML 文件下一级 |
2.2绝对路径
绝对路径： 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。
3.超链接标签
在 HTML 标签中，<a/> 标签用于从一个页面链接到另一个页面。
3.1链接的语法格式
a 是单词 anchor 的简写，是锚的意思。
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性
| 属性 | 作用 |
|---|---|
href | 指定链接地址 url，为必须属性。 |
target | 指定页面打开方式，_self为默认值，_blank为在新窗口中打开 |
3.2超链接分类
1.外部链接 2.内部链接：网站内部页面之间的相互链接。 3.空链接: # 4.下载链接：地址链接的是文件.exe、压缩包.zip 等。 5.网页元素链接：在网页中的各种网页元素。如文本、图像、表格、音频、视频等。 6.锚点链接：点击链接，可以快速定位到页面中的某个位置。 6.1 在链接文本的href属性中，设置属性为 #名字的形式 6.2 找到目标位置标签，里面添加一个 id 属性 = 名字 Tip
阻止 a 链接跳转，课可给 href 属性设置 javascript:void(0); 或者 javascript:;。
第四章 CSS
1.语法规范
选择器 { 属性：值; } 注意：
1.多个属性值最好展开写，可读性强； 2.选择器是HTML标签，属性与值以键值对形式承成对出现； 3.选择器和{ }之间有空格，属性的：也要打空格，更美观； 4.每个属性值以；结束
2.引入方式
2.1 内部样式表
含义：在HTML页面内部写样式，利用<style>标签，一般写在<head></head>中
2.2 行内样式表
含义：在标签内部style属性设CSS样式，适于修改简单样式 要用双引号！
2.3 外部样式表
含义：单独建CSS文件，再根据实际情况引入HTML <link rel="stylesheet" href="css文件路径">
(1) link定义当前文档和被链接文档的关系，stylesheet表示被链接文档是一个样式表文件 (2) href定义URL, 可以是相对路径/绝对路径
3.选择器
3.1选择器分类
3.1.1 基础选择器
标签选择器 类选择器 id选择器 通配符选择器
3.1.2 复合选择器
3.2基础选择器
3.2.1 标签选择器
含义：用HTML标签名称作为选择器。统一某一类标签样式 缺点：不能差异化设置样式
3.2.2 类选择器
（开发常用）
语法：.类名（自定义） { 属性：值；}
注意：
1.调用时在标签后加class=“类名” 2.类名不和标签一样 3.多次调用 4.不用纯数字和中文命名，类名较长时可用—分割 5.一个标签可以指定多个类名
3.2.3 id选择器
（常与JavaScript搭配）
id名 { 属性：值；}
注意： 1.标签后加“id=“id名” 2.只能调用一次
3.2.4 通配符选择器
含义：*定义，表示页面中所有标签 语法：* { 属性：值； }
3.3 复合选择器
3.3.1 后代选择器（空格）
含义：父元素里的子元素 语法：元素一 元素二 {样式声明} 注意：
1.空格隔开
2.类似于路径，最终目标是元素二
3.元素一、二可以是任一选择器
3.3.2 子选择器（>）
含义：最近一级子元素 语法：元素一>元素二
3.3.3 并集选择器（,）
含义：不同标签设置相同属性，集体声明
语法：属性1， 属性2， 属性3 { 样式N; }
注意：通常竖着写
3.3.4 伪类选择器
含义：伪类选择器是通过单冒号:和特定的具有某种含义的单词来确定所选元素。
伪类的名称是css标准中所预先设定的，我们不能自己设定。可用的伪类名不多。
语法：:伪类名称{ ... }
:link, :visited, :hover, :activ 这4个伪类主要用于表示一个链接（也就是a标签）的4种不同状态。
它们可以设定一个链接在不同状态下的外观表现（样式表现）。
:link ——表示一个链接初始时候的状态。
:visited ——表示一个链接在访问（点击）过之后的状态。
:hover ——表示一个链接在“鼠标移上去”（鼠标悬停）的时候的状态。
:active ——表示一个链接在“活动状态”的时候的状态，通常就是点击的瞬间（按住不放能看到）。
注意：
1，:hover可以用于其它标签，并且经常用！
2，对于a链接的这4个状态，他们有顺序问题，必须按上述顺序才有合理效果
3.3.5 :focus伪类选择器
用于选取光标选中的表单元素
input:focus {
background-color:yellow;
}
第五章 CSS文本常用属性
1.字体属性
1.1 字体系列
font-family
1.2 大小
font-size：;
px(像素)是网页常用单位 谷歌浏览器默认大小为16px 不同浏览器显示字体大小不同，尽量设置确定值，不要默认大小 标题标签需要单独指定大小
1.3 粗细
font-weight: normal/bold/bolder/lighter/数字;（不带单位） 实际开发倾向于用数字指定粗细 400等价于normal，700等价于bold
1.4 文字样式
font-style： normal/italic（斜体）；
1.5 字体复合
语法:
body{
font: font-style font-weight font-size/line-height font-family;
}
注意：
1.顺序不能变! 2.size和family不能省略！！
3.line-height和font简写方法不能分开，否则行高与盒子的垂直居中会失效
2.文本属性
2.1颜色color
| 表示 | 属性值 |
|---|---|
| 预定义颜色值 | red、green、blue等 |
| 十六进制 | #FF0000 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
2.2 水平对齐text-align
| 属性 | 属性值 |
|---|---|
| left | 左对齐(默认) |
| center | 居中 |
| right | 右对齐 |
2.3 修饰text-decoration
| 属性 | 属性值 |
|---|---|
| none | 无装饰(常用)（可去掉链接自带下划线） |
| underline | 下划线（链接a自带） |
| overline | 上划线 |
| line-through | 删除线 |
2.4 缩进text-indent
用来指定文本第一行的缩进（通常用于段落首行缩进）
text-indent: 20px; text-indent: 20em; em是相对单位，1em为当前元素（font-size）1个文字大小
2.5 行间距line-height
line-height：;
行间距有上间距、文本高度、下间距组成 文字实现垂直居中小技巧：让行高=盒子高度 若没设置盒高，盒子高度会调成行高
注意：
line-height和font简写方法不能分开，否则行高与盒子的垂直居中会失效
第六章 盒子模型
1.盒子组成
承载内容的区域被称为盒子模型，盒子模型就是把HTML页面中的元素看作是一个方形的盒子，也就是一个盛装内容的容器。每个方形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
2. 边框（border）
组成：宽度（border-width）、样式（border-style）、颜色（border-color）
常用样式：
1.实线边框（solid）
2.虚线边框（dashed）
3.点线边框（dotted）
4.边框简写 border：2px solid pink；也能分开写
5.表格细线边框 border-collapse：collapse；表示合并相邻边框
注意：
边框的层叠性，分开写时先大后小
边框会影响盒子大小，不占用，只增加高或宽
3. 内边距（padding）
padding控制边框和内容间的距离
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
复合写法：
| 值个数 | 含义 |
|---|---|
| padding:5px; | 1值，上下左右边距 |
| padding:5px 10px; | 2值，上下、左右 |
| padding:5px 10px 20px; | 3值，上、左右、下 |
| padding:5px 10px 20px 30px; | 4值，上右下左，顺时针 |
注意： 1.若盒子制定了高宽，再加内边距会撑大盒子大小; 2.padding适用于块元素，因此当扩大链接范围，需要先将<a>转为行内块元素
display：inline-block；，再设置宽高，实现扩大链接范围的目的。 3.padding不会撑开盒子的特殊情况：当没设置宽/高，块级元素会继承父容器的宽（不继承高），此时设置
padding不影响没设置的宽。
4. 外边距（margin）
margin控制盒子与盒子间的距离
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin简写方式和padding一样
5. 圆角边框
border-radius:length; 数值越大，圆弧越明显
应用：
1.length可以为具体数值/百分比 2.数值可以分开写，四个值代表左上（顺时针），两个值是对角 3.属性可以分开写,border-top-left-radius、border-top-right-radius、border-bottom-right-radius、
border-bottom-left-radius
4.想改成圆，可以把半径设成正方形盒子的一半，同理矩形盒子的半径也是一半
6. 盒子阴影
语法：
box-shadow:h-shadow v-shadow blur spread color inset
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影x,正右负左 |
| v-shadow | 必需，垂直阴影y，正下负上 |
| blur | 模糊程度 |
| spread | 阴影大小 |
| color | 建议用rgba(如：(0,0,0,.3))表示透明度 |
| inset | 默认outset(外阴影)不写，inset为内阴影 |
注意：
盒子阴影不占空间
第七章 表格
1. 表格标签
1.1 表格的主要作用
表格主要用于显示、展示数据，因为可以让数据显示非常规整，可读性好。
表格不是来布局的，而是来展示数据的。
1.2 表格基本语法
<table></table> 用于定义表格的标签。
<tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>中。
<td></td>用于定义表格中的单元格，必须嵌套在 <tr></tr> 中。
字母 td 指表格数据（table data），即单元格的内容。
1.3 表头单元格标签 (th)
一般单元格位于表格的第一行或第一列，表格单元格里面的文本内容 加粗显示。<th>标签表示 HTML 表格的表头部分（table head 的缩写） 表头单元格<th>也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。
1.4 表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 表格元素对齐方式 |
| border | 1 或"" | 规定是否有边框，默认为""，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间空白，默认 1px |
| cellspacing | 像素值 | 规定单元格之间的空白，默认为 2px |
| width | 像素值或百分比 | 规定表格宽度 |
| hight | 像素 | 表格高度 |
1.5 表格结构标签
场景：表格可能很长，将表格分割为表格头部和表格主题两大部分。
加强语义化：<thead> 表示头部区域，<tbody> 表示主体区域，更好区分表格结构。
注意：
<thead></thead>：定义表格头部，且内部必须有<tr>标签。 <tbody></tbody>：定义表格主体，存放数据。 以上标签都放在 <table></table> 里面。
1.6 合并单元格
合并单元格方式：
跨行合并：rowspan="合并单元格个数" 跨列合并：colspan="合并单元格个数"
第八章 布局与定位
1.布局
1.1 三种常见布局
1.标准流/普通流：标签按默认方式排列
2.浮动
3.定位
1.2 浮动float
典型运用：块级元素一排显示 准则：块级元素纵向排列找标准流；横向排列找浮动；
含义：float属性创建浮动框，移动直到触及左/右边缘
语法：选择器{float：属性值;}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认） |
| left | 左浮动 |
| right | 右浮动 |
特性一：
脱离标准流的控制移动到指定位置（脱标） 浮动的盒子不再保留原先的空间位置，后面标准流的盒子会占据这个空间
特性二：
若盒子全部设成浮动，则按值一行显示并顶端对齐 浮动的元素相互贴合无缝隙，若父级宽度装不下浮动的盒子则会另起一行对齐
特性三：
任何模式的元素加了浮动都有行内块元素的特性
比如<span></span>属于行内元素无宽高，加了float属性则会具备宽高特点 若块级盒子无设置宽度，按标准流和父级一样宽，添加浮动属性后宽度根据内容决定
特性四:
为了约束浮动元素位置，网页布局策略：
1.用标准流的父元素纵向排列位置；
2.内部子元素浮动左右排列
注意:
1.浮动和标准流的父盒子搭配；
2.浮动的盒子只会影响后面的标准流，不会影响前面的标准流（前面的仍然独占一行 )
1.3 清除浮动
原因：为了与子盒子兼容，父级盒子不方便给高度，但子盒子浮动不占位置，父盒子高度变0，会影响后面标准流的子盒子
清除本质：清除浮动元素的影响，清除后父元素可以根据浮动元素的位置自动检测高度，父级有了高度就不会影响后面的标准流元素。
语法:
选择器{clear:属性值；} 清除浮动的策略：闭合浮动
| 属性值 | 描述 |
|---|---|
| left | 清除左侧浮动的影响 |
| right | 清除右侧浮动的影响 |
| both | 常用；同时清除左右侧浮动的影响 |
清除浮动方法:
1.额外标签法（隔墙法），W3C推荐:
应用：在浮动元素末尾加空标签，如<div style="clear:both"></div>需注意元素必需是块级元素 优点：书写方便；缺点：无意义标签，结构化差；
2.父级加overflow属性:
属性值设为hidden、auto、scroll；
缺点：无法显示溢出的部分
3.父级加after伪元素:
额外标签法的升级，也是给父元素添加
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
<!-- IE6、7专有 -->
*zoom:1;
}
优点：结构简单；
缺点：照顾低版本浏览器；
4.父级加双伪元素:
优点：代码简洁；
缺点：照顾低版本；
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
2.定位
2.1定位组成
定位= 定位模式+边偏移
定位模式指元素的定位方式；
边偏移决定元素最终位置;
2.2定位模式
语法：
position：值
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
1.static:
按标准流位置摆放，无偏移。
2.relative: 移动位置参照自身原来位置 不脱标，仍保留原来位置
3.absolute：
参考系是祖先元素。 若无祖先元素或祖先无定位，参考系为浏览器（Document文档） 若祖先元素有定位（静态除外），参考系为最近一级有定位的祖先元素 绝对定位不占位置，会脱离标准文档流
绝对定位实现水平居中和固定定位类似：也是先改成浏览器一半，再margin-left
4.fixed：
固定在浏览器可视化位置。参考系是浏览器可视区 不占位置。脱离标准文档流 固定版心右侧小技巧：
1、固定盒子left：50%；
2、固定盒子margin-left：版心宽度的一半;
实现贴着版心右侧对齐 固定定位是特殊的绝对定位，只是参考系不同
5.sticky：
相对和固定定位的混合 参考系是浏览器可视化 占有原先位置 必须加边偏移才有效
子绝父相：子级绝对定位，那么父级用相对定位
原因：父级需要占位置，子级不需要占位置。
2.3 边偏移
语法：
属性：属性值
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义相对于父元素上边线距离 |
| bottom | 底端偏移量，定义相对于父元素下边线距离 |
| left | 左侧偏移量，定义相对于父元素左边线距离 |
| right | 右侧偏移量，定义相对于父元素右边线距离 |
2.4定位叠放次序z-index
含义：控制盒子前后次序
语法:
选择器{index：值；}
不加单位，有正有负，越大越前
默认顺序：后来者居上
只有定位盒子才有此属性
第九章 列表项
1. 列表标签
表格展示数据，列表则用来布局。 列表特点是整齐、整洁、有序，作为布局更方便自由。 根据使用场景不同，列表分为三大类：
1.无序列表
2.有序列表
3.自定义列表
1.1 无序列表
<ul> 标签标识 HTML 页面项目中的无序列表，一般以项目符号呈现列表项。
语法格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
注意:
1.各个列表项之间无需，并列关系。
2.<ul></ul>中只能包含<li></li>，写入其他标签或文字是不允许的。
3.无序列表带有自己的属性，可用 CSS 修改样式属性。
1.2 有序列表
使用 <ol> 标签来定义有序列表，<li> 来定义列表项。
语法格式：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
与无需列表类似，有自己的样式属性，通过 CSS 设置。
1.3 自定义列表
<dl> 定义描述列表，与 <dt> 和 <dd> 标签配合使用。
语法格式：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
注意
dl 里面只能包含 dt 和 dd。
第十章 表单
1.表头标签
1.1 为什么需要表头
收集用户信息。 和用户进行交互，收集用户资料。
1.2 表头组成
1.表单域 2.表单控件（元素） 3.提示信息
1.3 表单域
表单域是一个包含表单元素的区域。 使用<form> 标签用于定义表单域，手机和传递用户信息。 form 标签会将它范围内的表单元素信息提交给服务器。
语法格式:
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url 地址 | 指定接受并处理表单数据的服务器的 url 地址 |
| method | get/post | 设置表单数据的提交方式 |
| name | 名称 | 用于指定表单名称，区分同一个页面中的多个表单域 |
注意：
1.写表单元素之前需要有表单域将其包含。
2.表单域是 form 标签。
1.4 表单控件（表单元素）
在表单域中定义各种表单元素，允许用户在表单中输入或选择的内容控件。
1.4.1 <input> 表单元素
<input>标签用于收集用户信息。
input 标签包含 type 属性，决定了输入字段的不同形式：
文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。 语法格式：
<input type="属性值" />
注意：
1.input 标签为单标签
2.type 属性设置不同属性值来指定不同控件类型
type 常用属性值：
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮 |
| checkox | 复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。字符被掩码。 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，清除表单所有数据。 |
| submit | 定义提交按钮。重置按钮会清除表单所有数据。 |
| text | 定义输入字段。用户可输入文本，默认宽度为 20 个字符。 |
input 的其他属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 自定义 | 定义 input 元素名称 |
| value | 自定义 | 规定 input 元素的值 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段字符的最大长度 |
注意：
1.对于 radio 单选框，必须使 input 的 name 具有相同的属性值，才能实现多选一。 同理，复选框也要有相 同的name值。 2.单选框和复选框可以设置 checked 属性，页面打开默认选择按钮。 3.设置 type 的值为 submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台。 4.设置 type="button"，普通按钮，后期结合 js 使用
1.4.2 label 标签
<label> 标签为 input 元素定义标注。 <label> 标签用于绑定一个表单源深路，当点击 label 标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上，提升用户体验。
语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心：
<lable>标签的 for 属性与相关元素的 id 属性相同。
1.4.3 select 下拉表单元素
select 标签设置多个选项让用户选择，节约页面空间。
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
注意:
1.select 中至少包含一对 option。
2.在 option 中定义属性selected=selected，当前项即为默认选项。
1.4.4 textarea 文本域表单元素
场景：输入内容较多时。
语法：
<textarea rows="3" cols="20">
文本内容
</textarea>
第十一章 实用技巧
1.精灵图
目的：为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现CSS精灵技术 使用，主要针对小的背景图使用 实现——background-position 一般为负值 缺点: 图片文件较大 图片放大/缩小会失真 更换复杂
2.字体图标iconfont
主要为结构样式简单的小图标
优点：
本质属于字体，类似于矢量图，可随意换颜色，放大/缩小不会失真 兼容性高 不能完全取代精灵图
3.鼠标样式
语法:
li {cursor:pointer;} 含义：设置在对象上移动时鼠标的样式
| 属性值 | 描述 |
|---|---|
| default | 小白，默认 |
| pointer | 手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
4.取消外轮廓和防止文本域拖拽
取消表单的外轮廓线outline：none；
防止文本域能拖拽 resize:none;
文本域的一对标签最好放在一行，否则文本与框会有距离
5.vertical-align属性对齐
vertical-align：baseline | top | middle | bottom 对齐一般分底线，基线，中线，顶线（从下到上） 仅对行内块元素有效 图片、表单都属行内块元素，默认基线对齐
图片底部默认有空白间距：
因为默认与文字是基线对齐的，下面会空出一段距离
解决方案:
图片添加vertical-align：middle | top | bottom 图片转换成块元素display：block;（因为只有行内块元素有基线对齐的问题）
6.溢出文本省略号显示
6.1单行文本省略显示
/* 1、先强制一行显示文本*/
whtie-space:nowrap;(默认normal会自动换行)
/* 2、超出部分隐藏*/
overflow:hidden;
/* 3、文字用省略号代替超出部分*/
text-overflow:ellipsis;
6.2多行文本溢出显示省略
overflow:hidden;
text-overflow:sllipsis;
/*弹性伸缩盒子模型显示*/
display：-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒子的子元素排列方式*/
-webkit-box-orient:vertical;
7.盒子模型
box-sizing指定盒子模型，两种取值：
box-sizing:content-box；(默认)，盒子大小：宽高+内边距+边框，再调整会撑大盒子 box-sizing:border-box;指定了盒子大小，再调整padding或border往内挤压（若不超过盒子宽） 建议CSS初始化变成
* {
margin：0；
padding：0；
box-sizing：border-box；
}
8.margin负值运用
每个盒子margin-left移动边框值，正好压住相邻盒子边框
当鼠标经过某盒子需要边框都亮，但由于前一步会有覆盖掉边框的情况发生
解决方案：
若盒子无定位，那么选中时设置相对定位（浮上来了且保留位置）
若盒子有定位，那么选中时设置加z-index
第十二章 布局技巧
1. flex布局(flex)
1.1布局原理
给父元素(flex container)加flex属性，控制子盒子(flex item)的位置和排列方式
子盒子的浮动float和清除浮动clearfix和垂直居中vertical-align属性失效
1.2 父项常见属性—flex-direction
设置主轴方向 子元素跟着主轴排列。主轴默认为x轴，可改。
| 属性值 | 说明 |
|---|---|
| row | 默认从左到右（主轴为x） |
| row-reverse | 从右到左（主轴为x）（顺序颠倒） |
| column | 从上到下（主轴变成y） |
| column-reverse | 从下到上（主轴变成y） |
1.3 flex-wrap
设置子元素是否换行
两种值。默认nowrap（不换行），wrap（换行）
1.4 flex-flow
复合了主轴和换行
flex-flow：column wrap；
1.5 justify-content
设置主轴上的子元素排列方式
| 属性值 | 说明 |
|---|---|
| flex-start | 默认从头开始，（从左到右） |
| flex-end | 从尾部开始排（顺序不变） |
| center | 盒子整体在父元素的主轴居中 |
| pace-around | 平分剩余空间（margin-left/right） |
| pace-between | 先两边贴边再平分剩余空间 |
1.6 align-item
设置侧轴上子元素的排列方式（单行，不换行时）
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起再居中 |
| stretch | 拉伸 |
1.7 align-content
设置侧轴上多行子元素的排列方式（换行）
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起再居中 |
| space-around | 侧轴平分剩余空间 |
| space-between | 先在侧轴贴两边，再平分 |
| stretch | 子项高度平分父元素高度 |
1.8 子项常见属性- flex
子项目分配剩余空间，定义所占份数
1.9 子项常见属性-align-self
子项侧轴的排列方式 可覆盖父项的align-item属性 若无父元素，则stretch
1.10 子项常见属性-order
数值越小，排列越前，默认为0 和z-index不同
2.浮动布局（Float）
浮动布局是CSS中最早的布局方法之一，它通过将元素“浮动”到容器的左侧或右侧，来达到页面中元素排列的目的。虽然浮动布局有一定的局限性，但它曾是很多网页布局的基础，尤其是在实现多列布局时。
应用场景 多列布局：在没有弹性盒子或网格布局之前，使用浮动布局实现多列布局非常常见。通过设置容器内的子元素 float: left; 或 float: right;，可以让多个元素并排显示。 文字环绕图像：浮动的一个经典应用场景是文本环绕图像。当图像使用浮动布局时，文本会自动流动到图像的旁边。
清除浮动:
.container::after {
content: "";
display: block;
clear: both;
}
缺点：
浮动布局的一个问题是，子元素在浮动后可能会脱离文档流，这需要通过清除浮动来恢复父元素的高度。
浮动布局不如现代的 Flexbox 或 Grid 布局灵活，因此在复杂布局中不太推荐使用。
3. 定位布局（Position）
定位布局通过为元素设置不同的 position 属性（relative, absolute, fixed, sticky）来控制元素的位置。定位布局可以帮助开发者精确控制元素在页面中的位置，尤其是在需要元素重叠或固定定位时非常有用。
应用场景 固定导航条：在页面滚动时固定在屏幕顶部的导航栏。 模态窗口：在页面上居中显示的弹出框，通常使用绝对定位。 悬浮按钮：需要固定在页面特定位置的浮动按钮。
缺点:
定位布局可能会破坏文档流，尤其是 absolute 定位，容易导致页面中的其他元素重叠或位置不正常。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
