html入门学习
创始人
2025-05-29 08:35:41
0次
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
HTML元素
定义 HTML 文档。
定义关于文档的信息。
定义文档的标题。
<body> 定义文档的主体。
<h1> to <h6> 定义 HTML 标题。
<p> 定义段落。
<button> 定义按钮。
<label> 定义 input 元素的标注。
<input> 定义输入控件。
<img> 定义图像。
<canvas> 定义图形。
<svg> 定义 SVG 图形的容器。
<video> 定义视频。
<a> 定义锚。
<style> 定义文档的样式信息。
<script> 定义客户端脚本。</code></pre><p style="text-align:left;">HTML 属性</p><p style="">属性总是以名称/值对的形式出现，比如：name="value"。</p><p style="">id :规定元素的唯一 id。</p><p style="">style：规定元素的行内 CSS 样式。</p><p style="">lang:规定元素内容的语言。</p><p style="text-align:left;">事件属性</p><p style="">onload script 页面结束加载之后触发。</p><p style="">onerror script 在错误发生时运行的脚本</p><p style="">onclick script 元素上发生鼠标点击时触发。</p><p style="">画布:动态绘制图形</p><pre class="kdocs-plaintext"><code class="language-plaintext"><!DOCTYPE html>
<html>
<body><canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas><script>var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px Arial";
ctx.fillText("Hello World",10,50);</script></body>
</html></code></pre><p style="">音频或视频</p><p style="">HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件</p><p style="">字符集</p><p style="">HTML5 中的默认字符集为 UTF-8</p><p style="text-align:left;">HTML 文档类型</p><p style="text-align:left;">所有 HTML 文档必须以 <!DOCTYPE> 声明开头。</p><p style="text-align:left;">该声明并非一个 HTML 标签。它是一条“信息”，告知浏览器期望的文档类型。</p><p style="text-align:left;">在 HTML5 中，<!DOCTYPE> 声明非常简单：</p><p style="text-align:left;"><!DOCTYPE html></p><p style="text-align:left;">HTML URL </p><p style="text-align:left;">URL - 统一资源定位器（Uniform Resource Locator）</p><p style="text-align:left;">Web 浏览器使用 URL 从 Web 服务器请求页面。</p><p style="text-align:left;">URL 是网页的地址，比如：https://www.w3school.com.cn。</p><p style="text-align:left;">HTML 语言代码</p><p style="">HTML 的 lang 属性可用于网页或部分网页的语言</p><p style="text-align:left;"><html lang="en"></p><p style="text-align:left;">...</p><p style="text-align:left;"></html></p><p style="text-align:left;">HTML ISO 国家/地区代码</p><p style="">在 HTML 中，国家/地区代码可以用作 lang 属性中语言代码的补充</p><p style="text-align:left;"><html lang="zh-CN"></p><p style="text-align:left;">...</p><p style="text-align:left;"></html></p><p style="text-align:left;">HTML 状态消息</p><pre class="kdocs-plaintext"><code class="language-plaintext">200 OK 请求成功（其后是对GET和POST请求的应答文档。）
404 Not Found 服务器无法找到被请求的页面。
500 Internal Server Error 请求未完成。服务器遇到不可预知的情况。
502 Bad Gateway 请求未完成。服务器从上游服务器收到一个无效的响应。</code></pre><p style="text-align:left;">HTML 请求方法</p><p style="">HTTP 充当客户端和服务器之间的请求-响应协议。</p><p style="">最常用的两种方法是：GET 和 POST。</p><p style="">GET 用于从指定资源请求数据。</p><p style="text-align:left;">/test/demo_form.php?name1=value1&name2=value2</p><p style="">POST 用于将数据发送到服务器来创建/更新资源。</p><p style="text-align:left;">POST /test/demo_form.php HTTP/1.1</p><p style="text-align:left;">Host: w3school.com.cn</p><p style="text-align:left;">name1=value1&name2=value2</p> <!--end::Text-->
</div>
<!--end::Description-->
<div class="mt-5">
<!--关键词搜索-->
<a href="/search/news/keyword-%E8%AF%8D%E5%BA%93%E5%8A%A0%E8%BD%BD%E9%94%99%E8%AF%AF%3A%E6%9C%AA%E8%83%BD%E6%89%BE%E5%88%B0%E6%96%87%E4%BB%B6%E2%80%9CE%3A%5Chighferrum_mysql%5CConfiguration%5CDict_Stopwords.txt%E2%80%9D%E3%80%82.html" class="badge badge-light-primary fw-bold my-2" target="_blank">词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。</a>
</div>
<div class="mt-5">
<p class="fc-show-prev-next">
<strong>上一篇：</strong><a href="/minsheng/117155.html">ssh介紹以及 linux 下ssh的安裝使用</a><br>
</p>
<p class="fc-show-prev-next">
<strong>下一篇：</strong><a href="/minsheng/117157.html">面试阿里测开岗失败后，被面试官在朋友圈吐槽了......</a> </p>
</div>
<!--begin::Block-->
<div class="d-flex flex-stack mb-2 mt-10">
<!--begin::Title-->
<h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>
<!--end::Title-->
</div>
<div class="separator separator-dashed mb-9"></div>
<!--end::Block-->
<div class="row g-10">
</div>
</div>
<!--end::Table widget 14-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-xl-4 mt-0">
<!--begin::Chart Widget 35-->
<div class="card card-flush h-md-100">
<!--begin::Header-->
<div class="card-header pt-5 ">
<!--begin::Title-->
<h3 class="card-title align-items-start flex-column">
<!--begin::Statistics-->
<div class="d-flex align-items-center mb-2">
<!--begin::Currency-->
<span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>
<!--end::Currency-->
</div>
<!--end::Statistics-->
</h3>
<!--end::Title-->
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body pt-3">
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/1caf6e879468435c8f631ecdb2cd5840.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117489.html" class="text-dark fw-bold text-hover-primary fs-6">Altium Designer...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">目录Altium Designer(AD)软件使用记录15-PCB布线部分之优化和DRC处理一、线路...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/685afb2fdbba41c3844a0e7b5a688d30.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117488.html" class="text-dark fw-bold text-hover-primary fs-6">通俗易懂了解Hadoop（更新...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">从本书第5、6、7、8章，学习云计算开发相关知识 这是第五章 文章目录Hadoo...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/de2d6cd03f7b474e9324a89111eb4a89.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117487.html" class="text-dark fw-bold text-hover-primary fs-6">LeetCode-198. 打...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">目录暴力递归动态规划 题目来源 198. 打家劫舍 暴力递归 class Solution {pub...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117484.html" class="text-dark fw-bold text-hover-primary fs-6">js学习11（客户端存储）</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">目录 web storage IndexDB web storage ### 前言...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117482.html" class="text-dark fw-bold text-hover-primary fs-6">target.closest妙...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">首先看下MDN：Element.closest() - Web APIs | MDN ...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/img_convert/9b1fc792760452ee9a2b1bdf1715c5a4.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117486.html" class="text-dark fw-bold text-hover-primary fs-6">并发编程(一)-Thread ...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">一、什么是线程线程（英语：thread）是操作系统能够进行...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/9cd5b88591024cc38c044fc02a88ec9c.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117485.html" class="text-dark fw-bold text-hover-primary fs-6">小白学Pytorch系列--T...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">小白学Pytorch系列–Torch API (9) Spectral Ops stft 短时傅立...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://7078909xxh.oss-cn-shanghai.aliyuncs.com/csdn图床专用区/202303190935747.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117483.html" class="text-dark fw-bold text-hover-primary fs-6">Java二叉树的前中后序遍历</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">Java二叉树的前中后序遍历1.前序遍历1.1前序遍历概念1.2前序遍历习题2.中序遍历2.1中序遍...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/img_convert/dc9e28ee70544c22b9ef5b81f783dd31.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117480.html" class="text-dark fw-bold text-hover-primary fs-6">遗传算法原理及案例解析</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">一、遗传算法原理 遗传算法—进化算法（Genetic Algorithm GA...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/f2de44afa5e246068dcf0b68f8aed7f3.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117481.html" class="text-dark fw-bold text-hover-primary fs-6">朴素贝叶斯学习报告</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">报告 朴素贝叶斯算法描述公式： 案例计算步骤： 一个数据集中有两个样本...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117478.html" class="text-dark fw-bold text-hover-primary fs-6">算法小课堂（一）暴力枚举</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">、 目录 一、概念 1.1相关概念 1.2应用场景 1.3局限性 二、相关问题 2.1例题1:统计 ...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117477.html" class="text-dark fw-bold text-hover-primary fs-6">OpenHarmony之doc...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">Docker使用示例 docker移植至OpenHarmony的过程可参考：https...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/img_convert/3f99b68d0d0b95af34c24f2baaaafec2.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117476.html" class="text-dark fw-bold text-hover-primary fs-6">懒人专用高并发：Actor模型</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">传统多线程实现方式 public class MultiThreadExample implemen...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/b3381897334140cfadd7b53f8839da43.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117475.html" class="text-dark fw-bold text-hover-primary fs-6">WEB安全 HTML基础</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">1.简单的HTML页面架构 <!DOCTYPE html> charset 编码 gbk gbk2...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/70530b4346544ad4821252fa57119ccc.jpeg')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117474.html" class="text-dark fw-bold text-hover-primary fs-6">算法基础---基础算法（二）</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">文章目录 高精度 高精度加法高精度减法高精度乘法高精度除法前缀和 一维前缀和二维前缀...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/de13b8956a244bf8851b7d5a9bc40d35.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117479.html" class="text-dark fw-bold text-hover-primary fs-6">【Docker】镜像的原理定制...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">文章目录镜像是什么UnionFS（联合文件系统）Docker镜像加载原理...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117473.html" class="text-dark fw-bold text-hover-primary fs-6">vue3常用 Composit...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">二、常用 Composition API 官方文档 1.拉开序幕的setup语法糖 理解...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117472.html" class="text-dark fw-bold text-hover-primary fs-6">【MySQL】实验二 简单查询</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">目录 1. 查询课程代号为1301的成绩不及格的成绩信息 2. SQL查询：查询employee的j...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/f3468881106c487284e6ced4938942a3.png')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117470.html" class="text-dark fw-bold text-hover-primary fs-6">spring启动时加载外部配置...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">平常同学们使用spring搭建工程时一些应用配置信息（例如数据库的连接配置、中间件的连...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('https://img-blog.csdnimg.cn/img_convert/c4b8de69361f7da877bfe98a40238039.jpeg')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/minsheng/117469.html" class="text-dark fw-bold text-hover-primary fs-6">《他是谁》爆火，优酷的成功并非...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">今年国产电视剧市场又进入了新一轮的爆款时代，观众在前面刚送走《三体》《狂飙》ÿ...</span>
</div>
<!--end::Title-->
</div>
</div>
<!--end::Body-->
</div>
<!--end::Chart Widget 35-->
</div>
<!--end::Col-->
</div>
</div>
<!--end::Content container-->
</div>
<!--end::Content-->
</div>
<!--end::Content wrapper-->
<!--begin::Footer-->
<div id="kt_app_footer" class="app-footer">
<!--begin::Footer container-->
<div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
<!--begin::Copyright-->
<div class="text-dark order-2 order-md-1">
<span class="text-muted fw-semibold me-1">2025 ©</span>
野仙生活网<a href="http://www.yexian114.com/">叶仙网</a><a href="http://www.weishitang.cn/">唯识网</a><a href="http://www.xingshan.vip">星闪网</a><a href="http://ask.kcwzh.com">开创问答网</a><a href="http://zhishi.yexian114.com/">知事网</a><a href="http://www.80hlw.com/">八零商务网</a><a href="http://www.zzdfzj.cn/">东方游戏网</a> </div>
<!--end::Copyright-->
<!--begin::Menu-->
<ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
<li class="menu-item">
<a href="/news/" target="_blank" class="menu-link px-2">资讯</a>
</li>
<li class="menu-item">
<a href="/minsheng/" target="_blank" class="menu-link px-2">民生</a>
</li>
<li class="menu-item">
<a href="/zhishi/" target="_blank" class="menu-link px-2">知识</a>
</li>
</ul>
<!--end::Menu-->
</div>
<!--end::Footer container-->
</div>
<!--end::Footer-->
</div>
<!--end:::Main-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::App-->
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
<span class="svg-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect>
<path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path>
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--begin::Javascript-->
<script>var hostUrl = "/static/default/pc/";</script>
<!--begin::Global Javascript Bundle(mandatory for all pages)-->
<script src="/static/default/pc/plugins/global/plugins.bundle.js"></script>
<script src="/static/default/pc/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->
<!--end::Javascript-->
</body>
<!--end::Body-->
</html>