第一章 HTML5基础
1.1. 什么是HTML
HTML是用来描述网页的一种语言。
•HTML指的是超文本标记语言(Hyper Text Markup Language)
•HTML不是一种编程语言，而是一种标记语言(markup language)
1.2. web标准
web标准由三部分组成：结构（Strurcture），表现（Presentation），和行为（Behavior）
1.3. 标记符基础
1.3.1. HTML元素以及分类
HTML元素一般分为以下四大类：
1.顶部元素：html，head与body。
2.首部元素：放在head中的元素，包括title（页标题），style（样式），link（相关文件），meta（关于文档的数据），base（文档URL）和script（客户端脚本）等。
3.块元素：相当于段落的元素，包括h1~h6（标题），p（段落），pre（预先设定格式的文本），div（指定块），ul，ol，dl（列表），table（表格），与form（表单）等。HTML5 中新增的 article（文章）、section（分块）和 nav（导航）等也是块元素。显示时，块元素总是另起一行，块元素后面的元素也另起一行。
4.行内元素：相当于块中的单词、字符和短语，包括 a（锚点或超链接）、br（换行符）、img（图像）em（强调） strong（重点强调）、sub（下标）、sup（上标）、code（计算机代码）var（变量名）和span（指定一个范围）等。
1.3.2. 通用HTML属性
所有 HTML 元素都允许使用下列全局属性。
id——用于唯一标识页面中的元素。文档中的所有的 id 都不能重复。
class——指定元素的样式类。
style——指定元素的样式。
title——指定元素标题，可以用于在浏览器中显示工具提示(tooltip)。
lang——指定元素内容的语言。
1.4. 网页基本机构
1.4.1. HTML标记
<html>和</html>
1.4.2. 首部标记
<head>和</head>
1.4.3. 正文标记符
<body>和</body>
第二章 文本格式与超链接
2.1. 设置文本格式
2.1.1. 段落格式
1.p段落标签和br换行标签
2.h1~h6标题标记符
3.hr水平线标记符
4.align对齐属性
2.1.2. 字体格式
1.物理字符样式：
2.逻辑字符样式：
2.1.3. 列表格式
1.有序列表：<ol><li> </li></ol>
2.无序列表:<ul><li> </li></ul>
3.自定义列表:<dl><dt><dd> </dd></dt></dl>
2.2. 超链接
2.2.1. 链接标签：<a> </a>
（"_blank"在新窗口打开链接 "_self"在当前窗口打开链接di）
锚点标签：
2.2.2. 图片标签：<img>
课后作业：人物介绍
码云：html基础: 前端HTML（一些课堂练习和课后作业）
第三章 表格与表单
3.1. 表格标签
3.1.1. 表格标签:<table></table>
caption：表格标题
thead:表头部分
tbody:表格数据单元格部分
tr: table row 表格的行
th: table head 表头
td: table data 数据单元格
3.1.2. 表格属性
border：边框
bordercolor：边框颜色
bgcolor：背景颜色
cellspacing：数据单元格之间的距离
cellpadding：数据和边框的填充距离
rowspan：合并多个行的单元格
coisapn：合并多个列的单元格
3.2. 表单标签
3.2.1. 表单标签：<form> </form>
span标签:无实际意义，span标签是HTML中的内联元素，主要用于标记文本的一部分或行内元素，并对其进行样式处理和操作。
1.form标签中的所有内容属于一张表单
2.input：输入标签，单标签
3.2.2. 表单控件
（1）type：类型
text：文本输入
password：掩码输入（密码）
radio：单选
checkbox：复选框（多选）
file：上传文件
date：日期选择
button：按钮
reset：重置按钮
submit：提交按钮
（2）value：用于指定按钮上的文字
（3）name：标签名，自定义（添加后可多选）
（4）placeholder:提示
第四章 CSS3基础
4.1. CSS3基础选择器
1.标签选择器：CSS
2.类选择器：.类名
3.id选择器：id=""
4.2. CSS3引入样式
1.内联样式：在开始标签中用style属性
2.内部样式：在HTML文件的head标签中用style标签
3.外部样式：
(1):创建css文件，书写样式
(2):在HTML文件中引入css文件
CSS文件
注：样式显示问题：谁离标签更近，谁的优先级更大
4.3. CSS3基础属性
4.3.1. 颜色与背景属性
（1）color属性：用于控制HTML元素内文本的颜色
（2）background-color属性：用于设置HTML元素的背景颜色
（3）background-image属性：用于设置HTML元素的背景图案
（4）background-attachment属性：用于控制背景图像是否随内容一起滚动
（5）background-position属性：指定了背景图案相对于关联区域左上角的位置
（6）background-repeat属性：表示当使用背景图案时，背景是否重复显示
（7）background属性：是一个组合属性
4.3.2. 字体属性
（1）font-family属性：用于确定要使用的字体列表取值可以是字体名称，也可以是字体族名称，值之间用逗号隔开
（2）font-size属性：用于控制字体大小
（3）font-style属性：确定元素显示的字形
（4）font-variant属性：决定浏览器显示指定元素的字体变体
（5）font-weight属性：定义字体的粗细
（6）font属性：设置各种字体属性
4.3.3. 文本属性
（1）line-height属性：决定相邻行之间的间距
（2）line-align属性：指定了所选元素的对齐方式
（3）line-decoration属性：可以特定选项的文本进行修饰
（4）line-indent属性：可以对特定选项的文本进行首行缩进，取值可以是长度值或百分比
第五章 CSS3进阶
5.1. 盒子模型
5.1.1. 四元素
（1）border：边框
（2）content：内容
（3）padding：内边距
（4）margin：外边距
5.1.2. 盒子模型
1.padding属性：
（1）padding-top：上内边距
（2）padding-bottom：下内边距
（3）padding-left: 左内边距
（4）padding-right: 右内边距
复合写法：
padding：上，右，下，左；
padding：上，左右，下；
padding：上下，左右；
padding：上下左右；
2.margin属性：
（1） margin-top: 上外边距
（2）margin-bottom: 下外边距
（3）margin-left: 左外边距
（4）margin-right:右外边距
复合写法同上；
盒子水平居中：左右外边距设置为auto auto:自动的
3.border属性：
（1）border-color：边框颜色
（2）border-style：边框样式
none：无边框 dotted：点线组成 dashed：划线组成 solid：实线组成
double：双线组成 groove和ridge利用元素的颜色属性描出具有三维效果的边框
inset和outset利用修饰元素的颜色值描出边框效果
（3）border-width：边框宽度
（4）border-top：上边框
（5）border-bottom：下边框
（6）border-left：左边框
（7）border-right：右边框
每个边框可以指定宽度，样式，颜色，没有指定就是默认值。
复合写法：border：粗细，颜色，样式 ；
两个问题：
1.相邻两个盒子之间的外边距合并问题：
两个盒子同时设置了外边距，相同边只取外边距的最大值。
2.嵌套块级盒子外边距塌陷的问题：
方法一：给父盒子添加边框
方法二：给父盒子添加内边距（会撑大盒子）
方法三：给父盒子添加overflow：hidden；（常用方法）
课堂练习：小米盒子
码云：html基础: 前端HTML（一些课堂练习和课后作业）
5.2. 显示模式
5.2.1. 显示模式
1.块元素：block
比较霸道，单独占一行， 默认情况宽度和父级元素一样宽，可以给元素设置宽，高，水平居中，块元素可以包含行内元素与块元素
div，p，ol，ul，h1~h6
2.行内元素：inline
一行可显示多个，默认情况宽度由内容填充，内容多宽元素多宽，宽，高，水平居中属性不适用，行内元素只能容纳文本或者其他行内元素
a，strong，em，span
3.行内块元素：inline-bloke
一行显示多个， 默认情况宽度由内容填充，内容多宽元素多宽， 可以给元素设置宽，高
input，img，td
5.2.2. 显示模式的转换
元素显示模式的转换：
display：转换后的显示模式
display：block；转换为块元素
text-decoration：none；去掉a标签的下划线
5.3. 浮动项目
5.3.1. 浮动定位
传统的网页布局：标准流+浮动+定位；
浮动：float
特性：
1.浮动的元素会脱离标准流（脱标）
解决方法：清除浮动
2.浮动的元素一行内显示并且顶部对齐
3.浮动的元素会具有行内元素类似的特性
网页布局第一准测：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
标准流+浮动布局策略：父级用标准流排列上下位置，内部子元素用浮动排列左右位置
5.3.2. 浮动的清除
清除浮动的方法：
1.额外标签法（隔墙法）：给浮动的盒子添加一个额外的块级标签，并给标签加入clear：both；（清除两端浮动），不常用
2.给父级元素添加overflow：hidden； 属性
3.给父级元素添加after伪元素
4.给父级元素添加双伪元素
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
