html从入门到应用

发布时间：2023年12月27日

本篇使用编程软件：vscode
本篇使用浏览器：火狐浏览器

html从入门到应用

计算机基础

  1. 计算机由硬件和软件组成。
  2. 硬件就是计算机中看得见摸得着的东西。
  • 硬件主要包括中央处理器cpu，存储器（内存和硬盘），输入设备（键盘和鼠标），输出设备（音响和显示器）等等。
  • cpu主要包括运算器和控制器，运算器进行数据运算，控制器负责协调各种硬件一起互相配合工作。人的大脑就是一个超级cpu。
  • 内存和硬盘都是用来存储数据的。当你打开电脑，电脑里面安装各种各样的游戏，这些游戏就是用硬盘来存的。此时当你打开游戏，游戏开始加载更新，这时随游戏打开而开始运行的大量数据就是存在内存里的。你开始玩游戏，此时你会进行各种操作，你还会看到游戏场景，听到游戏里面的声音，这时cpu高速运算数据的同时协调其他硬件互相配合执行游戏进行的指令（完成工作）。硬盘就像是演出的后台，后台越大，能请来表演的人就越多，内存就像是演出的舞台，舞台越大，能在台上同时表演的人就越多。
    在这里插入图片描述
  1. 软件就是计算机中看得见摸不着的东西。软件发出指令，指挥硬件去工作。比如说电脑通过音响播放声音，但是播放什么声音，这取决于软件指挥硬件播放什么声音。软件分为系统软件和应用软件。系统软件是必须要安装的。

在这里插入图片描述

cs架构和bs架构

  1. 前端主要解决计算机组成中的应用软件部分。

浏览器：网页运行的平台。浏览器属于客户端。
客户端是指运行在用户设备（如PC、手机或平板电脑）上的应用程序。
服务器是指运行在远程计算机上的应用程序，负责处理和响应来自客户端的请求。服务器通常负责存储和管理数据，执行计算任务，并向客户端提供服务。通俗讲服务器就是一个信息中转站，一个连接所有用户的桥梁，保存信息，传递信息。
在这里插入图片描述

  1. 一个应用软件有两种架构模式，即cs和bs。cs英文全称client server，bs英文全称browser server。cs即客户端-服务器架构，bs即浏览器-服务器架构。我们把需要提前安装才能使用的应用软件称为cs架构的软件，把借助浏览器打开网页就能使用的软件称为bs架构的软件。
    在这里插入图片描述

    • 在生活中分别使用bs架构软件和cs架构软件的时候，我们其实能感受到，cs架构的软件必须要安装客户端才能使用，偶尔还要更新客户端才能使用，并且cs架构的软件不跨平台*，比如我们要安装微信，我们会发现它在ios系统，Android系统，Windows系统，macos系统上分别对应四个不一样的安装包。不同的系统平台需要安装不同的客户端。对于用户来说，用户需要清楚自己的系统，下载对应的安装包进行安装。对于开发者来说，不同平台的开发方式，所用的语言都是不一样的。这是cs架构的缺点。
    • bs架构不必安装，不用更新，可跨平台。我们在使用浏览器-服务器架构软件时，浏览器本身已经帮我们实现了客户端，而我们打开应用软件对应的网页，此时获取到的信息都是直接从服务器得到的。
    • cs架构的缺点正是bs架构的优点。但是，大型专业应用，对安全性要求较高的应用必须采用cs架构。大型专业应用，对安全性较高的应用往往运算量巨大，需求多且复杂，bs架构模式根本无力支撑。
      在这里插入图片描述

  3. 大前端时代，前端从过去的主要负责开发cs架构模式的应用软件，发展到现在，前端也可以开发bs架构模式应用软件，也可以搭建服务器，以及数据可视化等。
    在这里插入图片描述

五大主流浏览器，四大内核

  1. 五大主流浏览器分别是：Chrome，safari，IE，Firefox，Opera。他们五个之所以被称为五大主流浏览器，是因为目前为止，他们五个在浏览器市场上，所占市场份额都很大，且他们五个自己的内核。
    在这里插入图片描述
    • 其中，截止目前，Chrome浏览多占市场份额最多，这主要是因为Chrome浏览器无论是在渲染速度，安全性，还是稳定性上，都比较优秀。下面是一份来自statcounter网站里的统计数据：
      在这里插入图片描述
    • 内核是浏览器的核心，用于处理浏览器所得到的各种资源。浏览器主动接收服务器返回的数据，数据经过内核的处理后，才有了我们所看到的网页。（网页的更新，加载）
      在这里插入图片描述
      五大主流浏览器都有他们自己的内核，目前，Chrome使用blink内核，safari使用webkit内核，IE使用trident内核，Firefox使用gecko内核，Opera使用blink内核。非五大主流浏览器也就是其他浏览器，他们没有自己的内核，都是依靠五大主流浏览器的内核处理数据。在这里插入图片描述

网页

  1. 每个网站都有一个网址，在浏览器上输入网址就能打开对应网站。一个或多个网页构成一个网站。
  2. 一个标准网页有它自己的结构，表现和行为。把网页比作人，网页的结构就像人的骨骼，网页的表现就像人的外表，网页的行为就像人的动作。通过html语言，可以建立一个网页的结构，用css语言可以让一个有结构的网页变得好看，通过JavaScript语言可以让好看的网页“动”起来。
    在这里插入图片描述

认识html

  1. html英文全称HyperText Markup Language，即超文本标记语言。
    普通文本就是只有文字的内容，超文本就是不仅有文字，还有图片，声音，表格，视频，链接等等元素的内容。标记指的是各种各样的标记符号。html就是通过各种各样标签，实现超文本的一种语言。html语言写的页面运行在浏览器上面，变成我们所说的网页。

  2. 网页结构指的是：文字，图片，声音等元素在网页的什么位置。html就是把元素放在网页指定的位置里。

  3. 程序员在记事本/vscode等编译软件里面，用html写好代码，交给浏览器，浏览器经过渲染代码，最终把代码用网页的形式呈现出来。（网页的形成）。1

标签

  1. html语言中对字母大小写和有无引号都不敏感。但是w3c标准里，给出的规范写法都是字母小写和双引号。
    • 标签是html的基本组成单位，也称为元素。
    • 标签根据组成结构，分为单标签和双标签。绝大多数是双标签。双标签由起始标签和结束标签组成，单标签只由起始标签组成。
      在这里插入图片描述在这里插入图片描述
    • 标签之间可以并列使用，也可以嵌套使用。
  3. 标签练习：
    • 双标签 <marquee>让文本滚动</marquee>
    • 单标签<input>输入框
      在这里插入图片描述

标签属性

  1. 标签属性的作用是给标签提供附加信息。
  2. 每个标签都有一个或多个属性，某属性只属于特定一个标签，这个属性叫独有属性；某属性适用于多个标签，这个属性叫通用属性。属性写在起始标签或单标签中。属性与属性之间用空格分开。
    在这里插入图片描述
  3. 属性的语法结构有两种，一种结构是名-值对，一种结构是只有值没有名。属性名和值写的时候都要遵循w3c规范才有效。一个标签里面有两个相同的属性时，先写的有效，后写的无效。
  4. 一个标签的多个属性，用的时候没有固定的先后顺序。
  5. 标签练习
    在这里插入图片描述

html基本结构（ 第一个html页面：hello world！）

在这里插入图片描述

html根标签，head标签，body标签，title标签（网页标题）

<html></html>:这个标签是html文件的根标签。此标签里面的所有标签都是HTML文件的子标签。
<head></head>：在这个标签里编写页面相关的属性，比如当前页面的标题，当前页面的编码方式等等。
<title></htitle>：页面的标题标签。（页面的名字）
<body></body>：在这个标签里编写页面要展示的内容。

在这里插入图片描述

在一个html中，每一个标签都相当于是一个对象。程序员通过代码拿到这些对象，对这些对象进行增删查改，即不断完善网页。

meta标签的常用属性和常用属性值:

meta标签是单标签，常用属性包括charset，name ，content，http-equiv。content一般和name 或 http-eqiiv一起使用。他们四个的常用属性如下。

更多详情见参考资料

注释标签：<!-- 注释内容 – >

光标移到要注释的行，按ctrl+/，快速注释。

代码用户可以看到，所以写注释的时候语言规范点昂
代码也可能是给同行看的，所以写注释的时候写的清晰简洁明了

网页内容的标题标签：

网页内容标题</h1>

在这里插入图片描述

段落标签p和换行标签br

段落标签是双标签。<p>\一段内容</p>。
换行标签是单标签。一般写作<br/>。
br是break的缩写。

html语言中，写代码的时候敲回车，代码里看文本是换行了，但是在浏览器显示的时候是没有换行的。写代码的时候连续敲很多空格，浏览器显示的时候，也只显示一个空格。

内容包括多个段落，使用段落标签p实现。
内容需要换行，使用换行标签br实现。
内容需要空格，可以使用&nbsp;实现。一个&nbsp;是半个空格。
在这里插入图片描述换行标签换行之后，两行之间的间隙小于两个段落之间的间隙。

格式化标签：让文本加粗/倾斜/加删除线/加下划线

html里给文本加粗，倾斜，加删除线，加下划线的标签都有两个。如下。但他们有区别。strong，em，del，ins标签的效果更多。它们不但是格式化标签，同时还都具有强调的意思。
就拿strong标签和b标签来说。通过strong标签，文本内容不但加粗，而且被加粗的文本内容还会被搜索引擎认为是当前页面的关键词或者重点内容（这就是strong标签起到的强调作用）。如果使用b标签，文本内容只是被加粗。
其他三中格式化标签同理。
同时需要注意的是：
strong标签出现的位置一定是当前页面的重点关键词或者是重点内如部分，不可整个页面全部使用。
更多详情见参考资料

在这里插入图片描述

图片标签img及其常用属性

img是单标签，使用此标签可以在网页中插入图片。

src属性：获取图片路径

使用img标签，必须带有属性src。src是获取图片路径2。图片获取路径又分为相对路径和绝对路径。

相对路径分为三种情况：

<!-- 情况一：图片和html代码文件在同一文件夹下-->
<img src="./图片名.图片后缀名">

在这里插入图片描述

<!-- 情况二：图片在，和html代码文件同级的文件夹下-->
<img src="./图片所在的文件夹名/图片名.图片后缀名">

在这里插入图片描述

<!-- 情况三：图片在，和html代码文件所在的文件夹同级的位置-->
<img src="../图片名.图片后缀名">

在这里插入图片描述
绝对路径有两种情况，分别是全路径和图片是网络上的图片资源的时候。
当图片来自网络上的时候，

<!--图片来自文件夹任意位置-->
<img src="图片全路径">
<!--图片来自网络上-->
<img src="图片所在地址">

alt属性：替换文本

当插入图片失败的时候，（比如图片路径写错了等其他原因），在原来本该显示图片的位置，就会显示alt里的属性值。反之，如果图片加载成功，alt的属性值就不会显示。

title属性：提示文本

当图片插入成功后，鼠标移到图片上，就会显示title标签的属性值。

width和height属性：控制图片的宽度和高度

width和height属性分别是用来设定图片的宽和高的。单位是px（像素）。
宽度和高度一般改一个就行，另一个会等比例缩放。否则可能会导致图片失衡。

border属性：给图片加边框

属性值是边框宽度。单位是px。（但是图片边框一般使用css来设定）

超链接标签a及其常用属性

超链接标签a是双标签。标签体是链接在网页中的显示形式。标签体可以是文字，也可以是图片等。

href属性：链接地址

使用a标签，必须带有href属性。href属性值是要跳转页面的链接地址。
当href的属性值为#时，意思是跳转到当前页面。即刷新当前页面。

<!-- 标签体是文字时：点击文字火狐浏览器，跳转到火狐页面-->
<a href="https://www.firefox.com.cn/?utm_source=home.firefoxchina.cn&utm_medium=referral">火狐浏览器</a>
<!-- 标签体是图片时：点击图片，跳转百度页面-->
<a href="https://www.baidu.com/index.php?tn=monline_3_dg">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
</a>
<!--跳转当前页面（刷新页面）-->
<a href="#">刷新当前页面</a>

在这里插入图片描述

在这里插入图片描述

target属性：链接页面的打开方式

target属性值的不同，决定了我们点击链接后，是在当前页面打开链接指向的页面，还是在新窗口打开链接页面。

  • 当target=“_self"时，在当前页面打开链接页面（即链接页面会把当前页面覆盖掉）。如果不写target，默认情况下也是target=”_self"。
  • 当target="_blank"时，在新窗口打开链接页面。

表格

标签table，行标签tr，列标签td

以在页面显示下面这个表格为例：
在这里插入图片描述

表格标签table是双标签。一般都是嵌套行标签tr，列标签（一个单元格标签）td一起使用。
在这里插入图片描述
此时呈现出的表格，它的边框，大小，每个单元格之间的距离，文字在单元格中的位置，表格在页面的位置都是浏览器默认值。边框的默认值为0px，每个单元格之间的距离默认值是2px，文字在单元格中的位置默认距左边框1px，表格在页面中位置默认居左。

table标签的常用属性

table标签的常用属性：

属性含义
width和height设置表格的宽和高
border设置表格的边框
cellspacing每个单元格之间的距离
cellpadding内容距离边框的距离
align表格在页面中的对齐方式。例如align=“center” (align不是内部元素的对齐方式)

通过这些属性可以得到下面表格，但是学完css后，一般使用css方式设置表格展现形式。
在这里插入图片描述

表格头部标签thead+表格主体标签tbody

表格分表格头部和表格主体两部分编写代码，虽然表格最终展示的时候和上面没什么区别，但依然要分开写是为了css做铺垫。
表格头部标签thead和表格主体标签tbody都是双标签。一般都是嵌套行标签tr，列标签（一个单元格标签）td或th一起使用。
th标签嵌套在thead标签下的tr标签下使用。

在这里插入图片描述

用标签td的属性rowspan、colspan合并单元格

合并单元格是标签td中的属性。标签th同理。
在这里插入图片描述
以下面表格为例：
在这里插入图片描述
在这里插入图片描述

列表标签

列表是啥？就是我们在网页中见到的下面这些东西。列表在网页中真的太多了！
在这里插入图片描述在html中，可以通过列表标签实现，让页面布局更加整齐好看。

无序列表标签ul及其type属性，列表项标签li

在这里插入图片描述ul有一个常用属性type。不同的属性值代表每条列表项前面的图案形状。

type="disc"时，图案是实心圆。如果没有规定type的取值，默认type=“disc”。如上述代码。
type=“square”，图案是实心方块。
type=“circle”，图案是空心圆。
在这里插入图片描述

有序列表标签ol及其常用属性，列表项标签li

在这里插入图片描述ol有两个常用属性，分别是是start和type。
在这里插入图片描述在这里插入图片描述

自定义列表标签dl，一级列表项dt，二级列表项dd）

在这里插入图片描述
列表结构一般是html完成。列表样式（列表属性）通常由css设置。

表单标签form和input

表单标签的作用：在网页中输入信息，并发送信息给服务器请求处理。
所以表单标签也分为两个部分：

  1. 表单域：form双标签，划分一块包含表单元素的区域。form标签的action属性是获取服务器地址，负责把表单域里的表单元素发送给服务器。在掌握服务器和网络编程的基础上，才能对form标签进一步了解
  2. 表单控件：input单标签，是输入控件，规定了用户可以在表单域中输入具体哪种类型的数据。input标签的type属性，有很多取值。根据type的属性值，决定可输入数据的具体类型。
  3. 使用时，form标签一般嵌套input标签。（提交按钮和重置按钮必须嵌套在form标签内）

input标签的type属性

  • type=“text”，input标签表示文本输入框
    在这里插入图片描述

  • type=“password”，input标签表示密码输入框
    在这里插入图片描述

  • type=“radio”，input标签表示单选框
    在这里插入图片描述1.如何实现多选一的效果？使用input的name属性。
    name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识。有相同name的单选框之间，就可以实现多选一效果。在这里插入图片描述2. 想让多个单选框之间默认选中女，如何设置？使用input的checked属性。
    checked属性只有一个属性值checked。checked 属性规定在页面加载时应该被预先选定的 元素。 (只针对 type=“checkbox” 或者 type=“radio”)
    在这里插入图片描述

  • type="checkbox"时，input标签表示复选框
    在这里插入图片描述

  • type="button"时，input标签表示普通按钮。input的value属性表示按钮名称。input的onclick属性表示点击按钮后的行为（这个属性在js里是重点）。
    在这里插入图片描述
  • type="submit"时，input标签表示提交按钮。点击提交按钮后，会把用户在web前端页面输入的信息（该input标签所在的form标签内的所有信息）发送到服务器上。
    在这里插入图片描述例如：
    在这里插入图片描述
  • type="reset"时，input标签表示重置按钮。点击重置按钮后，此input标签所在的form标签内所有输入信息都会被清空。
    在这里插入图片描述

type="file"时，input是选择文件框。
在这里插入图片描述

可跳转查看更多input属性

和input搭配使用的lable标签

当input表示单选框或复选框时，只能点击input框进行选择。而input标签搭配lable标签一起使用，点击input标签体也能进行选择。

如何搭配使用？使lable标签的for属性值和input标签的id属性值保持一致。就可以实现：点击input框和input标签体都能进行选择的需求了。
在这里插入图片描述

下拉菜单标签select和菜单选项标签option

使用时，select标签嵌套option标签使用。他们都是双标签。
option的selected属性用来设置默认选项。selected属性只有一个属性值selected。不用selected属性时，默认选项为第一个option标签内的内容。
在这里插入图片描述

文本域标签textarea及其常用属性

在这里插入图片描述在这里插入图片描述

textarea是双标签，有两个常用属性rows和cols

rows代表输入内容超过属性值的时候，会出现一个上下滚轮。
cols代表输入内容超过属性值的时候，会自动换行。
标签体就是文本中的默认内容。

无语义标签：网页布局标签div和span

在上文中我们已经见到了很多标签。他们都有固定的用途，比如p标签，就是为了在页面中显示一个段落，比如table标签，就是为了在页面中显示表格等等。而div和span标签，他们没有固定用途，它们把页面划分为一块块的区域，而在这些区域中到底干什么，不由他们决定，这就是无语义标签。

div标签在页面中占一大块区域，该区域以行为单位。span标签在页面中占一块区域。以一个字符为单位。
在这里插入图片描述

在网页中显示空格，大于小于号等特殊字符

在html中一些字符是不能直接在网页中显示的。比如上文中已经提到过的空格和换行还比如大于号和小于号。想要在网页中显示它们，需要使用html中规定的对应字符串。例如html中规定的空格字符串是&nbsp。
html中更多特殊符号对应字符串见表。

html应用1：个人简历展示案列+源码

详情见专栏。

html应用2：简历信息填写页面案列+源码

详情见专栏。

完结~
相信读完本篇，你已经对html有了一个整体掌握。本文中还有一些与浏览器，服务器交叉的知识没有总结，我会继续更新。最后，你的认可是我更新的动力！欢迎一起讨论学习进步~
[更多关于html的内容,可移步网站：html菜鸟教程。](https://www.runoob.com/html/html-tutorial.html)

最后，HTML 只是描述了页面的骨架结构，使用 CSS 可以控制页面的展示效果，进一步美化页面。
欢迎继续寻宝：

  • css从入门到应用；

  1. 浏览器如何渲染代码，经过这步，网页是如何形成的？ ??

  2. 注脚的解释 ??

文章来源:https://blog.csdn.net/m0_74284629/article/details/134839205
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章