【前端学习笔记】

呦咻呦咻。

已于 2022-05-25 20:58:26 修改

阅读量642

点赞数

文章标签： html 前端

于 2022-05-20 19:28:53 首次发布

本文链接：https://blog.csdn.net/weixin_67659025/article/details/124831681

版权

第一天（PINK老师学习随笔记录）

第一节

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是指网站中的“一页“，通常是HTML格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常以.htm和.html后缀结尾的文件，因此将其俗称为HTML文件。

HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言。

HTML不是一种编程语言，而是一标记语言。标记语言是一套标记标签。

所谓超文本，就是

1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。

2.它还可以从一个文件跳转到另一个文件，与世界各地的主机的文件连接（超级链接文本）

第二节

Web标准的构成：主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构：结构用于对网页元素进行整理和分类，现阶段主要是HTML

表现：用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS

行为：指网页模型的定义以及交互的编写，现阶段主要是javascript.

结构，样式、行为相分离（三者中相比较言，结构最重要）

第三节

双标签关系可以分为两类：包含关系和并列关系

包含关系

<html>
<head> </head>
</html>

并列关系

<head> </head>
<body> </body>

每一个网页都有一个基础的结构标签（也称为骨架标签），页面内容也都在这些基础标签内写

标签名	定义	说明
<html></htmi>	HTML标签	页面中最大的标签，我们称之为“根”标签
<head></head>	文档的头部	注意在head标签中我们要设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本上都是放到body里的

JS-CSS-HTML Formatter 这个插件不要安装，非常不好用

插件安装完之后一定要重启

第四节

1.<!DOCTYPE>

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种html版本来显示网页

<!DOCTYPE html> 这句话的意思是当前采用html5版本来显示网页

<!DOCTYPE html>位于文档最前面的位置，在<html>标签之前，它不是HTML标签，是文档类型声明标签

2.lang语言种类

用来定义当前文档显示的语言

（1）en定义语言就是英语

（2）zh-CN定义语言就是中文

简单来说，定义为en就是英文网页定义为zh-CN就是中文网页定义为中英文对于显示没有什么影响

3.字符集

字符集（charset）是多个字符的集合。以便计算机能够识别和储存各种文字。

在<head>标签中，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种文字编码

<meta charset="UTF-8"/>

charset常用的值有GB2312(简体中文),BIG5(繁体中文),GBK（简体和繁体都包括）和UTF-8,其中UTF-8又称为万国码，基本包含了全世界所有国家需要用到的字符。

第五节

1.段落标签和换行标签

<h1>-<h6>标题标签重要性依次递减，一个标题占一行

<p></p> 段落标签语义就是可以吧HTML文档分成若干个段落 p为paragraph的缩写

段落标签的特点：（1）文本在一个段落中会根据浏览器窗口的大小进行自动换行（2）行与行之间有空隙

换行标签 <br /> break的缩写语义就是强制换行

特点：（1）<br />是一个单标签（2）<br />只是简单的开始新的一行，跟段落不一样，段落之间有间距。

2.文本格式化标签(对文本做出特殊的效果)

语义	标签	说明
加粗	<strong></strong>或<b></b>	更推荐<strong></strong>标签加粗语义更强烈
倾斜	<em></em>或<i></i>	更推荐<em></em>标签倾斜语义更强烈
删除线	<del></del>或<s></s>	更推荐<del></del>标签删除语义更强烈
下划线	<ins></ins>或<u></u>	更推荐<ins></ins>标签下划语义更强烈

3.div标签和span标签

div和span是没有语义的，它们就是一个盒子，用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

div为division的缩写，表示分割分区。span意为跨度，跨距。

特点

<div>标签用来布局，但是现在一行只能放一个<div>。大盒子

<span>标签用来布局，一行可以有多个<span>。小盒子

第六节图像标签和路径（重点）

1.图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像单词img 的缩写，意为图像

<img src="图像URL" />

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

所谓属性︰简单理解就是属于这个图像标签的特性。

图像标签的其他属性

属性	属性值	说明
src	图片路径	绝对属性
alt	文本	替换文本。图像不能显示时的文字
title	文本	提示文本。鼠标放到图像时，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

图像标签属性注意点︰

1.图像标签可以拥有多个属性，必须写在标签名的后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.属性采取键值对的格式，即 key= “value"的格式，属性=“属性值”。

2.路径（前期铺垫知识）

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们.

目录文件夹∶就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。

(2) vsCode打开目录文件夹:文件----打开文件夹．选择自录文件夹.后期非常方便管理文件.

2.1路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件( images )，这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为∶

1.绝对路径 2.相对路径

1.路径之相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

简单来说也就是图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级路径		图像位于HTML同一级如<img src="baidu.gif" />
下一级路径	./	图像位于HTML下一级如<img src="images/baidu.gif" />
上一级路径	../	图像位于HTML上一级如<img src="../baidu.gif" />

2.绝对路径∶是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。（较少使用）

3.超链接标签（重点）

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

3.1链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

a为anchor的缩写，意为锚

属性	作用
href	用于指定目标链接的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

（1）外部链接必须写http://网址才正确

（2）内部链接;网站内部页面之间的相互链接.直接链接内部页面名称即可，例如< a href= " index.html">首页</a>。

（3）空链接:如果当时没有确定链接目标时，< a href="#">首页</a >.

（4）下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件。
（5）网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

（6）锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.

a.在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
(必须是#开头）

b.找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 id="two">第2集介绍<h3>

4. 注释和特殊字符

4.1注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。HTML中的注释以“”结束。

快捷方式是按 ctrl+/

注释标签里面的内容是给程序猿看的,这个代码是不执行不显示到页面中的.
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

4.2特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

重点记住:空格、大于号、小于号这三个，其余的使用很少，如果需要回头查阅即可。

呦咻呦咻。

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记】

第一节网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是指网站中的“一页“，通常是HTML格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常以.htm和.html后缀结尾的文件，因此将其俗称为HTML文件。HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言。HTML不是一种编程语言，而是一标记语言。标记语
复制链接

扫一扫