第二周笔记
一、第二十一集笔记
第二十一集对列表嵌套进行了教学
列表嵌套
列表之间可以进行嵌套，形成多层次的结构
无序列表嵌套
写法:
<body>
<ul>
<li>
江苏省
<ul>
<li>南京</li>
<li>扬州</li>
<li>苏州</li>
</ul>
</li>
<li>
四川
<ul>
<li>成都</li>
<li>乐山</li>
<li>眉山</li>
</ul>
</li>
</ul>
</body>
预览效果:
定义列表嵌套
写法:
<body>
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>山东省</dt>
<dd>济南</dd>
<dd>青岛</dd>
<dd>烟台</dd>
</dl>
</dd>
<dt>美国</dt>
<dd>华盛顿</dd>
<dd>洛杉矶</dd>
<dd>纽约</dd>
</dl>
</body>
预览效果:
二、第二十二集笔记
第二十二集对表格的创建及一些标签进行了介绍和教学
表格标签
标签介绍：
<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
注意：它们之间有嵌套关系，要符合规范
写法:
<body>
<table>
<caption>10月活动安排</caption>
<tr>
<th>日期</th>
<th>活动</th>
<th>地点</th>
</tr>
<tr>
<td>2022.10.1</td>
<td>国庆</td>
<td>广场</td>
</tr>
<tr>
<td>2022.10.19</td>
<td>运动会</td>
<td>操场</td>
</tr>
</table>
</body>
预览效果:
语义化标签:
<tHead>:表头
<tBody>:内容
<tFood>:表尾
作用:使表格更符合规范性，便于后期维护
写法:
<body>
<table>
<caption>10月活动安排</caption>
<tHead>
<tr>
<th>日期</th>
<th>活动</th>
<th>地点</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022.10.1</td>
<td>国庆</td>
<td>广场</td>
</tr>
<tr>
<td>2022.10.19</td>
<td>运动会</td>
<td>操场</td>
</tr>
</tBody>
<tFood>
</tFood>
</table>
</body>
预览效果与之前没有区别
注意：在一个table标签中tBody可以出现多次，二tHead、tFood只能出现一次
三、第二十三集笔记
第二十三集对表格的一些属性进行了教学
表格属性
border:表格边框，写在table标签后
cellpadding:单元格内的空间，写在table标签后
cellspacing:单元格之间的空间，写在table标签后
rowspan:合并行，写在td签后
colspan:合并列，写在th、td标签后
align:左右对齐方式(可填值:left、center、right)，写在tr标签后
valign:上下对齐方式(可填值:top、middle、bottom)，写在tr标签后
四、第二十四集笔记
第二十四集对表单标签及type属性进行了介绍与教学
表单标签
<form>:表单的最外层容器
<input>: 单标签，用于搜集用户信息，根据不同的type属性值，展示不同控件(输入框，密码框，复选框)
type属性
text:普通的文本输入框，写在input标签后，想在框内进行提示，只需要在text属性后写入placeholder属性，对应值为要提示的内容
password:密码输入框，写在input标签后，想在框内进行提示，只需要在text属性后写入placeholder属性，对应值为要提示的内容
checkbox:复选框，写在input标签后，若想默认被选则需要在checkbox属性值后面写入checked并且无需写入值，若想默认无法被选则需要在checkbox属性值后面写入disabled也无需写入值
radio:单选框，写在input标签后，要写入name值
file:上传文件，写在input标签后
submit:提交按钮，写在input标签后(提交地址要写在form标签后的action属性里)
reset:重置按钮，写在input标签后
例题：
要求：用户通过输入账号密码，并提交相关个人信息，爱好选择要求睡觉必选，摆烂不可选，自我介绍要提交.txt文本文档或者PPT，提交网址为https://www.baidu.com
代码实现:
<!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>
</head>
<body>
<form action="https://www.baidu.com">
<h2>账号</h2>
<input type="text" placeholder="请输入账号">
<h2>密码</h2>
<input type="password" placeholder="请输入密码">
<h2>性别</h2>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<h2>爱好</h2>
<input type="checkbox">游戏
<input type="checkbox">短视频
<input type="checkbox">学习
<input type="checkbox">运动
<input type="checkbox" checked>睡觉
<input type="checkbox" disabled>摆烂
<h2>自我介绍</h2>
<input type="file">
<input type="submit">
<input type="reset">
</form>
</body>
</html>
预览效果:
五、第二十五集笔记
第二十五集进一步对表单标签进行了介绍与教学
表单标签
textarea标签:多行文本框
常用属性:
cols:设置列的长度
rows:设置行的长度
select标签、option标签:下拉菜单
写法:
<select>
<option></option>
<option></option>
<option></option>
</select>
常用属性:
selected:设置默认被选项(写在option标签后)
size:设置显示框长度(写在select标签后)
multiple:用于多选，需要按住鼠标左键拖动(写在select标签后，也可写在input标签中type属性的file属性值后面)
label标签:辅助表单
作用:用于提升用户体验，使得有效点击范围变大
示例:
<body>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</body>
当代码这样写的时候，你在实际运行进行选择时，将鼠标指针放到"男"、"女"这两个汉字上时，是无法进行选择的
<body>
<input type="radio" name="sex" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
</body>
当代码这样写的时候，在实际运行进行选择时，，将鼠标指针放到"男"、"女"这两个汉字上时，是可以进行选择的
六、第二十六集笔记
第二十六集对表格表单的组合使用进行了教学，这里由于是一个综合练习，只能通过举例解题来进行练习
操作
想要的效果:
代码实现:
<html>
<head></head>
<body>
<form action="">
<table>
<tr align="right">
<td>电子邮箱：</td>
<td align="left"><input type="text"></td>
</tr>
<tr>
<td>设置密码：</td>
<td align="left"><input type="text"></td>
</tr>
<tr>
<td>真实姓名：</td>
<td align="left"><input type="text"></td>
</tr>
<tr>
<td align="right">性别：</td>
<td align="left">
<input type="radio" name="sex" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
</td>
</tr>
<tr align="right">
<td>生日：</td>
<td>
<select>
<option selected disabled>请选择</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</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>
月
</td>
</tr>
<tr>
<td align="right">我现在：</td>
<td align="left">
<select>
<option selected disabled>请选择</option>
<option>无业</option>
<option>在岗位</option>
<option>在学校</option>
</select>
(非常重要)
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="立即注册"></td>
</tr>
</table>
</form>
</body>
</html>
题目分析:
通过分析图片内容，我们可以将各行各列分析出来，首先这是一个表格列表组合，所以需要在<form>标签里面嵌套一个<table>标签。其次，图片里面一共有七行两列，所以在<table>标签里应该有七个<tr>标签，而<tr>标签里面应该包含两个<td>标签，将左边的提示内容与右边的互动操作分开，一个<td>标签里面写提示内容，另外一个<td>标签里面用<input>标签编写互动操作，值得注意的是对各个<tr>标签进行对齐，然后通过value属性对submit默认显示的提交改为立即注册
七、第二十七集笔记
第二十七集对<div>标签和<span>标签进行了介绍和教学，并简单拓展了一些样式的知识
div(块):
div全称为division，“分割、分区”的意思，
span(内联):
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。
八、第二十八集笔记
第二十八集开始了CSS的教学，并对CSS的基础语法进行了教学
CSS基础语法
格式:
选择器{属性1:值1;属性2:值2}
单位:
px --> 像素(pixel)、% --> 百分比
基本样式:
width(宽)、height(高)、background_color(背景颜色)
CSS注释:
注释符号:/* */，也有跟html一样的注释快捷键
九、第二十九集笔记
第二十九集对内联样式与内部样式进行了介绍和教学
内联(行内、行间)样式
再html标签上添加style属性来实现
写法:
<body>
<div style="width:100px;height:100px;background-color:red">这是一个块</div>
</body>
用法:
对一个标签的内容添加样式
内部样式
在<style>标签内添加的样式
注意：内部样式的优点是可以复用代码
<style>标签需要嵌套在<head>标签里
写法:
<head>
<style>
div{width:100px;height:100px;background-color:red}
</style>
</head>
<body>
<div>这是一个块</div>
</body>
用法:
将相同标签的样式统一化，而且更加符合W3C的规范标准，让结构和样式分开处理
两者的显示效果都一样:
十、第三十集笔记
第三十集对外部样式进行了介绍与教学
外部样式
外部样式的引入有两种方式，一种是link标签，另外是@import方法
link标签
link标签用于引入外部样式资源，rel属性用来指定资源跟页面的关系，href属性用来表示资源的地址(写于head标签中)
写法:
<head>
<link rel='对应属性' href='样式地址'>
</head>
@import
写法:
<style>
@import url('样式地址');
</style>
由于这种方式有很多问题，不建议使用
关于更多link与@import的区别请查看《link与@import的区别》
十一、第三十一集笔记
第三十一集对CSS中颜色表示法进行了介绍和教学
CSS中的颜色表示法
CSS中的颜色表示法分三种:单词表示法、十六进制表示法、RGB三原色表示法
单词表示法
单词表示法就是通过一些颜色的英语单词来表示颜色对饮单词表示法请关注CSS颜色
十六进制表示法
十六进制表示法就是通过#加上一些十六进制数来表示颜色
相应表示方法:
RGB三原色表示法
写法:
rgb(x,y,z);
0<=x,y,z<=255
十二、第三十二集笔记
第三十二集对CSS背景样式进行了介绍与教学
CSS背景样式
background-color:背景颜色
background-image:背景图片
写法:
background-image:url(图片地址)
background-repeat:背景图片的平铺方式
写法:
background-repeat:repeat-x(x轴平铺)/repeat-y(y轴平铺)/no-repeat(都不平铺)
如果没有设置background-repeat,则默认用图片将区块填满
background-position:背景图片的位置
写法:
backgro-positi:x像素 y像素;/(left/center/right) (top/center/bottom);/x% y%;
注意:x值与y值间要有空格
background-attachment:背景图随滚动条的移动方式
写法:
 background-attachment:scroll(背景位置按照当前元素进行偏移,也就是固定在一个块内，随着滚动条的移动而移动)/fixed(背景位置是按照浏览器进行偏移,也就是固定在一个位置，在一个区块内，不随着滚动条的移动而移动，当浏览器滚动条将背景图片所在位置慢慢滑过以后，背景图片就会逐渐消失)
十三、第三十三集笔记
第三十三集根据上一集的教学内容，进行了一个练习
十四、第三十四集笔记
第三十四集对CSS边框样式进行了介绍与教学
CSS边框样式
border-style:边框的样式
写法:
border-style:soild(实线);/dashed(虚线);/dotted(点线);，也能通过border-right/top/left/bottom-style分别编辑右/上/左/下的边框样式，同理，下列的边框样式也可
border-width:边框的大小(粗细)
写法:
border-width:像素
border-color:边框的颜色
写法:
border-color:颜色单词/十六进制/RGB;
十五、第三十五集笔记
第三十五集对上一集所教学内容进行了一个小练习，用边框的特性创造一个三角形并且介绍了透明色单词
边框衔接特性
两个方向的边框之间的衔接处是通过一条斜线将重合所形成的正方形分成两半然后一个边框占一半，利用这个特性，可以通过把区块的width和height的像素调成0，使得边框变成由四个三角形拼接而成的一个正方形，然后任选一个方向显色，其他三个方向改为透明色
透明色
透明色可以将浏览器背景色显示出来
透明色单词:transparent
十六、第三十六集笔记
第三十六集对CSS文本样式进行了介绍和教学
CSS文字样式
font-famil:‘字体类型’
格式:font-famil:‘字体类型’
英文字体:Arial,‘Times New Roman’
中文字体:微软雅黑,宋体
中文字体的英文名称
微软雅黑:‘Microsoft YaHei’
宋体:SimSun
通常会多设置几种字体类型，目的是为了使页面能达到想要的效果，前提是用户设备得有这种字体
注意:如果字体类型当中出现空格就需要加引号
衬线体与非衬线体
衬线体:
非衬线体:
十七、第三十七集笔记
第三十七集继续对CSS文本样式进行教学
font-size:字体大小
格式:font-size:字体大小(默认为16px)
属性取值:
xx-small–>最大
x-small–>较小
small–>小
medium–>正常(默认值)
large–>大
x-large–>较大
xx-large–>最大
font-weight:字体粗细
格式:font-weight:字体粗细
模式:normal(正常) bold(加粗)或者100-500(正常) 600-900(加粗)
font-style:字体样式
格式:font-style:字体样式
模式:normal(正常) italic(斜体)/oblique(斜体)
italic与oblique的区别:italic所有带有斜体属性的字体可以设置，oblique没有倾斜属性的字体也可以设置
color:字体颜色
格式:color:字体颜色
十八、第三十八集笔记
第三十八集对CSS段落样式进行了介绍和教学
CSS段落样式
text-decoration:文本装饰
效果:下划线(underline)，删除线(line-through)，上划线(overline)和不添加任何装饰(none)
通过空格隔开多个效果属性可以将一段文字同时显示出多个装饰效果
text-transform:文本大小写(针对英文段落)
text-transform:lowercase–>全部小写
text-transform:uppercase–>全部大写
text-transform:capitalize–>首字母大写
十九、第三十九集笔记
第三十九集继续对CSS段落样式进行教学
CSS段落样式
text-indent:文本缩进
em单位:1em永远等于一个字体大小
首行空两格:text-indent:2em
text-align:文本对齐方式
对齐方式:左对齐(left)，右对齐(right)，居中对齐(center)，两端点对齐(justify)
二十、第四十集笔记
第四十集继续对CSS段落样式进行教学
CSS段落样式
line-height:定义行高
行高示意图:
行高即一行文字的高度，而上边距和下边距是等价关系，默认行高不是固定值，是由当前字体大小决定的
格式;line-height:像素/比例值(1,2,3…)
二十一、第四十一集笔记
第四十一集继续对CSS段落样式进行教学
CSS段落样式
letter-spacing:定义字间距
格式:letter-spacing:像素
word-spacing:定义词间距(针对英文)
格式:word-spacing:像素
强制折行(针对英文):
由于英文和数字在有限的区域内的长度可能会过长导致溢出区域，影响体验，所以需要强制折行
word-break:break-all;(非常强烈的折行)
word-wrap:break-word;(不是那么强烈的折行，会产生空白区域)
溢出示例:
代码:
<!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>
div{width: 300px;height: 300px;border:5px solid;border-color: red;}
</style>
</head>
<body>
<div>
12 123123123123123123123123123123123123123123123123123 45648741351 648974313
554687641356546 4654684313364684 36546143 216465431
</div>
</body>
</html>
运行效果:
使用word-break:break-all;的示例:
代码:
<!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>
div{width: 300px;height: 300px;border:5px solid;border-color: red;word-break:break-all;}
</style>
</head>
<body>
<div>
12 123123123123123123123123123123123123123123123123123 45648741351 648974313
554687641356546 4654684313364684 36546143 216465431
</div>
</body>
</html>
运行效果:
使用word-wrap:break-word;的示例:
代码:
<!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>
div{width: 300px;height: 300px;border:5px solid;border-color: red;word-wrap:break-word;}
</style>
</head>
<body>
<div>
12 123123123123123123123123123123123123123123123123123 45648741351 648974313
554687641356546 4654684313364684 36546143 216465431
</div>
</body>
</html>
运行效果:
以上示例将数字改为字母是同样的效果
二十二、第四十二集笔记
第四十二集对CSS段落样式的知识进行了一个案例训练
二十三、第四十三集笔记
第四十三集对CSS复合样式进行了介绍和教学
一个CSS属性只控制一种样式，叫做单一样式
一个CSS属性控制多种样式，叫做复合样式
CSS复合样式
复合的写法是通过空格的方式实现的
复合写法有些无需关心顺序，例如background、border;有的需要关心顺，例如font
font复合写法:
最少要有两个值size、family并且要保证这个顺序(先写大小，再写字体)而style和weight无需关心顺序，既可以写在xize前，也可以写在family后，但是两者必须绑在一块写
注意:尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式
十四、第四十四集笔记
第四十四集对ID选择器进行了介绍和教学
ID选择器
CSS:#ID值{}
html:id=“ID值”
ID值必须是唯一的，ID值由字母、下划线"_“、中划线”-"、 数字组成且ID值不能以数字开头，为了ID值的规范性，ID值要使用对应用法的英文单词具体命名规范请看CSS命名规则规范整理
十五、第四十五集笔记
第四十五集对CLASS选择器进行了介绍和教学
CLASS选择器
CSS:.class值{}
html:class = “class值”
CLASS选择器可以复用(CLASS值不唯一)，可以添加多个CLASS样式，多个样式的时候，样式优先级根据CSS决定而不是根据CLASS属性中的顺序
对于CLASS选择器可以复用的特性，当设置了两个不同CLASS值的选择器，想让其中一个标签带有这两个选择器的效果时，可以通过给这个标签的CLASS属性写上这两个属性值，中间用空格隔开
例如:
<head>
<style>
.box{ background:red;}
.content{font-size:30px;}
</style>
</head>
<body>
<div class="box content">这是一个块</div>
</body>
运行效果:
对于多个选择器中有重复的样式时，会根据选择器的先后位置来决定显示哪个选择器中的重复样式
对于不同标签的相同CLASS值，设置选择器的时候需要使用标签.CLASS值{}的写法来对想显示样式的标签进行选择
扫一扫
1183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
