【1】前端学习笔记

⁢稚子

已于 2022-10-30 15:21:34 修改

阅读量285

点赞数

分类专栏： HTML 文章标签：前端学习 javascript

于 2022-10-30 15:11:41 首次发布

本文链接：https://blog.csdn.net/qq_45355603/article/details/127591208

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

教程学习：黑马前端

黑马前端的个人空间_哔哩哔哩_bilibili

基础班学习路线：主要学习PC端网站布局，最终网站：品优购静态网站

目的：精通网页布局，为后面学习JavaScript打下坚实基础

希望通过这个课程的学习，做出ESP32蓝牙/WIFI进行数据传输的微信小程序。

1.HTML5基础：学习HTML5基础，主要学习最常见的没有兼容性的HTML标签，课时20%

2.学习CSS3基础，主要学习最常用没有兼容性的CSS样式，利用前面学习的标签完成传统PC端网页布局，课时50%

主要学习HTML CSS JS基础知识

1.HTML简介

1.什么是网页？

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

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

网页是构成网站的基本元素

2.什么是HTML？

HTML：Hyper Text markup language 超文本标记语言，是用来描述网页的一种语言。

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

所谓超文本，有2层含义：

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

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

3.网页的形成？

网页由网页元素组成，这些元素利用HTML标签描述出来，然后通过浏览器解析来显示给用户。

2.常用浏览器

1.常用的浏览器：edge、谷歌浏览器

2.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

3.Web标准（重点）

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合，W3C(万维网联网)是国际最著名的标准化组织。

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

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript，主要用于交互界面的书写

Web标准提出的最佳体验方案：结构、样式、行为相分离

简单理解：结构写到HTML文件中，表现写在CSS文件中，行为写到JavaScript文件中。

3.HTML标签

3.1HTML语法规范

HTML标签是由尖括号包围的关键词

标签一般成对出现 <html></html>

双标签： <开始标签> </结束标签>

单标签： <br /> ，单标签比较少

标签关系：

双标签关系可以分为两类：包含关系(嵌套，父子关系)和并列关系

包含关系

<head>
    <title></title>
</head>

并列关系

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

3.2HTML基本结构标签

HTML页面也称为HTML文档

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

基本结构：

<html>
    <head>
        <title>
            我的第一个页面
        </title>
    </head>
    <body>
        身体部分
    </body>
</html>

3.3开发工具

在vscode中输入！即可自动生成HTML骨架

<!DOCTYPE html>     <!-- 文档类型声明标签，代表html5版本，必须为整个页面的第一行，声明标签-->
<html lang="zh-CN">    <!-- en代表英文网页，打开时浏览器会提示是否翻译网页，zh-CN代表中文网页，影响不大-->
<head>
    <meta charset="UTF-8">      <!-- 字符集格式，UTF-8最常用，避免网页出现乱码，这句话一定要写-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>采用vscode创建的第一个页面</title>
</head>
<body>
    夜深人静写代码
</body>
</html>

快捷键：

ctrl + +：增大字体

ctrl+N：新建文件

3.4 HTML常用标签

学习标签是有技巧的，重点是记住每个标签的语义。

标题标签、段落标签

（1）标题标签：HTML提供了6个等级的网页标题<h1>~<h6>

h为head的缩写，意为头部、标题，加租独占一行，1级标题最重要

<h1>我是一级标题</h>

（2）段落和换行标签（重要）

<p></p> 用于定义段落，它可以将整个网页分为若干个段落。

p：paragraph，意为段落

特点：

1.文本在一个段落中会根据浏览器窗口的大小自动换行。

2.段落和段落之间保有空隙。

<p>我是一个段落标签</p>

换行标签<br />

可以让文本强制换行显示，属于单标签。可以用于文本，段落，标题中

br：break的缩写，意为打断、换行。

特点：

1.<br />是单标签

2.<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距，换行没有间距。

（3）文本格式化标签在网页中，突出重要性，比普通文字更重要。

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

(4) <div>和<span>标签

<div>和<span>标签没有语义，他们就是一个盒子，用来装内容。常用！！！布局网页

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

div : division的缩写，表示分割、分区。

span意为跨度、跨距，横着显示

特点：

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

2.<span>标签用来布局，一行上可以多个<span>，小盒子

(5)图像标签和路径（重点）

1.图像标签：单标签

<img src="图像URL" />

img是image的缩写，意为图像。

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

必须把图片和网页文件放在一起。

图像标签的其他属性：各个属性没有先后顺序之分，各属性之间以空格进行分割。

属性	属性值	说明
src	图片路径	必须属性
alt	文本	图像不能正常显示时，显示的文字
title	文本	提示文本，鼠标放在图片上时，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

在实际开发中，宽度和高度修改一个即可，会进行等比例缩放，图像不会失真

<h4>alt 替换文本，图像显示不出来的时候用文字代替，相当于图片备注</h4>
<img src="logo.jpg" alt="logo信息"/>
<h4>title提示文本，鼠标放到图像上，提示的文字，相当于图片备注</h4>
<img src="logo.jpg" alt="logo信息" title="logo信息"/>
  <h4>设置图像的大小</h4>
    <img src="logo.jpg" alt="logo信息" title="logo信息" width="200" >

重点掌握：

1.请说出图像标签那个属性是必须要写的？

2.请说出图像标签中alt和title的属性区别？

路径（前期铺垫知识）

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

根目录：打开目录文件夹的第一层就是根目录（后面再打开的文件夹不叫根目录）

相对路径：

以引用文件所在位置为参考基础，而建立出的目录路径。例如，图片相对于HTML页面的位置，

又分为：同一级路径、上一级路径、下一级路径

相对路径分类	符号
同一级路径	直接进行引用
下一级路径	/
上一级路径	../

绝对路径：

指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例：C:\Users\Meng\Desktop\前端学习笔记\第一天\logo.jpg

在编程的时候，最好采用相对路径，因为每个人的电脑盘符是不一样的，把程序移到别人电脑上，可能运行出错。

（6）超链接标签（重点）

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

1.链接的语法格式

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

a是单词anchor的缩写，意为：锚。

属性	作用
href	用于指定链接目标的url地址，必须属性
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开，采用_blank效果好一点！！！

2.链接的分类

可以通过这个功能搭建个人网站了！！！，后边再用CSS进行优化。

（1）外部链接，例如外部网站，个人博客首地址、B站个人空间，外部链接必须加http

（2）内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可，例如<a href="index.html">首页</a>，常用于个人网站的搭建，不同页面之间的跳转。

（3）空链接：如果当时没有确定链接目标，相当于先占一个位置<a href = "#">页面名字</a>。

（4）下载链接：如果href里面地址是一个文件或者压缩包时，会下载这个文件。

地址的链接是文件 .exe .zip

(5)网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。非常好用！！！

（6）锚点链接：当我们点击链接，可以快速定位到页面中的某个位置。例如：回到顶部、转到底部

在链接文本的属性中，设置属性值为#名字的形式，#必不可少，如<a href = "#two"> 第二集</a>
找到目标位置标签，里面添加一个 id属性 = 刚才的名字，如：<h3 id = "two"> 第二集介绍 </h3>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
    <h4>1.外部链接：个人CSDN主页</h4>
    <a href="https://blog.csdn.net/qq_45355603?type=blog" target="_self">个人博客</a>

    <h4>2.内部链接：自己写的网页之间相互跳转</h4>
    <a href="gerenboke.html" target="_blank">个人网站</a>

    <h4>3. 空链接</h4>
    <a href="#" target="_blank">空链接测试</a>

    <h4>4. 下载链接测试</h4>
    <a href="logo.zip" target="_blank">下载链接测试</a>

    <h4>5.网页元素的链接：给图片添加跳转链接，点击图片跳转到个人博客</h4>
    <a href="https://blog.csdn.net/qq_45355603?type=blog"><img src="logo.jpg" width="200" /></a>

    <h4>6.锚点链接测试</h4>
    (1)早年经历<br />
    (2)<a href="#live">演艺经历</a><br />
    <h4>早年经历</h4>
    123
    <h4 id="live">演艺经历</h4>
    123
</body>
</html>

3.5 HTML中的注释和特殊字符

注释：以 "结束。

特殊字符：具体需要的可以百度查找。

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
		不断行的空白

⁢稚子

关注

0
点赞
踩
0

收藏

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

1.什么是网页？网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的“一页”，通常是HTML格式的文件，它通过浏览器来阅读。网页是构成网站的基本元素2.什么是HTML？HTML：Hyper Text markup language 超文本标记语言，是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言所谓超文本，有2层含义：1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
复制链接

扫一扫