C1小笔记【任务训练篇二】

懒回顾，半缘君

已于 2022-04-23 18:00:18 修改

阅读量167

点赞数

分类专栏：前端文章标签： c1认证

于 2022-04-23 14:51:48 首次发布

原文链接：https://tasking.csdn.net/study?guid=815eb3f2379011ecb83400163e17b59d

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

表单标签

二、任务背景

HTML表单用于收集用户输入。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。

三、任务内容

1、`<form></form>`标签

用于创建HTML表单，常用属性如下：

action：规定表单提时，表单数据提交的URL
method：规定用于发送form-data的HTTP方法，常用属性值为get、post

2、`<input />`元素

<input />元素是最重要的表单元素，根据input元素的不同type类型，表现形式也是不一样的

类型	描述
`text`	普通文本框，一般默认20个字符宽度
`textarea`	多行文本框
`button`	普通按钮
`radio`	单选框
`checkbox`	多选框
`reset`	表单重置按钮
`submit`	表单提交按钮
`password`	密码输入框，密码字段使用圆点或星号代替

3、`<label></label>`标签

用于为input标签提供标注

点击label文本，浏览器会自动将焦点转到和标签相关的表单控件上

label标签的for属性值应当与相关元素的id属性值相同

4、`<select></select>`标签

用于创建下拉列表

select元素中的<option></option>标签用于定义列表的可选项

<select>
	<option value=" trainee">C1见习工程师能力认证</option>
	<option value="web ">C4前端基础能力认证</option>
	<option value=" java">C4Java基础能力认证</option>
	<option value=" python">C4Python基础能力认证</option>
</select>

5、`<button></button>`元素

用于定义普通按钮

转义字符

二、任务背景

在HTML中，<、>、&（<、>用于区分标签，&用于转义）等特殊字符由于有特殊含义，在页面上可能无法正常显示，就需要在HTML文档中使用特殊转义字符来表示。

三、任务内容

转义字符也可称为字符实体，对于同一个特殊字符，可以使用【实体名称】或者【实体编号】表示

显示	实体名称	实体编号	说明
空格	` `	` `	半角不换行的空格，相当于按下键盘space键产生的空格，受字体影响，不同字体表现一致
空格	`&ensp;`	` `	半角空格，占1/2个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
空格	`&emsp;`	` `	全角空格，占1个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
<	`<`	`<`	小于号
>	`>`	`>`	大于号
&	`&`	`&`	&符号
"	`"`	`"`	双引号
'	------	`'`	单引号
©	`©`	`©`	版权符号
™	`™`	`™` 或 ``	商标符号
®	`®`	`®`	注册商标符号
$	------	`$`	美元符号
¥	`¥`	`¥`	人民币符号
×	`×`	`×`	乘号
÷	`÷`	`÷`	除号

Head头

二、任务背景

标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

三、任务内容

head标签中一般可以包含以下标签：<title>、<style>、<script>、<link>、<meta>、<base>

1、`<title></title>`

用于定义文档的标题

该标题会出现在浏览器窗口的标题栏或状态栏上

把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称

例：<title>CSDN能力认证中心</title>

2、`<link />`

用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标

<link />是空元素，仅包含属性，只能存在于head部分

属性	属性值	描述
`href`	`URL`	设置目标链接的文件路径
`rel`	`stylesheet、icon、sidebar、prev`等	规定当前文档与链接文档之间的关系
`type`	`MIME_type`	目标连接文档的MIME类型

3、`<style></style>`

用于给文档引入CSS样式信息，将样式表包含在style开始与结束标签之间

4、`<script></script>`

用于给页面添加脚本

可以直接在script开始和结束标签之间包含JavaScript脚本)

也可以通过script的src属性链接外部脚本文件

5、`<meta />`

提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词

name和content属性通常一起使用，以键值对的方式给文档提供元数据，其中name的属性值作为元数据的名称，content作为元数据的值

keywords和description这两个名称使用频率最高，是搜索引擎优化的主要方式之一

名称	值		描述
keywords	关键字		描述网页关键字，使用逗号分隔
description	描述内容		网站主要内容的简短描述
author	作者		描述网站作者
viewport	width	viewport视口宽度，设置为device-width表示为设备的宽度	定义viewport的初始大小，仅用于移动设备
	height	viewport视口高度
	maximum-scale	最大缩放比例
	initial-scale	初始缩放比例
	minimum-scale	最小缩放比例
	user-scalable	是否允许用户缩放

charset属性用于指定文档的字符编码。常用值为UTF-8、ISO-8859-1等

http-equiv属性可用于模拟一个HTTP响应头，与content属性搭配使用，常用属性值如下：

content-type：规定文档的字符编码，等同于charset属性设置字符编码
default-style：设置默认CSS样式表组的名称
refresh：设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）

6、`<base />`

用于为页面中的所有相对链接设置默认URL或默认target属性

CSS引入方式

二、任务背景

CSS（层叠样式表）定义了HTML元素在页面中的样式、布局以及整个页面的布局。CSS遵循W3C规范，实现了跨浏览器的标准化。

三、任务内容

1、行内样式

直接使用HTML元素的style属性引入CSS样式

例：<p style=＂font-size: 16px; color: #333;＂>软件工程师能力认证</p>

2、内嵌样式

使用<style></style>标签引入样式

<style>
	p {
		color: #333;
		font-size: 16px;
	}
</style>

3、外部样式

3.1 链接样式（最常用）

在<head></head>标签中，使用<link />标签链接外部的CSS文件

link标签的href属性设置为目标链接的CSS文件路径，rel属性设置为stylesheet表示链接样式表，type属性设置为text/css

例：<link rel="stylesheet" href="style.css" type="text/css" />

3.2 导入样式

使用@import url()引入CSS文件

在CSS文件中直接使用@import url()
在HTML文件中需要在<style></style>标签中使用@import url()

在HTML初始化时，@import url()导入的CSS会被直接导入到HTML或CSS文件中，成为文件的一部分

// 在HTML文件中导入
<style>
	@import url(style.css);
</style>
// 在CSS文件中导入
@import url(style.css);

CSS背景属性

二、任务背景

在前端开发过程中，为了页面的美观，往往都会给HTML元素添加背景，使用CSS（层叠样式表）背景属性能够在页面美化的同时，实现页面的表现与内容分离。

三、任务内容

属性	属性值	说明
`background-color`	颜色值，如`rgb`，`rgba`，`十六进制`表示等，设置为`transparent`表示背景透明	设置背景颜色
`background-image`	`url( filepath )` 或 `none`	设置背景图像
`background-size`	`宽高`、`百分比宽高`、`contain`、`cover`	设置背景图片尺寸
`background-repeat`	`repeat`/ `repeat-x`/ `repeat-y`	设置背景图片重复方式
`background-position`	`top left`/ `top center`/ `center`等	设置背景图片的位置

1、background-size属性

1.1 contain

保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示
有可能出现图片无法完全覆盖背景区域

1.2 cover

保持图片纵横比不变，最大程度覆盖背景区域
有可能导致背景图片部分区域无法显示

2、background-repeat

2.1、repeat（默认）

允许水平和垂直方向重复（平铺）背景图片

2.2、repeat-x

只允许水平方向重复（平铺）背景图片

2.3、repeat-y

只允许垂直方向重复（平铺）背景图片

3、background

简写属性可以在一个属性声明中设置一个或多个背景属性，常用的属性设置如上表

background: #ff0000 url('smiley.gif') no-repeat cover;

CSS文本属性

二、任务背景

通过CSS文本属性可以给文本设置颜色、字号、行间距、对齐、段落缩进等样式，将页面的正文与标题区分开，同时能够丰富整个页面布局。

三、任务内容

1、color属性

用于设置文本的颜色，可设置的值有：

颜色名，如【red】
十六进制值，如【#FFFFFF】
RGB值，如【rgb(255, 0, 0)】
rgba值，如【rgba(255, 0, 0, 0.9)】

2、font-size属性

用于设置文本字体大小，可以设置为绝对大小，单位为px，也可设置为相对大小，单位为rem、em等

字体大小未设置时默认字体大小为16px

3、font-weight属性

用于设置文本的粗细，可设置的值有：

属性值	说明
`normal`	标准字符（默认）
`bold`	粗体字符
`bolder`	更粗的字符
`lighter`	更细的字符
`100、200、300、400、500、` `600、700、800、900`	`400`相当于`normal` `700`相当于`bold` 数值越大字体越粗

4、font-family属性

用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。如果浏览器不支持第一个字体，则会尝试下一个，以此类推

font-family："Times New Roman", "Georgia", "Serif";

5、text-align属性

用于设置文本的水平对齐方式，可设置的值有：

center（居中对齐）
left（左对齐）
right（右对齐）

文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐

6 line-height属性

用于设置行间距，可设置的值如下

数字：行间距为当前字体大小乘此数字
固定值：设置固定的行间距，如20px
百分比：行间距为当前字体大小乘百分比

7、text-indent属性

用于指定首行缩进值，可设置的值如下

固定值：设置固定首行缩进，如20px
百分比：首行缩进值为父元素宽度乘此百分比

8、letter-spacing属性

用于设置字间距，设置固定值为字间距，如10px

9、word-spacing属性

用于指定文本中单词之间的间距，设置固定值为单词间距，如10px

10、text-decoration

用于设置文本的装饰线，是下表属性的简写

属性	属性值		描述
text-decoration-line	none	无线条	设置要使用哪种文本装饰的类型（下划线、上划线、删除线）。
	underline	下划线
	overline	上划线
	line-through	删除线
text-decoration-color	颜色名、十六进制颜色、rgb等		设置装饰线颜色
text-decoration-style	solid	实线	设置装饰线的样式
	double	双实线
	dotted	点划线
	dashed	虚线
	wavy	波浪线

例：

text-decoration: underline wavy red;  /* 表示为红色波浪形下划线 */

11、text-transform

用于设置文本大小写字母，常用属性如下

uppercase：全部文本均为大写字母
lowercase：全部文本均为小写字母
capitalize：文本的每个单词首字母为大写字母

12、writing-mode

设置文本在水平或垂直方向的排布方式

horizontal-tb：文本流在水平方向从上到下排列，文字方向为水平方向

sideways-lr：文本流在垂直方向，从下至上、从左至右排列（该属性值不兼容webkit内核浏览器）

sideways-rl：文本流在垂直方向，从上至下、从右至左排列（该属性值不兼容webkit内核浏览器）

vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向

vertical-rl：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致

13、white-space

用于设置文本的空白符处理方式，属性值如下

属性值	描述
normal	合并空格，换行符转化为一个空格，允许自动换行
nowrap	合并空格，换行符转化为一个空格，不允许自动换行
pre	保留空格，保留换行符，不允许自动换行
pre-line	合并空格，保留换行符，允许自动换行
pre-wrap	保留空格，保留换行符，允许自动换行
break-spaces	保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间

基础选择器

二、任务背景

CSS（层叠样式表）选择器是CSS规则的一部分，用来指定需要设置样式的HTML元素。通过选择器可以实现CSS对HTML元素的一对一、一对多、多对一的控制。

三、任务内容

选择器类型	描述	示例
通配选择器	通配选择器使用一个星号``表示，``会匹配所有元素	`* {` `color: red;` `}`
标签选择器	通过标签名匹配，匹配文档中所有为此标签名的元素	`p {` `color: red;` `}`
id选择器	通过井号`#`来定义id选择器，根据元素的`id`属性匹配（精确匹配）元素	`#box {` `width: 300px;` `}`
类选择器	通过点`.`来定义类选择器，根据元素的`class`属性匹配（精确匹配）元素	`.container {` `height: 100px;` `}`
组合选择器	包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器	`#box>.nav p {` `color: blue;` `}`

1、通配选择器

可以与其他选择器相结合，选择某元素下的所有元素

/*选择类名为box的元素的所有后代，添加一个黑色的字体颜色*/
.box * { color: #000; }

由于每个浏览器对元素的默认边距不一致，通配选择器常用于reset样式文件中，覆盖浏览器的默认样式

* {
	margin: 0;
	padding: 0;
	border: 0;
}

2、标签选择器

标签选择器也常用于reset样式文件中，用于清除元素的默认样式，如li标签的小圆点、a标签的下划线等

3、id选择器

id属性的属性值应当是当前文档唯一

4、类选择器

class属性值在文档中可以重复

5、组合选择器

通过间隔符将基础选择器连接起来，实现组合选择的效果

选择器	间隔符	描述
后代选择器	空格	选取该元素的后代元素
子代选择器	`>` 大于号	选择该元素的第一级子元素
相邻选择器	`+` 加号	选择该元素之后相邻第一个元素，且两者具有相同的父元素
兄弟选择器	`~` 波浪号	选择该元素之后的同层级元素

例：有以下代码，选择所有类名为title的元素后的第一个<p>元素，将其字体颜色改为红色，如下图所示，可使用相邻选择器选择元素设置样式

// 示例代码
<style>
    .title + p {
        color: red;
    }
</style>
<body>
    <p class="title">CSDN能力认证中心</p>
    <p>C1见习能力认证</p>
    <span>C4专项能力认证</span>
    <p>C5全栈能力认证</p>
</body>

伪类选择器

二、任务背景

将伪类与选择器相结合，可以指定选择元素的特殊状态，也可以根据元素的所处的状态应用不同的样式，掌握伪类选择器可以帮助我们实现更加丰富的样式。

三、任务内容

1、常用的伪类

伪类	描述
`:hover`	用于设置鼠标悬停在元素上方时的样式
`:focus`	用于设置元素获得焦点时的样式
`:active`	用于设置元素被激活时（按下按键时、松开按键时）的样式
`:link`	用于设置元素点击之前的样式（仅可用于`a`标签）
`:visited`	用于设置被访问的元素的样式（仅可用于`a`标签）
`:first-child`	用于选取属于其父元素的第一个子元素，且满足冒号前的基础选择器选取要求
`:first-of-type`	用于选取属于其父元素的第一个特定类型的子元素
`:last-child`	用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求
`:last-of-type`	用于选取属于其父元素的最后一个特定类型的子元素
`:nth-child(N)`	选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字`（odd / even）`、公式（如：2n+1）
`:nth-of-type(N)`	选择匹配属于其父元素的第N个指定类型的子元素，N可以为数字、关键字`（odd / even）`、公式
`:nth-last-child(N)`	选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，从最后一个子元素开始计数，N可以为数字、关键字`（odd / even）`、公式
`:nth-last-of-type(N)`	选择匹配属于其父元素的第N个指定类型的子元素，从最后一个子元素开始计数，N可以为数字、关键字`（odd / even）`、公式

2、例：有以下代码，判断最终的样式效果

<style>
	p:first-child {
		color: red;
	}
</style>
<div>
	<span>CSDN能力认证中心</span>
	<p>C1见习能力认证</p>
	<p>C4专项能力认证</p>
	<p>C5全栈能力认证</p>
</div>

你是否认为最终效果是C1见习能力认证字体为红色？实际上所有内容字体都不会变红色

对于选择器p:first-child，需要同时满足两个要求：

该元素为p元素
该元素为该元素父级元素的第一个子元素

对于first-child、last-child、nth-child(n)、nth-last-child都存在此类情况，注意区分

懒回顾，半缘君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
C1小笔记【任务训练篇二】

表单标签二、任务背景HTML表单用于收集用户输入。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。三、任务内容1、<form></form>标签用于创建HTML表单，常用属性如下： action：规定表单提时，表单数据提交的URL method：规定用于发送form-data的HTTP方法，常用属性值为get、post 2、<input />元素<input />元素是最重要的表单..
复制链接

扫一扫

专栏目录

显示	实体名称	实体编号	说明
空格	` `	` `	半角不换行的空格，相当于按下键盘space键产生的空格，受字体影响，不同字体表现一致
空格	`&ensp;`	` `	半角空格，占1/2个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
空格	`&emsp;`	` `	全角空格，占1个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
<	`<`	`<`	小于号
>	`>`	`>`	大于号
&	`&`	`&`	&符号
"	`"`	`"`	双引号
'	------	`'`	单引号
©	`©`	`©`	版权符号
™	`™`	`™` 或 ``	商标符号
®	`®`	`®`	注册商标符号
$	------	`$`	美元符号
¥	`¥`	`¥`	人民币符号
×	`×`	`×`	乘号
÷	`÷`	`÷`	除号

显示	实体名称	实体编号	说明
空格	` `	` `	半角不换行的空格，相当于按下键盘space键产生的空格，受字体影响，不同字体表现一致
空格	`&ensp;`	` `	半角空格，占1/2个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
空格	`&emsp;`	` `	全角空格，占1个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
<	`<`	`<`	小于号
>	`>`	`>`	大于号
&	`&`	`&`	&符号
"	`"`	`"`	双引号
'	------	`'`	单引号
©	`©`	`©`	版权符号
™	`™`	`™` 或 ``	商标符号
®	`®`	`®`	注册商标符号
$	------	`$`	美元符号
¥	`¥`	`¥`	人民币符号
×	`×`	`×`	乘号
÷	`÷`	`÷`	除号

C1小笔记【任务训练篇二】

表单标签

二、任务背景

三、任务内容

1、<form></form>标签

2、<input />元素

3、<label></label>标签

4、<select></select>标签

5、<button></button>元素

转义字符

二、任务背景

三、任务内容

Head头

二、任务背景

三、任务内容

1、<title></title>

2、<link />

3、<style></style>

4、<script></script>

5、<meta />

6、<base />

CSS引入方式

二、任务背景

三、任务内容

1、行内样式

2、内嵌样式

3、外部样式

CSS背景属性

二、任务背景

三、任务内容

1、background-size属性

2、background-repeat

3、background

CSS文本属性

二、任务背景

三、任务内容

1、color属性

2、font-size属性

3、font-weight属性

4、font-family属性

5、text-align属性

6 line-height属性

7、text-indent属性

8、letter-spacing属性

9、word-spacing属性

10、text-decoration

11、text-transform

12、writing-mode

13、white-space

基础选择器

二、任务背景

三、任务内容

1、通配选择器

2、标签选择器

3、id选择器

4、类选择器

5、组合选择器

伪类选择器

二、任务背景

三、任务内容

1、常用的伪类

2、例：有以下代码，判断最终的样式效果

“相关推荐”对你有帮助么？

1、`<form></form>`标签

2、`<input />`元素

3、`<label></label>`标签

4、`<select></select>`标签

5、`<button></button>`元素

1、`<title></title>`

2、`<link />`

3、`<style></style>`

4、`<script></script>`

5、`<meta />`

6、`<base />`

显示	实体名称	实体编号	说明
空格	` `	` `	半角不换行的空格，相当于按下键盘space键产生的空格，受字体影响，不同字体表现一致
空格	`&ensp;`	` `	半角空格，占1/2个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
空格	`&emsp;`	` `	全角空格，占1个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
<	`<`	`<`	小于号
>	`>`	`>`	大于号
&	`&`	`&`	&符号
"	`"`	`"`	双引号
'	------	`'`	单引号
©	`©`	`©`	版权符号
™	`™`	`™` 或 ``	商标符号
®	`®`	`®`	注册商标符号
$	------	`$`	美元符号
¥	`¥`	`¥`	人民币符号
×	`×`	`×`	乘号
÷	`÷`	`÷`	除号