HTML叫做超文本标记语言,是一种规范,也是一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容。

HTML文件可以使用任何能够生成txt文件的文本编辑器来编辑,生成超文本标记语言文件,只用修改文件名后缀为”.html”或“.htm”即可。

HTML 基本标签
(1)HTML 语法规则
HTML标签采用双标记符的形式,前后标记符对应,分别表示标记开始和结束,标记符中间的内容被标签描述。前标记符由“”表示,结尾标记符多了一个“/”,由“”表示。
(2)HTML 文件结构
HTML文件最外层由表示,说明该文件是用HTML语言描述的。在他里面是并列的头标签()和内容标签(),最基本的

●HTML 文件结构如下:

网页的内容描述信息
网页显示的内容

●头标签中常用标签:
标签 描述
定义了文档的标题<br /> 定义了页面链接标签的默认链接地址<br /> 定义了一个文档和外部资源之间的关系<br /> 定义了 HTML 文档中的元数据<br /> 定义了客户端的脚本文件<br /> 定义了 HTML 文档的样式文件</p><p>●内容标签中常用标签<br /> 标签 描述</p><table> 定义一个表格</p><tr> 定义了表格中的一行</p><td> 定义了表格中某一行的一列<br /> <img> 定义了一个图像<br /> 定义了一个超链接</p><p> 定义了一行</p><p> 定义了换行<br /> <font> 定义了字体</p><h1> 定义字体大小</p><p>静态网页与动态网页<br /> 1.静态网页<br /> 在网站设计中,纯粹HTML格式的网页通常被称为“静态网页”,静态网页是标准的HTML文件,它的文件扩展名是.htm、.html。静态网页是网站建设的基础,早期的网站一般都是由静态网页制作的。静态网页也可以出现各种动态的效果,如.GIF格式的动画、FLASH、滚动字幕等。这些“动态效果”只是视觉上的,与下面将要介绍的动态网页是不同的概念。</p><p>2.动态网页<br /> 所谓的动态网页,是指跟静态网页相对的一种网页编程技术。静态网页,随着HTML代码的生成,页面的内容和显示效果就基本上不会发生变化了——除非是修改页面代码。而动态网页则不然,页面代码虽然没有变,但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。<span><span>动态网页URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见网页制作格式,而是以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀,并且在动态网页网址中有一个标志性的符号——“?”。</span></span><br /> 动态网页是基本的html语法规范与Java、PHP、C#等高级程序设计语言、数据库编程等多种技术的融合,以期实现对网站内容和风格的高效、动态和交互式的管理。因此,从这个意义上来讲,凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。</p><p>3.动态网页语言<br /> 早期的动态网页主要采用通用网关接口 CGI(Common Gateway Interface)技术,虽然 CGI 技术已经发展成熟而且功能强大, 但由于编程困难、效率低下、修改复杂,所以有逐渐被新技术取代的趋势。</p><p>目前常用的动态网页编程语言如下:<br /> ●PHP<br /> 即 Hypertext Preprocessor(超文本预处理器),它是当今 Internet 上最为火热的脚本语言,其语法借鉴了 C、Java、PERL 等语言,但只需要很少的编程知识你就能使用 PHP 建立一个真正交互的 Web 站点。</p><p>●JSP<br /> 即 Java Server Pages(Java 服务器页面),它是由 Sun Microsystem 公司于 1999 年 6 月推出的新技术,是基于 Java Servlet 以及整个 Java 体系的 Web 开发技术。</p><p>●Python<br /> 是一种面向对象、跨平台的动态类计算机程序设计语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的大型项目开发。</p><p>●Ruby<br /> 是一种简单快捷的面向对象(面向对象程序设计)脚本语言,在 20 世纪 90年代由日本人松本行弘(Yukihiro Matsumoto) 开发,遵守GPL 协议和Ruby License。它的灵感与特性来自于 Perl、Smalltalk、Eiffel、Ada 以及 Lisp 语言。</p><h2> HTTP协议概述</h2><p>HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求,请求头包含请求的方法、URL、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应,响应的内容包括消息协议的版本、成功或者错误编码加上服务器信息、实体元信息以及可能的实体内容。</p><p>HTTP已经演化了很多版本:</p><p><span>1.HTTP/1.0:纯文本传输;http响应后立即关闭tcp连接;显示http头部信息(比如http协议版本号、状态码等)</span></p><p><span>2.HTTP/1.1:支持长连接(连接保持,持久连接);支持管道机制(同时发送多个http请求)</span></p><p><span>3.HTTP/2.0:支持长连接;支持完全多路复用(同时发送多个请求);支持网页头部压缩;支持服务端主动推送;二进制传输</span></p><p>HTTP请求的方法</p><p>GET :发送查询请求获取网页资源</p><p>PUT :提交数据,修改数据</p><p>DELETE :删除资源</p><p>POST :提交数据,插入添加数据</p><p>HEAD :请求网页的首部信息</p><p>GET 和 POST 比较<br /> ●GET 方法:从指定的服务器上获得数据<br /> GET请求能被缓存<br /> GET请求会保存在浏览器的浏览纪录里<br /> GET请求有长度的限制<br /> 主要用于获取数据<br /> 查询的字符串会显示在URL后缀中,不安全,比如 http://www.test.com/a.php?Id=123</p><p>●POST 方法:提交数据给指定服务器处理<br /> POST请求不能被缓存<br /> POST请求不会保存在浏览器的浏览纪录里<br /> POST请求没有长度限制<br /> 查询的字符串不会显示在URL中,比较安全</p><p>HTTP协议报文格式</p><p>请求报文: 请求行(http请求方法、URL路径、协议版本)请求头 、请求体</p><p>响应报文:响应行(协议版本、响应状态码)响应头 、响应体</p><h2>响应状态码:</h2><p>请求正常的 :2xx 3xx</p><p>请求异常的 :4xx 5xx</p><h2>一些最常见的状态码:</h2><p>200 一切正常</p><p>301 永久重定向</p><p>302 临时重定向</p><p>400 请求错误,客户端发送的请求有语法错误</p><p>401 用户名或密码错误</p><p>403 禁止访问,客户端的ip被拉黑拒绝</p><p>404 请求的文件不存在,请求的URL路径有误,服务器没有对应的文件</p><p>500 服务器内部错误,服务器端程序存在缺陷</p><p>502 错误网关,代理服务器接收到了来自远端服务器的无效响应</p><p>503 服务不可以,服务器过载或者正在维护</p><p>504 网关超时,代理服务器无法在规定的时间内收到来自远端 服务器的响应</p><h2>响应报文:</h2><p> 状态行:状态行由协议版本,状态码,状态码描述三部分组成。<br /> 响应头:响应头与请求头部类似,为响应报文添加了一些附加信息。<br /> 空行:响应头部的最后会有一个空行,表示响应头部结束。<br /> 响应体:服务器返回的相应 HTML 数据,浏览器对其解析后显示页面。</p><h2>常见响应头:</h2><p> 响应头 描述<br /> Server 服务器应用程序软件的名称和版本<br /> Content-Type 响应正文的类型(是图片还是二进制字符串)<br /> Content-Length 响应正文长度<br /> Content-Charset 响应正文使用的编码<br /> Content-Encoding 响应正文使用的数据压缩格式<br /> Content-Language 响应正文使用的语言</p></article></div><div class="related-posts"><h2 class="related-posts-title"><i class="fab fa-hive me-1"></i>相关文章</h2><div class="row g-2 g-md-3 row-cols-2 row-cols-md-3 row-cols-lg-4"><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/27897/" title="MySQL子查询相关使用" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/27897/" title="MySQL子查询相关使用">MySQL子查询相关使用</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/32552/" title="Visual Studio Code (VS Code) – C/C++ 入门" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/56fac747a7cc4593921dc5df64b5e37b.jpeg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/32552/" title="Visual Studio Code (VS Code) – C/C++ 入门">Visual Studio Code (VS Code) – C/C++ 入门</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/30707/" title="chatgpt 接口 和 jupyter版本安装" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/30707/" title="chatgpt 接口 和 jupyter版本安装">chatgpt 接口 和 jupyter版本安装</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/44909/" title="笔试案例2" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/0ad980efc14645369da670b6b17e91c9.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/44909/" title="笔试案例2">笔试案例2</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/30139/" title="程序员失业一个半月,降薪2K的offer要不要去?" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/fd5928f4dfe1706d6337df6f47557110.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/30139/" title="程序员失业一个半月,降薪2K的offer要不要去?">程序员失业一个半月,降薪2K的offer要不要去?</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/16271/" title="IM即时通讯系统[SpringBoot+Netty]——梳理(二)" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/73bc1c2a6f604d84a89aacf2f39d51d7.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/16271/" title="IM即时通讯系统[SpringBoot+Netty]——梳理(二)">IM即时通讯系统[SpringBoot+Netty]——梳理(二)</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/36891/" title="SLAM算法与工程实践——相机篇:传统相机使用(1)" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/bf2efc14a9c2447e872390c858d6a1bb.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/36891/" title="SLAM算法与工程实践——相机篇:传统相机使用(1)">SLAM算法与工程实践——相机篇:传统相机使用(1)</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/26486/" title="Go 数据类型" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/26486/" title="Go 数据类型">Go 数据类型</a></h2></div></article></div></div></div></div><div class="sidebar-wrapper col-md-12 col-lg-3 h-100" data-sticky><div class="sidebar"><div id="recent-posts-4" class="widget widget_recent_entries"><h5 class="widget-title">最新关注</h5><ul><li> <a href="https://www.maxssl.com/article/57859/">【MySQL】InnoDB存储引擎</a></li><li> <a href="https://www.maxssl.com/article/57858/">DB-GPT:强强联合Langchain-Vicuna的应用实战开源项目,彻底改变与数据库的交互方式</a></li><li> <a href="https://www.maxssl.com/article/57857/">TigerBeetle:世界上最快的会计数据库</a></li><li> <a href="https://www.maxssl.com/article/57856/">【SQL server】玩转SQL server数据库:第三章 关系数据库标准语言SQL(二)数据查询</a></li><li> <a href="https://www.maxssl.com/article/57855/">马斯克400条聊天记录被法院公开,原来推特收购是在短信上谈崩的</a></li><li> <a href="https://www.maxssl.com/article/57854/">戏精摩根大通:从唱空比特币到牵手贝莱德</a></li></ul></div><div id="ri_sidebar_posts_widget-2" class="widget sidebar-posts-list"><h5 class="widget-title">热文推荐</h5><div class="row g-3 row-cols-1"><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/53632/" title="k8s-hpa控制器 16" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/d92f71301bcb4894a22fa0ab66c7c99f.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/53632/" title="k8s-hpa控制器 16">k8s-hpa控制器 16</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/56157/" title="javacv FFmpeg 剪辑音频文件" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/56157/" title="javacv FFmpeg 剪辑音频文件">javacv FFmpeg 剪辑音频文件</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/4891/" title="AR手势识别交互,让应用更加“得心应手”" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/4891/" title="AR手势识别交互,让应用更加“得心应手”">AR手势识别交互,让应用更加“得心应手”</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/9720/" title="Redis三种常用的缓存读写策略,这些你都知道吗?" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/99d8c0aa50e1becb45d1b45029681413.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/9720/" title="Redis三种常用的缓存读写策略,这些你都知道吗?">Redis三种常用的缓存读写策略,这些你都知道吗?</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/36971/" title="第22关 深入解析K8s中的RBAC角色访问控制策略" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/36971/" title="第22关 深入解析K8s中的RBAC角色访问控制策略">第22关 深入解析K8s中的RBAC角色访问控制策略</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/24550/" title="【K3s】第1篇 K3s入门级介绍及架构详解" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/def2b199ded146bebc4de8dc57f35983.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/24550/" title="【K3s】第1篇 K3s入门级介绍及架构详解">【K3s】第1篇 K3s入门级介绍及架构详解</a></h2></div></div></article></div></div></div></div></div></div></div></main><footer class="site-footer py-md-4 py-2 mt-2 mt-md-4"><div class="container"><div class="text-center small w-100"><div>Copyright © <script>today=new Date();document.write(today.getFullYear());</script> maxssl.com 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">浙ICP备2022011180号</a></div><div class=""><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7656930379472324" crossorigin="anonymous"></script></div></div></div></footer><div class="rollbar"><ul class="actions"><li><a target="" href="https://www.maxssl.com/" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i><span></span></a></li><li><a target="" href="http://wpa.qq.com/msgrd?v=3&uin=6666666&site=qq&menu=yes" rel="nofollow noopener noreferrer"><i class="fab fa-qq"></i><span></span></a></li></ul></div><div class="back-top"><i class="fas fa-caret-up"></i></div><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"><i class="fas fa-times"></i></div><div class="logo-wrapper"> <a class="logo text" href="https://www.maxssl.com/">MaxSSL</a></div><div class="mobile-menu d-block d-lg-none"></div></div> <script></script><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://www.maxssl.com/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script src='//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-js'></script> <script src='//cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min.js' id='highlight-js'></script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/vendor.min.js' id='vendor-js'></script> <script id='main-js-extra'>var zb={"home_url":"https:\/\/www.maxssl.com","ajax_url":"https:\/\/www.maxssl.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.maxssl.com\/wp-content\/themes\/ripro-v5","singular_id":"11261","post_content_nav":"0","site_notify_auto":"0","current_user_id":"0","ajax_nonce":"6def2f92b8","gettext":{"__copypwd":"\u5bc6\u7801\u5df2\u590d\u5236\u526a\u8d34\u677f","__copybtn":"\u590d\u5236","__copy_succes":"\u590d\u5236\u6210\u529f","__comment_be":"\u63d0\u4ea4\u4e2d...","__comment_succes":"\u8bc4\u8bba\u6210\u529f","__comment_succes_n":"\u8bc4\u8bba\u6210\u529f\uff0c\u5373\u5c06\u5237\u65b0\u9875\u9762","__buy_be_n":"\u8bf7\u6c42\u652f\u4ed8\u4e2d\u00b7\u00b7\u00b7","__buy_no_n":"\u652f\u4ed8\u5df2\u53d6\u6d88","__is_delete_n":"\u786e\u5b9a\u5220\u9664\u6b64\u8bb0\u5f55\uff1f"}};</script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/main.min.js' id='main-js'></script> </body></html>