一、 前 序 \color{pink}{前序} 前序
1.需要掌握的几个PS技能:
1)放大、缩小图片:Alt + 鼠标滚轮操作
2)移动图片:空格 + 鼠标左键
3)量图:矩形框选工具 【用于查看选中区域的像素值】
如果框选区域的标尺单位不是像素,可以通过找到首选项 -> 单位和标尺 ->将单位更换为像素
4)颜色吸取:吸管工具 【通过吸管工具可查看颜色的属性值】
5)标尺线的使用:视图->标尺 【进而使用参考线】
2.一个页面的标准组成:
Html CSS JavaScript —— 页面的结构、表现和行为
3.一些标签的含义:
<!DOCTYPE html> 【Html5的文档声明】
<html> 与 </html> 开始标签与结束标签(根元素)
*********************
<head> 与 </head> 页面的头部 【可以存放一些页面描述、作者信息等】
<meta charset = "UTF-8"> 页面的编码方式,此处选择的是支持中文的万国码
<tittle> 标题</tittle> 代表的是页面的标题
*********************
<body> 与 </body> 页面的主体
3.标签分为两种形式:封闭类型标签和非封闭类型标签(空标签)。【标签也可成为元素、标记】
4.对于一个元素可能存在多个属性,彼此之间用空格分开
二、 知 识 块 \color{blue}{知识块} 知识块
1.
标
题
\color{green}{标题}
标题
HTML 标题(Heading)是通过<h1> - <h6>
标签定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题<h2>
<h3>这是一个标题<h3>
注意:(1)标题标签不可用于加粗字体。
(2)一级标题对应6号字体,六级标题对应1号字体。(一次类推)
(3)<hr>
标签用于定义一条水平线
(4)<! -- ... -->
标签用于定义注释内容
2.
段
落
\color{green}{段落}
段落
HTML 段落是通过标签<p>
来到定义的。
<p> 这是一个段落 </p>
<p>这是另一个段落</p>
注意:(1)利用<br>
标签可以完成在一个段落内换行。
<p>这是<br />
一个换行<br />
演示段落</p>
(2)在HTML中所有连续的空格和空行都会被编译为一个空格。
3.
链
接
\color{green}{链接}
链接
HTML 链接是通过标签<a>
来定义的。
<a href = "https://www.bonbons.top"> 这是一个个人网站</a>
(1)这个标签中的 href 是它的一个属性,href 的属性值可以为任何有效文档的相对或绝对URL。
(2)target 属性规定在何处打开链接文档
_blank 在新窗口中打开被访问的链接文档
_self 默认,在相同的框架中打开被链接的文档
_parent 在父框架中打开被链接的文档
_top 在整个窗口中打开被链接的文档
framename 在指定的框架中打开被链接的文档
(3)id属性,可以在代码中起到标记作用,相对于读者是隐藏的。
注意:当单独使用 target = "_blank"时是不安全,要添加上 rel = “noopener noreferrer”.
4.
图
像
\color{green}{图像}
图像
HTML 图像是通过标签<img>
来定义的。
<img loading = "lazy" src = "/images/logo.png" width = "258" heigh = "39" />
loading 属性代表图片加载方式:
"lazy"属性值代表延迟加载图片,只有当鼠标移动到图片上才会加载;
“eager” 属性值代表立即加载。
src 属性用于替换当前元素,此处后面的链接相当于图片的地址。
width 和 heigh 属性分别代表图片的宽度和高度。(属性值也为字符串的形式)
5.
空
元
素
\color{green}{空元素}
空元素
(1)没有内容的HTML元素成为空元素。
(2)例如换行标签<br>
就是没有关闭标签的空元素,在开始标签的末尾添加反斜杠来关闭标签。
例如:<br />
(3)HTML 标签对于大小写问题不敏感,但是最好还是用小写。
6.
属
性
\color{green}{属性}
属性
(1)对于大多的HTML标签都可以设置属性
(2)属性用于描述开始标签,为元素添加一些附加信息
(3)属性值应该包含在引号内,双引号比较常用,单引号也可以使用;针对于某些特殊情况只能使用双引号。
7.
文
本
格
式
化
\color{green}{文本格式化}
文本格式化
(1)HTML 使用标签<b> <i>
对输出文本进行加粗、倾斜。
(2)这些标签也称为格式化标签。
(3)通常用<strong>
标签代替加粗标签<b>
(4)通常用<em>
标签代替倾斜标签 <i>
(5)文本格式化标签
<b>
定义粗体文字<strong>
定义加重语气
<i>
定义斜体字<em>
定义着重字体
<small>
定义小号字
<sub>
定义下标字<sup>
定义上标字
<ins>
定义插入字<del>
定义删除字
语法格式:开始标签 待格式化文本 结束标签
(6)计算机输出标签
<code>
定义计算机代码
<kbd>
定义键盘码
<samp>
定义计算机代码样本
<var>
定义变量
<pre>
定义预格式文本
(7)引文,引用,及标签定义
<abbr>
定义缩写<address>
定义地址
<bdo>
定义文字方向
<q>
定义短的引用<blockquote>
定义长的引用
<cite>
定义引用、引证
<dfn>
定义一个定义项目