从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
复习：从零开始学前端：CSS复合选择器 — 今天你学习了吗？（CSS：Day10）
前言
知识点还没有完全整理好，请耐心等待~
第十一节课：复习课
一、知识点复习
第一节课： HTML框架和VS Code安装
快捷通道：HTML框架和VSCode 安装
知识点：
- 单标签和双标签
- HTML框架
- 基本标签（p、title、h（h1~h6）、head、body、meta）
第二节课：HTML的一些文本格式化标签、快捷键、和特殊符号
知识点：
- 如何注释+快捷键：
Ctrl+/ - 避免一行代码过长快捷键：
Alt+Z - 标签根据书写方式和关系如何进行区分
第三节课：链接跳转
快捷通道：链接跳转
知识点：
- 图片标签
- 相对路径绝对路径
- 图片标签属性
- 链接标签
- 链接标签分类
第四节课：表格制作
快捷通道：表格制作
知识点：
- 表格标签+语法
- 表格属性
- 单元格合并
第五节课：表单制作
快捷通道：表单制作
知识点：
- 表单标签
- 表单控件+属性
第六节课：列表标签
快捷通道：列表标签
知识点：
- 列表标签分类
- 无序列表
- 有序列表
- 自定义列表
- emment语法（超级便捷！！！）
第七节课：CSS引入
快捷通道：CSS引入
知识点：
- 三种引入方式+用法
- 五种基本选择器+基本语法格式
第八节课：CSS字体属性和文本属性
快捷通道：CSS字体属性和文本属性
知识点：
- CSS字体属性（CSS字体颜色、字体大小、字体粗细、字体倾斜等）
- 字体复合属性font
- CSS文本属性（CSS对齐文本、装饰文本、文本缩进、行高）
- 文本溢出
- 文本字与字之间的间距
第九节课：CSS背景颜色
快捷通道：CSS背景颜色
知识点：
- 背景颜色半透明
- 背景图片
- 背景平铺
- 背景图片位置
- 背景图片固定
- 背景复合写法
第十节课：CSS复合选择器
快捷通道：CSS复合选择器
知识点：
- 复合选择器（以下）
- 后代选择器
- 子选择器
- 兄弟选择器
- 并集选择器
- 伪类选择器
- 链接伪类选择器
- focus伪类选择器
- 结构伪类选择器
二、总结
1.VSCode使用技巧
- shift+alt+a 添加或删除块注释
- shift+alt+上下箭头 向上或向下复制当前行
- 按住alt可以同时选择多列
2.网页的结构化布局
<main>规定文档的主内容</main>
<header>规定文档或节的页眉(标题)</header>
<section>定义文档中的节</section>
<nav>定义导航链接</nav>
<aside>定义页面内容以外的内容,如工具栏</aside>
<footer>定义文档或节的页脚(脚注)</footer>
<article>页面中与上下文不相关的独立内容</article>
3.meta和link标签解析
meta
1.为搜索引擎提供信息
2.关键字 name="keywords" content=""
3.网页描述 name="description" content=""
4.设置作者 name="author" content=""
5.设置服务器发送给浏览器的http头部信息,为浏览器显示该页面提供相关的参数
(1)设置字符集和文件类型:
http-equiv="Content-Type" content="text/html"; charset="utf-8"
(2)设置页面自动刷新和跳转至某个页面:
http-equiv="refresh" content="10";url=
content单位是秒
link
href:指定外部文档的地址,常用URL值
rel:指定当前文档与外部文档的关系,stylesheet为外部样式表
type:外部文档的类型.css外部样式表:text/css,JavaScript脚本:text/javascript
4.标题和段落标记
- 都具有语义化
- h1~h6有权重(搜索引擎相关),且逐渐递减
- p标签与上下文之间有空行
- h:给文本标题含义,类似容器标签,可以包含其它标签,但p不能包含h
5.换行与水平线标记
- 换行br
- 水平标记线hr(属性:align,size,color,width)
- 实际中利用css样式设置hr,不建议使用属性
- 都是单标签
6.文本格式化标签
<strong></strong> 强调文本(权重高),效果是加粗b
<b></b>不强调文本,只是效果加粗
<em></em>倾斜,权重高
<i></i>只是效果倾斜
<del></del>删除线,权重高
<s></s>效果删除线
<ins></ins>下划线,权重高
<u></u>下划线
<small></small>小号字体
<sup></sup>上标
<sub></sub>下标
<div>
没有特定的语义,用来划分区块,用来布局,独占一行
</div>
<span>与div类似但是,不独占一行,也用来布局,无特定语义</span>
1.这些标签可以相互嵌套
2.注释标签<!--vs code快捷键:ctrl+/-->
3.标签的关系:并列,包含
4.标签的书写方式:单标签,双标签
5.标题标签和段落标签独占一行
7.图片
a.常用图像格式
- GIF:支持动画,透明(全透明和全不透明),几乎无损,但只能处理256中颜色,常用语logo,小图标,色彩相对单一的图像
- PNG:包括PNG-8和真色彩PNG(PNG-24和PNG-32),比GIF体积更小,支持alpha透明(全透明,半透明,全不透明),颜色过渡更平滑,但不支持动画,半透明的图片只能使用PNG-24
- JPG:有损的图像格式,能显示更多的颜色,类似于横幅广告,商品图片等考虑使用JPG
b.图像标签img
1.单标签
<img src=""/>
src:图像的路径
alt:图像不能显示时的替换文本
title:鼠标悬停时的显示内容
width:图像的宽度
height:图像的高度
border:图像的边框宽度
vspace:图像顶部和底部的空白(垂直边距)
hspace:图像左侧和右侧的空白(水平边距)
align:left right top middle(图像的水平中线和文本的第一行文字对齐) bottom(图像的底部和文本的第一行文字对齐)
8.超链接
<a href="跳转目标" target="目标窗口的弹出方式"><a/>
target分为_self （本页跳转）和_blank（新页面跳转）
- href="#"空链接
- 锚点链接:
设置目标id,href="#id"
利用一个单独的,href="#one"
9.表格
a.结构化的表格
<table>
<caption>定义表格标题</caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
b.常用属性
width
height
border
cellspacing:表格单元格之间的间距,外边距
cellpadding:表格内边距
bgcolor:表格背景颜色
rowspan:跨行合并,注意该属性要写在开始标签(行:最左 列:最上)
colspan:跨列合并,注意该属性要写在开始标签(行:最左 列:最上)
c.表格的缺陷
div每加载一行显示一行,而table是表格内的所有元素加载完后才显示
8.表单
<form action="URL" method="get/post">
<fieldset>
<legend align="center">标题</legend>
<div>
<label>输入:<input type="text" checked="checked" /></label>
</div>
<div>
<select name="select" id="">
<option value="1">123</option>
<option value="2" selected="selected">234</option>
</select>
</div>
<div>
<textarea name="" id="" cols="50" rows="10"></textarea>
</div>
<div>
<input type="month">
<input type="radio" name="sex">
<input type="radio" name="sex">
<input type="submit">
<input type="button">
<input type="reset">
<input type="password">
<button>
按钮
</button>
</div>
</fieldset>
</form>
1.表单:表单区域 文本 表单控件
2.可以通过name属性给每一个表单控件一个名字,这样如果两个radio控件拥有同一个名字的话,那么同一时刻只能选一个
3.value:默认值
4.checked:如果属性值为checked首次加载时被选中
5.maxlength:输入控件中字符的最大长度
6.size:控件的宽度
7.placeholder:提示信息
8.required:如果属性值是required表示输入框中是必填字段
9.date,month,week,time...:都是日期
10.fieldset:分组 legend:为分组定义标题
9.div+span
- 布局
- 标签分类:块级标签,行内标签,行内块标签
10. 列表标签
- ul:无序列表（list-style-type:none;可以去掉无序标签前的圆点）
- ol:有序列表
- dl:自定义列表(dt,dd)
- type:disc实心原点,circle空心圆,square实心正方形
- start:可以更改有序列表的起始值 reversed:可以是有序列表序号反向增加(-)
11.emment语法
- 多个相同标签*p
- 父子级关系ul>li
- 兄弟关系div+p
- 带有类名和id名.demo或者#id
- 自增符$
- 内容{}
三、练习
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今日话题</title>
<link rel="stylesheet" href="./css/今日话题.css">
</head>
<body>
<div class="body">
<div class="logo"><img src="./img/jrhtLogo.png" alt=""></div>
<div class="head">扩大有效投资、有潜力、有空间、有动力</div>
<div class="list">
<ul>
<li><a href="1">【央视快评】坚持以零容忍态度整治腐败</a></li>
<li><a href="2">国奥会委员高度评价2022北京奥运会：盼再来北京</a></li>
<li><a href="3">2022年各部门有啥民生“小目标”？清单来了！</a></li>
<li><a href="4">冬奥会遗产报告集发布，包含七个单册遗产报告。</a></li>
<li><a href="5">俄说：中国做了一件了不起的事......</a></li>
<li><a href="6">新型城镇化为构建新发展格局积蓄动能。</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
.body{
width: 320px;
background-color: rgb(247,248,249);
}
.logo>img{
height: 30px
}
.head{
line-height: 40px;
text-indent: 1em;
}
ul{
color: rgb(90, 161, 226);
}
li{
height: 50px;
}
a{
font-size: 16px;
text-decoration: none;
color: black;
line-height: 20px;
}
a:hover{
color: rgb(90, 161, 226);
}
预习：从零开始学前端：CSS元素模式的转换和CSS三大特性 — 今天你学习了吗？（CSS：Day11）
------人生在勤，不索何获。
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
