HTML学习笔记

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

#学习 #笔记

HTML，超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

html通过标签来定义web页面的各个部分

VsCode通过!来快捷生成一个html页面

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
<!DOCTYPE html><--声明为HTML5文档-->
<html>
<head>
<meta charset="utf-8"><--声明编码-->
<title>页面名称</title>
</head>
<body>
    <h1>标题</h1>
    <p>段落</p>
</body>
</html>
  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <p> 和 </p>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

下面是一些html中基本的标签元素：

<!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 name="aaaa"></a>
    <!-- 1、文本标签 span 
    <span> 用于对文档中的行内元素进行组合。 
    -->
    <span style="color: red;">hello</span>
    <span>demohtml</span>
    <!-- 2、标题标签 h1~h6 -->
    <h1>标题标签</h1>
    <h2>标题标签</h2>
    <h3>标题标签</h3>
    <h4>标题标签</h4>
    <h5>标题标签</h5>
    <h6>标题标签</h6>
    <!-- 3、div竖着布局的标签 -->
    <a name="bbbb"></a>
    <div>竖着布局的标签</div>
    <div>竖着布局的标签</div>
    <!-- 4、段落标签  p -->
    <a name="cccc"></a>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <!-- 5、超链接标签 a
        href 设置资源路径
        target 设置打开窗口的方式  _self默认的，在本窗口打开  _blank在新窗口打开  ....
    -->
    <a href="https://www.baidu.com/" target="_blank">点击跳转</a>

    <!-- 6、锚点标签
        name锚点值
     -->
    <a name="aaaa">锚点</a>
    <a href="#aaaa" style="position: fixed;right: 200px;bottom: 200px;">跳转到h1</a>
    <a href="#bbbb" style="position: fixed;right: 200px;bottom: 150px;">跳转到div</a>
    <a href="#cccc" style="position: fixed;right: 200px;bottom: 100px;">跳转到p</a>

    <br><br>
    <!-- 7、图片标签
        src:引用的图片资源
            路径：
                相对路径： 访问资源与被访问资源的关系
                    兄弟关系 src="OIP-C.jpg"
                    叔侄关系 src="img/OIP-C.jpg"
                    表兄弟关系 src="../img/OIP-C.jpg"
                绝对路径： 资源的绝对位置
        alt：当图片资源不能正常展示时，显示alt里边的内容
        width="100px" 
        height="400px" 
         style="object-fit: cover;width: 200px;height: 400px;"  通过css设置按比例裁剪
    -->

    <img src="img/BBTS.jpg" alt="默认图片">


    <!--8、 列表标签 -->

    <ul>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
    </ul>

    <ol>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
    </ol>


    <!-- 9、表格标签 
        <table>放表格的容器
        <tr>行
        <td> 单元格   <th>加粗居中
        
        border表格有边框
        width="500px" 
        height="400px"
        cellpadding="10px" 单元格填充度
        cellspacing="0" 单元格之间的间距 0 表示挨在一起

        thead tbody tfoot

        rowspan  把行合并
        colspan  把列合并
    -->


    <table border="1" cellspacing="0"  width="500px">

        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
        </tr>

        <tr>
            <td>1</td>
            <td colspan="2">张宇一</td>

            <td>男</td>
        </tr>
        <tr>
            <td rowspan="2">2</td>
            <td>李明名</td>
            <td>20</td>
            <td>男</td>
        </tr>

        <tr>
            <td>李华</td>
            <td>20</td>
            <td>女</td>
        </tr>

    </table>

<!-- 10、框架标签iframe嵌套其他页面
        src:嵌套的资源
        width="800px"height="400px"
        frameborder='0'去掉边框把任意叶敏嵌入的更真实
  -->
  <br><br>
  <a href="https://www.bilibili.com/" target = "aaa">bilibili</a>
  <a href="https://www.runoob.com/" target = "aaa">菜鸟教程</a>
  <a href="https://kimi.moonshot.cn/" target = "aaa">Kimi</a>
  <a href="https://www.hebau.edu.cn/" target = "aaa">农大</a>
  <a href="https://www.youkuaiyun.com/" target = "aaa">优快云</a>
  <br>
  <br>
  <iframe src="https://www.bilibili.com/" width="900ps" height="500px" frameborder = "0" name="aaa"></iframe>

<br><br>

<!-- 11、音频audio
    controls 手动播放，让播放器显示出来
    autoplay自动播放
    loop 循环播放
    -->
    <audio src="" autoplay loop></audio>
    <br><br>
<!-- 12、视频video
     controls手动播放，让播放器显示出来
     autoplay自动播放   
    loop 循环播放
    width="200px" height="200px"
-->
    <video src="" width="200px" height="200px" controls></video>
<br><br>

<br><br>

<!-- 收集用户标签的标签
        一般用input里面写type属性值 -->

<form>
<input type="text">单行文本框<br><br>
<input type="password">密码框<br><br>
<input type="radio" name="sex">男生<input type="radio" name="sex">女生 单选框<br><br>
<input type="checkbox" >唱<input type="checkbox">跳 <input type="checkbox">篮球 多选框<br><br>
<input type="file">文件选择器<br><br>
<input type="color">颜色拾取器<br><br>
<input type="date">日期<br><br>
<input type="datetime-local">日期时间<br><br>
<input type="week">周选择器<br><br>
<input type="range" min="0" max="100" value="30">滑块<br><br>
<!-- step 步长 每次点击 -->
<input type="number" min="0" max="100" step="10">数字<br><br>

<!-- 下拉菜单 -->
<select>
    <option value="">语文</option>
    <option value="">数学</option>
    <option value="">英语</option>
</select>
<br><br>
<!-- rows行数 rols列数 -->
<textarea rows="10" cols="50"></textarea>多行文本域
<br><br>

<input type="button" value="按钮"><br><br>
<input type="reset" value="重置按钮"><br><br>
<input type="submit" value="提交按钮"><br><br>
</form>

<br><br>


</body>

</html>

涂凌z
关注
【HTML】HTML学习笔记（全）
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 3181
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML学习笔记——05：表格
qq_31532983的博客
01-15 9712
HTML-表格
HTML学习笔记(全)
weixin_63676550的博客
01-12 6719
HTML学习笔记 视频教程：https://b23.tv/LbTHmRE
html学习笔记
热门推荐
qq_45187522的博客
09-15 2万+
HTML CSS Js HTML是什么？ 百度百科：https://baike.baidu.com/item/HTML/97049 总结：“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言。HTML是用来开发网页的。（网页后缀 html，htm）html是标记语言不是编程语言。 超文本：超级文本，比文本更加牛逼，可以更加丰富的呈现文字信息。 标记：也叫做标签，这个是html里面的一个基本语法，所有的结构都是通过标记来控制的。 为什么学习HTML？ HTML网页开发在Jav
HTML 基础标签学习笔记
Rey_family的博客
04-13 2281
示例网站重要保存邮箱：我的网页这是我的第一个网页姓名</th><th>年龄
HTML5学习笔记
m0_61721166的博客
03-08 9274
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
前端之HTML学习笔记一
m0_53211178的博客
02-28 8415
目录 1.网页 1.1网页的概念 1.2HTML的概念 1.3网页的形成 2.常用的浏览器 3.web标准 3.1为什么需要web标准 3.2web标准的构成（重点） 1.网页 1.网页 1.1网页的概念 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成，通常我们看到的网页，常见以.htm或.
HTML基础知识学习笔记
qq_57736391的博客
03-13 1940
HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性。
Html学习笔记
10-29
自己学习html的笔记,普通文本格式，适合非前端专业开发者参考。学的好还得自己好好理解。
基于Dockerfile构建的HTML学习笔记设计源码
10-03
本项目是一套丰富的HTML学习笔记设计源码，其核心特征在于使用Dockerfile进行构建，这是一种高效且现代的软件开发实践，通过使用Dockerfile，可以创建一个轻量级、可移植的容器环境，使得开发和运行环境保持一致，...
精选资源
HTML学习笔记.md
08-01
HTML学习笔记
HTML学习笔记–HTML的语法详解(必看)
12-14
... ...格式：<标记>内容</标记> 3.标记的属性（用来控制图像、文本等如何的显示）格式：<标记 属性1=属性值 属性2=属性值…>内容<...都是定义相同的标记，但是在编写网页的使用尽量...以上这篇HTML学习笔记–HT
Kubernetes 学习总结（49）—— Kubernetes 本地目录挂载详解
科技D人生
01-04 785
本文介绍了Kubernetes中实现本地目录挂载的核心方法。通过hostPath卷类型和VolumeMounts挂载点，可将节点本地目录映射到Pod容器内部。详细说明了两种场景的实现步骤：单节点直接挂载和多节点通过nodeSelector指定目标节点挂载。强调了hostPath的type参数校验规则及常见问题解决方案，包括目录权限、调度错误等。建议生产环境避免宽权限配置，并指出本地挂载仅适用于非核心数据场景。如需高可用或多节点共享，应考虑NFS或PV/PVC方案。
0基础开发学习python工具_____一键打包！用 PyInstaller 将 Python 烟花程序转为 .exe（无需 Python 环境）
mg668的博客
01-01 644
本文介绍如何使用PyInstaller将Python程序打包成可执行文件。首先通过pip安装PyInstaller，然后使用pyinstaller --onefile --windowed命令将Python脚本打包成独立.exe文件，无需安装Python环境即可运行。文章详细说明了打包步骤、常见问题解决方法（如闪退、文件过大等），并提供了添加自定义图标的技巧，帮助初学者轻松分享Python程序。
MySQL初阶学习日记（8）--- JDBC
最新发布
good_afternoon6的博客
01-05 792
JDBC--java针对不同数据库上的API不同给出的一个解决方案JDBC本质上是Java标准库提供的一套类/方法，通过这组类/方法，把数据库C的原生API 进行封装，转换成Java版本的，同时也对不同数据库厂商的API进行了风格的统一安全‌：总是安全的，因为子类对象包含父类的所有属性和方法隐式‌：自动进行，无需显式转换操作符用途‌：实现多态性，通过父类引用调用子类方法风险‌：可能抛出，需确保对象实际类型匹配显式‌：需要使用 ( 子类类型 ) 父类引用 语法。
元旦学习了两种全新的拍摄手法
卢松松
01-05 237
（3）尝试把视频控制在40秒以内，绝不拖沓。这一年这个日常号让我学习多种拍摄手法。（1）尝试在人多的地方拍视频。（2）尝试全身出境拍短视频。
HTML学习笔记：从基础到实践
本资源是一个个人编写的HTML学习笔记，涵盖了HTML的基本概念、历史演变、常用编辑器以及基本结构和标签。HTML，全称为超文本标记语言，是一种用于创建网页的标准标记语言，它能描述网页的结构并嵌入文字、图形、动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值