HTML5基础知识总结总结（详细，附带源代码）

news2024/11/24 6:51:26

HTML5基础知识

  • 一：前言
  • 二： HTML基本结构。
  • 三：基本标签
    • 3.1 h标签
    • 3.2 p标签
    • 3.3 hr标签
    • 3.4 br标签
    • 3.5 strong标签与em标签
    • 3.6 特殊符号
    • 3.7 运行效果
  • 三：图像标签
  • 四：链接标签
  • 五：列表
  • 六：表格
  • 七：媒体元素
  • 八：内联框架iframe
  • 九：表单
  • 九：总结

一：前言

HTML全称为超文本标记语言，是一种标记语言。由一系列标签构成，这些标签将分散的Internet资源链接成为了一个整体。HTML从1993年至今，已经发展了五代，我们这里主要分享的为HTML5。

二： HTML基本结构。

HTML页面主要分为两大部分。分别是head和body。头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

<!DOCTYPE html> <!--告诉浏览器我们要使用什么规范！-->
<html lang="en">

<!--网页头部-->
<head>
   <meta charset="UTF-8">  <!--meta 描述标签，描述网站信息-->
   <meta name="keywords" content="">   <!--keywords 属性说明，网站的关键字-->
   <meta name="description" content="">    <!--description 网站的描述-->

   <title>这是我的第一个网页</title>    <!--title标签 网页标题-->

</head>

<body>  <!--body表示网页主体部分-->
   hello,world;
</body>
</html>

三：基本标签

3.1 h标签

在HTML中，有六个不同级别的标题，分别用H1到H6表示，H1是最高级别的标题，H6是最低级别的标题。

<!--标题标签-->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>

3.2 p标签

在 HTML 中，“p” 标签用于定义段落。它是一种基本的文本元素，用于将文本内容分段显示。在 HTML 文档中，每个 “p” 标签都会将包含在其中的文本内容显示为一个段落。

<!--段落标签-->
<p>亲爱的 你慢慢飞</p>
<p>两只蝴蝶简谱</p>
<p>两只蝴蝶简谱</p>
<p>小心前面带刺的玫瑰</p>
<p>亲爱的 你张张嘴</p>
<p>风中花香会让你沉醉</p>

3.3 hr标签

在 HTML 中，“hr” 标签是一个用于创建水平线的标记。它是一个自闭合标签，不需要结束标记。

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

3.4 br标签

在 HTML 中，“br” 标签用于在文本中创建一个换行符。它是一个自闭合标签，不需要结束标记。

<!--换行标签-->
亲爱的 你跟我飞 <br/>
穿过丛林去看小溪水<br/>
亲爱的 来跳个舞<br/>
爱的春天不会有天黑<br/>

3.5 strong标签与em标签

在 HTML 中，“strong” 标签和 “em” 标签都用于表示文本的重要性。它们是文本样式标记，可以通过加粗或斜体来突出显示文本。

<!--粗体 斜体-->
<h1>字体样式标签</h1>
粗体： <strong>庞龙</strong> <br></br>
斜体： <em>庞龙</em> <br></br>

3.6 特殊符号

以下为三种特殊符号，分别表示空格、大于号、小于号、特殊符号

<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格   <!--空格-->
&gt;&lt;   <!--大于号和小于号-->
&copy; 版权所有   <!--特殊符号-->

3.7 运行效果

具体的运行效果图片，我贴到下面，大家有兴趣可以自行对照。
​​​​在这里插入图片描述

三：图像标签

图像标签的作用是为我们的html页面添加图片，它的具体格式如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img标签学习
src：图片地址
    相对地址，绝对地址
    ../   表示上一级目录
    title  悬停文字
-->
<img src="../resources/Image/1.jpeg" alt="小怪兽" title="这是一个小怪兽" width="200px" height="200px">
</body>
</html>

图像地址主要分为两种，分别是相对地址和绝对地址。我们一般使用的是相对地址，用…/ 表示，一般我们要新建一个专门用来存储图片、视频、音频的文件夹方便进行管理。

四：链接标签

链接标签是a标签，下面代码展示一下a标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--a标签学习
    href:必须填写，表示跳到那个页面
    target:表示窗口在哪里打开
    _blank  在新标签中打开
    _self  在自己的页面中打开
-->
<a id="top">顶部</a>
<a href="1.我的第一个网页.html">点击调到第一个页面</a>
<a href="https://www.sina.com.cn/">点击我跳转到新浪</a>
<br/>
<a href="2.基本标签.html" target="_blank">新的页面进行打开</a>
<br/>
<a href="3.图像标签.html"target="_self">本页面打开</a>

<p>
    <img src="../resources/Image/1.jpeg" alt="小怪兽" title="这是一个小怪兽" width="200px" height="200px">
</p>


<!--锚链接
    需要一个标记，跳转。
-->
<a href="#top">回到顶部</a>
<a id="down">锚链接，调到底部</a>

<!--功能性标签
    邮件链接：mailto
    QQ推广
-->
<a href="mailto:1821900925@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="点击找我在线咨询" title="点击找我在线咨询"/></a>
</body>
</html>

a标签的href标签表示跳转的地址，不仅仅可以跳转我们自己编写的html文件和网址，还可以跳转到我们自己设置的锚链接。
通过点击让页面跳转到自己想要的地方。

五：列表

列表主要分为有序列表、无序列表、自定义列表，使用好列表可以让我们的排版更加整齐。

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

<!-- 有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
    <li>C/C++</li>
</ol>

<!--无序列表 应用范围：导航、侧边栏。-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
    <li>C/C++</li>
</ul>

<!--自定义列表
    dl:标签
    dt：列表名称
    dd：列表内容
    公司网站的底部
-->
<dl>
    <dt>学科</dt>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>C#</dd>
        <dd>C/C++</dd>
    <br>
    <dt>地理位置</dt>
        <dd>张家口</dd>
        <dd>沧州</dd>
        <dd>廊坊</dd>
        <dd>北京</dd>
</dl>
</body>
</html>

对应运行结果：
在这里插入图片描述

六：表格

使用表格table标签可以进行列表绘画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
    行标签：tr
    列标签：td
-->
<table border="1px">
    <tr>
<!--colspan跨列-->
        <td colspan="4">1-1</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-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
</body>
</html>

效果：
在这里插入图片描述

其中colspan和rowspan提供了跨行和跨列效果。

七：媒体元素

媒体元素主要有两个部分，分别是音乐和视频。练习此标签要先准备好相应的图片和视频。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频
src:资源地址
autoplay:自动播放
-->
<video src="../resources/Video/梁博-日落大道.mp4" controls autoplay></video>
<audio src="../resources/Audio/日落大道(Live)-梁博-23534982.mp3" controls ></audio>
</body>
</html>

视频和音频的上传标签分别是：video和audio，将资源准备好后，输入它的地址就能正确显示。

八：内联框架iframe

内联框架，可以将另一个网站镶嵌在我们的html文件中，并且可以设置它的长度和宽度。

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

<!--iframe
src : 地址
id：表示名字
-->
<iframe src="https://blog.csdn.net/hlzdbk?type=blog" id="郝立琢的博客" height="800px" width="1000px"></iframe>
<a href="https://blog.csdn.net/hlzdbk?type=blog" target="郝立琢的博客">点击跳转</a>

</body>
</html>

九：表单

在html中，表单是一个包含表单元素的区域，主要用于收集不同类型的用户输入，需要使用表单标签form来定义；而表单元素是允许用户在表单中输入内容的控件，比如输入标签（input）、文本域（textarea）等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<!--表单form
action : 表单提交的位置，可以是网站，也可以是一个请求处理地址。
method : post ,get 提交方式
    get提交方式，可以在URL地址中看到我们提交的信息，不安全但是高效。
    post方式提交：比较安全，可以传输大文件
    action : 往哪里进行提交。
    placeholder ： 用户提示信息
    required : 不能为空
    pattern : 正则表达式
-->
<form action="1.我的第一个网页.html " method="post">
<!--  文本输入框 ： input type=“text”  -->
    
    <p>名字 ： <input type="text" name="userName" placeholder="请输入用户名" required ></p>
    <p>密码 ： <input type="password" name="password"></p>
<!-- 单选框标签
     input type=“radio” 单选框标签
     value：单选框的值
     name ： 表示组
-->
    <p>性别
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl"name="sex" checked/>女
    </p>
<!-- 多选框-->
    <p>爱好：
        <input type="checkbox" value="sleep"name="hobby">睡觉
        <input type="checkbox" value="code"name="hobby" checked>代码
        <input type="checkbox" value="chat"name="hobby">聊天
        <input type="checkbox" value="game"name="hobby">游戏
    </p>
<!--按钮-->
    <p>
        <input type="button" name="btn1" value="点击变长">
    </p>
<!--    下拉框，页表框-->
    <p>
        国家：<select name="列表名称">
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">瑞士</option>
            <option value="选项的值">印度</option>
            <option value="选项的值">英国</option>
            <option value="选项的值">哈萨克斯坦</option>
        </select>
    </p>
<!--文本域-->
    <p>
       反馈： <textarea name="textarea"  cols="50" rows="10">文本内容</textarea>
    </p>

<!-- 文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>



<!--    邮件验证-->
    <p>邮箱：
        <input type="email"name="email" pattern="(\\w+)(\\.\\w+)*(\\@\\w+){1}(\\.[a-z]{2,3}){1,2}">
    </p>
    <p>url
        <input type="url"name="url">
    </p>
        <p>数字
        <input type="number"name="number"max="100" min="0" step="10">
    </p>

<!--滑块-->
    <p>
        <input type="range" name="voice" max="100" min="0">
    </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="清空按钮" >    <!--清空-->
    </p>
</form>

</body>
</html>

下面附上代码运行结果，大家又兴趣可以自行对照。

在这里插入图片描述

九：总结

以上为我的html基础知识分享，希望对您有所帮助~

​

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/467536.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Allegro PCB后处理和生产文件导出

Allegro PCB后处理和生产文件导出

Allegro PCB后处理&#xff0c;主要是完成线路设计以后&#xff0c;输出生产文件之前的处理。部分是看教程做的记录&#xff0c;方便以后自己参考。 教程&#xff1a; [小哥Cadence Allegro 132讲字幕版PCB视频教程]_哔哩哔哩_bilibili 感觉关键是多看右边Options菜单&#xf…
阅读更多...
【15】SCI易中期刊推荐——电子电气 | 仪器仪表（中科院4区）

【15】SCI易中期刊推荐——电子电气 | 仪器仪表（中科院4区）

💖💖>>>加勒比海带，QQ2479200884<<<💖💖 🍀🍀>>>【YOLO魔法搭配&论文投稿咨询】<<<🍀🍀 ✨✨>>>学习交流 | 温澜潮生 | 合作共赢 | 共同进步<<<✨✨ 📚📚>>>人工智能 | 计算机视觉…
阅读更多...
[NISACTF 2022]level-up

[NISACTF 2022]level-up

[NISACTF 2022]level-up f12 发现提示disallow 也就是不允许的想到robots.txt LEVEL_2 <?php //here is level 2 error_reporting(0); #屏蔽报错信息 include "str.php"; #包含str.php这个页面 if (isset($_POST[array1]) && isset($_POST[arr…
阅读更多...
巧用千寻位置GNSS软件|如何快速完成道路桥涵放样

巧用千寻位置GNSS软件|如何快速完成道路桥涵放样

道路桥涵放样主要解决道路施工中正交、斜交涵洞的测量&#xff0c;正交涵洞放样是中心线的定线放样&#xff1b;斜交涵洞放养是涵洞中心线与线路成一固定夹角的情况下的放样。 那么如何运用千寻位置GNSS软件实现道路桥涵放样呢&#xff1f;下面为各位一一介绍。 点击【测量】-&…
阅读更多...
【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css )

【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css )

文章目录 一、webkit 内核二、移动端网页 CSS 初始化 - normalize.css 一、webkit 内核 移动端浏览器 都是 基于 webkit 内核的 , QQ 浏览器 / 百度 / Safari / UC 都是基于 webkit 内核的 ; 移动端网页布局需要 兼容 普通浏览器 与 webkit 浏览器 ; webkit 内核浏览器 对 HT…
阅读更多...
Ubuntu18 更换 apt 源为阿里云

Ubuntu18 更换 apt 源为阿里云

Step1. 备份 list 文件 进入对应文件夹&#xff0c;用管理员权限&#xff0c;执行复制操作&#xff1a; cd /etc/apt/ sudo cp sources.list sources.list.bak Step2. 修改 list 文件 通过管理员权限&#xff0c;使用 vim 进行修改&#xff1a; sudo vim sources.list 将…
阅读更多...
【Pytorch】六行代码实现：特征图提取与特征图可视化

【Pytorch】六行代码实现：特征图提取与特征图可视化

前言 之前记录过特征图的可视化&#xff1a;Pytorch实现特征图可视化&#xff0c;当时是利用IntermediateLayerGetter 实现的&#xff0c;但是有很大缺陷&#xff0c;只能获取到一级的子模块的特征图输出&#xff0c;无法获取内部二级子模块的输出。今天补充另一种Pytorch官方…
阅读更多...
ChatGPT如何写作-ChatGPT写作程序

ChatGPT如何写作-ChatGPT写作程序

ChatGPT如何写作 ChatGPT是一款自然语言处理模型&#xff0c;它无法像人类一样进行“写作”。但是&#xff0c;您可以利用ChatGPT的生成文本功能来帮助您生成文字。以下是一些使用ChatGPT写作的建议&#xff1a; 确定主题和目标受众。在开始写作之前&#xff0c;请确保您清楚知…
阅读更多...
凝心聚力，携“源”出海：开源社顾问委员会2023年第一季度会议圆满举办！

凝心聚力，携“源”出海：开源社顾问委员会2023年第一季度会议圆满举办！

2023 年 3 月 25 日&#xff0c;开源社顾问委员会&#xff08;以下简称"顾问委员会"&#xff09;第一季度会议在北京圆满召开。这是顾问委员会自 2018 年成立以来的第 17 次全体委员会议。 为增进顾问委员会成员交流&#xff0c;加强开源社社区建设&#xff0c;实现开…
阅读更多...
第五章 资源包使用

第五章 资源包使用

游戏开发中会大量使用模型文件&#xff0c;图片文件&#xff0c;这些资源都需要事先导入到项目中去。导入的方式非常简单&#xff0c;将这些文件直接复制到项目中的Assets目录下即可。Unity 会在文件添加到 Assets 文件夹时自动检测到这些文件并同步显示在Project视图中。 Uni…
阅读更多...
内分泌失调对身体有什么影响？

内分泌失调对身体有什么影响？

体内各种荷尔蒙的平衡&#xff0c;可以维持内分泌的稳定&#xff0c;当生活节奏被打乱&#xff0c;就会导致熬夜、入睡困难、压力过大、不按时就餐、久坐、情绪不稳定等。 对此&#xff0c;内分泌失调都是不小的问题&#xff0c;都是会影响身体的各个部位的。 内分泌对身体有什…
阅读更多...
【U8+】用友U8+产品-操作系统、数据库、浏览器推荐支持一览表

【U8+】用友U8+产品-操作系统、数据库、浏览器推荐支持一览表

【业务场景】 大家平时在服务、实施过程中&#xff0c; 经常被问到各个版本的产品支持什么版本操作系统、数据库、浏览器&#xff1f; 根据各个版本发版说明&#xff0c; 总结了操作系统、数据库、浏览器推荐使用一览表。 软件版本与电脑操作系统版本相辅相承&#xff0c; 一方…
阅读更多...
Redis 缓存穿透、缓存雪崩、缓存击穿

Redis 缓存穿透、缓存雪崩、缓存击穿

缓存穿透 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远不会生效&#xff0c;这些请求都会打到数据库。 常见的解决方案有两种&#xff1a; 缓存空对象 优点&#xff1a;实现简单&#xff0c;维护方便 缺点&#xff1a; 额外的内存消耗 可…
阅读更多...
chatGPT写文章一半不写了-如何让chatGPT写完整文章

chatGPT写文章一半不写了-如何让chatGPT写完整文章

chatGPT不生成内容的原因有哪些 当ChatGPT不生成内容时&#xff0c;可能有如下原因&#xff1a; 数据限制&#xff1a;ChatGPT的生成能力是建立在其训练数据的基础上的。如果输入的内容领域、主题和题材不在其数据范围内&#xff0c;ChatGPT将无法生成非常有意义和具体的内容。…
阅读更多...
图像修补论文阅读：MAT算法笔记

图像修补论文阅读：MAT算法笔记

标题&#xff1a;MAT: Mask-Aware Transformer for Large Hole Image Inpainting 会议&#xff1a;CVPR2022 论文地址&#xff1a;https://ieeexplore.ieee.org/document/9879508/ 官方代码&#xff1a;https://github.com/fenglinglwb/MAT 作者单位&#xff1a;香港中文大学、…
阅读更多...
第十一讲 常用数据结构之字符串

第十一讲 常用数据结构之字符串

第二次世界大战促使了现代电子计算机的诞生&#xff0c;世界上的第一台通用电子计算机名叫 ENIAC&#xff08;电子数值积分计算机&#xff09;&#xff0c;诞生于美国的宾夕法尼亚大学&#xff0c;占地167平米&#xff0c;重量约27吨&#xff0c;每秒钟大约能够完成约5000次浮点…
阅读更多...
Ansible基础和命令行模块操作

Ansible基础和命令行模块操作

目录 1.Ansible介绍 1.Ansible能做什么&#xff1f; 2.Ansible的特性和原理 2.Ansible部署 3.Ansible命令模块 1.command模块 2.shell模块 3.cron模块 4.user模块 5.group模块 7.file模块 8.hostname 模块 9.ping 模块 10. yum 模块 11.service/systemd 模块 1…
阅读更多...
【私有云底层】理解OpenStack核心组件

【私有云底层】理解OpenStack核心组件

文章目录 &#x1f479; 关于作者一、Keystone 身份认证服务Keystone 架构工作流程 二、Glance 镜像服务Glance 架构磁盘与容器Glance 工作流程 三、Placement 放置服务Placement 工作流程 四、Nova 计算服务Nova 架构Nova 工作流程 五、Neutron 网络服务Neutron 架构Neutron 支…
阅读更多...
jstat命令查看jvm内存情况及GC内存变化

jstat命令查看jvm内存情况及GC内存变化

命令格式 jstat [Options] pid [interval] [count] 参数说明&#xff1a; Options&#xff0c;选项&#xff0c;一般使用 -gc、-gccapacity查看gc情况 pid&#xff0c;VM的进程号&#xff0c;即当前运行的java进程号 interval&#xff0c;间隔时间(按该时间频率自动刷新当前内存…
阅读更多...
Shell脚本之条件测试、if、case条件测试语句

Shell脚本之条件测试、if、case条件测试语句

目录 一、条件测试1.1test命令1.2文件测试1.2.1文件测试常见选项 1.3整数值比较1.4字符串比较1.5逻辑测试 二、if语句2.1单分支结构2.2双分支结构2.3多分支结构 三、case语句 一、条件测试 1.1test命令 测试特定的表达式是否成立&#xff0c;当条件成立&#xff0c;测试语句的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023