HTML基础

最新推荐文章于 2025-11-30 16:12:23 发布
原创 最新推荐文章于 2025-11-30 16:12:23 发布 · 205 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

Html

Html

Hyper Text Markup Language（超文本标记语言）

W3C

World Wide Web Consortium（万维网联盟）

W3C标准包括

  • 结构化标准语言（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

我的第一个网页

<!-- DOCTYPE:告诉浏览器，我们要使用寿命规范 -->

<!DOCTYPE html>
<!-- head标签代表网页头部-->
<html lang="en">
<head>
    <!--meta描述性标签，用来描述我们网站的一些信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="Html">
    <meta name="descript" content="Java学习">
    <!-- title网页标题   -->
    <title>我的第一个网页</title>
</head>
<body>

HelloWorld!

</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>爱你每个结痂伤口</p>
<p>酿成的陈年烈酒</p>
<p>入喉尚算可口</p>
<p>怎么泪水还偶尔失守</p>
<p>邀你细看心中缺口</p>
<p>裂缝中留存温柔</p>
<p>此时已莺飞草长爱的人正在路上</p>
<p>我知他风雨兼程途经日暮不赏</p>
<p>穿越人海只为与你相拥</p>
<p>此刻已皓月当空爱的人手捧星光</p>
<p>我知他乘风破浪去了黑暗一趟</p>
<p>感同身受给你救赎热望</p></p>

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

<!--换行标签-->
偏偏秉烛夜游<br/>
午夜星辰似奔走之友<br/>
爱你每个结痂伤口<br/>
酿成的陈年烈酒<br/>
入喉尚算可口<br/>
怎么泪水还偶尔失守<br/>
邀你细看心中缺口<br/>
裂缝中留存温柔<br/>
此时已莺飞草长爱的人正在路上<br/>
我知他风雨兼程途经日暮不赏<br/>
穿越人海只为与你相拥<br/>
此刻已皓月当空爱的人手捧星光<br/>
我知他乘风破浪去了黑暗一趟<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;
<br/>
&copy;版权所有香槟

<!--特殊符号记忆方式
&  ；
-->
</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src：图片地址（必填）
    相对地址（推荐使用），绝对地址
    ../ --上一级目录

alt：图片名字（必填）
-->
<img src="../resources/image/许光汉.jpg" alt="香槟头像" title="悬停文字" width="500" height="300">
</body>
</html>

链接标签

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

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


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

<br/>

<a href="1.我的第一个网页.html">
    <img src="../resources/image/许光汉.jpg" alt="香槟头像" title="点击看看" width="500" height="300">
</a>

<p>
    <a href="1.我的第一个网页.html">
    <img src="../resources/image/许光汉.jpg" alt="香槟头像" title="点击看看" width="500" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html">
    <img src="../resources/image/许光汉.jpg" alt="香槟头像" title="点击看看" width="500" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html">
    <img src="../resources/image/许光汉.jpg" alt="香槟头像" title="点击看看" width="500" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html">
    <img src="../resources/image/许光汉.jpg" alt="香槟头像" title="点击看看" width="500" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html">
    <img src="../resources/image/许光汉.jpg" alt="香槟头像" title="点击看看" width="500" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html">
    <img src="../resources/image/许光汉.jpg" alt="香槟头像" title="点击看看" width="500" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html">
    <img src="../resources/image/许光汉.jpg" alt="香槟头像" title="点击看看" width="500" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/许光汉.jpg" alt="香槟头像" title="点击看看" width="500" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/许光汉.jpg" alt="香槟头像" title="点击看看" width="500" height="300">
    </a>
</p>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
3.#
-->

<a href="#top">回到顶部</a>



<!--功能性链接
邮件链接：mailto
QQ链接
-->
<a href="mailto:邮箱地址">点击联系我</a>

<!--QQ推广里面查找推广链接代码-->



</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<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>

<hr/>

<!--无序列表
应用范围：导航，侧边栏...
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
    <hr/>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容

应用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
    <dd>C++</dd>

    <hr/>
    <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   rows
列  td   cols
-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->

        <td colspan="4">1-1</td>
    </tr><tr>
        <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="../resources/video/hug.mp4" controls autoplay width="1920" height="960"></video>-->

<audio src="../resources/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</title>
</head>
<body>

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

<a href="https://blog.forgetxb.com" target="hello">点击跳转</a>

<!--<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>-->
</body>
</html>

表单

<!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="1.我的第一个网页.html" method="post">

    <!--文本输入框：input type = "text"
    value="香槟好帅"   默认初始值
    maxlength="6"     最长可写字符
    size="26"         文本框的长度
    -->
    
    <p>名字：<input type="text" name="username" value="香槟好帅" maxlength="6" size="26"
                 placeholder="请输入用户名" required>
    </p>

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

    <!--单选框标签
    input type="radio"
    value：单选框的值
    name：表示组
    -->
    <p>性别
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <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="../resources/image/许光汉.jpg" width="200" height="100">
    </p>


    <!--下拉框，列表框
    -->

    <p>国家：
        <select name="列表名称">
            <option value="China" selected>中国</option>
            <option value="US">美国</option>
            <option value="Aus">澳大利亚</option>
            <option value="Ru">瑞士</option>
        </select>
    </p>
    
    <!--文本域
        cols="30" rows="10"
    -->
    <p>反馈：
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
    </p>
    
    <!--文件域
        input type="file" name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    
    <!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </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="text" name="diymail" pattern="">
    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
    
    <!--滑块
    -->
    
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
    
    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

    <!--表单的应用
    隐藏域：hidden
    只读：readonly
    禁用：disabled
    -->
    <!--表单初级验证
    placeholder：提示信息
    required：   非空判断
    pattern：    正则表达式
    -->
</form>
</body>
</html>
HTML基础知识入门大全
HTDiiii的博客
08-20 3785
HTML 什么是 HTML HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。 HTML 标签/元素 HTML 属性 第一个 HTML <!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 3159
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML基础知识
xuan971130的博客
03-02 3113
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
前端-HTML基础知识详解
qq_52262831的博客
12-23 5175
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
HTML基础框架
Black_Ball的博客
01-01 3462
目录 HTML显示文本 HTML显示图片 HTML播放音乐 HTML询问用户 HTML布局 HTML显示文本 HTML显示图片 HTML播放音乐 HTML询问用户 HTML布局
一篇笔记总结HTML基础知识
2301_78933228的博客
07-28 3027
它们都是标签的属性，很多标签都需要借助标签的属性来设置标签对应的展示效果。form标签的action属性的属性值为后台服务器的地址，这样用户使用了提交按钮后就可以真的把用户的信息传递到后端服务器，使用了重置按钮后输入的信息才会真的重置。除了基本的表格标签外，如果想要在表格中设置表格大标题和表头单元格（表格的第一行内容），可以使用caption（双）和th（双）标签来设置。从表格中可以看到两种不同的标签对应的作用却是相同的。因此，标签的学习可以分为四个部分：排版标签、文本格式化标签、媒体标签、链接标签。
【HTML基础】HTML的基本结构
ebb29bbe的博客
09-13 7199
HTML基本结构包含html标记，head标记，body标记...
HTML基础语句
wfr661的博客
08-05 2679
HTML基础语句 1、HTML语句框架 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- ①标签不能交叉嵌套 --> 正确：<p><i>早安，Alex</i></p> 错误：<p&
web前端面试-10大经典题（HTML基础）
厚积薄发.
11-21 4731
web前端面试-10大经典题（HTML基础） ✨个人笔记博客✨星月前端博客✨原创不易，还希望各位大佬支持一下✏️评论，你的意见是我进步的财富！
HTML基础教学：构建简易个人网站实例
### HTML基础 HTML是构建网页的标准标记语言，用于定义网页的内容结构。网页通过使用HTML标签来组织内容。例如，`<html>`标签标志着HTML文档的开始和结束，而`<head>`部分包含了文档的元数据（metadata），`<body>`...
HTML基础_3_HTML元素周期表
共同学习，心怀感激。
07-12 2999
作者： 吴志春 “此篇为HTML基础第三篇，通过以上的基础1和2，现在我们来认识整个HTML元素。此篇文章重点在于教大家需要查找文档。” HTML元素周期表 html元素周期表包含了HTML所有的元素，见下图HTML元素周期表。 元素周期表的获取后两个地方 中文 ： 中文HTML元素周期表链接 英文: 英文HTML元素周期表链接 点进去链接即可看到HTML元素周期表。这些就是就是HTML的所有元素，对于初学者，尽量每一个都去了解一下。接下来，教大家如何使用文档，并查看每个元素的具体信息。
网页设计（一）——HTML基础概念
初学者
07-11 7427
前言：好久没更新过优快云博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。 目录 HTML基础概念 HTML是什么 HTML标签 HTML标签——实例1 建立一个HTML文档——实例2 HTML标签的属性和样式——实例2.5 总结.
一、WEB安全 01——HTML基础
qwsn
07-05 2172
一、WEB安全01——HTML基础 1、HTML基础 01——HTML页面结构、HTML标签、文本属性 （1）简单的HTML页面结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> //charset编码的值有：gbk
Web前端开发 北京林业大学 HTML基础-单元测试
nonlinearthink的博客
03-23 6947
1.HTML文件中，下面（ ）标签中包含了网页的全部内容。 编号 选项 A … B … C … D … 2.以下说法中，正确的是： 编号 选项 A 多个p标签可以产生多个空行 B p标签里面是段落内容，文字需要br标签才能换行，不能自动换行 C p标签与br标签的作用一样 D 多个br标签可以产生多个空行 3.以下标记符中，没有对应的...
DOM HTML：深入解析网页元素的操作与管理
lly202406的博客
11-29 495
DOM 是一种用于解析和操作 HTML 或 XML 文档的对象模型。它将文档中的每个元素都表示为一个对象，使得开发者可以轻松地访问和修改这些元素。DOM 和 HTML 是构建网页的基石。通过熟练掌握 DOM 操作，开发者可以更好地实现网页的交互和功能。本文对 DOM 和 HTML 的关系进行了详细解析，并介绍了 DOM 操作的基本方法。希望对您有所帮助。
自动化测试报告样式终极对比：HTMLTestRunner vs BeautifulReport vs HTMLReport vs Allure
最新发布
2501_94261392的博客
11-30 411
本文对比分析了四种主流软件测试报告工具：HTMLTestRunner适合轻量级快速验证，BeautifulReport提供美观UI，HTMLReport功能全面，Allure则是企业级解决方案。文章指出工具选择应平衡团队需求与技术能力，建议敏捷团队使用BeautifulReport+HTMLReport组合，质量团队以Allure为主，开源项目可选用HTMLTestRunner。未来趋势建议混合使用工具、二次开发定制模板，并实现自动化归档和智能分析，使测试报告真正成为质量改进的有效工具而非形式化输出。
【HTML+CSS】使用HTML与后端技术连接数据库
2509_94088455的博客
11-29 351
HTML负责构建网页的骨架，提供用户交互的表单等元素。用户通过表单输入数据，并通过表单的提交（submit）事件将数据发送到后端。
HTML——表单类的标签【头歌educoder】
m0_73879806的博客
11-29 661
本文介绍了HTML表单元素的常见类型及使用方法。主要内容包括：1)文本框(input type="text")和密码框(input type="password")的创建；2)单选框(input type="radio")和多选框(input type="checkbox")的使用及分组方法；3)checked属性设置默认选中项和disabled属性禁用选项；4)label标签提高表单可用性；5)下拉列表(select)的创建。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值