从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day11）

复习：从零开始学前端：CSS复合选择器 — 今天你学习了吗？（Day10）

文章目录

• 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day11）
• 前言
• • 第十一节课：复习课
  • • 一、知识点复习
    • • 第一节课： HTML框架和VS Code安装
      • 第二节课：HTML的一些文本格式化标签、快捷键、和特殊符号
      • 第三节课：链接跳转
      • 第四节课：表格制作
      • 第五节课：表单制作
      • 第六节课：列表标签
      • 第七节课：CSS引入
      • 第八节课：CSS字体属性和文本属性
      • 第九节课：CSS背景颜色
      • 第十节课：CSS复合选择器
    • 二、总结
    • • 1.VSCode使用技巧
      • 2.网页的结构化布局
      • 3.meta和link标签解析
      • 4.标题和段落标记
      • 5.换行与水平线标记
      • 6.文本格式化标签
      • 7.图片
      • • a.常用图像格式
        • b.图像标签img
      • 8.超链接
      • 9.表格
      • • a.结构化的表格
        • b.常用属性
        • c.表格的缺陷
      • 8.表单
      • 9.div+span
      • 10. 列表标签
      • 11.emment语法
    • 三、练习

前言

知识点还没有完全整理好，请耐心等待~

第十一节课：复习课

一、知识点复习

第一节课： HTML框架和VS Code安装

快捷通道：HTML框架和VSCode 安装

知识点：

1. 单标签和双标签
2. HTML框架
3. 基本标签（p、title、h（h1~h6）、head、body、meta）

第二节课：HTML的一些文本格式化标签、快捷键、和特殊符号

快捷通道：HTML的一些文本格式化标签、快捷键、和特殊符号

知识点：

1. 如何注释+快捷键：Ctrl+/
2. 避免一行代码过长快捷键：Alt+Z
3. 标签根据书写方式和关系如何进行区分

第三节课：链接跳转

快捷通道：链接跳转

知识点：

1. 图片标签
2. 相对路径绝对路径
3. 图片标签属性
4. 链接标签
5. 链接标签分类

第四节课：表格制作

快捷通道：表格制作

知识点：

1. 表格标签+语法
2. 表格属性
3. 单元格合并

第五节课：表单制作

快捷通道：表单制作

知识点：

1. 表单标签
2. 表单控件+属性

第六节课：列表标签

快捷通道：列表标签

知识点：

1. 列表标签分类
2. 无序列表
3. 有序列表
4. 自定义列表
5. emment语法（超级便捷！！！）

第七节课：CSS引入

快捷通道：CSS引入

知识点：

1. 三种引入方式+用法
2. 五种基本选择器+基本语法格式

第八节课：CSS字体属性和文本属性

快捷通道：CSS字体属性和文本属性

知识点：

1. CSS字体属性（CSS字体颜色、字体大小、字体粗细、字体倾斜等）
2. 字体复合属性font
3. CSS文本属性（CSS对齐文本、装饰文本、文本缩进、行高）
4. 文本溢出
5. 文本字与字之间的间距

第九节课：CSS背景颜色

快捷通道：CSS背景颜色

知识点：

1. 背景颜色半透明
2. 背景图片
3. 背景平铺
4. 背景图片位置
5. 背景图片固定
6. 背景复合写法

第十节课：CSS复合选择器

快捷通道：CSS复合选择器

知识点：

1. 复合选择器（以下）
2. 后代选择器
3. 子选择器
4. 兄弟选择器
5. 并集选择器
6. 伪类选择器
7. 链接伪类选择器
8. focus伪类选择器
9. 结构伪类选择器

二、总结

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标签解析

meta1.为搜索引擎提供信息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单位是秒linkhref:指定外部文档的地址,常用URL值rel:指定当前文档与外部文档的关系,stylesheet为外部样式表type:外部文档的类型.css外部样式表:text/css,JavaScript脚本:text/javascript

4.标题和段落标记

1. 都具有语义化
2. h1~h6有权重(搜索引擎相关),且逐渐递减
3. p标签与上下文之间有空行
4. h:给文本标题含义,类似容器标签,可以包含其它标签,但p不能包含h

5.换行与水平线标记

1. 换行br
2. 水平标记线hr(属性:align,size,color,width)
3. 实际中利用css样式设置hr,不建议使用属性
4. 都是单标签

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.注释标签3.标签的关系:并列,包含4.标签的书写方式:单标签,双标签5.标题标签和段落标签独占一行

7.图片

a.常用图像格式

1. GIF:支持动画,透明(全透明和全不透明),几乎无损,但只能处理256中颜色,常用语logo,小图标,色彩相对单一的图像
2. PNG:包括PNG-8和真色彩PNG(PNG-24和PNG-32),比GIF体积更小,支持alpha透明(全透明,半透明,全不透明),颜色过渡更平滑,但不支持动画,半透明的图片只能使用PNG-24
3. JPG:有损的图像格式,能显示更多的颜色,类似于横幅广告,商品图片等考虑使用JPG

b.图像标签img

1.单标签<img src=""/>src:图像的路径alt:图像不能显示时的替换文本title:鼠标悬停时的显示内容width:图像的宽度height:图像的高度border:图像的边框宽度vspace:图像顶部和底部的空白(垂直边距)hspace:图像左侧和右侧的空白(水平边距)align:left right top middle(图像的水平中线和文本的第一行文字对齐) bottom(图像的底部和文本的第一行文字对齐)

8.超链接

target:_self _blank

1. href="#"空链接
2. 锚点链接:
   设置目标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.常用属性

widthheightbordercellspacing:表格单元格之间的间距,外边距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

1. 布局
2. 标签分类:块级标签,行内标签,行内块标签

10. 列表标签

1. ul:无序列表（list-style-type:none;可以去掉无序标签前的圆点）
2. ol:有序列表
3. dl:自定义列表(dt,dd)
4. type:disc实心原点,circle空心圆,square实心正方形
5. start:可以更改有序列表的起始值 reversed:可以是有序列表序号反向增加(-)

11.emment语法

1. 多个相同标签*p
2. 父子级关系ul>li
3. 兄弟关系div+p
4. 带有类名和id名.demo或者#id
5. 自增符$
6. 内容{}

三、练习

预习：从零开始学前端：CSS元素模式的转换和CSS三大特性 — 今天你学习了吗？（Day11）

------人生在勤，不索何获。

养殖设备