HTML5+CSS3学习与实践
文章目录
- 学习资料
- HTML4
-
- 开发者文档
- HTML标准结构
-
- 文档声明
- 字符编码
- 设置语言
- 标签
-
- 排版标签
- 语义化标签
- 块级元素 与 行内元素
- 文本标签
- 图片标签
- 超链接
-
- 常用属性
- 跳转锚点
- 唤起指定应用
- 列表
-
- 有序列表
- 无序列表
- 列表嵌套
- 自定义列表
- 表格
-
- 基本结构
- 常用属性
- 跨行与跨列
- 常用标签补充
- 表单
-
- 基本结构
- 提交按钮
- 重置按钮
- 禁用表单控件
- label标签
- fieldset 与 legend 的使用（了解即可）
- 框架标签
- HTML全局属性
- meta 元信息
- CSS3
-
- CSS简介
- CSS的编写位置
-
- 行内样式
- 内部样式
- 外部样式
- 样式表的优先级
- 语法规范
- 代码风格
- 选择器
-
- 基本选择器
-
- 通配选择器
- 元素选择器
- 类选择器
- ID选择器
- 基本选择器总结
- 复合选择器
-
- 交集选择器
- 并集选择器
- HTML元素间的关系
- 后代选择器
- 子代选择器
- 兄弟选择器
-
- 相邻兄弟选择器
- 通用兄弟选择器
- 属性选择器
- 伪类选择器
-
- 动态伪类
- 结构伪类
- 否定伪类
- UI伪类
- 目标伪类（了解）
- 语言伪类（了解）
- 伪元素选择器
- 选择器优先级
- CSS三大特性
-
- 层叠性
- 继承性
- 优先级
- 颜色的表示
-
- 表示方式一：颜色名
- 表示方式二：rgb 或 rgba
- 表示方式三：HEX 或 HEXA
- 表示方式四：HSL 或 HSLA
- 常用字体属性
-
- 字体大小
- 字体族（设置使用的字体）
- 字体风格（正常、斜体）
- 字体粗细
- 字体复合写法
- 常用文本属性
-
- 文本颜色
- 文本间距
- 文本修饰（无装饰线、下划线、上划线、删除线、虚线、波浪线）
- 文本缩进
- 文本对齐_水平
- 行高
- 文本对齐_垂直
-
- 依靠 height 与 line-height
- vertical-align 同一行元素之间垂直对齐方式
- 列表相关属性
-
- 设置列表符号
- 设置列表符号的位置
- 自定义列表符号
- 复合属性
- 注意
- 表格相关属性
-
- 边框相关属性
-
- 边框宽度
- 边框颜色
- 边框风格
- 边框复合属性
- 注意
- 表格独有属性
-
- 设置列宽度
- 单元格间距
- 合并单元格边框
- 隐藏没有内容的单元格
- 设置表格标题位置
- 注意
- 背景属性
-
- 设置背景颜色
- 设置背景图片
- 设置背景重复方式
- 设置背景图位置
- 复合属性
- 鼠标属性
- 盒子模型
-
- 长度单位
- 元素的显示模式
-
- 块元素（block）
- 行内元素（inline）
- 行内块元素（inline-block）
- 注意
- 修改元素显示模式
- 盒子模型的组成
- 盒子内容区（content）
- 关于默认宽度
- 盒子的内边距
- 盒子的边框
- 盒子的外边距
-
- margin 语法
- margin 注意事项
- margin 塌陷问题
-
- 什么是 margin 塌陷？
- 如何解决 margin 塌陷？
- margin 合并问题
-
- 什么是 margin 合并？
- 如何解决 margin 合并？
- 处理内容溢出
- 隐藏元素的两种方式
-
- visibility 属性
- display 属性
- 样式的继承
- 默认样式
- 布局小技巧
- 元素之间的空白问题
- 行内块的幽灵空白问题
- 浮动
-
- 浮动的简介
- 元素浮动后的特点
- 浮动后会有哪些影响
-
- 对兄弟元素的影响
- 对父元素的影响
- 解决浮动产生的影响（清除浮动）
- 浮动样例
- 定位
-
- 相对定位
- 绝对定位
- 固定定位
- 粘性定位
- 定位层级
- 定位的特殊应用
-
- 注意
- 让定位元素的宽充满包含块
- 让定位元素在包含块中居中
- 布局
-
- 版心
- 常用类名
- 重置默认样式
-
- 默认样式
- 重置默认样式 - 方案一：使用全局选择器
- 重置默认样式 - 方案二：reset.css【推荐】
- 重置默认样式 - 方案三：Normalize.css
- HTML5
-
- 新增语义化标签
-
- 新增布局标签
- 新增状态标签
-
- meter 标签（电量、磁盘用量等...）
- progress标签（进度条）
- 示例
- 新增列表标签
-
- datalist标签（搜索关键词提示）
- details标签（展示问题和答案）
- 示例
- 新增文本标签
-
- ruby（文本注音）
- mark（标记）
- 示例
- 表单控件新增属性
- input 新增属性值
- form 标签新增属性
- 新增视频标签
- 新增音频标签
- 新增全局属性（了解）
- HTML5兼容性处理
- CSS3
-
- 新增长度单位
- 新增颜色设置方式
- 新增选择器
- 新增盒子模型相关属性
-
- box-sizing 怪异盒模型
- resize 调整盒子大小
- box-shadow 调整盒子阴影
- opacity 调整盒子透明度
- 新增背景相关属性
-
- background-origin 设置背景图的原点
- background-clip 设置背景图的向外裁剪的区域
- background-size 设置背景图的尺寸
- background 复合属性
- 多背景图
- 新增边框相关属性
-
- 边框圆角
- 边框外轮廓（了解）
- 新增文本属性
-
- 文本阴影
- 文本换行
- 文本溢出
- 文本修饰
- 文本描边（极度不常用）
- 新增渐变
-
- 线性渐变
- 径向渐变
- 重复渐变
- Web字体
-
- 基本用法
- 定制字体
- 示例
- 字体图标
- 2D变换
-
- 2D位移
- 2D缩放
- 2D旋转
- 2D扭曲（了解）
- 2D多重变换
- 2D变换原点
- 3D变换
-
- 开启3D空间
- 设置景深
- 透视点位置
- 位移
- 旋转
- 缩放
- 多重变换
- 过渡
-
- transition-property 定义哪个属性需要过渡
- transition-duration 设置过渡的持续时间
- transition-property 与 transition-duration 示例
- transition-delay 过渡延时
- transition-timing-function 设置过渡的类型
- transition 复合属性
- 多列布局
- 伸缩盒模型
-
- 伸缩盒模型简介
- 伸缩容器、伸缩项目
- 主轴与侧轴
- 主轴方向
- 主轴换行方式
- flex-flow复合属性
- 主轴对齐方式
- 侧轴对齐方式
-
- 只有一行的情况
- 多行的情况
- flex-basis 基准长度
- flex-grow（伸）
- flex-shrink（缩）
- flex复合属性
- 项目排序
- 单独对齐
- 响应式布局
-
- 媒体类型
- 媒体特性
- 运算符
- 常见阈值
-
- 结合外部样式的用法
-
- 用法一
- 用法二
- BFC
-
- 什么是BFC
- 开启了BFC能解决什么问题
- 如何开启BFC
学习资料
【尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频-哔哩哔哩】
HTML4
开发者文档
w3c官网：www.w3c.org
W3School：www.w3cschool.cn
MDN：developer.mozilla.org —— 平常用的最多
HTML标准结构
文档声明
-
作用：告诉浏览器当前网页的版本。
-
写法：
旧写法：要依网页所用的HTML版本而定，写法有很多。具体有哪些写法请参考：W3C官网-文档声明 (了解即可，千万别背!)
新写法：一切都变得简单了! W3C 推荐使用 HTML5的写法。
DOCTYPE html> 或 DOCTYPE HTML> 或 doctype html> -
注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
字符编码
- 平时编写代码时，统一采用
UTF-8 编码（最稳妥）。 - 为了让浏览器在渲染
html文件时，不犯错误，可以通过meta标签配合charset属性指定字符编码。
<head>
<meta charset="UTF-8"/>
head>
设置语言
- 主要作用：
（1）让浏览器显示对应的翻译提示。
（2）有利于搜索引擎优化。 - 具体写法：
<html lang="zh-CN">
标签
排版标签
| 标签名 | 标签含义 | 单 / 双标签 |
|---|---|---|
| h1 - h6 | 标题 | 双 |
| p | 段落 | 双 |
| div | 没有任何含义，用于整体布局 | 双 |
h1最好写一个，h2 - h6能适当多写 。h1 - h6不能互相嵌套，例如：h1标签中最好不要写h2标签了。p标签很特殊！它里面不能有：h1 - h6、p、div标签。
语义化标签
- 概念：用特定的标签，去表达特定的含义。
- 原则：标签的默认效果不重要（后期可以通过
CSS随便控制效果），语义最重要！ - 举例：对于
h1标签，效果是文字很大 (不重要)，语义是网页主要内容 (很重要)。 - 优势：
-
- 代码结构清晰可读性强。
-
- 有利于
SEO(搜索引擎优化)。
- 有利于
-
- 方便设备解析（如屏幕阅读器、盲人阅读器等）。
块级元素 与 行内元素
-
块级元素：独占一行（排版标签都是块级元素）。
-
行内元素：不独占一行（目前只学了：
input，稍后会学习更多）。 -
使用规则：
- 块级元素 中
能写 行内元素（简单记：块级元素中几乎什么都能写）。 - 行内元素 中
能写 行内元素，但不能写 块级元素。 - 一些特殊的规则：
h1~h6不能互相嵌套。p中不要写块级元素。
我们以后还会学到一些特殊的规则，但不会很多。
- 块级元素 中
-
备注说明：
marquee元素设计的初衷是：让文字有动画效果，但如今我们可以通过CSS来实现了，而且还可以实现的更加炫酷，所以marquee标签已经：过时了（废弃了），不推荐使用。我们只是在开篇的时候，用他做了一个引子而已，在后续的学习过程中，这些已经废弃的标签，我们直接跳过。
文本标签
- 用于包裹：词汇、短语等。
- 通常写在排版标签里面。
- 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
- 文本标签通常都是行内元素。
常用的：
| 标签名 | 标签语义 | 单 / 双 标签 |
|---|---|---|
em |
要着重阅读的内容 | 双 |
strong |
十分重要的内容（语气比em要强） | 双 |
span |
没有语义，用于包裹短语的通用容器 | 双 |
生活中的例子：div是大包装袋，span是小包装袋。
图片标签
img标签，常用属性：-
src：图片路径
-
alt：图片描述
-
width：图片宽度
-
height：图片高度
超链接
常用属性
a标签，常用属性：-
href：要跳转的具体位置
-
target：跳转时如何打开页面，常用值：_self在本页签中打开，_blank在新页签中打开。
注意点：
- 代码中多个空格、多个回车，都会被浏览器解析成一个空格！
- 虽然
a是行内元素，但a元素可以包裹除它自身外的任何元素！- 若浏览器无法打开文件，则会引导用户下载。
- 若想强制触发下载，请使用
download属性，属性值即为下载文件的名称。
跳转锚点
什么是锚点？ —— 网页中的一个标记点。
具体使用方式：
第一步设置锚点：
<a name="test1">a>
<h2 id="test2">我是一个位置h2>
注意点：
- 具有
href属性的a标签是超链接，具有name属性的a标签是锚点。name和id都是区分大小写的，且id最好别是数字开头。
第二步：跳转锚点
<a href="#test1">去test1锚点a>
<a href="#">回到顶部a>
<a href="demo.html#test1">去demo.html页面的test1锚点a>
唤起指定应用
通过a标签，可以唤起设备应用程序。
<a href="tel:10010">电话联系a>
<a href="mailto:[email protected]">邮件联系a>
<a href="sms:10086">短信联系a>
列表
有序列表
概念：有顺序或侧重顺序的列表
<ol>
<li>把冰箱门打开li>
<li>把大象放进去li>
<li>把冰箱门关上li>
ol>
无序列表
概念：无顺序或不侧重顺序的列表
<ul>
<li>成都li>
<li>上海li>
ul>
列表嵌套
概念：列表中某项内容，又包含一个列表（注意：嵌套时，请务必把结构写完整）。
<h2>我想去的几个城市h2>
<ul>
<li>成都li>
<li>
<span>上海span>
<ul>
<li>外滩li>
<li>杜莎夫人蜡像馆li>
ul>
li>
ul>
注意：
li标签最好写在ul或ol中，不要单独使用。
自定义列表
- 概念：所谓自定义列表，就是一个包含
术语名称以及术语描述的列表。 - 一个
dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是一个术语描述（可以有多个）。
<h2>如何高效的学习h2>
<dl>
<dt>做好笔记dt>
<dd>笔记是我们以后复习的一个抓手dd>
<dt>多加练习dt>
<dd>别怕出错dd>
dl>
表格
基本结构
一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
- 表格涉及到的标签：
-
table：表格
-
caption：表格标题
-
thead：表格头部
-
tbody：表格主体
-
tfoot：表格脚注
-
tr：每一行
-
th、td：每一个单元格（备注：表格头部中用th，表格主体、表格脚注中用：td）
具体编码：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格title>
head>
<body>
<table border="1">
<caption>学生信息caption>
<thead>
<tr>
<th>姓名th>
<th>性别th>
<th>年龄th>
<th>民族th>
<th>政治面貌th>
tr>
thead>
<tbody>
<tr>
<td>张三td>
<td>男td>
<td>18td>
<td>汉族td>
<td>团员td>
tr>
<tr>
<td>李四td>
<td>女td>
<td>20td>
<td>满族td>
<td>群众td>
tr>
<tr>
<td>王五td>
<td>男td>
<td>19td>
<td>回族td>
<td>党员td>
tr>
<tr>
<td>赵六td>
<td>女td>
<td>21td>
<td>壮族td>
<td>团员td>
tr>
tbody>
<tfoot>
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
<td>共计：4人td>
tr>
tfoot>
table>
body>
html>
常用属性
table：表格-
width：设置表格宽度
-
height：设置表格最小高度，表格最终高度可能比设置的值大。
-
border：设置表格边框宽度。
-
cellspacing：设置单元格之间的间距。
thead：表格头部-
height：设置表格头部高度。
-
align：设置单元格的水平对齐方式，可选值：left左对齐、center中间对齐、right右对齐
-
- valign：设置单元格的垂直对齐方式，可选值：
top顶部对齐、middle中间对齐、bottom底部对齐
- valign：设置单元格的垂直对齐方式，可选值：
tbody：表格主体：常用属性与thead相同tr：行：常用属性与thead相同tfoot：表格脚注：常用属性与thead相同td：普通单元格-
width：设置单元格的宽度，同列所有单元格全都受影响
-
heigth：设置单元格的高度，同行所有单元格全都受影响
-
align：设置单元格的水平对齐方式
-
valign：设置单元格的垂直对齐方式
-
rowspan：指定要跨的行数
-
colspan：指定要跨的列数
th：表头单元格：常用属性与td相同
注意点：
元素的
border属性可以控制表格边框，但border值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度，这个问题如何解决？—— —— 后期靠CSS控制。- 给某个
th或td设置了宽度之后，他们所在的那一列的宽度就确定了。- 给某个
th或td设置了高度之后，他们所在的那一行的高度就确定了。具体编码：
DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格_常用属性title> head> <body> <table border="1" width="500" height="300" cellspacing="0"> <caption>学生信息caption> <thead height="50" align="center" valign="middle"> <tr> <th width="50" height="50" align="right" valign="bottom">姓名th> <th>性别th> <th>年龄th> <th>民族th> <th>政治面貌th> tr> thead> <tbody height="520" align="center" valign="middle"> <tr height="50" align="center" valign="middle"> <td>张三td> <td>男td> <td>18td> <td>汉族td> <td>团员td> tr> <tr> <td>李四td> <td>女td> <td>20td> <td>满族td> <td>群众td> tr> <tr> <td>王五td> <td>男td> <td>19td> <td>回族td> <td>党员td> tr> <tr> <td align="right" valign="top">赵六td> <td>女td> <td>21td> <td>壮族td> <td>团员td> tr> tbody> <tfoot height="50" align="center" valign="middle"> <tr> <td>td> <td>td> <td>td> <td>td> <td>共计：4人td> tr> tfoot> table> body> html>
跨行与跨列
rowspann：指定要跨的行数colspan：指定要跨的列数DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>表格_跨行与跨列title> head> <body> <table border="1" cellspacing="0"> <caption>课程表caption> <thead> <tr> <th>项目th> <th colspan="5">上课th> <th colspan="2">活动与休息th> tr> thead> <tbody> <tr> <td>星期td> <td>星期一td> <td>星期二td> <td>星期三td> <td>星期四td> <td>星期五td> <td>星期六td> <td>星期日td> tr> <tr> <td rowspan="4">上午td> <td>3-2td> <td>3-3td> <td>3-4td> <td>3-5td> <td>3-6td> <td>3-7td> <td rowspan="4">休息td> tr> <tr> <td>4-2td> <td>4-3td> <td>4-4td> <td>4-5td> <td>4-6td> <td>4-7td> tr> <tr> <td>5-2td> <td>5-3td> <td>5-4td> <td>5-5td> <td>5-6td> <td>5-7td> tr> <tr> <td>6-2td> <td>6-3td> <td>6-4td> <td>6-5td> <td>6-6td> <td>6-7td> tr> <tr> <td rowspan="2">下午td> <td>7-2td> <td>7-3td> <td>7-4td> <td>7-5td> <td>7-6td> <td>7-7td> <td rowspan="2">休息td> tr> <tr> <td>8-2td> <td>8-3td> <td>8-4td> <td>8-5td> <td>8-6td> <td>8-7td> tr> tbody> table> body> html>
常用标签补充
br：换行
hr：分隔
pre：按原文显示（一般用于在页面中嵌入大段代码）注意点：
- 不要用
来增加文本之间的行间隔，应使用后面即将学到的CSS margin属性。的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用CSS完成。表单
基本结构
form：表单
action：用于指定表单的提交地址
target：用于控制表单提交后，如何打开页面，常用值：_self：在本窗口打开、_blank：在新窗口打开
method：请求方式，可选值：get、post提交按钮
<input type="submit" value="点我提交表单"> <button>点我提交表单button>注意：
button标签type属性的默认值是submit。button不要指定name属性。input标签编写的按钮，使用value属性指定按钮文字。重置按钮
<input type="reset" value="点我重置"> <button type="reset">点我重置button>注意点：
button不要指定name属性。input标签编写的按钮，使用value属性指定按钮文字。禁用表单控件
给表单控件的标签设置
disabled即可禁用表单控件。
input、textarea、button、select、option都可以设置disabled属性label标签
label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。两种与
label关联方式如下：
1、让label标签的for属性的值等于表单控件的id。
2、把表单控件套在label标签的里面。fieldset 与 legend 的使用（了解即可）
fieldset可以为表单控件分组、legend标签是分组的标题
框架标签
iframe：框架（在网页中嵌入其他文件）
name：框架名字，可以与target属性配合。
width：框架的宽度。
height：框架的高度。
frameborder：是否显示边框，值：0或者1。
iframe标签的实际应用：
- 在网页中嵌入广告。
- 与超链接或表单的
target配合，展示不同的内容。HTML全局属性
id：给标签指定唯一标识，注意：id是不能重复的。class：给标签指定类名，随后通过CSS就可以给标签设置样式。style：给标签设置CSS样式。dir：内容的方向，值：ltr、rtl，注意不能在、、、你可能感兴趣的:(前端,学习与实践,HTML5,CSS3)
