001+limou+HTML——（1）HTML入门知识

limou3434

已于 2023-03-12 10:42:59 修改

阅读量477

点赞数 2

分类专栏： Web三大件（第一版）文章标签： javascript 前端 dreamweaver

于 2023-03-08 13:53:20 首次发布

本文链接：https://blog.csdn.net/m0_73168361/article/details/129394209

版权

Web三大件（第一版）专栏收录该内容

8 篇文章 0 订阅

订阅专栏

000、本人编写前言

前言：本笔记来源于莫振杰的书《HTML、CSS、Javascript从零到一快速上手》，经过修改制成的自学笔记，本书很适合小白学习入门web的相关知识，你也可以先看看我从中学到了什么，再考虑是否去认真学习这本书。

001、HTMl简介

（1）前端技术解说

①从“网页制作”到“前端开发”

“网页制作”是web1.0时代（2005前）的产品，主要是静态网页，即仅仅供用户浏览图片和文字，而无法与服务器进行数据交互的页面。那个时候的网页开发工具三大件：Dreamweaver、Fireworks、Flash
“前端开发”是web2.0时代（2005后）的产品，由网页制作演变而来，这个时候网页分成两种（静态网页和动态网页）这个时候的网页开发工具三大件：HTML、CSS、JavaScript

②从“前端开发”到“后端开发”

前端开发最为核心的技术就是：HTML、CSS、Javascript。
“HTML控制网页结构，CSS控制网页外观、Javascript控制网页行为”相当于一个盖房子的流程

i、使用HTML设置网页的字体类型、背景颜色等
ii、使用CSS修饰字体类型、字体大小、背景颜色等
iii、使用Javascript定义鼠标事件，当鼠标挪到某个按钮时，按钮的颜色会改变

掌握了前端技术的核心就可以开始开发网站了。但是开发的只是静态网页，只能用于浏览不能和服务器交互，因此学完三大核心后就还要学习后端技术
几种常见的后端技术：PHP（比较通用的开源脚本语言）、JSP（类似ASp技术，可以在传统的HTML网页中插入Java程序段（scriptlet）和JSP标记（tag），从而形成JSP文件用JSP开发的网站是跨平台的，既可以在windows下运行也可以在Linux等操作系统上运行）、ASP.NET（前生就是ASP技术）

③学习路线推荐

HTML----CSS----Javascript----jQuery----HTML5----CSS3----ES6----移动web----Vue.js
另外不一定要等到精通一门后才学习下一门（这也是很难的），很多技术都具有交叉关系。我很喜欢折本书里的一句话“只有‘通’十行，才可能做到‘精’一行”

（2）什么是HTML

①HTML全称是“HyperText Markup language”，即超文本标记语言，严格来说HTML不属于一种编程语言，而属于标记语言

②HTML通过多对标签来描述网页，学习HTML就相当于学习这些标签，用来搭建网页的骨架

<p>一段文字</p>  <!--<p>和</p>就是一对标签-->

③有时候也会叫“标签”为“元素”，如把“p标签”说成“p元素”

④通过HTML标签来描述一个网页生成一个.html文件，再由浏览器解读（打开）这个文件，就可以将网页的效果呈现给用户

002、开发工具

前期只是写HTML的话，推荐使用VScode即可，安装一些有关web开发的插件吧，或者你有其他能编写HTML的编辑器也可以。

003、基本标签

HTML的基本结构如下：

<!DOCTYPE html>     <!--文档声明-->
<html>              <!--HTML标签，以下到此标签结束都是HTML文档-->
    <head>          <!--页头-->

    </head>
    <body>          <!--页身-->
       
    </body>
</html>

（1）文档声明

“!DOCTYPE html”标签是文档声明，表示这是一个HTML页面，最好是必须携带有这个标签

（2）html标签

告诉浏览器，这个页面是从开始，到结束的。

有的时候还会在里面看到有一个属性为xmlns的代码，例如表示当前页面使用的是W3C的XHTML标准，不过这点可以暂时不理会

（3）head标签

是网页的头部，用于定义一些特殊的内容，例如：页面标题、定时刷新、外部文件等，一般来说只有六个标签能放在里面

title标签，定义网页标题

<!DOCTYPE html>
<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        
    </body>
</html>

meta标签，定义页面的特殊消息，例如页面关键字、页面描述。这些信息很重要，是给搜索引擎蜘蛛看的，方便我们平时通过关键字等搜索得到这个页面，而mate标签有两个重要的属性（name、http-equiv）
- name可以描述网页的信息，在实际开发中最重要的其实只有keywords和description
- http-equiv可以描述网页所使用的编码和定义网页自动刷新跳转，如果不加上有可能会产生乱码的问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"><!--这里定义了字符编码，或者可以写成<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">-->
        <meta http-equiv="refresh" content="5;url=https://www.baidu.com"/><!--10秒后跳转到百度网站-->
        <title>网页标题</title>
        <meta name="keywords" content="网页的关键字:学习HTML的练手网站"/>
        <meta name="description" content="网页的描述:本网站是一个新手学习使用的静态网站"/>
        <meta name="author" content="网页的作者:limou3434"/>
        <meta name="copyright" content="网页的版权信息:本站所有代码仅供本人使用，禁止转载"/>
    </head>

    <body>
        
    </body>
</html>

style标签，用于定义页面的CSS样式，等学到了CSS后再进行讨论
link标签，用于引入外部样式文件（CSS文件），等学到了CSS后再进行讨论
script标签，用于定义页面的Javascript代码，也可以引入外部的JavaScript文件，等学到了Javascript后再进行讨论
base标签，这个标签我们暂时忽略不讲，只需要知道有这个标签就好了

（4）body标签

是网页的身体，大部分的网页标签都会被写在这里面，比如在里面写入p标签（段落标签，显示一段文字）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"><!--这里定义了字符编码，或者可以写成<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">-->
        <meta http-equiv="refresh" content="5;url=https://www.baidu.com"/><!--10秒后跳转到百度网站-->
        <title>网页标题</title>
        <meta name="keywords" content="网页的关键字:学习HTML的练手网站"/>
        <meta name="description" content="网页的描述:本网站是一个新手学习使用的静态网站"/>
        <meta name="author" content="网页的作者:limou3434"/>
        <meta name="copyright" content="网页的版权信息:本站所有代码仅供本人使用，禁止转载"/>
    </head>

    <body>
        <p>网页第一段内容……</p>  <!--这里是p标签。可以写长长的一段话，并且会在浏览器显示中自动换行噢！-->
        <p>网页第二段内容……</p> 
        <p>网页第三段内容……</p>
        <p>网页第四段内容……</p>
        <p>网页第五段内容……</p>
        <p>网页第六段内容……</p>
        <p>网页第七段内容……</p>
    </body>
</html>

（5）注释标签用于编写注释

用于编写注释

<!--这是一段注释…-->
/*这也是一段注释*/

limou3434

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
001+limou+HTML——（1）HTML入门知识

本笔记来源于莫振杰的书《从零到一快速上手》，经过修改制成的自学笔记
复制链接

扫一扫

专栏目录