课堂笔记打卡day3

蒲公英追着我跑

已于 2023-11-24 01:05:27 修改

阅读量139

点赞数

文章标签：笔记 html5

于 2023-11-23 00:29:58 首次发布

本文链接：https://blog.csdn.net/Jiamusiggg/article/details/134566128

版权

文章详细介绍了HTML、CSS、JS的基础知识，包括注释、模块化、网页开发角色、HTML标签语法，文本修饰（如加粗、倾斜、下划线等）的使用，超链接、图片标签、区块布局、标题和段落标签，以及CSS的选择器、样式声明和应用。此外，还提到了费曼技巧在学习中的应用和CSS模块的基础概念。

摘要由CSDN通过智能技术生成

一、day1_文本修饰上

1.注释

对于代码的解释说明
快捷键：ctrl+？/
注释：不会显示在浏览器中，只是给开发人员看

2.模块化形式给大家进行交换

前后数据可视化等等所有的内容基础
前+后+数据+其他内容

3.网站开发

前端
后端
数据分析师
安全管理员
产品经理
UI设计师
前端开发工程师
后端开发工程师
测试开发工程师
网站运营工程师

4.HTML+CSS+JS+JAVA+python+其他

HTML语言
- 超文本标记语言(hyper text markup language)

标记语言语法

双标记

<标签名字 属性="属性值" 属性="属性值" 属性="属性值"></标签名字>

单标记

<标签名字 属性="属性值" 属性="属性值">

问题:什么是属性,什么是属性值
- 属性：对于一个东西特征的描述
- 属性值：特征/描述的一个取值身高，体重，年龄

问题:面试题

语法特点有哪些？

1)所有标记都需要带引号
2)双标记有结束，单标记没有结束
3)标记可以带属性也可以不带属性，可以跟一个属性也可以跟多个属性
4)标签名字和属性之间必须带空格
5)属性和属性值之间使用等号连接
6)每一组属性和属性值之间使用空格隔开
7)可以带单引号也可以带双引号

5.文本修饰类型的标签

1）加粗

作用：对文本实现加粗效果
基本语法：文本、文本

示例

Hello,World
<b>Hello,World<b>
<strong>Hello,World</strong>

2）倾斜

作用：对文本实线倾斜效果
基本语法：文本、文本、文本、
文本

示例

春风若有莲花意，可否许我再少年
<i>春风若有莲花意，可否许我再少年</i>
<em>春风若有莲花意，可否许我再少年</em>
<var>春风若有莲花意，可否许我再少年</var>
<address>春风若有莲花意，可否许我再少年</address>

3）下划线

作用:为文本添加一条修饰线，位于文本的底部
基本语法:文本文本
快捷键:单词+tab 单词+回车

示例

TheShy
<u>TheShy</u>
<ins>TheShy</ins>

4）删除线

作用:为文本天机一条修饰线，位于文本中间位置
基本语法:文本文本

示例

青春已复过，百日忽相催
<s>青春已复过，百日忽相催</s>
<del>青春已复过，百日忽相催</del>

5）问题:加粗，倾斜，下划线，删除线等多种样式可以嵌套吗？

完全可以：语法的嵌套一层包裹一层
注意事项：文本修饰类型的标签，谁嵌套谁都可以

(1)加粗,倾斜效果
<b><i>Hello,World</i></b>
(2)加粗,倾斜,下划线效果
<b><i><u>Hello,World</u></i></b>
(2)加粗,倾斜,删除线效果
<b><i><u><s>Hello,World</s></u></i></b>

6）文本加以修饰：颜色，字体，大小

基本语法:文本

示例

<font color="blue" size="1" face="宋体">人生若只如初见,何事秋风悲画扇</font>
<br>
<font color="blue" size="2" face="黑体">白日放歌需纵酒,青春作伴好还乡</font>
<br>
<font color="blue" size="3" face="微软雅黑">所谓伊人,在水一方</font>
<br>
<font color="blue" size="4" face="华文彩云">人生若只如初见,何事秋风悲画扇</font>
<br>
<font color="blue" size="5" face="宋体">春蚕到死丝方尽,蜡炬成灰泪始干</font>
<br>
<font color="blue" size="6" face="宋体">身无彩凤双飞翼,心有灵犀一点通</font>
<br>
<font color="blue" size="7" face="宋体">人生若只如初见,何事秋风悲画扇</font>
<br>

7）角标标签

上角标：

^文本
下角标:

_文本

示例

10m*10m=100m<sup>2</sup>
<br>
H<sub>2</sub>O
e<sup>Π</sup>

二、day2_文本修饰基础下

1、独立文本修饰:什么效果都没有

基本语法:
主要应用场景:网站独立修饰文本的时候使用CSS模块里面经常出现
- 默认横向排列

示例

你好呀欢迎来到王者峡谷
<span>我也是王者峡谷</span>
<span>我也是王者峡谷</span>
<span>我也是王者峡谷</span>

2、超链接标签

超链接:实现不同页面之间的跳转
- 基本语法: 文本/图片
- 注意事项:默认超链接颜色为蓝色;自带下划线; 点击之后会变成紫色;
- 问题:如何再新的窗口中打开
  - 属性:target=“_self/_blank”
    - _self==自己本窗口的意思
    - _blank=新窗口中打开
- 问题:如果想要优化我们的网站
  - 鼠标放在超链接上面的时候有一个提示文本===作用:提示用户超链接指向到哪里;
  - 建议工程师做设置的时候一定要设置这个提示功能====方便爬虫爬取数据
  - 如何实现: title=“指向文本描述”
锚点链接:实现的是相同页面的不同区域的跳转楼梯层效果
- 楼梯层
- 返回置顶
- 小说目录
锚点链接的基础语法
- 点击区域: 文本
- 跳转区域: <任何一个标签 id=“锚点名字”>

示例

<a href="#box1">第一章:归国</a>  
<a href="#box2">第二章:强强联姻</a>
<a href="#box3">第三章:步入婚姻殿堂</a>
<a href="#box4">第四章:复仇</a>
<br>
<b id="box1">归国</b><br>
<b id="box2">强强联姻</b><br>
<b id="box3">步入婚姻殿堂</b> <br>
<b id="box4">复仇</b><br>

3、图片标签

基本语法:
考虑图片和页面文件之间的关系问题
标签属性:
- 路径属性
  - src=“路径”
  - 相对路径:通过文件和文件夹之间的关系查找对应的文件
    - pic/picture/pic.png
    - …/pic/pic.jpg
    - …/…/pic/pic.png
  - 绝对路径:查找文件的一种完整的途径地址
    - c://picture/study/pic.png
    - http://…
- alt属性
  - 图片描述:只有图片为破损的时候文件的时候才会显示;而且是占位置的;不破损不显示
- title属性
  - 文本提示:只要鼠标放上去就能提示信息,无论你是不是破损文件
- 面试题:图片描述属性中:alt属性和title属性二者之间的区别
  - 相同点
    - 二者均属于文本提示的一种,都能起到提示作用
  - 不同点
    - title无论是否为破损文件,均可以鼠标划过提示
    - alt属性只有破损文件时候才会提示,不破损不提示
    - title提示不占位置
    - alt提示如果实现之后是占位置的
  - 开发过程中我们都建议把这两个属性都添加进去为啥?方便爬虫爬取数据,同时增强用户的体验度,提高网站搜索引擎搜索的排名
- 宽度属性和高度属性
  - width
  - height
  - 我们不推荐使用代码控制图片的大小问题;图片会变形,图片会失真,非要强制使用的话,你可以只使用一个宽度或者高度属性,这样的话可以等比例放大或者是缩小你这个图片
示例
```

<img src="GGbond.png" alt="我是" title="我是GGbond" width="100px" >

<img src="../img/feifei.png" title="我是菲菲公主" width="200px">
```

4、区块划分标签

主要是应用于布局中,做区域布局划分
div盒子标签
- 基本语法:
  文本/图片/其他文本修饰标签/其他标签
- 应用场景: 区块划分场景比较多
- 特点: 默认是纵向显示的, 想要横向显示, 必须添加浮动/弹性盒子/定位完成

5、标题标签

基本语法: n===number 数值 1-6
- 1
  
  2
  
  3
  
  4
  
  5
  
  6
特点:1)纵向排列; 2)h1最大, h6最小的;只有6个级别 ; 3)默认加粗
主要应用场景: 文章的标题; h1大标题 h2副标题 h3==小标题 h4-h6视情况而定

示例

<h1>
    我是一级标题
</h1>
<h2>
    我是二级标题
</h2>
<h3>
    我是三级标题
</h3>
<h4>
    我是四级标题
</h4>
<h5>
    我是六级标题
</h5>
<h6>
    我是六级标题
</h6>

6、段落标签

基本语法:
文本/文本修饰类型的标签
注意事项:切记里面不能放置自己和其他的区块划分
段落和段落中间有一个比较大的段落间距
每一个段落里面有一个比较小的行间距

示例

第一个自然段 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste eligendi consequatur quia quam repudiandae, a odit, facilis reprehenderit inventore vitae id iure veritatis eum accusamus laborum tenetur accusantium in eos. Alias aperiam nobis accusamus ratione maiores ipsam, dolore, earum dolor placeat, explicabo provident nihil enim ducimus pariatur voluptate eaque nulla assumenda voluptas sunt inventore. Quia a illum pariatur quas suscipit. Eos laboriosam, cupiditate ducimus ipsa maxime saepe! Maxime similique ad fugiat ipsam perspiciatis, doloremque repellendus animi. Nihil, totam, neque laboriosam tempora fuga quas voluptate molestiae, in architecto ex mollitia ipsa.

<p>
    第二个自然段 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, quia ipsam? Itaque quisquam ipsa exercitationem ducimus veniam necessitatibus provident perspiciatis quis ipsam excepturi nesciunt, hic asperiores porro, totam expedita voluptatem.
    Nam quidem incidunt maxime facere nisi debitis veniam dolores impedit quasi, fugit dolor voluptate illum magni at, possimus repellat nesciunt qui quas provident neque dolorem inventore perferendis sed. Eos, voluptate.
    Recusandae, excepturi. Tempore beatae velit quam labore voluptatem deleniti, maiores a placeat sint, totam fugit corporis, alias aliquam aperiam dolores cum. Quas numquam iste labore ad nostrum vitae hic sint.
</p>

三、day3_基础案例

1、区块划分的标签

有序列表：有顺序的列表清单
- 列表标签：清单的意思
- 基本语法:
- 1. 文本
  2. 文本
  3. 文本
  4. 文本
- 注意事项:
  - 双标签;
  - ol里面只能放置li标签;
  - 如果非要嵌套，需要再li里面嵌套
- 问题：能否修改列表项的显示类型
  - 给ol添加一个type属性
  - type=“A/a/I/i/|”
- 问题:能否修改列表项的顺序
  - start=“从第几个开始”

示例

<ol type="A" start="4">
        <li>打开冰箱</li>
        <li>放入大象</li>
        <li>关闭冰箱</li>
        <li>打开冰箱</li>
        <li>放入大象</li>
        <li>关闭冰箱</li>
</ol>

无序列表：没有顺序的列表清单
- 基本语法：
- - 文本
  - 文本
  - 文本
  - 文本
- 默认效果:是以黑色的实心原点来进行显示的
- 问题：能否修改一下无序列表的显示类型？
  - type=“”
  - disc====黑色实心圆点
  - circle==黑色的圆环，空心圆
  - square==正方形
  - none====取消显示类型;使用频率最高

示例

<ul type="disc">
    <li>怀化</li>
    <li>长沙</li>
    <li>湘潭</li>
    <li>凤凰</li>
</ul>

自定义列表
- 自定义的列表清单;主要应用场景:图文混排布局;问答列表
- 基本语法:dl里面放置dt和dd顺序不强制
  
  图片/问题
  
  图片解释/问题问答
- 注意事项
  - dl之间有一个比较大的缝隙
  - 一个dl里面可以放置多个dt和多个dd但是一般情况下只放置一组即可

示例

<dl>
   <dd>问题:我们使用什么快递</dd>
   <dt>回答:使用京尊达</dt>
   <dd>问题:几天到湖南</dd>
   <dt>回答:随缘</dt>
</dl>

2、水平线标签

水平线：用来做上下区域分割;默认水平线是是=从左侧通道右侧的，占屏幕一整行
- 默认效果：存在一个阴影
- 标签属性
  - 取消阴影:noshade=“noshade”
  - 设置宽度:width=“200px”
  - 水平位置对齐:align=“left/right/center”
  - 修改颜色属性 :color=“red”
  - 高度:size=“100px”

示例

仰天大笑出门去
<hr noshade width="200px" align="left" color="blue" size="100px">
我辈岂是蓬蒿人

3、综合案例

Document

费曼技巧：最强的学习方法

作者：秋小曦 2017.04.10 14:12:19 字数 1,086 阅读 19,865

一、“费曼技巧”的概念

来源，这个技巧的灵感，源于诺贝尔物理奖获得者，理查德·费曼（Richard Feynman）。在他的自传里，他提到
曾纠结于某篇艰深的研究论文。他的办法是，仔细审阅这篇论文的辅助材料（supporting material），直到他掌
握了相关的知识基础、足以理解其中的艰深想法为止。

费曼技巧，亦同此理。对付一个知识枝节繁杂如发丝、富有内涵的想法，应该分而化之，切成小知识块，再逐个对
付，你最终能填补所有的知识缺口，否则，这些缺口将阻挠你理解这个想法。

“费曼技巧”是一种学习方法，是一种以教促学的学习方法，是通过假定模拟讲课的方式而将要学习的内容讲给自
己听。

二、“费曼技巧”的实施步骤：

第1步：选择一个你想要理解的概念选择一个你想要理解的概念, 然后拿出一张白纸, 把这个概念写在白纸的最上边.

第2步：设想一种场景，你正要向别人传授这个概念（模拟教学）在白纸上写下你对这个概念的解释, 就好像你正
在教导一位新接触这个概念的学生一样. 当你这样做的时候, 你会更清楚地意识到关于这个概念你理解了多少, 以及
是否还存在理解不清的地方。

第3步：如果你感觉卡壳了, 就回顾一下学习资料无论何时你感觉卡壳了, 都要回到原始的学习资料并重新学习让你
感到卡壳的那部分, 直到你领会得足够顺畅, 顺畅到可以在纸上解释这个部分为止。

第4步：为了让你的讲解通俗易懂，简化语言表达，最终的目的, 是用你自己的语言, 而不是学习资料中的语言来解
释概念. 如果你的解释很冗长或者令人迷惑, 那就说明你对概念的理解可能并没有你自己想象得那么顺畅 -- 你要努
力简化语言表达, 或者与已有的知识建立一种类比关系, 以便更好地理解它。

三、掌握“费曼技巧”需要注意的关键点

费曼技巧之所以有效，很大一部分原因是由于其充分动用了我们的大脑，我们会提前对知识做一个总结，归纳，输
出，这也是为什么我们给别人解释过某些事情后对之理解更深的原因所在。费曼技巧本质上就是把知识讲解给自
己听，这个转换的过程中涉及到了几个比较重要的关键点，有利于把资料转换为知识。

1.挑重点：人的精力毕竟是有限的，成功的人也总是挑重要的事情来干。我们学生时代最兴奋的事情莫过于老师划重点了。但你有没有想过自己划重点的，在知识的阐述过程中有利于分清主次，重点攻克。

2.简化：看起来跟第一点相似，但其实两点是在两个层面上进行的。一个是在知识点中挑选重要的。另一个是在挑出的知识点中对资料进行简化，可视化，已达到即使外行人也能了解的程度。

3.总结和连接：在输出的时候毫无疑问会和你大脑原有的知识进行比对，进而比较分析，加深理解。

4、css模块基础

css含义:层叠样式表
对标签结构进行修饰的
css基本语法
```
选择器{
	属性:属性值;
	属性:属性值;
	属性:属性值;
}
```
- 介绍
  - 选择器:查找页面元素的一种方式方法
  - {}:样式规则,样式声明,对选择器查找到的元素进行修饰的一个规则
- 面试题
  - css基本语法几个部分组成？两个:选择器和样式声明
  - css样式声明有几个部分组成？两个:属性和属性值
css语法的应用位置==三个位置都可以
- 标签内部,行内位置处===行内样式表
  - 基本语法:<标签名字 style=“属性:属性值;属性:属性值;属性:属性值”>
  - 弊端:
    - 代码重复率较高,比较冗余
    - HTML和CSS放在一起比较混乱,代码不整洁;
    - 没有做到结构和样式的分离
- 页面内部使用==内部样式表
  - 基本语法：
  - 优点:代码HTML和CSS分离;一次书写,多处使用;代码比较简介
  - 缺点:精准度不高;没有做到充分分离