C1认证学习笔记（第二章）

C1认证（二）——web基础：

• • 语义化标签：
  • • • 任务目标：
      • 任务背景：
      • 常见的语义化标签：
      • 任务练习：
  • 表单标签：
  • • • 任务目标：
      • 任务背景：
      • • • form标签：
          • input 元素:
          • label标签：
          • select标签：
          • button元素：
      • 任务练习：
  • 转义字符：
  • • • 任务目标：
      • 任务背景：
      • 转义字符实体：
      • 任务练习：
  • Head头：
  • • • 任务目标：
      • 任务背景：
      • head标签：
      • • • title标签：
          • link 标签：
          • style 标签：
          • script标签：
          • meta标签：
          • base 标签：
      • 任务练习：
  • CSS引入方式：
  • • • 任务目标：
      • 任务背景：
      • • • 行内样式：
          • 内嵌样式：
          • 外部样式：
      • 任务练习：
  • CSS背景属性:
  • • • 任务目标：
      • 任务背景：
      • background-size属性：
      • • • contain
          • cover
      • background-repeat：
      • • • repeat（默认）
          • repeat-x
          • repeat-y
      • background:
      • 任务练习：
  • CSS文本属性:
  • • • 任务目标：
      • 任务背景：
      • • • color属性
          • font-size属性
          • font-weight属性
          • font-family属性
          • text-align属性
          • line-height属性
          • letter-spacing属性
          • word-spacing属性
          • text-decoration
          • text-transform
          • writing-mode
          • white-space
      • 任务练习：
  • 基础选择器：
  • • • 任务目标
      • 任务背景
      • • • 通配选择器：
          • 标签选择器：
          • id选择器：
          • 类选择器：
          • 组合选择器：
      • 任务练习：
  • 伪类选择器：
  • • • 任务目标：
      • 任务背景：
      • 常用的伪类：
      • 任务练习：
  • 伪元素选择器：
  • • • 任务目标：
      • 任务背景：
      • 任务练习：
  • CSS优先级：
  • • • 任务目标：
      • 任务背景：
      • • • CSS优先级：
          • 选择器权重计算：
          • important规则：
      • 任务练习：
  • 块级元素与行内元素：
  • • • 任务目标：
      • 任务背景：
      • • • 块级元素：
          • 行内元素：
          • 行内块级元素：
      • 任务练习：
  • 块级元素与行内元素：
  • • • 任务目标：
      • 任务背景：
      • 什么是盒子模型：
      • 盒子模型的组成部分：
      • 标准盒模型与怪异盒模型的区别：
      • • • 标准盒模型：
          • 怪异盒模型：
      • 任务练习：
  • 定位：
  • • • 任务目标：
      • 任务背景：
      • 任务内容：
      • 什么是脱离文档流：
      • • • position定位：
          • static定位：
          • relative定位：
          • absolute定位：
          • fixed定位：
          • sticky定位（存在兼容性问题）
          • 层级属性z-index：
      • 任务练习：
  • 浮动：
  • • • 任务目标：
      • 任务背景：
      • • • float属性：
          • clear属性：
          • 浮动布局：
      • 任务练习：
  • 总结：

语义化标签：

任务目标：

掌握语义化标签的使用

任务背景：

HTML标签语义化，简单来说，就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，更利于开发者、程序和其他设备对于标签的理解。

语义化在盲人软件、机器翻译等方面发挥着重要作用，同时搜索引擎会通过语义化标签增强文章的SEO搜索。

常见的语义化标签：

任务练习：

①：现需要设置一个按钮，请填写语义化标签补全代码片段（仅填写一个标签名即可）

button元素：

用于定义普通按钮

任务练习：

①：现要实现提交表单时输入的不是3位数的数字时提示请输入三位数字，请补全下方代码片段

可以用在任何元素上，把鼠标移动到元素上面，就会显示title的内容，以达到补充说明或者提示的效果。

②：现表单内有个提交按钮，点击后自动提交表单请求，请补全代码片段

提交 、重置 reset

③：怎么用input标签创建一个表单重置按钮补齐这段代码

提交 submit、重置

④：怎么用input标签创建一个密码输入框补齐这段代码

⑤：现有以下HTML代码，需要在点击提交按钮时，将用户名和密码自动提交到，请补全代码片段

form表单中存在属性用户规定表单提时表单数据提交的URL，查看form元素对应的属性值即可得出答案

转义字符：

任务目标：

理解并掌握特殊转义字符

任务背景：

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

转义字符实体：

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

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

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

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

base 标签：

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

任务练习：

②：head中一般使用哪个标签引入外部的CSS样式表文件/p>

③：现有以下代码片段，要求实现定义SEO的关键字， 请补全代码片段

④：在移动端设备中想要定义视口宽度为屏幕宽度，请补全代码片段

⑤：需定义文档的字符编码为utf-8，请补全代码片段

CSS引入方式：

任务目标：

掌握CSS的引入方式

任务背景：

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

行内样式：

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

例：

内嵌样式：

使用标签引入样式

外部样式：

链接样式（最常用）：

在标签中，使用标签链接外部的CSS文件

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

例：

导入样式：

• 在CSS文件中直接使用
• 在HTML文件中需要在标签中使用

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

// 在HTML文件中导入