HTML笔记

最新推荐文章于 2025-07-23 09:35:45 发布
最新推荐文章于 2025-07-23 09:35:45 发布
阅读量362 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44248045/article/details/108502530

HTML学习笔记


说明：主要是代码，然后一些知识点的总结都在代码的注释里面

我的第一个网页

<!--DOCTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!-- meta描述性标签，它用来描述我们网站的一些信息   -->
    <!-- meta一般用来做SEO   -->
    <meta charset="UTF-8">
    <meta name="keywords" content="灰灰在学习呀！">
    <meta name="description" content="学习html知识">
    <!-- title 网页的标题    -->
    <title>Title</title>
</head>
<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>
<!--段落标签 -->
<p>时尚大方笔记本的</p>
<p>时尚大方笔记本的</p>
<!-- 换行标签-->
<p>时尚大方<br/>笔记本的</p>

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

<!--字体 -->
<strong>i love you</strong><br/>
<em>i love you</em>

<!--特殊符号 -->
空      格：
空&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
大于号：&gt;<br/>
小于号：&lt;<br/>
版权符号：&copy;<br/>
</body>
</html>

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--
    图片标签：
    src：图片地址（相对路径（推荐使用）、绝对路径）
    ../  上一级目录
    alt:图片名字
-->
<img src="../resources/image/html图片的属性.png" alt="图片加载失败时的替代文字"
     title="鼠标悬停的文字" width="900px" height="700px">
<br/>

<a href="4、链接标签.html#down">跳转到链接标签的底部</a>
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用name作为标记 -->
<a name="top">顶部</a>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>

<!--a标签：
    href：跳转的地址
    target：表示窗口在哪里打开
        _banlk:在新的标签页面中打开
        _self：在自己的网页打开

-->
<!--可以点击图片进行跳转 -->
<a href="1、我的第一个网页.html" >
    <img src="../resources/image/html图片的属性.png" alt="图片加载失败时的替代文字" title="鼠标悬停的文字" width="500px" height="300px">
</a>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>
<p>liuhuisdfbsfbhbf</p>

<!--
    锚标记
    1、需要一个锚标记
    2、跳转到标记
    #+标记的名字
-->
<a href="#top">回到顶部</a>
<br>

<!--
功能性链接：
    邮件链接：mailto；
    qq邮箱
-->
<a href="mailto:1594366541@qq.com">通过灰灰的邮箱联系她</a>
<br/>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，请加我qq" title="你好，请加我qq"/>
</a>
<br/>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="你好，请加我qq" title="你好，请加我qq"/>
</a>
<br/>
<a name="down">底部</a>
</body>

列表

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

<!--有序列表
应用范围：试卷，问答
-->
<ol>
    <li>python</li>
    <li>java</li>
    <li>php</li>
    <li>c++</li>
</ol>

<hr/>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
    <li>python</li>
    <li>java</li>
    <li>php</li>
    <li>c++</li>
</ul>
<hr/>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
公司网站底部
-->
<dl>
    <dt>学科</dt>
        <dd>Java</dd>
        <dd>C</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="4px">
    <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>

<!--练习-->

<table border="3px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">灰灰</td>
        <td>语文成绩</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学成绩</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">嘻嘻</td>
        <td>语文成绩</td>
        <td>90</td>
    </tr>
    <tr>
        <td>数学成绩</td>
        <td>90</td>
    </tr>
</table>
</body>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src：资源路径
controls：控制条
autoplay：自动播放
-->
<!--<video src="../resources/video/mv.mp4" controls autoplay></video>-->
<audio src="../resources/audio/music.mp3" controls></audio>
</body>
</html>

页面结构分析

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

<!--header：标题头部区域的内容（用于页面或页面中的一块区域）-->
<!--footer：标记脚步区域的内容（用于页面或页面中的一块区域）-->
<!--section：Web页面中的一块独立的区域-->
<!--article：独立的文章内容-->
<!--aside：相关内容或应用（常用于侧别栏）-->
<!--nav：导航类辅助内容-->

<header></header>
<footer></footer>
<section></section>

<article></article>

<aside></aside>

<nav></nav>

</body>
</html>

内联框架

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

<!--iframe
src：地址
height：高度
width：宽度
-->
<iframe src="https://www.baidu.com" frameborder="0" height="800px" width="1000px" ></iframe>
<iframe src="" frameborder="0" name="hello"></iframe>

<!--target还能够跳到指定的页面-->
<a href="6、表格学习.html" target="hello">点击跳转到成绩表</a>
</body>
</html>

表单的学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>
<!--<img src="../resources/image/表单属性.png" alt="图片" height="300px" width="500px">-->
<h1>注册</h1>
<!-- 表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
get方式：我们可以在url中看到我们提交的信息，不安全，但是高效
post：比较安全，可以传输大文件
（1）：readonly 只读
（2）：disabled 禁用
（3）：hiden隐藏

-->
<form action="1、我的第一个网页.html" method="get">
    <!--  文本输入框 input  type = "text"
    value="灰灰"  默认初始值
    maxlength="8"  最长能写几个字符
    size：文本框的长度
    初级表单的验证：
    placeholder：提示信息，用在输入框中
    required：表示该文本框不能为空
    pattern:正则表达式判断
    -->
    <p>账号：<input type="text" name="username" value="灰灰" readonly/></p>
    <p>用户名：<input type="text" name="username1" placeholder="请输入用户名" required/></p>
    <!-- 密码框： input type="password"   -->
    <p>密码：<input type="password" name="pwd" value="1234" hidden /></p>
    <!--  单选框
    input type="radio"
    value：单选框的值
    name：表示组
    checked表示默认的单选值
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <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" checked>聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--按钮
    input type="button" 普通按钮
    input type="image" 图像按钮
    input type="submit" 提交按钮
    input type="reset" 重制
    -->
    <p>按钮：
        <input type="button" value="按钮呀" name="btn1">
        <br/>
        <input type="image" src="../resources/image/表单属性.png" height="10px" width="20px">
    </p>
    <!--    下拉框，列表框-->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="yindu">印度</option>
        </select>
    </p>
    <!-- 文本域-->
    <p>反馈：
        <textarea name="textarea" 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>

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

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

    <p>
        <input type="submit" >
        <input type="reset" value="清空表单" disabled>
    </p>
</form>
</body>
html笔记（完整版）
kaluomeng的博客
06-07 4159
标记 类型 译名或意义 作 用 备注 文件标记 ● 文件声明 让浏览器知道这是HTML文件 ● 开头 提供文件整体信息 ● 标题 定义文件标题，将显示于窗口标题 ● 本文 设计文件格式及内文所在 段落标记 ○ 说明标记 为文件加上说明，但不被显示 ○ 段落标记 为文字、图片、表格等之间留一空白行 ○ 换行标记 令文字、图片、表格等显示于下一行 ○ 水平线 插入一条水平线 ● 居中 令文字、图片、表格等显示...
印象笔记导入html笔记,Evernote Importer｜印象笔记导入
weixin_33978722的博客
06-17 1972
Evernote Importer｜印象笔记导入0.87MB. Updated 2020-08-01. Only supports Anki 2.1.x.DescriptionEvernote Importer 是一款将印象笔记导入自动化的 Anki 2.1 插件。用户文档和开发者文档参见本项目的 GitHub 主页。如您在使用中遇到问题或对插件功能有好的建议，欢迎通过以下两种方式之一与我联系：...
HTML笔记整理（个人笔记）
w3535222的博客
03-07 4026
个人笔记
HTML笔记（精简）
weixin_46160720的博客
03-08 1759
html 笔记 vscode 前端三大件
html笔记
热门推荐
一个帅气潇洒的豆子
03-03 1万+
html笔记一、html简介 1、html是什么 Html是用来描述网页的一种语言。 (1)HTML 指的是超文本标记语言 (Hyper Text Markup Language) (2)HTML 不是一种编程语言，而是一种标记语言(markup language,标记语言是一套标记标签(markup tag));
kindle中html笔记,如何将kindle阅读器中的笔记、标注导出。，这几步你要了解
weixin_39671405的博客
06-23 1997
在Kindle上读过书后，却不知道怎么将阅读过程中做的笔记、标注导出？下面向大家介绍一种将kindle阅读器中的笔记导出的方法。工具/材料kindle数据线一条可上网电脑一台印象笔记账号(可选)方法/步骤 连接kindle01第一步，将kindle用数据线和电脑连接，并处于该模式，备用。如图好了，以上就是大致内容了，(END)方法/步骤2 进入网站01进入下图网站，因为经验无法加载外链02进入页面...
使用onenote记HTML笔记,如何在Windows 10中使用OneNote做笔记
weixin_33502772的博客
06-15 1358
Microsoft OneNote与Windows 10捆绑在一起。这意味着您不必购买Office套件的零售副本或支付Office 365订阅费用就可以使用OneNote记笔记。OneNote是一种数字笔记本，可在您工作时自动保存和同步您的笔记。使用OneNote，您可以执行以下操作：1.在笔记本中输入信息或从其他应用程序和网页中插入信息。2..做手写笔记或画出您的想法。3.使用突出显示和标签可以...
网页设计html 笔记
优快云_liudong888的博客
04-22 1483
html介绍； 定义：超文本标记语言，不是编程语言； 包含：图片，链接，视频，文档，文字，表格 功能：测试前端页面元素，做ui自动化测试需要理解元素定位； 特点：简易性，可拓展性 （3）平台无关性 （4）通用性 什么人员使用html？ （1）前端开发 javascript+html+css H5==html5 （html第5版本） 前端开发的职责：负责页面涉及，页面排版 后端开发：负责后台业务逻辑，使用编程语言，前后端需要业务对接 （2）测试人员 定位元素，实现ui自动化 5、html 查看方式
html5——前端笔记
qq_48721706的博客
09-02 3264
html笔记
HTML+CSS+JS笔记
2301_79880794的博客
01-18 2111
超文本标记语言编程语言标记语言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
vue3 antd modal对话框里的前端html导出成pdf并下载
最新发布
lfYexun的博客
07-23 102
本文介绍了使用html2canvas和jspdf将HTML内容导出为PDF的实现方法。首先安装依赖包，创建exportToPDF工具函数处理分页渲染和尺寸转换，通过循环截取DOM内容并添加到PDF文档。在Vue组件中通过ref获取目标元素并调用导出方法，同时提示跨域图片需要后端转发或转为base64格式。该方案支持自定义页面边距和像素转换系数，可生成高质量的PDF文档。
【HTML】图片比例和外部div比例不一致，最大程度占满
爱喝星冰乐的博客
07-21 392
图片最大程度占满
如何使用markdownify库将HTML转换为Markdown？
小屁孩大帅-保密的博客
07-21 308
简单易用提供了简洁的API，只需要调用一个函数就可以完成HTML到Markdown的转换。支持常见标签：能够处理大多数常见的HTML标签，如标题、段落、列表、链接、图片等。适合快速转换：对于一些简单的HTML到Markdown的转换需求，是一个非常合适的选择。不过，也有一定的局限性，例如对于一些复杂的HTML结构或自定义标签的处理可能不够完善。如果有更复杂的转换需求，可能需要结合其他库或自定义转换规则来实现。
基于JAVA实现基于“obj--html--pdf” 的PDF格式文本生成
hnmpf的博客
07-22 286
因一个特定的项目需要，将java对象内容以特定样式的PDF格式输出，查看了很多文档，有收费的、免费的、基础集成的。收费的工具就表现突出，免费的工具基本很难满足需求，故着手采用基础集成方案。过程中尝试了很多中技术组合，最后根据个人调试效果选择了"thymeleaf+htmltopdf"组合方案。
HTML笔记应用开发指南
在笔记应用中，HTML用于创建和呈现笔记的界面，包括文本框、按钮、列表等界面元素。用户可以通过HTML编写和编辑笔记内容，同时HTML也可以支持一些基本的格式化，如加粗、斜体、列表等。 3. 笔记应用的功能特点：一...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值