0


前端学习心得笔记之一(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?

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

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

可以创建列表。

可以插入图像和媒体。

可以建立表格。

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

HTML标签

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

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

单标签:<起始标签>

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

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

有些特殊的属性,没有属性名,只有属性值,例如:

  1. <input disabled>

注意事项:

1、不同的标签,有不同的属性;也有一些通用属性(在任何标签内都能写)

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

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

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

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

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

HTML字符编码

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

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

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

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

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

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

计算机对数据的操作:

存储时,对数据进行:编码

读取时,对数据进行:解码

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

语义化标签

概念:用特定的标签,去表达特定的含义。

原则:标签的默认效果不重要(后期可以通过CSS随便控制效果),语义最重要!

举例:对于h1标签,效果是文字很大(不重要),语义是网页主要内容(很重要)。

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

有利于SEO(搜索引擎优化)

方便设备解析(如屏幕阅读器、盲人阅读器)

块级元素与行内元素

1、块级元素:独占一行(排版标签都是块级元素)

2、行内元素:不独占一行(如input)

3、使用规则:

块级元素中能写行内元素和块级元素(块级元素中几乎什么的能写)

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

h1~h6不能互相嵌套。

p中不要写块级元素

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

图片标签的基本使用

img的常用属性:

  1. 1、src:图片路径
  2. 2、alt:图片描述
  3. 3、width:图片宽度,单位是像素,例如:200px或200
  4. 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属性的值即可,并且不受文件位置的影响。

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

超链接

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

:超链接

常用属性:

href:要跳转的具体位置。

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

_blank:在新页签中打开。

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

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

补充:跳转锚点

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

具体使用方式:

第一步:设置锚点

  1. <a name=“test1”></a>
  1. <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结构,否则无法自动刷新。

练习一:

  1. <html>
  2. <head>
  3. <title>Python爬虫开发与项目实战</title>
  4. <meta charset="UTF-8">
  5. </head>
  6. <body>
  7. 文档设置标记<br>
  8. <p>这是段落。</p>
  9. <p>这是段落。</p>
  10. <p>这是段落。</p>
  11. <hr>
  12. <center>居中标记1</center>
  13. <center>居中标记2</center>
  14. <hr>
  15. <pre>
  16. [00:00](music)
  17. [00:28]你我皆凡人,生在人世间;
  18. [00:35]终日奔波苦,一刻不得闲;
  19. [00:43]既然不是仙,难免有杂念;
  20. </pre>
  21. <hr>
  22. <p>
  23. [00:00](music)
  24. [00:28]你我皆凡人,生在人世间;
  25. [00:35]终日奔波苦,一刻不得闲;
  26. [00:43]既然不是仙,难免有杂念;
  27. </p>
  28. <hr>
  29. <br>
  30. <ul>
  31. <li>Coffee</li>
  32. <li>Milk</li>
  33. </ul>
  34. <ol type="A">
  35. <li>Coffee</li>
  36. <li>Milk</li>
  37. </ol>
  38. <dl>
  39. <dt>计算机</dt>
  40. <dd>用来计算的仪器 ... ...</dd>
  41. <dt>显示器</dt>
  42. <dd>以视觉方式显示信息的装置 ... ...</dd>
  43. </dl>
  44. <div >
  45. <h3>这是标题</h3>
  46. <p>这是段落。</p>
  47. </div>
  48. </body>
  49. </html>

这里面的格式标记包括:

·
:强制换行标记。让后面的文字、图片、表格等等,显得在下一行

·

:换段落标记。换段落,由于多个空格和回车在HTML中会等效为一个空格,所以HTML中要换段落就要用

段落中也可以包含

段落。例如:

This is a paragraph.

·

:居中对齐标记。让段落或者文字相对于父标记居中显示。

·

  1. :预格式化标记。保留预先编排好的格式,常用来定义计算机原代码。与

    进行对比,方便理解。

  2. ·

  3. :列表项目标记。每一个列表使用一个
  4. 标记,可用来有序列表(
      )和无序列表(
        )中。

      • ·

          :无序列表标记。
            表明这个列表没有序号。

          • ·

              :有序列表标记。可以显示特定的一下顺序。有序列表的type属性值“1”表示阿拉伯数字123等等;默认type属性值“A”表示大写字母ABC等等。注意列表可以嵌套。

            1. ·

              :定义性列表。对列表条目进行简短说明。

            1. ·


              :水平分割线标记。可以用作段落之间的分割线。

            1. ·

              :分区显示标记,也称为层标记。常用来编排一大段的HTML段落,也可以用于将表格式化,和

              很相似,可以多层嵌套使用。

            1. 效果图入下

            1. 练习二:

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

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

            1. ·:字体设置标记。用来设置字体的格式,一般有三个常用属性:size(字体大小),;color(颜色),;face(字体),<fontface=”微软雅黑”>。

            1. :粗字体标记。

            1. :斜字体标记。

            1. :文字下标字体标记。

            1. :文字上标字体标记。

            1. :打印字体标记。

            1. :引用方式的字体,通常显示为斜体。

            1. :表示强调,通常显示为斜体字。

            1. :表示强调,通常显示为粗体字。

            1. :小型字体标记

            1. :大型字体标记。

            1. :下划线字体标记。

            1. 效果图如下:

            1. 练习三:

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

              、、
              等标记。

            1. 标记的基本格式为<table属性1=“属性值1”属性2=“属性2”……>表格内容
              table标记有以下常见属性:
            1. width属性:表示表格的宽度,它的值可以时像素(px)也可以是父级元素的百分比(%)。

            1. height属性:表示表格的高度,它的值可以是像素(px)也可以是父级元素的百分比(%)。

            1. border属性:表示表格外边框的宽度。

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

            1. cellspacing属性:单元格之间的间距,默认是2px,单位为像素。

            1. cellpadding属性:单元格内容与单元格边框的显示距离,单位为像素。

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

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

            1. 标记用于表格中使用标题。属性的插入位置,直接位于属性之后,表格行之前。标记用来定义表格的行,对于每一个表格行,但是由一对…标记表示,每一行标记内可以嵌套多个标记内,成对出现。
              标记中aligh属性可以取四个值;top表示标题放在表格的上部分;bottom表示标题放在表格的下部;left表示标题放在表格的左部;right表示标题放在表格的右部。
            1. 或者标记。
            1. ·bgcolor属性用来设置背景颜色,格式为bgcolor=“颜色值”。

            1. ·align属性用来设置垂直方向对齐方式,格式为align=“值”。值为bottom时,表示靠顶端对齐;值为top时,表示靠底部对齐;值为middle时,表示居中对齐。

            1. ·valign属性用来设置水平方向对齐方式,格式为valign=“值”。值为left时,表示靠左对齐;值为right时,表示靠右对齐;值为center时,表示居中对齐。

            1. 都是单元格的标记,其必须嵌套在
              是表头标记,通常位于首行或者首列,中的文字默认会被加粗,而不会。是数据标记,表示该单元格的具体数据。两者的标记属性都是一样的。
            1. 常用属性如下:

            1. ·bgcolor设置单元格背景。

            1. ·align设置单元格对齐方式。

            1. ·valign设置单元格垂直对齐方式。

            1. ·width设置单元格宽度。

            1. ·height设置单元格高度。

            1. ·rowspan设置单元格所占行数。

            1. ·colspan设置单元格所占列数

            1. 效果图如下

            1. 后言

            1. 新年在家没有闲着,总算是学习完HTML的基础知识并整理好了,越是深入的学习,就越是觉得计算机技术的深度,知道自己才刚刚开始。

            1. 最后,如果我的笔记可以帮到大家,当然是小编的最大荣幸。

            1. 标签:


            1. 版权归原作者 走着足迹 所有,
            1. 如有侵权,请联系我们删除。
            1. “前端学习心得笔记之一(HTML篇)”的评论:

            1. 还没有评论
            1. 关于作者
            1. ...
            1. 文章同步
            1. 相关阅读
            1. 文章导航