HTML笔记2

原创 已于 2024-03-05 18:01:18 修改 · 1.1k 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #笔记 #前端

于 2024-03-05 17:47:54 首次发布
本文详细介绍了HTML中的各种基本元素，包括路径的相对和绝对引用、超链接的使用、多媒体标签（audio和video）、列表（无序、有序和定义）、表格结构、合并单元格、表单控件（文本框、密码框、单选/多选、上传文件、下拉菜单等），以及文本域的特性。

11，路径

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

   <!-- 相对路径 -->

    <!-- 1jpg -->

    <img src="./1.jpg" alt=""><br>

    <!-- 2jpg -->

    <img src="../2.png" alt=""><br>

    <!-- 3jpg -->

    <img src="../../3.png" alt=""><br>

   

    <!-- 绝对路径 -->

    <!-- 1.jpg在自己电脑里的图片 -->

    <img src="C:\Users\user\Desktop\vc\photo\picture\code\1.jpg" alt=""><br>

    <!-- 不在自己电脑里的图片复制图片地址 -->

    <img src="https://static.web.sdo.com/jijiamobile/pic/ff14/wallpaper/20221220patch62/ffxiv_6.2patch_01_300x169.jpg" alt="">

</body>

</html>

12， 超链接

<a href="...">

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 点击跳转 -->

    <a href="https://www.baidu.com/">跳转到百度</a><br>

    <a href="./01—标签的写法.html">跳转到01——标签的写法</a><br>

    <!-- 打开为新页面 target="_blank" -->

    <a href="./01—标签的写法.html" target="_blank">跳转到01——标签的写法新页面</a>

    <!-- herf属性值写#，不会跳转 -->

    <a href="#">不会跳转</a>

</body>

</html>    

13，音频标签

<audio src="..." controls loop aotoplay></audio>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 在hmtl5里面，属性名和属性值完全一样，则可以简写为一个单词，如controls -->

    <audio src="./BUMP OF CHICKEN - Hello,world!.flac" controls loop aotoplay></audio>

</body>

</html>

14，视频标签

<video src="..." controls loop muted aotoplay></video> 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <video src="./视频.mp4" controls loop muted aotoplay></video>

</body>

</html>

15，列表标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 无序列表 -->

    <ul>

        <li>条目列表1</li>

        <li>条目列表2</li>

        <li>条目列表3</li>

    </ul>

    <!-- 有序列表 -->

    <ol>

        <li>第一名</li>

        <li>第二名</li>

        <li>第三名</li>

    </ol>

    <!-- 定义列表 -->

    <dl>

        <dt>防护职能</dt><br>

       

        <dd>剑盾小b</dd>

        <dd>撅枪小b</dd>

        <dd>绿刀小b</dd>

        <dd>暗堕小b</dd>

    </dl>

</body>

</html>

16，表格标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 表格结构标签 -->

    <table border="1">

        <thead>

        <tr>

            <th>姓名 </th>

            <th>语文</th>

            <th>数学</th>

            <th>总分</th>

        </tr>

      </thead>

      <tbody>

        <tr>

            <td>张三</td>

            <td>99</td>

            <td>97</td>

            <td>196</td>

           

        </tr>

        <tr>

            <td>李四</td>

            <td>97</td>

            <td>97</td>

            <td>194</td>

        </tr>

     </tbody>

     <tfoot>

        <tr>

            <td>平均分</td>

            <td>98</td>

            <td>97</td>

            <td>195</td>

        </tr>

        </tfoot>

    </table>

</body>

</html>

 17，合并单元格

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <table border="1">

        <thead>

        <tr>

            <th>姓名 </th>

            <th>语文</th>

            <th>数学</th>

            <th>总分</th>

        </tr>

      </thead>

      <tbody>

        <tr>

            <td>张三</td>

            <td>99</td>

            <td rowspan="2">97</td>

            <td>196</td>

           

        </tr>

        <tr>

            <td>李四</td>

            <td>97</td>

           

            <td>194</td>

        </tr>

     </tbody>

        <tr>

            <td>平均分</td>

            <td>98</td>

            <td>97</td>

            <td>195</td>

        </tr>

        <tfoot>

            <tr>

            <td>排名</td>

            <td colspan="3">全市第一</td>

            <!-- <td>全市第一</td> -->

            <!-- <td>全市第一</td> -->

          </tr>

        </tfoot>

    </table>

</body>

</html>

18， 表单

文本框：<input type="text"> 

密码框：<input type="password">

单选框： <input type="radio">

多选框1： <input type="checkbox" >

多选框2： <input type="checkbox" >

上传文件： <input type="file">

占位文本：<input type="password" placeholder="请输入密码">

默认选中：<checked> 

上传多个文件： <input type="file" multiple>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 输入什么，客户页面就显示什么 -->

    文本框：<input type="text">

    <br><br>

    <!-- 输入什么都显示为星号 -->

    密码框：<input type="password">

    <br><br>

    <!-- 单选 -->

    单选框: <input type="radio">

    <br><br>

    <!-- 多选 -->

    多选框1: <input type="checkbox" >

    多选框2: <input type="checkbox" >

    <br><br>

    <!-- 上传文件夹 -->

    上传文件: <input type="file">

    <br><br>

    <!-- 占位文本 -->

    文本框:<input type="text" placeholder="请输入用户名">

    <br><br>

    密码框:<input type="password" placeholder="请输入密码">

    <br><br>

    <!-- radio单选功能的实现用name，默认选中checked -->

    性别:

    <input type="radio" name="gender" checked> 男

    <input type="radio" name="gender"> 女

    <br><br>

    <!-- 上传多个文件 -->

    上传多个文件: <input type="file" multiple>

    <br><br>

    <!-- 默认多选 -->

    用户协议:

    <br>

    <input type="checkbox" checked>条款一<br>

    <input type="checkbox" checked>条款二

</body>

</html>

19，下拉菜单

<select>

        <option>...</option>

</select>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    城市:

    <select>

        <option>北京</option>

        <option>上海</option>

        <option>广州</option>

        <!-- selected 属性规定在页面加载时预先选定该选项 -->

        <option selected>深圳</option>

    </select>

</body>

</html>

20,，文本域

<textarea>...</textarea>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 右下角可拖拽放大，以后会禁用 -->

    <textarea>请输入评论</textarea>

</body>

</html>

cstttsc
关注
HTML 笔记.zip
02-06
这个“HTML笔记.zip”文件显然包含了关于HTML的学习资料，可能包括了基础概念、语法、元素、属性、标签等内容，帮助初学者或进阶者巩固和理解HTML的核心知识。 在HTML中，我们通过一系列的标签来构建网页结构。例如...
使用html和css实现康奈尔笔记(5R笔记)模板
09-24
在本文中，我们将探讨如何利用HTML和CSS技术创建一个康奈尔笔记（5R笔记）模板。康奈尔笔记法是一种高效的学习和整理知识的方法，它通过将笔记分为问题、笔记和总结三个区域，帮助记忆和复习。通过自定义HTML和CSS...
HTML5学习笔记
m0_61721166的博客
03-08 9259
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
html5——前端笔记
qq_48721706的博客
09-02 3326
html笔记
HTML笔记（精简）
weixin_46160720的博客
03-08 1796
html 笔记 vscode 前端三大件
印象笔记html预览,超级笔记使用指南 | 印象笔记
weixin_39594296的博客
06-10 3314
阅读本篇文章后，你可以基本掌握超级笔记的使用方法。1.如何创建超级笔记有两种方法可以创建超级笔记方式1：点击「新建笔记」下方的「新建超级笔记」进行新建方式2：点击「新建笔记」右侧的「更多新建图标」，选择「新建超级笔记」进行新建2.超级笔记支持哪些模块？印象笔记支持多个模块功能的设置，有以下几种：重点可以将一段文字单独突出显示表情可以在你的笔记中添加各种emoji编辑，使你的笔记内容更加丰富多样(暂...
黑马程序员html基本笔记
weixin_57140106的博客
06-25 2450
黑马程序员html个人笔记
HTML+CSS+JS笔记
2301_79880794的博客
01-18 2248
超文本标记语言编程语言标记语言web 页面。
HTML笔记整理（个人笔记）
w3535222的博客
03-07 4088
个人笔记
网页设计html 笔记
优快云_liudong888的博客
04-22 1501
html介绍； 定义：超文本标记语言，不是编程语言； 包含：图片，链接，视频，文档，文字，表格 功能：测试前端页面元素，做ui自动化测试需要理解元素定位； 特点：简易性，可拓展性 （3）平台无关性 （4）通用性 什么人员使用html？ （1）前端开发 javascript+html+css H5==html5 （html第5版本） 前端开发的职责：负责页面涉及，页面排版 后端开发：负责后台业务逻辑，使用编程语言，前后端需要业务对接 （2）测试人员 定位元素，实现ui自动化 5、html 查看方式
html markdown写笔记,谈谈为知笔记的Markdown功能
weixin_42312941的博客
06-29 1460
这文章属于专题的一部分，详见：Markdown知识贴下面谈谈为知笔记(简称“为知”，下同)中的Markdown功能，包括为知Markdown支持的语法，Markdown功能的实现，目前已知的问题和对为知Markdown的展望等方面。为知Markdown支持语法根据为知的Markdown说明和简单测试，为知目前支持的语法有区块元素标题(Setext式和Atx式)段落区块代码(缩进式和围栏式)技术绘图...
使用html记笔记,如何用前端的方式记笔记
weixin_42297705的博客
06-16 1839
直至今日才发觉记笔记的重要性，慌乱中开始选择笔记类的工具，其实之前也很用过不少记录笔记的工具或者方式，下面谈谈我的使用感受：Microsoft Office World:虽然已是业内标准，兼容性不用怀疑，但是其打开速度实在不敢恭维(虽然在我的安装了SSD的笔记本上表现尚可)。另外Office产品比较封闭，文本格式转换不方便。另外Word使用起来还得稍加练习相应使用技巧，有一定的学习成本(我是指写出...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
HTML笔记.pdf
07-14
"HTML笔记.pdf" HTML笔记.pdf是一个详细的HTML笔记，涵盖了HTML的基础知识、标签、属性、事件、表单、超链接、图像、表格、列表等内容。下面是从文件中提取的相关知识点： 1. HTML基础知识： * DOCTYPE html是...
【HTML+CSS】使用HTML与后端技术连接数据库
2509_94088455的博客
11-29 462
HTML负责构建网页的骨架，提供用户交互的表单等元素。用户通过表单输入数据，并通过表单的提交（submit）事件将数据发送到后端。
996PC端 传奇游戏架设笔记
酷酷的鱼 - 网络编程,服务器安全专栏
11-30 142
2、有些版本有自己增加的NPC或者武器、所以就会有版本补丁，需要在JpkList.txt增加补丁所在地址和解析密码、并且把补丁文件复制到热血传奇客户端安装目录下。多个版本的时候 在MirServer采用多个不同名称的文件夹即可，游戏区端口要选择不一样的。3、然后打开登录生成器、确保版本资源目录是对的，然后资源读取规则，需要设置成你热血传奇安装目录。4、确保当前登录生成器里面的授权密钥跟GameServer的登录网关->安全过滤设置->登录器识别码密钥写的是一样的。1、服务器需要安装VC++扩展包。
C语言学习笔记(1)——输入输出，数据类型
最新发布
DK3314219995的博客
11-30 748
CPU的位数主要决定了其通用寄存器的宽度，这直接影响CPU单次操作能处理的数据量和理论上能直接寻址的内存空间范围，但实际实现可能受地址总线宽度、操作系统和硬件架构的影响。
Compose笔记(五十七)--snapshotFlow
ljt2724960661的博客
11-29 568
这一节主要了解一下snapshotFlow，在Compose开发中，snapshotFlow是连接Compose状态与协程流的核心...
HTML笔记2：深入理解网页开发基础
文件名称“notetaking2-main”暗示了HTML文件是笔记应用的主文件，可能包含了大部分的HTML标记和内容。在实际开发中，可能会将一个复杂的页面分解为多个部分，并使用文件分割或组件化的技术来提高可维护性。例如，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值