首页 前端知识 前端学习心得笔记之一(HTML篇)

前端学习心得笔记之一(HTML篇)

2024-03-26 08:03:13 前端知识 前端哥 241 680 我要收藏

前言

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

一个网页由哪些部分组成(网页标准)?

(一)、结构:HTML

(二)、表现:CSS  了解HTM

(三)、行为:JavaScript下面是对其中之一:HTML的基本知识

C/S架构和B/S架构

CClient(客户端)

BBrowser(浏览器)

SServer(服务器)

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

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

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

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

浏览器

为什么叫五大浏览器?

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

什么是内核?

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

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

什么是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:包含了世界上所有语言的所有文字与符号。

计算机对数据的操作:

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

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

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

 语义化标签

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

原则:标签的默认效果不重要(后期可以通过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. 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属性的值即可,并且不受文件位置的影响。

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

超链接

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

<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”表示阿拉伯数字123等等;默认type属性值“A”表示大写字母ABC等等。注意列表可以嵌套。

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

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

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

效果图入下

练习二:

<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的范围为16,不同级别对应不同显示大小的标题,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>
     <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表示标题放在表格的右部。

<tr>标记用来定义表格的行,对于每一个表格行,但是由一对<tr></tr>标记表示,每一行<tr>标记内可以嵌套多个<td>或者<th>标记。

·bgcolor属性用来设置背景颜色,格式为bgcolor=颜色值

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

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

<td><th>都是单元格的标记,其必须嵌套在<tr>标记内,成对出现。<th>是表头标记,通常位于首行或者首列,<th>中的文字默认会被加粗,而<td>不会。<td>是数据标记,表示该单元格的具体数据。<td><th>两者的标记属性都是一样的。

常用属性如下:

·bgcolor设置单元格背景。

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

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

·width设置单元格宽度。

·height设置单元格高度。

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

·colspan设置单元格所占列数

效果图如下

后言

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4135.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!