【入坑前端第一天】—— 零散日记

Bow.贾斯汀

已于 2022-01-25 11:22:25 修改

阅读量458

点赞数 1

分类专栏： HTML与CSS 文章标签：前端 html css

于 2022-01-23 22:34:12 首次发布

本文链接：https://blog.csdn.net/qq_61323055/article/details/122648698

版权

HTML与CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、 $\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>

注意：（1）利用 标签可以完成在一个段落内换行。

<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）例如换行标签 就是没有关闭标签的空元素，在开始标签的末尾添加反斜杠来关闭标签。
例如： 
（3）HTML 标签对于大小写问题不敏感，但是最好还是用小写。
6. $\color{green}{属性}$
（1）对于大多的HTML标签都可以设置属性
（2）属性用于描述开始标签，为元素添加一些附加信息
（3）属性值应该包含在引号内，双引号比较常用，单引号也可以使用；针对于某些特殊情况只能使用双引号。
7. $\color{green}{文本格式化}$
（1）HTML 使用标签 对输出文本进行加粗、倾斜。
（2）这些标签也称为格式化标签。
（3）通常用标签代替加粗标签
（4）通常用标签代替倾斜标签 
（5）文本格式化标签