HTML笔记

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

#html #html5 #css

初识HTML

HTML:骨架

CSS：美化网页

Javascript:交互

JQuery：封装JavaScript的库

HTML(Hyper Text Markup Language)超文本标记语言

所有浏览器都对HTML5支持

W3C

  • World Wide Web Consortium(万维网联盟)
  • 成立于1994年，Web领域最权威和具影响力的国际中立性技术标准机构
  • http://www.w3.org/
  • http://www.chinaw3c.org/

W3C标准包括

  • 结构化标准语言(HTML,XML)
  • 表现标准语言(CSS)
  • 行为标准(DOM,ECMAScript)

在这里插入图片描述

在这里插入图片描述

网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>

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

    <!--换行标签-->

    可能只是犯了错误<br /> 可以没有任何包袱
    <br/> 我可以摇头晃脑

    <br/> 也可以停下脚步

    <br/> 我可以为你臣服

    <br/>

    <!--粗体，斜体-->
    <h1>字体样式标签</h1>
    粗体:<strong>i love you</strong> 斜体:
    <em>i love you</em>
    <br/>

    <!--特殊符号-->
    <!--打再多空格也只有一个空格，要用特殊符号&nbsp;-->
    空格 空格<br/> 空格&nbsp;空格
    <!--gt是大于号 lt是小于号 copy是版权符号-->
    &gt;<br/> &lt;
    <br/> &copy;版权所有 刘心哲<br/>

</body>

</html>

图像，超链接，网页布局

图像标签
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>

<body>
    <!--图片路径，相对地址和绝对地址，一般绝对地址不用，因为可移植性差-->
    <!--  ../   表示上一级目录-->
    <img src="image/美女1.jpg" alt="美女照片1" title="美女图片1" width="200" height="100">

</body>

</html>
链接标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接标签</title>
</head>

<body>
    <!--a标签
    href:必填，表示要跳转到哪个页面
    target:表示窗口在哪里打开  _self表示在当前页面打开，_blank表示在新页面打开
    -->
    <a href="网页基本标签.html" target="_blank">点击跳转到网页基本标签页面</a>
    <a href="https://www.baidu.com">点击跳转到百度</a><br>

    <!--使用name作为标记-->
    <a name="top">顶部</a>
    <!--图片也能点击跳转-->
    <a href="网页基本标签.html">
        <img src="image/美女1.jpg" alt="美女图片" width="300" height="300">
    </a><br>

    <a href="网页基本标签.html">
        <img src="image/美女1.jpg" alt="美女图片" width="300" height="300">
    </a> <br>
    <a href="网页基本标签.html">
        <img src="image/美女1.jpg" alt="美女图片" width="300" height="300">
    </a> <br>
    <a href="网页基本标签.html">
        <img src="image/美女1.jpg" alt="美女图片" width="300" height="300">
    </a><br>
    <a href="网页基本标签.html">
        <img src="image/美女1.jpg" alt="美女图片" width="300" height="300">
    </a><br>
    <a href="网页基本标签.html">
        <img src="image/美女1.jpg" alt="美女图片" width="300" height="300">
    </a><br>
    <a href="网页基本标签.html">
        <img src="image/美女1.jpg" alt="美女图片" width="300" height="300">
    </a><br>
    <a href="网页基本标签.html">
        <img src="image/美女1.jpg" alt="美女图片" width="300" height="300">
    </a><br>
    <a href="网页基本标签.html">
        <img src="image/美女1.jpg" alt="美女图片" width="300" height="300">
    </a><br>
    <!--锚链接
    1.需要一个标记
    2.跳转到标记
    #
    -->
    <a href="#top">回到顶部</a>

    <!--锚标记还能实现不同页面间的跳转
    我们从图像标签页面跳转到链接标签页面
    -->
    <!--在图像标签html中加了这个-->
    <a href="链接标签.html#down">跳转到链接页面</a>
    
    
    <a name="down">down</a><br>

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

</html>
行内元素与块元素

块元素

  • 无论内容多少，该元素独占一行
  • (p,h1…)

行内元素

  • 内容撑开宽度，左右都是行内元素的可以在排在一行
  • (a,strong,em…)

列表，表格，媒体元素

列表标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>


    </ul>



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

    应用范围：网站底部
    -->
    <dl>
        <dt>学科</dt>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>运维</dd>
        <dd>前端</dd>
        <dd>C/C++</dd>

        <dt>老家</dt>
        <dd>上海</dd>
        <dd>泉州</dd>

    </dl>




</body>

</html>

表格标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>

<body>
    <!--表格table
行  tr
列  td
-->

    <table border="1px">
        <tr>
            <!--colspan跨列-->
            <td colspan="4">1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</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>
            <td>3-4</td>
        </tr>

    </table>



</body>

</html>

在这里插入图片描述

媒体元素
  • 视频元素 video
  • 音频元素 audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体元素</title>
</head>
<body>
    <!--音频和视频
    src:资源路径
    controls:控制条
    autoplay:自动播放
    -->
<video src="/video/片头.mp4" controls autoplay></video>

<audio src="/audio/我爱你.mp3" controls autoplay></audio>

</body>
</html>
页面结构分析

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面结构</title>
</head>

<body>
    <header>
        <h1>网页头部</h1>
    </header>

    <section>
        <h2>网页主体</h2>
    </section>
    <footer>
        <h2>网页脚部</h2>
    </footer>

</body>

</html>
iframe 内联框架

就是指一个网页中嵌套着另外一个网页

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe框架</title>
</head>

<body>
    <!--iframe 内联框架
    src:地址
    w-h:宽度高度
    -->
    <iframe src="https://www.bilibili.com/" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
    <a href="htttps://www.bilibili.com/" target="hello">点击跳转</a>
</body>

</html>

表单及表单应用

表单语法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册</title>
</head>

<body>
    <h1>注册</h1>

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

    <form action="网页基本标签.html" method="GET"></form>
    <!--文本输入框：input type="text"-->
    <p>名字: <input type="text" name="username" id=""></p>
    <p>密码: <input type="password" name="pwd" id=""></p>


    <p>
        <input type="submit" name="" id="">
        <input type="reset" name="" id="">
    </p>
</body>

</html>

#### 文本框和单选框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-35ymrrI9-1633616857526)(F:%5C%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99%5C%E7%8B%82%E7%A5%9E%E8%AF%B4%5CHTML%E5%9B%BE%E7%89%87%5C%E5%9B%BE%E7%89%879.png)]

name相同就是一个组

单选只有在一个组的时候才能实现只选一个

在这里插入图片描述

上图的内容都在里面

所有表单元素都需要一个name属性

在这里插入图片描述

在这里插入图片描述

表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled

表单初级验证

常用方式：

  • placeholder 提示信息
  • required 非空判断
  • pattern 正则表达式
HTML笔记整理（个人笔记）
w3535222的博客
03-07 4088
个人笔记
关于HTML的笔记
2301_81208699的博客
10-27 1165
概念：自定义列表（一个包含术语名称以及术语描述的列表，dl一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述。dt,dd可连续多个。
HTML笔记（精简）
weixin_46160720的博客
03-08 1796
html 笔记 vscode 前端三大件
html笔记（完整版）
kaluomeng的博客
06-07 4268
标记 类型 译名或意义 作 用 备注 文件标记 ● 文件声明 让浏览器知道这是HTML文件 ● 开头 提供文件整体信息 ● 标题 定义文件标题，将显示于窗口标题 ● 本文 设计文件格式及内文所在 段落标记 ○ 说明标记 为文件加上说明，但不被显示 ○ 段落标记 为文字、图片、表格等之间留一空白行 ○ 换行标记 令文字、图片、表格等显示于下一行 ○ 水平线 插入一条水平线 ● 居中 令文字、图片、表格等显示...
html笔记
热门推荐
一个帅气潇洒的豆子
03-03 1万+
html笔记一、html简介 1、html是什么 Html是用来描述网页的一种语言。 (1)HTML 指的是超文本标记语言 (Hyper Text Markup Language) (2)HTML 不是一种编程语言，而是一种标记语言(markup language,标记语言是一套标记标签(markup tag));
使用onenote记HTML笔记,如何在Windows 10中使用OneNote做笔记
weixin_33502772的博客
06-15 1435
Microsoft OneNote与Windows 10捆绑在一起。这意味着您不必购买Office套件的零售副本或支付Office 365订阅费用就可以使用OneNote记笔记。OneNote是一种数字笔记本，可在您工作时自动保存和同步您的笔记。使用OneNote，您可以执行以下操作：1.在笔记本中输入信息或从其他应用程序和网页中插入信息。2..做手写笔记或画出您的想法。3.使用突出显示和标签可以...
kindle中html笔记,如何将kindle阅读器中的笔记、标注导出。，这几步你要了解
weixin_39671405的博客
06-23 2129
在Kindle上读过书后，却不知道怎么将阅读过程中做的笔记、标注导出？下面向大家介绍一种将kindle阅读器中的笔记导出的方法。工具/材料kindle数据线一条可上网电脑一台印象笔记账号(可选)方法/步骤 连接kindle01第一步，将kindle用数据线和电脑连接，并处于该模式，备用。如图好了，以上就是大致内容了，(END)方法/步骤2 进入网站01进入下图网站，因为经验无法加载外链02进入页面...
网页设计html 笔记
优快云_liudong888的博客
04-22 1501
html介绍； 定义：超文本标记语言，不是编程语言； 包含：图片，链接，视频，文档，文字，表格 功能：测试前端页面元素，做ui自动化测试需要理解元素定位； 特点：简易性，可拓展性 （3）平台无关性 （4）通用性 什么人员使用html？ （1）前端开发 javascript+html+css H5==html5 （html第5版本） 前端开发的职责：负责页面涉及，页面排版 后端开发：负责后台业务逻辑，使用编程语言，前后端需要业务对接 （2）测试人员 定位元素，实现ui自动化 5、html 查看方式
html5——前端笔记
qq_48721706的博客
09-02 3327
html笔记
HTML+CSS+JS笔记
2301_79880794的博客
01-18 2250
超文本标记语言编程语言标记语言web 页面。
HTML 笔记.zip
02-06
这个“HTML笔记.zip”文件显然包含了关于HTML的学习资料，可能包括了基础概念、语法、元素、属性、标签等内容，帮助初学者或进阶者巩固和理解HTML的核心知识。 在HTML中，我们通过一系列的标签来构建网页结构。例如...
HTML笔记传智讲师视频笔记适合初学者
04-16
"HTML笔记传智讲师视频笔记适合初学者"这个标题暗示了这是一份针对初学者的教程资料，可能包含了从基础到进阶的HTML知识，通过传智讲师的教学方式来讲解。 描述中的"html学习笔记"表明这是关于HTML学习的过程记录，...
精选资源
HTML笔记.pdf
07-14
"HTML笔记.pdf" HTML笔记.pdf是一个详细的HTML笔记，涵盖了HTML的基础知识、标签、属性、事件、表单、超链接、图像、表格、列表等内容。下面是从文件中提取的相关知识点： 1. HTML基础知识： * DOCTYPE html是...
HTML笔记.txt
02-25
自己总结的html笔记标签 非常适合初学者参考大牛复习 每个标签都标注了用途 需要的可以下载。
HTML笔记总结(1).md
04-25
HTML笔记总结(1).md
HTML应用指南：利用POST请求获取全国极氪门店位置信息
weixin_45812624的博客
12-03 1547
本篇文章介绍了通过程序化方式采集并分析极氪全国门店数据的完整流程。基于对官网接口的解析，利用 Python 自动请求市级行政区编码，并批量调用门店查询接口，高效获取包含门店名称、地址、高德经纬度、营业时间及开业日期等字段的结构化数据。针对地理坐标，文章对高德（GCJ-02）坐标系进行了标准化转换，确保后续在地图平台上的精准可视化；同时将原始时间戳统一处理为标准日期格式，支撑时间维度分析。在此基础上，揭示出极氪门店“核心城市群密集布局、区域中心精准覆盖”的空间策略。
使用 HTML + JavaScript 实现手写签名功能
最新发布
QQ26843500的博客
12-04 880
本文介绍了一个基于HTML5 Canvas实现的手写签名网页应用。该应用主要功能包括： 提供米字格背景和范字（"海纳百川"）作为书写参考 支持鼠标和触摸屏两种书写方式 包含清空画布和下载签名图片两个功能按钮 技术实现上使用双Canvas叠加方案，底层Canvas绘制米字格和范字作为引导层，上层Canvas实现手写功能。通过JavaScript事件监听实现笔迹追踪，采用贝塞尔曲线平滑处理书写轨迹。响应式设计适配不同设备，并提供PNG格式的签名下载功能。整体界面简洁，采用蓝色标题栏和白色书写
HTML DOM 对象
wjs2024的博客
12-02 480
DOM（Document Object Model）是一种抽象的模型，用于表示 HTML 和 XML 文档。通过 DOM，开发者可以访问和操作文档中的任何元素，如文本、图像、链接等。DOM 对象化地表示了网页的结构，使得开发者可以像操作对象一样操作网页内容。HTML DOM 对象是网页设计和开发的基础，掌握 DOM 对象的基本概念、常用方法和实际应用，将有助于提高开发效率和代码质量。本文对 HTML DOM 对象进行了简要介绍，希望对您有所帮助。
HTML 基础
wjs2024的博客
12-02 359
HTML是构建网页和网站的基础，掌握HTML基础知识对于成为一名优秀的网页开发者至关重要。本篇文章为您介绍了HTML的发展历程、基本结构、常用标签以及一些高级特性。希望您能够通过学习，更好地掌握HTML，为您的网页开发之路打下坚实的基础。
HTML笔记应用开发指南
在笔记应用中，HTML用于创建和呈现笔记的界面，包括文本框、按钮、列表等界面元素。用户可以通过HTML编写和编辑笔记内容，同时HTML也可以支持一些基本的格式化，如加粗、斜体、列表等。 3. 笔记应用的功能特点：一...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值