前端学习心得笔记之一（HTML篇）

这篇具有很好参考价值的文章主要介绍了前端学习心得笔记之一（HTML篇）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

对于python爬虫、数据分析等等一些实用技能的学习，小编思考良久，觉得前端知识的学习无比重要。就先去学习HTML的基础知识，希望可以帮到读者学习和了解HTML。

一个网页由哪些部分组成（网页标准）？

（一）、结构：HTML

（二）、表现：CSS 了解HTM

（三）、行为：JavaScript下面是对其中之一：HTML的基本知识

C/S架构和B/S架构

C：Client（客户端）

B：Browser（浏览器）

S：Server（服务器）

对服务器的一个简单理解：

服务器就是一个中转站，帮我们保存信息、传达消息，是所有用户之间的一个桥梁

C/S架构：需要安装、偶然更新、不跨平台。对大型专业应用、安全性要求较高的应用，要采用C/S架构。

B/S架构：无需更新、无需安装、可跨平台

前端学习心得笔记之一（HTML篇）,前端,python,学习,笔记,html,前端,python,前端框架,青少年编程

浏览器

前端学习心得笔记之一（HTML篇）,前端,python,学习,笔记,html,前端,python,前端框架,青少年编程

为什么叫五大浏览器？

因为这五大浏览器都有自己的内核，其他浏览器都是用这五个浏览器的内核。

什么是内核？

内核是浏览器的核心，用于处理浏览器所得到的各种资源。

前端学习心得笔记之一（HTML篇）,前端,python,学习,笔记,html,前端,python,前端框架,青少年编程

了解即可，五大浏览器四大内核。

什么是HTML？

什么是HTML标记语言？HTML不是编程语言，是一种表示网页语言信息的符号标记语言。标记语言是一套标记，HTML使用标记来描述网页。Web网页浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标记，而是使用标记来解释页面的内容，html语言的特点包括：

可以设置文本的格式，比如标题、字号、文本颜色、段落，等等。

可以创建列表。

可以插入图像和媒体。

可以建立表格。

超链接，可以通过鼠标点击超链接来实现页面之间的跳转。

HTML标签

一个标签由<起始标签>标签体</结束标签>组成。

标签又称元素，是HTML的基本组成单位。不区分大小写，单推荐小写，因为小写更规范。

单标签：<起始标签>

双标签：<起始标签>标签体</结束标签>

标签属性：用于给标签提供附加信息。可以写在起始标签或单标签中，形式如下：<标签命属性名=“属性值”属性名“=属性值”>

有些特殊的属性，没有属性名，只有属性值，例如：

<input disabled>

注意事项：

1、不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写）

2、属性名、属性值不能乱写，都是W3C规定好的

3、属性名、属性值都不区分大小写。

4、双引号，也可以写成单引号，甚至不写都行

5、标签中不要出现同名属性，否则后写的会失效，例如：

<input type="text" type="password">

HTML字符编码

编码、解码，会遵循一定的规范--字符集。

ASCII：支持大写字母、下写字母、数字、一些符号，共计128个。

ISO 8859-1：在ASCII基础上扩充了一些希腊字符等，共计256个。

GB2312：收录了6763个常用汉字、682个字符。

GBK：收录了的汉字和符号达到20000+，支持繁体中文。

UTF-8：包含了世界上所有语言的所有文字与符号。

计算机对数据的操作：

存储时，对数据进行：编码

读取时，对数据进行：解码

如果读取与存储的编码不一致，就会出现数据错乱。

前端学习心得笔记之一（HTML篇）,前端,python,学习,笔记,html,前端,python,前端框架,青少年编程

语义化标签

概念：用特定的标签，去表达特定的含义。

原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义最重要！

举例：对于h1标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。

优势：代码结构清晰可读性强。

有利于SEO（搜索引擎优化）

方便设备解析（如屏幕阅读器、盲人阅读器）

块级元素与行内元素

1、块级元素：独占一行（排版标签都是块级元素）

2、行内元素：不独占一行（如input）

3、使用规则：

块级元素中能写行内元素和块级元素（块级元素中几乎什么的能写）

行内元素中能写行内元素，但不能写块级元素。

h1~h6不能互相嵌套。

p中不要写块级元素

不常有的文本标签

标签名	语义
cite	作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑）
dfn	特殊术语，或专属名词
del与ins	删除的文本与插入的文本
sub与sup	下标文字与上标文字
code	一段代码
samp	从正常的上下文中，将某些内容提取出来，例如：标识设备输出
kbd	键盘文本，表示文本时通过键盘输入的，经常用在与计算机相关的手册中
bdo	更改文本方向，要配合dir属性，可选值：ltr（默认值）、rtl
var	标记变量，可以与code标签一起使用
small	附属细则，例如：包括版权、法律文本。

图片标签的基本使用

img的常用属性：

1、src：图片路径
2、alt：图片描述
3、width：图片宽度，单位是像素，例如：200px或200
4、height：图片高度，单位是像素

注意：尽量不同时修改图片的宽和高，可能会造成比例失调。

img是行内块元素。alt属性的作用是搜索引擎通过alt属性，得知图片的内容。

当图片无法展示时候，有些浏览器会呈现alt属性的值。

相对路径：以当前位置作为参考点，去建立路劲。

符号有：1、./（同级）2、/（下一级） 3、../(上一级)

相对路径中的./可以省略不写。

相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。

绝对路径：以根位置作为参考点，去建立路径。

1、本地绝对路径：如D:\python\PyCharm 2023.2.3\bin

2、网络绝对路径：例如：112-2103261F408-50.jpg (1080×1920) (18183.cn)

使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。

使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败。

常用图片格式：

1、jpg格式：

概述：扩展名为.jpg或.jpeg，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）

主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。

使用场景：对图片细节没有极高要求的场景。例如：网站的产品宣传图等

png格式：

概述：扩展名为：.png，是一种无损的压缩格式，能够更高质量的保存图片。

主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。

使用场景：1、想让图片有透明背景2、想更高质量的呈现图片。例如：公司logo图

重要配图等等

3、bmg格式：

概述：扩展名为：.bmp，不进行压缩的一种格式，在最大程度上保留图片更多细节。

主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。

使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片。（网页中很少使用）

4、gif格式：

概述：扩展名为.gif，仅支持256中颜色，色彩呈现不是很完整。

主要特点：支持的颜色较少、支持简单透明背景、支持动态图。

使用场景：网页中的动态图片。

5、webp格式：

概述：扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。

主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。

使用场景：网页中各种图片

6、base64

本质是一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。

原理：把图片进行base64编码，形成一串文本。

如何生成：靠一些工具或网站

如何使用：直接作为img标签的src属性的值即可，并且不受文件位置的影响。

使用场景：一些较小的图片，或者需要和网页一起加载的图片。

超链接

主要作用：从当前页面进行跳转。

<a></a>：超链接

常用属性：

href：要跳转的具体位置。

target：跳转时如何打开页面，常用值如下：_self：在本页签中打开。

_blank：在新页签中打开。

<a href="https://www.jb.com"><a>

代码中的多个空格、多个回车，都会被浏览器解析成一个空格！虽然a是行内元素，但a元素可以包裹出它自身外的任何元素！

补充：跳转锚点

锚点是网页中的一个标记点。

具体使用方式：

第一步：设置锚点

<a name=“test1”></a>

<h2 id="test2"></h2>

1、具有href属性的a标签是超链接，具有name属性的a标签是锚点。

2、name和id都是区分大小写的，且id最后别是数字开头。

超文本的真正含义：是一种组织信息1的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容。

HTML基本使用

源代码发送至浏览器后，会经过浏览器的HTML格式检查，检查其代码格式是否合法，如果合法，就直接渲染。如果不合法，浏览器会自己处理后，再渲染。

这里插入一个小插曲。对于HTML知识的实践练习，有一个叫做LIveServer的小插件非常有用。

安装LIveServer插件的优点：

（1）、可以更方便的打开网页。

（2）、打开网页的方式更贴近项目上线。

（3）、代码出现改动后，可以自动刷新。

根据自己的情况，去配置VSCode的自动保存。

注意：1、务必使用VSCode打开的是文件夹，否则Live Server插件无法正常工作。

2、打开的网页必须是标准的HTML结构，否则无法自动刷新。

练习一：

    <html>
     <head>
        <title>Python爬虫开发与项目实战</title>
        <meta charset="UTF-8">
     </head>
     <body>
     文档设置标记<br>
     <p>这是段落。</p>
     <p>这是段落。</p>
     <p>这是段落。</p>
     <hr>
     <center>居中标记1</center>     
<center>居中标记2</center>
     <hr>
     <pre>
     [00:00](music)
     [00:28]你我皆凡人，生在人世间；
     [00:35]终日奔波苦，一刻不得闲；
     [00:43]既然不是仙，难免有杂念；
     </pre>
     <hr>
     <p>
     [00:00](music)
     [00:28]你我皆凡人，生在人世间；
     [00:35]终日奔波苦，一刻不得闲；
     [00:43]既然不是仙，难免有杂念；
     </p>
     <hr>
     <br>
     <ul>
     <li>Coffee</li>
     <li>Milk</li>
     </ul>
     <ol type="A">
     <li>Coffee</li>
     <li>Milk</li>
     </ol>
        <dl>   
        <dt>计算机</dt>
        <dd>用来计算的仪器 ... ...</dd>
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置 ... ...</dd>
        </dl>
        <div >
                <h3>这是标题</h3>
                <p>这是段落。</p>
     </div>
     </body>
     </html>

这里面的格式标记包括：

·<br>：强制换行标记。让后面的文字、图片、表格等等，显得在下一行

·<p>：换段落标记。换段落，由于多个空格和回车在HTML中会等效为一个空格，所以HTML中要换段落就要用<p>，<p>段落中也可以包含<p>段落。例如：<p>This is a paragraph.</p>。

·<center>：居中对齐标记。让段落或者文字相对于父标记居中显示。

·<pre>：预格式化标记。保留预先编排好的格式，常用来定义计算机原代码。与<p>进行对比，方便理解。

·<li>：列表项目标记。每一个列表使用一个<li>标记，可用来有序列表（<ol>）和无序列表（<ul>）中。

·<ul>：无序列表标记。<ul>表明这个列表没有序号。

·<ol>：有序列表标记。可以显示特定的一下顺序。有序列表的type属性值“1”表示阿拉伯数字1、2、3等等；默认type属性值“A”表示大写字母A、B、C等等。注意列表可以嵌套。

·<dl><dl><dl>：定义性列表。对列表条目进行简短说明。

·<hr>：水平分割线标记。可以用作段落之间的分割线。

·<div>：分区显示标记，也称为层标记。常用来编排一大段的HTML段落，也可以用于将表格式化，和<p>很相似，可以多层嵌套使用。

效果图入下

前端学习心得笔记之一（HTML篇）,前端,python,学习,笔记,html,前端,python,前端框架,青少年编程

练习二：

<html>
     <head>
        <title>Python爬虫开发与项目实战</title>
        <meta charset="UTF-8">
     </head>
     <body>
     Hn标题标记---->>
     <br>
        <h1>Python爬虫</h1>
        <h2>Python爬虫</h2>
        <h3>Python爬虫</h3>
        <h4>Python爬虫</h4>
        <h5>Python爬虫</h5>
        <h6>Python爬虫</h6>
     font标记---->>
     <font size="1">Python爬虫</font>
     <font size="3">Python爬虫</font>
     <font size="7">Python爬虫</font>
     <font size="7" color="red" face="微软雅黑">Python爬虫
</font>
     <font size="7" color="red" face="宋体">Python爬虫</font>
     <font size="7" color="red" face="新细明体">Python爬虫
</font>
     <br>
     B标记加粗---->>
     <b>Python爬虫</b>
     <br>
     i标记斜体---->>
     <i>Python爬虫</i>
     <br>
     sub下标标记---->>
     2<sub>2</sub>
     <br>
     sup上标标记---->>
     2<sup>2</sup>
     <br>
     引用标记---->>
     <cite>Python爬虫</cite>
     <br>
     em标记表示强调，显示为斜体---->>
     <em>Python爬虫</em>
     <br>
     strong标记表示强调，加粗显示---->>
     <strong>Python爬虫</strong>
     <br>
     small标记，可以显示小一号字体，可以嵌套使用---->>
     <small>Python爬虫</small>
     <small><small>Python爬虫</small></small>
     <small><small><small>Python爬虫</small></small></small>
     <br>
     big标记，显示大一号的字体---->>
     <big>Python爬虫</big>
     <big><big>Python爬虫</big></big>
     <br>
     u标记是显示下划线---->>
     <big><big><big><u>Python爬虫</u></big></big></big>
     <br>
     </body>
     </html>

其中文本标记包括：

·<hn>：标题标记。共有6个级别，n的范围为1到6，不同级别对应不同显示大小的标题，h1最大，h6最小。

·<font>：字体设置标记。用来设置字体的格式，一般有三个常用属性：size(字体大小)，<font size=”14px”>;color(颜色)，<font color=”red”>;face（字体），<fontface=”微软雅黑”>。

<b>：粗字体标记。

<i>：斜字体标记。

<sub>：文字下标字体标记。

<sup>：文字上标字体标记。

<tt>：打印字体标记。

<cite>：引用方式的字体，通常显示为斜体。

<em>：表示强调，通常显示为斜体字。

<strong>：表示强调，通常显示为粗体字。

<small>：小型字体标记

<big>：大型字体标记。

<u>：下划线字体标记。

效果图如下：

前端学习心得笔记之一（HTML篇）,前端,python,学习,笔记,html,前端,python,前端框架,青少年编程

练习三：

     <html>
     <head>
        <title>学生信息表</title>
        <meta charset="UTF-8">
     </head>
      <body>
        <table width="960" align="center" border="1"
rules="all" cellpadding="15">
                <tr>
                        <th>学号</th>
                        <th>班级</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>籍贯</th>
    
                </tr>
                <tr align="center">
                        <td>1500001</td>
                        <td>(1)班</td>
                        <td>张三</td>
                        <td>16</td>
                        <td>上海</td>
                </tr>
                <tr align="center">
                        <td>1500011</td>
                        <td>(2)班</td>
                        <td>李四</td>
                        <td>15</td>
                        <td bgcolor="# ccc">浙江</td>
                </tr>
        </table>
        <br/>
        <table width="960" align="center" border="1"
rules="all" cellpadding=
        "15">
                <tr bgcolor="# ccc">
                        <th>学号</th>
                        <th>班级</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>籍贯</th>
                </tr>
                <tr align="center">
                        <td>1500001</td>
                        <td>(1)班</td>
                        <td>张三</td>
                        <td>16</td>
                        <td bgcolor="red"><font color="white">上海
</font></td>
                </tr>
                <tr align="center">
                        <td>1500011</td>
                        <td>(2)班</td>
                        <td>李四</td>
                        <td>15</td>
                        <td>浙江</td>
                </tr>
        </table>
      </body>
     </html>

表格的基本结构包括<table>、<caption>、<tr>、<td>和<th>等标记。

<table>标记的基本格式为<table属性1=“属性值1”属性2=“属性2”……>表格内容</table>。table标记有以下常见属性：

width属性：表示表格的宽度，它的值可以时像素(px)也可以是父级元素的百分比（%）。

height属性：表示表格的高度，它的值可以是像素(px)也可以是父级元素的百分比（%）。

border属性：表示表格外边框的宽度。

align属性用来表示表格的显示位置。left局左显示，center居中显示，right局右显示。

cellspacing属性：单元格之间的间距，默认是2px，单位为像素。

cellpadding属性：单元格内容与单元格边框的显示距离，单位为像素。

frame属性用来控制表格边框最外层的四条线框。void（默认）表示无线框；above表示仅顶部有线框；below表示仅有底部边框；hside表示仅有顶部边框和底部边框；lhs表示仅有左侧边框；rhs表示仅有右侧边框；vside表示仅有左右侧边框；border表示包含全部4个边框。

rule属性用来控制是否显示以及如何显示单元格之间的分割线。属性值none（默认值）表示无分割线；all表示包括所有分割线；rows表示仅有行分割线；clos表示仅有列分割线；groups表示仅在行组和列组之间有分割线。

<caption>标记用于表格中使用标题。<caption>属性的插入位置，直接位于<table>属性之后，<tr>表格行之前。<caption>标记中aligh属性可以取四个值；top表示标题放在表格的上部分；bottom表示标题放在表格的下部；left表示标题放在表格的左部；right表示标题放在表格的右部。