WEB前端知识点记录（21-45集）

  • 第二十一集-嵌套列表
    • 嵌套列表仿写
  • 第二十二集-表格标签
    • 课堂练习
  • 第二十三集-表格属性
    • 课堂练习（改）
  • 第二十四集-表单属性
    • 课堂练习
  • 第二十五集-表单相关标签
    • 课堂练习（改）
  • 第二十六集-表格表单组合实例
    • 课堂练习
    • 作业1
  • 第二十七集-div与span
    • 课堂练习
  • 第二十八集-css语法格式
    • 课堂练习
  • 第二十九集-内联样式与内部样式
    • 课堂练习
  • 第三十集-外部样式
    • 课堂练习
  • 第三十一集-css颜色表示法
    • 课堂练习
  • 第三十二集-css背景样式
  • 第三十三集-背景实现视觉差效果
    • 课堂练习
  • 第三十四集-边框样式
  • 第三十五集-边框实现三角形
    • 课堂作业
  • 第三十六集-css字体类型
    • 课堂作业
  • 第三十七集-字体大小粗细样式
  • 第三十八集-文本修饰与文本大小写
  • 第三十九集-文本缩进与文本对齐
  • 第四十集-文本的行高
  • 第四十一集-文本间距与英文折行
  • 第四十二集-文本与段落实现简介
    • 课堂作业
  • 第四十三集-css复合样式
  • 第四十四集-id选择器及注意事项
  • 第四十五集-class选择器
    • 课堂作业

第二十一集-嵌套列表

  1. 列表之间互相嵌套可以形成多层级的列表

嵌套列表仿写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ul><li>依阿华级战列舰</li><ul><li>依阿华号&lt;BB61&gt;</li><li>新泽西号&lt;BB62&gt;</li><li>密苏里号&lt;BB63&gt;</li><li>威斯康星号&lt;BB64&gt;</li><li>伊利诺伊号&lt;BB65&gt;</li><li>肯塔基号&lt;BB66&gt;</li></ul></ul><br><ul><li>狮级战列舰</li><ul><li>狮号&lt;Lion&gt;</li><li>蛮勇号&lt;Temeraire&gt;</li></ul></ul><ul><li>大和级战列舰</li><ul><li>大和号&lt;Yamato&gt;</li><li>武藏号&lt;Musashi&gt;</li><li>信浓号航空母舰</li></ul></ul>
</body>
</html>

第二十二集-表格标签

  1. <table>:表格最外层容器
    <tr>:定义表格行
    <th>:定义表头
    <td>:定义表格单元
    <caption>:定义表格标题
    （注：之间是有嵌套关系的，要符合嵌套规范）
  2. 语义化标签：<tHead>、<tBody>、<tFood>
    (在一个table章，tBody可以出现多次，tHead、tFood只能出现一次)

课堂练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table><caption><strong>2022年物理诺奖得奖情况</strong></caption><thead><tr><th>获奖人员</th><th>获奖成就</th></tr> </thead><tbody><tr><td>阿兰·阿斯佩（(Alain Aspect)</td><td>采用快速抽离验证量子不确定性</td></tr><tr><td>约翰·弗朗西斯 · 克劳泽(John F. Clauser)</td><td>采用快速抽离验证量子不确定性</td></tr><tr><td>安东·塞林格(Anton Zeilinger)</td><td>创新方法验证量子不确定性与其纠缠特性</td></tr></tbody></table>
</body>
</html>

第二十三集-表格属性

  1. 表格属性：<border>：表格边框（加在table中）
    <cellpadding>：单元格内空间
    <cellspacing>：单元格之间的空间
    <rowspan>：合并行（加在tr下的td中）
    <colspan>：合并列
    <align>：左右对齐方式(left、center、right)
    <valign>：上下对齐方式(top、middle、bottom)

课堂练习（改）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table border="1" cellpadding="30" cellspacing="0.5"><caption><strong>2022年物理诺奖得奖情况</strong></caption><thead><tr align="left" valign="top"><th>人员形象</th><th>获奖人员</th><th>获奖成就</th></tr> </thead><tbody><tr><td><img src="https://bkimg.cdn.bcebos.com/pic/0824ab18972bd40735fa8ae027dc89510fb30f24a32b?x-bce-process=image/resize,m_lfit,w_536,limit_1" alt=""></td><td>阿兰·阿斯佩（(Alain Aspect)</td><td>采用快速抽离验证量子不确定性</td></tr><tr><td><img src="https://bkimg.cdn.bcebos.com/pic/0b7b02087bf40ad162d95dec0b7906dfa9ec8a13603c?x-bce-process=image/resize,m_lfit,w_536,limit_1" alt=""></td><td>约翰·弗朗西斯 · 克劳泽(John F. Clauser)</td><td>采用快速抽离验证量子不确定性</td></tr><tr><td><img src="https://bkimg.cdn.bcebos.com/pic/48540923dd54564e9258ff37ef8b8b82d158ccbfe13a?x-bce-process=image/resize,m_lfit,w_536,limit_1" alt=""></td><td>安东·塞林格(Anton Zeilinger)</td><td>创新方法验证量子不确定性与其纠缠特性</td></tr></tbody></table>
</body>
</html>

第二十四集-表单属性

  1. <form>：表单的最外层容器（注：action为提交地址）
  2. <input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。（单标签）
    type属性：text（文本输入框）（placeholder为默认文字栏）
    password（密码输入框）
    checkbox（复选框）（注：checked为默认勾选，disabled为禁止使用）
    radio（单选框）（注：通过name进行附加）
    file（上传文件）
    submit（提交按钮）
    reset（重置按钮）

课堂练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>注册表格</h1><form></form><h4>用户名</h4><input type="text" placeholder="请输入用户名"><h4>密码</h4><input type="password" placeholder="请输入密码"><h4>上传您的头像</h4><input type="file"><h4>您是否同意我方协议许可</h4><input type="radio" name="许可申请">是<input type="radio" name="许可申请">否<br><input type="submit"><input type="reset">
</body>
</html>

第二十五集-表单相关标签

  1. <textarea>：多行文本框
  2. <select>、<option>：下拉菜单（size表示可视数，multiple表示多选，selected表示默认选择，disabled表示不可选择）
  3. <label>：辅助菜单（for与id对应，共同交互）

课堂练习（改）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>注册表格</h1><form></form><h4>用户名</h4><input type="text" placeholder="请输入用户名"><h4>密码</h4><input type="password" placeholder="请输入密码"><h4>上传你的头像</h4><input type="file"><h4>自我介绍</h4><textarea cols="40" rows="15"></textarea><h4>出生日期</h4><select><option selected disabled>出生年份</option><option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option></select><select><option selected disabled>出生月份</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select><h4>您是否同意我方协议许可</h4><input type="radio" name="许可申请" id="yes"><label for="yes">是</label><input type="radio" name="许可申请" id="no"><label for="no">否</label><br><input type="submit"><input type="reset">
</body>
</html>

第二十六集-表格表单组合实例

课堂练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form><table border="1" cellpadding="30"><tbody><tr align="center"><td rowspan="4">总体注册</td><td colspan="2">用户注册</td></tr><tr align="right"><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr align="center"><td colspan="2"><input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset"></td></tr></tbody></table></form>
</body>
</html>

作业1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form><table><tbody><tr><td>电子邮箱：</td><td><input type="text"></td></tr><tr><td>设置密码：</td><td><input type="password"></td></tr><tr><td>真实姓名：</td><td><input type="text"></td></tr><tr><td align="right">性别：</td><td><input type="radio" name="性别" id="女"><label for="男">男</label><input type="radio" name="性别" id="女"><label for="女">女</label></td></tr><tr><td align="right">生日：</td><td><select><option selected disabled>请选择</option></select><select><option selected disabled>--</option></select><select><option selected disabled>--</option></select></td></tr><tr align="right"><td colspan="2"><a href="">为什么要填写我的生日？</a></td></tr><tr><td align="right">我现在:</td><td> <select><option selected disabled>请选择身份</option></select>(非常重要)</td></tr><tr align="center"><td colspan="2"><img src="https://img2.baidu.com/it/u=4287227552,235501259&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=385" weight="180" height="72"><a href="">看不清楚换一张</a></td></tr><tr><td align="right">验证码:</td><td><input></td></tr><tr align="center"><td colspan="2"><a href=""><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.tukuppt.com%2Fpng_preview%2F00%2F13%2F02%2FmABDWdJhM4.jpg%21%2Ffw%2F780&refer=http%3A%2F%2Fimg.tukuppt.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669109575&t=63cf80f7ef0afedce11b914a8002e0e0" weight="180" height="72"></a></td></tr></tbody></table></form>
</body>
</html>

第二十七集-div与span

  1. <div>：做一个区域划分的块
  2. <span>：对文字进行修饰的，内联

课堂练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div><h2>链锯人</h2><img src="https://bkimg.cdn.bcebos.com/pic/7dd98d1001e939010b7afb4a74ec54e736d1964d?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyNzI=,g_7,xp_5,yp_5"><p>《链锯人》是作者藤本树著作的漫画作品,第1部于2018年12月3日在《周刊少年JUMP》上连载,于2020年12月宣布完结。第2部于2022年7月13日在《少年JUMP+》上连载。漫画单行本由集英社出版，繁体中文版由东立出版社发行，中国大陆电子版由哔哩哔哩漫画发布。</p><a href="https://www.bilibili.com/video/BV1Ke4y1E7ub/?spm_id_from=333.337.search-card.all.click&vd_source=7b94f283a4682193537990c7a7b35836">主题曲op</a></div>
</body>
</html>

第二十八集-css语法格式

  1. 格式：选择器{属性1：值1；属性2：值2}
  2. 单位：px：像素（pixel）、%：百分比
  3. 基本样式：width、height、background-color

课堂练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width:100px;height:21px;background-color: rgb(101, 101, 101);}span{background-color:rgb(255, 0, 0);}</style>
</head>
<body><div>这是一段<span>文字</span></div>
</body>
</html>

第二十九集-内联样式与内部样式

  1. CSS的引入方式：内联样式（style属性）
    内部样式（style标签）
    区别：内部样式的代码可以复用，符合W3C的规范标准，进行让结构和样式分开处理

课堂练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;background-color: lightskyblue;}</style>
</head>
<body><div>这是一个块</div><div>这也是一个块</div>
<!-- <div style="width: 200px;height: 200px;background-color: lightskyblue;"
>这是一个块</div> -->
</body>
</html>

第三十集-外部样式

  1. 外部样式：引入一个单独的css文件
    通过link标签引入外部资源，rel属性指定资源与页面的关系，herf属性资源的地址
    通过@import方式引入外部样式：@import url(‘./xxx.css’)（有很多问题，不建议使用）

课堂练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="./common.css"><title>Document</title>
<!--     <style>@import url('./common.css');</style> -->
</head>
<body><div>这是一个块</div>
</body>
</html>

第三十一集-css颜色表示法

  1. 单词表示法
  2. 十六进制表示法
  3. rgb三原色表示法：rgb(xx,xx,xx)

课堂练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style></style>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: rgb(255, 0, 0);"
>芝士红色</div>
<div style="width: 200px;height: 150px;background-color: rgb(0, 0, 255);"
>芝士蓝色</div>
</body>
</html>

第三十二集-css背景样式

  1. background-color 背景色
  2. background-image背景图（url+背景地址）：默认会水平垂直都铺满背景图
  3. background-repeat平铺方式：默认x,y均平铺(repeat-x、repeat-y、no-repeat)
  4. background-position背景位置：x（数字或left、center、right或%） y（数字或top、center、bottom或%）
  5. background-attachment背景图随滚动条的移动方式：scroll（背景位置按照当前元素偏移）和fixed（背景位置按照浏览器偏移）

第三十三集-背景实现视觉差效果

课堂练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#div1{width: 1920px;height: 1080px;background-image:url(./图片/白毛.jpg); background-position:40%,10%;background-attachment: fixed;}#div2{width: 1920px;height: 1080px;background-image:url(./图片/夏日气泡.jpg);background-attachment: fixed;}#div3{width: 1920px;height: 1080px;background-image:url(./图片/形影孤照.jpg);background-attachment: fixed;}</style>
</head>
<body><div id="div1"><title>Document</title></head><body><p> <em>来看看你喜欢的游戏排在哪里吧</em> </p><ol><li>原神 637.0691亿</li><li>命运-冠位指定 116.2375亿</li><li>赛马娘 108.7270亿</li><li>阴阳师 67.2624亿</li><li>明日方舟 55.6135亿</li><li>偶像梦幻祭 2 30.1702亿</li><li>崩坏3 29.3303亿</li><li>公主连结 26.1651亿</li><li>碧蓝航线 24.8522亿</li><li>游戏王:决斗链接 17.5092亿</li><li>幻塔 14.7503亿</li><li>坎特雷公主与与骑士唤醒冠军之剑的奇幻冒险 14.0719亿</li><li>闪耀暖暖 13.4740亿</li><li>战双帕弥什 12.2138亿</li><li>光与夜之恋  10.6395亿</li></ol></body></html></div><div id="div2"><head><meta charset="UTF-8"><title>Document</title><base target="_self"></head><body><h1> <em>新世纪福音战士</em> </h1><a href="#真嗣">碇真嗣</a><a href="#老婆">凌波丽</a><a href="#香香">明日香</a><p>私货qwq</p><a href="https://www.bilibili.com/video/BV1254y187SE/?spm_id_from=333.337.search-card.all.click">【EVA】感谢你曾来过我的世界:│▌ One Last Kiss</a><h2 id="真嗣">碇真嗣</h2><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.gamersky.com%2Fimage2014%2F10%2F20141007wdy_3%2F02_S.jpg&refer=http%3A%2F%2Fimg1.gamersky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668767114&t=5bf67ba7908969c0a9e7154e74f322cc" alt="真嗣"weight="540"height="360"><br><a href="https://www.bilibili.com/video/BV1Xg411C7vb/?spm_id_from=333.788.recommend_more_video.-1&vd_source=7b94f283a4682193537990c7a7b35836">真嗣|可是我的自卑胜过了一切爱我的。</a><h2 id="老婆">凌波丽</h2><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Frin.linovel.net%2Fattachment%2Farticle%2F201907%2F1049857_bce38929c245a77617d434479de99498.jpeg&refer=http%3A%2F%2Frin.linovel.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668768766&t=bc5ff5d0bf6aa3f360d8b9b74c87c2d8" alt="凌波丽"weight="720"height="360"><br><a href="https://www.bilibili.com/video/BV1y54y1p7Gh/?spm_id_from=333.337.search-card.all.click&vd_source=7b94f283a4682193537990c7a7b35836">EVA x KATE x 米山舞「绫波丽，首次口红，在那之后」</a></body></html></div><div id="div3"><head><meta charset="UTF-8"><title>Document</title></head><body><p><strong>FLY YOU TO THE MOON</strong></p><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.3dmgame.com%2Fuploads%2Fimages%2Fnews%2F20220920%2F1663660989_662097.jpg&refer=http%3A%2F%2Fimg.3dmgame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668668528&t=3653854174e37979444486c56632e155" alt="现在是幻想时间"title="赛博朋克:边缘行者"weight="720"height="360"><p><em>I REALLY WANT TO STAY AT YOUR HOUSE</em></p></body></html></div>
</body>
</html>

第三十四集-边框样式

  1. border-style：边框样式（solid：实线、dashed：虚线、dotted：点线）
    border-width：边框大小
    border-color：边框颜色
    （也可以针对某一条边单独设置）格式：border-right-style

第三十五集-边框实现三角形

  1. 透明颜色：transparent

课堂作业

<!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>Document</title><style>body{background-color: rgb(5, 52, 139);}div{width: 0px;height: 0px;border-top-color: transparent;border-top-width: 10px;border-top-style: solid;border-bottom-color: transparent;border-bottom-width: 10px;border-bottom-style: solid;            border-left-color: rgb(249, 166, 71);border-left-width: 10px;border-left-style: solid;            border-right-color: transparent;border-right-width: 10px;border-right-style: solid;}</style>
</head>
<body><div></div>
</body>
</html>

第三十六集-css字体类型

  1. font-family:字体类型（英文、中文）
  2. 衬线体与非衬线体
  3. 多个字体设置目的：防止用户电脑识别不出未安装字体
  4. 引号添加的目的：使有空格字体视为整体

课堂作业

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{font-family: 'Courier New', Courier, monospace;}</style>
</head>
<body><div>明日方舟</div><p>明日方舟</p><div>arknights</div><p>arknights</p>
</body>

第三十七集-字体大小粗细样式

  1. font-size 字体大小:xx-small 最小;x-small 较小;small 小;medium 正常;large 大;x-large 较大;xx-large 最大（不推荐使用）
  2. 字体大小一般为偶数（默认为16px）
  3. font-weight 字体粗细:正常(normal)、加粗(bold)
    number:100~900（100到500正常，600到900加粗）
  4. font-style 字体样式:正常(normal)、斜体(italic、oblique)
  5. italic所有带有倾斜字体的才可以设置，oblique没有倾斜字体的也可以设置倾斜操作
  6. color 字体颜色

第三十八集-文本修饰与文本大小写

  1. text-decoration 文本修饰：下划线(underline)、删除线(line-through)、上划线(overline)、不添加任何装饰(none)
  2. 添加多个文本修饰：通过空格隔开
  3. text-transform 文本大小写（英文）：小写(lowercase)、大写(uppercase)、只针对首字母大写(capitalize)

第三十九集-文本缩进与文本对齐

  1. text-indent 文本缩进：em（相对单位，与字体大小相同）
  2. text-align 文本对齐方式：左对齐(left)、右对齐(right)、居中对齐(center)、两端点对齐(justfify)

第四十集-文本的行高

  1. line-height 行高：一行文字的高度，上下边距的等价关系，随字体大小不断变化
  2. 取值：number(xx px)、scale(与文字大小的比例值)

第四十一集-文本间距与英文折行

  1. letter-spacing：字之间的间距
    word-spacing（针对英文）
  2. 英文和数字不自动折行的问题：
    word-break:break-all;（非常强烈的折行）、word-wrap:break-word;（不是那么强烈的折行，会产生一些空白区域）

第四十二集-文本与段落实现简介

课堂作业

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#div1{width: 1920px;height: 1080px;background-image:url(./图片/星空.jpeg); background-position:40%,10%;background-attachment: fixed;}#div2{width: 1920px;height: 1080px;background-image:url(./图片/杏花.jpeg);background-attachment: fixed;}</style>
</head>
<body><div id="div1">
<h1 style="text-align: center; color:rgb(255, 140, 0)">梵高生平</h1>
<h2 style="color:rgb(228, 253, 0) ;">总括</h2>
<p style="font-style: italic;font-weight: bold;color: lightblue;text-indent: 2em;">文森特·威廉·梵高(Vincent Willem van Gogh,1853年3月30日—1890年7月29日),荷兰后印象派画家。代表作有《星月夜》、自画像系列、向日葵系列等。<br>梵高出生于1853年3月30日荷兰乡村津德尔特的一个新教牧师家庭,早年的他做过职员和商行经纪人，还当过矿区的传教士最后他投身于绘画。他早期画风写实,受到荷兰传统绘画及法国写实主义画派的影响。1886年,他来到巴黎,结识印象派和新印象派画家,并接触到日本浮世绘的作品,视野的扩展使其画风巨变。1888年,来到法国南部小镇阿尔,创作《阿尔的吊桥》；同年与画家保罗·高更交往，但由于二人性格的冲突和观念的分歧，合作很快便告失败。此后，梵高的疯病(有人记载是“癫痫病”)时常发作,但神志清醒时他仍然坚持作画。1889年创作《星月夜》。1890年7月,梵高在精神错乱中开枪自杀,年仅37岁。</p>
<h2 style="color:rgb(228, 253, 0) ;">题材</h2>
<p style="font-weight: bold;color: rgb(198, 132, 246);text-indent: 2em;text-decoration: line-through;font-size: 20px;">梵高的作品中充满天然的悲悯情怀和苦难意识。例如在梵高艺术生涯的初期，绘画最多的题材是矿区阴惨的场景和劳作的矿工。在埃顿时期，落日的翻滚、日里的农夫和农妇更多出现在他作品中。到多伦特和海牙时期，梵高的作品中开始频繁出现哭泣的女人、足两姗的老树以及城市救济院中的老人孤儿、驾车的老马、劳作的农夫等等。梵高对农民、对田野生活、对乡村田野风光有着很高的热情，他喜爱农民的一切，尤其是向日葵、麦田、莺尾花、豌豆花等。他经常选取这些散发着泥土清香的物象作为自己的绘画题材，在他短暂的艺术生涯中，梵高凭借着自己敏锐的艺术感知力深情地、细致地描绘着这些质朴、自然的风景、静物及人物，他也因此被称为“画家中最纯粹的画家”。与那些华丽璀璨的绘画相比，梵高的画更多的是朴实和隽永，他将自己无限的激情倾注于这些朴素的花朵和田野生活中，使画作产生了一种无法超越、无法模仿的艺术魔力。梵高曾经画过许多有关向日葵的画，虽然每次绘制的向日葵数目不一样，花朵的姿态也都不一样，但是它们都体现出了一种饱满和劲头。此外，梵高还经常选用麦田作为自己的绘画题材，从他所描绘的各式麦田的画作似乎可以感知到麦田里所散发出的一兹兹悲沧之情。如梵高创作于奥维尔的《乌云笼罩下的麦田》就是以恶劣天气下连绵不绝的麦田作为题材，传递出了凄凉、寂寥、压抑和苦闷的情感。再如，《有乌鸦的麦田》也是以麦田作为主要题材，并在麦田上方加入了一群黑黑的乌鸦，从而呈现出了一种深深的绝望和死一般的沉寂之情。当然，除了这两种题材之外，梵高的绘画还涉及到许多题材物象，但无一例外，它们都是质朴无华的，是和生活紧密相关的。</p></div><div id="div2"><h2 style="color:rgb(228, 253, 0) ;">色彩</h2><p style="font-style: italic;font-weight: bold;color: rgb(246, 104, 104);text-indent: 2em;font-size: 20px;">梵高是一位色彩主义画家,他对色彩的偏好几乎达到了一种癫狂的状态,这虽然与他的精神疾病有着一定的联系,但是也不能否认梵高对于色彩的创造性的发现和表现。他的画作中的色彩都是较为奔放、夸张的,这也深深地影响了20世纪的表现主义和野兽派绘画。具体而言,梵高画作中奔放的色彩主要表现在以下三个方面:第一，用光亮明快的夸张色彩进行装饰。受新印象派画家毕沙罗、修拉等色彩技法的影响，梵高摒弃了绘画初期暗浊、沉重的色彩，开始采用一些高明度、高纯度、高亮度的色彩，创作出了一种极具现代感和时尚感的色彩装饰效果，他的油画也因此越发鲜亮起来。在所有的高纯度、高亮度的色彩之中，梵高最偏爱黄色，简单明了的黄色带有另外一层寓意，即象征着太阳和大地，代表着光明和希望。在黄色的带动之卜，梵高绘画作品的色彩明度和纯度对比都十分鲜明，产生了一种光亮明快的装饰美感。例如，梵高的《向日葵》就是以大面积的黄色作为主要基调，然后配以土黄色、柠檬黄及中黄色等，使观众产生一种五彩缤纷、璀璨炫目的视觉感受，也表现出了梵高对美好生活的向往。第二，用大色块的对比进行装饰。在装饰色彩中，大色块的并置对比是一种非常重要的表现手法，虽然这一表现手法早在梵高之前就己经提出，但在梵高的绘画中得到了最淋漓尽致的表现。梵高画作中的对比色常常是大块的且较为平整的，既简化概括，又能够增加画面的厚重感，而且借助色块的对比还可以产生一种和谐的视觉效果。例如，《夜晚的咖啡馆——室外景》就是用大色块的对比色进行装饰，黄橙色的灯光和深蓝色的夜空相互对比，使画面产生了一种纵深感，同时也生动地描绘出了人们的夜生活。第三，用绝对的黑白色进行缓冲。在绘画过程中，梵高除了追求画面色彩的明亮欢快及色块对比之外，还经常用黑白色来缓冲、协调色彩，其常常和对比色出现在同一个场景中。以《播种者》为例，画面分为上、下两个部分，上半部分是鲜亮的黄色，下半部分是明亮的紫色，两种颜色对比非常强烈，过渡也比较直接，会对受众的眼睛产生刺激。而梵高将画面中播种者的长裤画为白色，在黄色和紫色之间产生了一个隔断，受众的眼睛也得以获得片刻的休息。</p><h2 style="color:rgb(228, 253, 0) ;">人物影响</h2><p style="font-style: italic;font-weight: bold;color: rgb(230, 221, 173);line-height: 50px;letter-spacing: 6px;">“梵高对后来的野兽派和表现派都有极大影响,他的艺术成就比马奈和塞尚对后继者有更大的作用。”（意大利艺术评论家小文杜里评）<br>“梵高的全生涯没入在艺术中。他的各时代的作品完全就是个时代的生活的记录。在以艺术为生活的艺术家中，可说是一个极端的例。”（中国画家丰子恺评）</p></div>
</body>
</html>

第四十三集-css复合样式

  1. 复合的方式是通过空格实现的（复合写法有的不关心顺序，例如background和border；有的需要关心顺序，例如font）：
    background:red url( ) repeat 0 0;
    border:1px red solid;
    font:weight style size(/line-height) family（必须有且按顺序）
  2. 复合样式与单一样式尽量不要混写，先写复合样式再写单一样式

第四十四集-id选择器及注意事项

  1. #elem{} id=“elem”
  2. id是唯一值，在一个页面中只能出现一次，出现多次不符合规范
  3. 命名的规范：由字母、下划线、中划线、字母（并且第一个不能是字母）
  4. 驼峰写法：searchButton（小驼峰）、SearchButton（大驼峰）
    短线写法：search-small-button
    下划线写法：search_small_button

第四十五集-class选择器

  1. .elem{} class=“elem”
  2. 注：class选择器是可以复用的
    可以添加多个class样式
    多个样式的时候，样式的优先级根据css决定，而不是class中的顺序
    标签+类的写法

课堂作业

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box{background:red;}</style>
</head>
<body><div class="box">这是一个块</div>
</body>
</html>

千锋web前端教学知识点记录及个人理解2相关推荐

  1. 千锋web前端教学知识点记录及个人理解4

    WEB前端知识点记录(84-109集) 第八十四集-relative相对定位 第八十五集-absolute绝对定位 第八十六集-fixed和sticky及zlndex 第八十七集-定位实现下拉菜单 课 ...

  2. 千锋web前端工程师头脑风暴：程序员逻辑思维养成记

    "逻辑思维"这个词,很多人会对它敬而远之.因为大多人,也包括我在内,我们这些并没有天生才智的人来说,似乎总认为这是自己不擅长的领域. 这4年前在网上突然出现了一档脱口秀节目,叫做& ...

  3. Web前端理论知识记录

    Web前端理论知识记录 Elena · 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session)中 ...

  4. Web前端css知识点概括

    Web前端css知识点的简单概括如下,方便记忆. 1.字体,背景(font-style,font-weight,font-size/line-height,font-family...backgrou ...

  5. 点击部分刷新html ajax,一文全解web前端精简知识点

    Web 前端知识体系精简介绍,让你学web前端轻松容易,让你选择web前端更轻松容易! Never give up on something you really want. It's difficu ...

  6. 在千锋学前端的卢同学“不甘于落后，不安于现状”

    第一阶段项目即将结束之际,我想我们每一位学员都有不同的但很大的收获.对于我个人,我认为第一-阶段培训对我来说非常有意义,非常有必要,因为它不仅让我充实了更多的前端基础知识,更让我开阔了对前端开发的了解 ...

  7. （2020.12.7）初次web前端性能优化记录

    (转载公司内部论坛本人文章2020.12.7) 导语: 作为客户端开发,由于项目的需要,最近一年陆续做了很多web前端的需求开发.但过去做的大部分都是单页面的运营H5,上线时间短,一般保证能稳定运行就 ...

  8. WEB前端ES6知识点【笔记】

    目录 前言 声明变量 let变量 const声明变量 变量的解构赋值 ES6新引入字符串 简化对象写法 ES6箭头函数及声明特点 案例 前言 自学尚硅谷前端ES6 web前端自学ES6部分,简单记一点 ...

  9. JavaScript基础实战知识点记录及个人理解2

    JavaScript基础&实战知识点记录(26-45集) 第二十六集-运算符的优先级 第二十七集-代码块 第二十八.二十九.三十.三十一.三十二集-if语句 练习1 练习2 练习3 第三十三. ...

  10. WEB前端打印使用记录

    一.window.print(); 1.使用记录 printTable(){//获取body页面内容const bdhtml = window.document.body.innerHTML;//根据 ...

最新文章

  1. 科大星云诗社动态20220112
  2. 老板让我每天刷群，无奈只能写一个自动群发脚本，不让自己疯狂复制粘贴
  3. （一）导学（前端框架面试-聚焦Vue/React/Webpack）
  4. 记单词工具 百词斩 0124
  5. 【java】Java内省Introspector
  6. android 编程 输入矩阵,Android中Matrix的pre post set方法理解
  7. linux下c语言获取系统时间
  8. Markdown表格文字调整
  9. CentOS下使用命令行Web浏览器Links
  10. java 获取est时间_将日期字符串（EST）转换为Java日期（UTC）
  11. 如何在宝贝详情页中制作一张图片多个链接
  12. 8.编写程序，要求如下： 定义名为VolumeArea的抽象类，在其中定义圆周率的值为3.14159，并定义两个抽象方法volume(double r)和area(double r)，它们的返回
  13. Google Earth Engine（GEE）——在GEE上画出论文研究区图（彩色）
  14. 零基础抖音电商主播培训计划直播脚本话术大全范文ppt模板
  15. NotePad 打开文件 出现中文汉字乱码 解决办法
  16. GeoTools之入门简介
  17. Ubuntu下修改文件夹的所有者权限
  18. Latex-- 强制图片位置
  19. 18个顶级的腾讯qq技巧
  20. 排列组合简介以及相关问题

热门文章

  1. zigbee应用实践
  2. Spring+Mybatis+SpringMVC+Maven+MySql搭建实例
  3. 获取QQ音乐排行榜数据
  4. 如何快速提高idm下载速度?idm下载速度只有几十kb
  5. 配置微软Azure Kinect DK 录制器k4arecorder
  6. Kaggle泰坦尼克号提升准确率探索
  7. S5P6818开发板移植OV5640摄像头
  8. 无法打开源文件“QtWidgets/QMainWindow“的问题
  9. C++语句 与简单方法
  10. wkwebview 下移20像素_Cyclone2D编辑器(通用版本) 使用手册