HTML

最新推荐文章于 2025-10-13 10:43:37 发布
原创 最新推荐文章于 2025-10-13 10:43:37 发布 · 3.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

该博客围绕网页展开，介绍了网页基本信息、基本标签、图像标签、超链接标签等内容，还涉及列表、表格标签、媒体元素等。此外，对页面结构进行分析，讲解了iframe内联框架，重点阐述表单相关知识，包括get和post、文本框与多选框等。

一、网页基本信息

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">

<!--head标签代表网页头部-->
<head>
    <!-- meta描述性标签，用来描述网站的一些信息  -->
    <!-- meta一般用来做SEO(搜索优化）  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="codeparadise">
    <meta name="description" content="来这个地方可以学习编程">

    <!-- title网页标题   -->
    <title>我的第一个网页</title>
</head>

<!--body代表网页主体-->
<body>

Hello,World!

</body>
</html>

二、网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>会当凌绝顶</p>

<p>一览众山小</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
会当凌绝顶 <br/>
一览众山小 <br/>

<!--粗体，斜体-->
<h1>字体样式标签</h1>

粗体：<strong>I love you</strong>
斜体：<em>I love you</em>

<br/>
<!--特殊符号-->

空    格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>
&gt;
<br/>
&lt;
&copy;版权所有canoe

</body>
</html>

三、图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--image学习
src:图片地址(必填）
    相对地址（推荐使用），绝对地址
    ../  --上一级目录
alt:图片名字（必填）
-->
<img src="../../resource/image/background.jpg" alt="canoe'photo" title="悬停文字" width="400" height="400">

</body>
</html>

四、超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--使用name作为标记-->
<a name="top">顶部</a>

<!--a标签
href: 必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
    _blank  在新网页打开
    _self   在自己的网页中打开
-->
<a href="ImageLabel.html" target="_blank">点击我跳转到图像标签</a>
<br/>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>

<br/>
<a href="MyFirstHTMLWebPage.html">
    <img src="../../resource/image/background.jpg" alt="canoe'photo" title="悬停文字" width="400" height="400">
</a>

<p>
    <br/>
    <a href="MyFirstHTMLWebPage.html">
        <img src="../../resource/image/background.jpg" alt="canoe'photo" title="悬停文字" width="400" height="400">
    </a>
</p>

<p>
    <br/>
    <a href="MyFirstHTMLWebPage.html">
        <img src="../../resource/image/background.jpg" alt="canoe'photo" title="悬停文字" width="400" height="400">
    </a>
<p>
    <br/>
    <a href="MyFirstHTMLWebPage.html">
        <img src="../../resource/image/background.jpg" alt="canoe'photo" title="悬停文字" width="400" height="400">
    </a>
<p>
    <br/>
    <a href="MyFirstHTMLWebPage.html">
        <img src="../../resource/image/background.jpg" alt="canoe'photo" title="悬停文字" width="400" height="400">
    </a>
<p>
    <br/>
    <a href="MyFirstHTMLWebPage.html">
        <img src="../../resource/image/background.jpg" alt="canoe'photo" title="悬停文字" width="400" height="400">
    </a>
<p>
    <br/>
    <a href="MyFirstHTMLWebPage.html">
        <img src="../../resource/image/background.jpg" alt="canoe'photo" title="悬停文字" width="400" height="400">
    </a>
</p>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>

<a name="down">down</a>

<!--功能性链接
邮件链接：mailto:
-->
<a href="mailto:1194571700@qq.com">邮件联系我</a>

</body>
</html>

五、列表

<!DOCTYPE html>
<html lang="en" xmlns:dl="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>

<!--有序列表
应用范围：试卷，问答
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>

<br/>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容


-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
    <dt>位置</dt>

    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>

</dl>

</body>
</html>

六、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--表格table
行 tr
列 td
-->
<table border="1px">
    <tr>
<!-- colspan 跨列  -->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
<!--  rowspan  跨行  -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>


</body>
</html>

七、媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../../resource/video/video.mp4" controls autoplay></video>
<audio src="../../resource/audio/audio.mp3" controls autoplay></audio>

</body>
</html>

八、页面结构分析

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

九、iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架学习</title>
</head>
<body>

<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->

<!--iframe内联框架
src:地址
-->
<!--<iframe src="https://www.baidu.com" width="1000px" height="800px"></iframe>-->

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<a href="http://www.codeparadise.tech" target="hello">点击跳转到我的博客</a>

</body>
</html>

十、表单

1.初始get,post

<!--表单学习-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action:表达提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get提交方式
    get方式：我们可以在url中看到我们提交的信息，不安全，高效
    post方式：比较安全，传输大文件
-->

<form action="MyFirstHTMLWebPage.html" method="get">
    <!-- 文本输入框：input type="text"   -->
    <p>名字: <input type="text" name="user name"> </p>

    <!-- 密码框：input type="password"   -->
    <p>密码：<input type="password"> </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

在这里插入图片描述

2.文本框和多选框

<!--表单学习-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action:表达提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get提交方式
    get方式：我们可以在url中看到我们提交的信息，不安全，高效
    post方式：比较安全，传输大文件
-->

<form action="MyFirstHTMLWebPage.html" method="get">
    <!-- 文本输入框：input type="text"
       value="canoe is cool 默认初始值
       maxlength="8"  最长能写几个字符
       size="30"    文本框的长度
       -->
    <p>名字: <input type="text" name="user name"> </p>

    <!-- 密码框：input type="password"   -->
    <p>密码：<input type="password"> </p>

    <!-- 单选框标签
       input type="radio"
       value  单选框的值
       name  表示组
       -->

    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

3.所有

<!--表单学习-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action:表达提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get提交方式
    get方式：我们可以在url中看到我们提交的信息，不安全，高效
    post方式：比较安全，传输大文件
-->

<form action="MyFirstHTMLWebPage.html" method="get">
    <!-- 文本输入框：input type="text"
       value="canoe is cool 默认初始值
       maxlength="8"  最长能写几个字符
       size="30"    文本框的长度
       readonly  只读
       disabled  禁用
       placeholder  提示信息
       required  非空判断
       -->
<!--    <p>名字: <input type="text" name="user name" value="admin" readonly> </p>-->
    <p>名字: <input type="text" name="user name" placeholder="请输入用户名" required> </p>
    <!-- 密码框：input type="password"
      hidden隐藏,可以用来传输默认的value
      -->
    <p>密码：<input type="password" name="pwd" value="123456" hidden> </p>

    <!-- 单选框标签
       input type="radio"
       value  单选框的值
       name  表示组
       -->

    <p>性别：
        <input type="radio" value="boy" name="sex" disabled>男
        <input type="radio" value="girl" name="sex">女
    </p>

    <!-- 多选框
       input type="checkbox"
       -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">写代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="=game" name="hobby">游戏
    </p>

    <!-- 按钮
       input type="button" 普通按钮
       input type="image" 图像按钮
       input type="submit"  提交按钮
       input type="reset"  重置按钮
       -->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../../resource/image/background.jpg">
    </p>

    <!-- 下拉框，列表框
       -->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="ind">印度</option>
        </select>
    </p>

    <!-- 文本域   -->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

    <!-- 文件域   -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!-- 邮件验证   -->
    <p>邮箱：
        <input type="email" name="email">
    </p>

    <p>自定义邮箱：
        <input type="text" name="diyemail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

    <!-- URL   -->
    <p>URL:
        <input type="url" name="url">
    </p>

    <!-- 数字   -->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

    <!-- 滑块   -->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

    <!-- 搜索框   -->
    <p>搜索：
        <input type="search" name="search" id="mark">
    </p>

    <!--    增强鼠标可用性-->
    <p>
        <label for="mark">点我</label>
        <input type="text">
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>


</form>

</body>
</html>
HTML入门02
weixin_41468241的博客
01-19 4225
a>2、双标签：h1-h6、div、文本颜色、p段落、a、ul li。5、锚点？如：div、ol、ul、li、dl、dt、dd、h1-h6。4、
html页面-跨年列车
qq_42786593的博客
12-24 2466
​ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>2025列车到站</title> <meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">
HTML5详解
Angelia Zheng
10-12 1101
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG 指 Web Hypertext Application Technology Working Group。 HTML5 中的新特性： 用于绘画的 canvas 元素 用于媒介回放的 vid...
Bootstrap HTML编码规范
最新发布
m0_57545130的博客
10-13 614
Bootstrap HTML 编码规范总结：遵循HTML5标准，使用语义化标签（如<header>、<nav>）和响应式布局，通过类名（如.container、.btn）应用样式。关键点包括：声明<!DOCTYPE html>，设置UTF-8编码和viewport，严格遵循网格系统（.row/.col-*）和组件结构（如Modal的嵌套规则）。Bootstrap 5使用data-bs-*属性，而Bootstrap 2依赖data-*和jQuery。始终添加ARIA属性提升
【标题】写一个2048小游戏
2302_81218205的博客
01-12 3957
好的，下面是一个完整的2048游戏的HTML代码示例，包括HTML、CSS和JavaScript部分。你可以将这三段代码保存在同一个文件夹中，打开HTML运行。• 打开一个文本编辑器，例如Notepad++、Sublime Text、Visual Studio Code等。• 将文件保存为`index.html`。• 将文件保存为`styles.css`。3.创建JavaScript文件。1.创建HTML文件。
详解HTML
一个技术宅
10-25 496
1. HTML 1.1. HTML概述 1.1.1. HTML是什么 Html(Hyper Text Mark-up Language)就是超文本标记语言的简写，是最基础的网页语言。 实验：查看网页的源代码 1.1.2. HTML基本结构 Html是通过标签来定义的语言，代码都是由标签所组成。 Html代码不用区分大小写。 Html代码由开始结束。里面由头部分和体部分两部分组成。
HTML表单详解
saraspeer的专栏
04-09 5132
Web页面是一种文档，HTML就是用来编写这些文档的一种标记语言，文档的结构和格式的定义是由HTML元素来完成的，HTML元素是由单一或一对标签定义的包含范围。表单在HTML文档和用户之间，提供了一种交互的方式。利用表单，可以提交信息到Web服务器。1.表单与服务器的交互过程利用表单填写好信息以后，点击“提交”按钮，信息就会被浏览器发送到服务器端。当服务器端收到信息后，对这些信息进行一
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
html网页设计大作业
01-04
HTML网页设计是构建互联网内容的基础，它是一种标记语言，用于定义网页的结构和内容。在这个“html网页设计大作业”中，我们关注的重点是植物相关的主题，这表明学习者可能在创建一个关于植物的网站，旨在展示信息或...
HTML5实现下雨 水波特效
03-26
在本文中，我们将深入探讨如何使用HTML5的Canvas API来实现一种令人印象深刻的视觉效果——下雨与水波特效。HTML5 Canvas是一个强大的图形绘制工具，它允许开发者通过JavaScript动态地在网页上绘制2D图像。结合CSS3...
仿京东商城H5主页面源代码，html、css、js 下载
05-13
【标题】"仿京东商城H5主页面源代码"是一个项目，旨在重现京东商城的移动端网页界面，通过HTML、CSS和JavaScript技术实现。这个项目可以帮助开发者理解和学习如何构建响应式、交互性强的电商网站前端。 【描述】...
HTML详解
m0_58468567的博客
01-27 2155
html的运用
HTML语言入门
ZQ_abc的博客
09-26 1608
HTML5语言入门 在接触HTML时，很多人可能会有一个疑问到底什么是HTML呢？HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。HTML在开发时遵循的是W3C标准，下面我们就来了解一下HTML。 HTML的发展史 （1）超文本标记语言——1993年6月发布； （2）HTML2.0——1995年11月发布； （3）HTML3.2——1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值