走进 HTML

已于 2023-01-27 15:18:42 修改
阅读量7.1k 收藏 65
点赞数 24
分类专栏： Web开发 文章标签： html 前端
于 2023-01-22 14:39:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lov1_BYS/article/details/128720755
版权

文章目录

01 什么是HTML？

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

超文本包括：文字、图片、音频、视频、动画等；

在这里插入图片描述
以前常见的 Flash 等插件，如今 HTML5 可以轻松实现
 
HTML5 的优势：
在这里插入图片描述
制定HTML5的：在这里插入图片描述

02 HTML的基本结构

在这里插入图片描述

<!-- DOCTYPE声明:告诉浏览器，使用什么规范 -->
<!DOCTYPE html>

<!-- 下面是HTML总标签 -->
<html lang="en">
    <!-- 这是注释：IDEA快捷键CRTL+/ -->

    <!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签，用来描述网站的一些信息 -->
    <!-- meta一般来做搜索引擎优化SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="苗半里的博客">
    <meta name="description" content="来学Java">
        <!--  网页标签  -->
    <title>我的第一个网页</title>
</head>

    <!-- body标签代表网页主体 -->
<body>
Hello World !
</body>

</html>
<!-- 以上是 HTML 标签 -->

在这里插入图片描述

03 网页基本标签

div 标签：div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。

<div> 可定义文档中的分区或节（division/section）。
<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。

可以将 div 标签看作一个自由标签，可以把众多标签封装起来

  • 标题标签 ：<h1> </h1>
  • 段落标签 ：<p> </p>
  • 换行标签 ：<br/>
  • 水平线标签 ：<hr/>
  • 字体样式标签 ：<strong/> 粗体 </strong> <em/> 斜体 </em>
  • 注释和特殊符号 ：<!-- 注释，可多行 --> 特殊符号&
~~~<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!-- 段落标签 -->
<p>这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>
<p>这是第四段</p>

<!-- 换行标签 -->
接下来是换行<br>再换行<br>再换<br>

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

<!-- 粗体和斜体 -->
<h1>字体样式标签</h1>
<strong>粗体</strong>
<em>斜体</em>

<!-- 注释 -->
<!--
  多行注释
-->
<!-- 特殊符号 -->
&nbsp;<!--代表空格-->
哈&nbsp;哈
<br/>&gt;<!--大于符号-->
<br/>&lt;<!--小于符号-->
&copy;<!--版权符号-->苗半里版权所有
<!--
特殊符号记忆方式：(IDEA)
打一个&就可以看着选了
-->

</body>
</html>

在这里插入图片描述

04 图像标签

  • 常见的图像格式：
    • JPG
    • GIF
    • PNG
    • BMP
    • …

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img标签学习
src：图片地址
     分相对地址（存储在当前目录之下），绝对地址（存储的盘符地址）
     ../ 表示上一级目录
src 和 alt 必须，其他可以省略  -->
<img src="../../resource/image/1.png" alt="图像标签使用讲解">
<img src="../../resource/image/1.png" alt="图像标签使用讲解" title="悬停文字" width="1000">
</body>
</html>

05 链接标签

在这里插入图片描述

有 文本超链接 和 图像超链接 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--a标签
href:必填，表示跳转到哪个页面
target：表示窗口在哪里打开
    _blank 新标签页打开
    _self 自己覆盖打开
-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>
<br>
<a href="http://www.baidu.com">
  <img src="https://baidu.png" alt="百度">
</a>

<a name="top">顶部</a>

<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
3.实现页面间跳转 -->
<a href="#top">回到顶部</a>

<!-- 功能性链接 
邮件链接 ： mailto   -->
<a href="mailto:839316435@qq.com">点击给我发邮件</a>

</body>
</html>

06 块元素和行内元素

  • 块元素
    • 无论内容多少，该元素独占一行
    • 如：段落 、 标题 …
    • （ p 、 h1 - h6 ）
  • 行内元素
    • 内容撑开宽度，左右都是行内元素的可以排在一行
    • 如：粗体、斜体 …
    • （ a 、strong 、 em … ）
  • 块元素可以包含行内元素，行内元素不能包含块元素

07 列表

什么是列表？

         列表就是信息资源的一种展示形式，可以使信息结构化和条理化，以便浏览者快捷地获取相应信息。

列表的分类：

  • 无序列表：<ul> </ul>
  • 有序列表：<ol> </ol>
  • 自定义列表：<dl> </dl>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--无序列表-->
<ul>
  <li>网页</li>
  <li>数据库</li>
  <li>算法</li>
</ul>

<hr/>

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

<hr/>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
  <dt>编程</dt>
  <dd>Java</dd>
  <dd>C++</dd>
  <dd>Python</dd>

  <dt>业务</dt>
  <dd>前端</dd>
  <dd>后端</dd>
</dl>

</body>
</html>

在这里插入图片描述

07 表格

为什么使用表格？

  • 简单通用
  • 结构稳定

基本结构：

  • 单元格
  • 行 ：tr
  • 列 ：td
  • 跨行 ：rowspan
  • 跨列 ：colspan
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格table
行 tr  rows 行
列 td
-->
<table  border="1px"> <!--border边框-->
    <tr>  <!--第一列-->
        <td> 1-1 </td>
        <td> 1-2 </td>
        <td> 1-3 </td>
        <td> 1-4 </td>
    </tr>
    <tr>  <!--第二列-->
        <td> 2-1 </td>
        <td> 2-2 </td>
        <td> 2-3 </td>
        <td> 2-4 </td>
    </tr>
    <tr>  <!--第三列-->
        <td rowspan="2"> 3-1 </td>
        <!-- rowspan 跨行 -->
        <td> 3-2 </td>
        <td> 3-3 </td>
        <td colspan="3"> 3-4 </td>
        <!-- colspan 跨列 -->
    </tr>
    <tr>  <!--第四列-->
        <td> 4-1 </td>
        <td> 4-2 </td>
        <td> 4-3 </td>
        <td> 4-4 </td>
    </tr>
</table>

</body>
</html>

运行可得下表：
在这里插入图片描述

08 视频和音频

video 和 audio 标签 （可自由加属性）：

<!DOCTYPE html>
<hmtl>
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频和视频
stc 资源路径
controls 控制条
autoplay 自动播放
-->
<video src="../../resource/video/VID_20221226_195327.mp4" controls autoplay></video>
<audio src="../../resource/audio/bbox.wav" controls autoplay></audio>
</body>
</hmtl>

09 页面结构

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
  <header>
    <h2>网页头部</h2>
  </header>
  <section>
    <h2>网页主体</h2>
  </section>
  <footer>
    <h2>网页脚部</h2>
  </footer>
</body>
</html>

10 iframe内联框架

👉 就是一个网页里面嵌套另一个网页

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe内联框架
src 地址
width height 宽度高度-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

<iframe src="https://www.csdn.net/" frameborder="0" width="100px" height="200px"></iframe>

<iframe src="" name="hello" frameborder="0"></iframe>
<a href="第一个网页.html" target="hello">点击跳转</a> <!--target="hello"表示以内联窗口打开-->

</body>
</html>

11 表单语法

👉 例如网页里的用户登录窗口就是一个表单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

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

<form action="第一个网页.html" method="get">
  <!-- 文本输入框：input type="text" -->
    <p>名字：<input type="text" name="username"></p>
  <!-- 密码框：input type="password" -->
    <p>密码：<input type="password" name="pwd"></p>

<p>
    <input type="submit">
    <input type="reset">
</p>

</form>

</body>
</html>

在这里插入图片描述

👉 表单元素格式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

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

<form action="第一个网页.html" method="get">

<!-- 文本输入框：input type="text" -->     <!--value为初始默认值 maxlength最大字符数 size初始宽度-->
    <p>名字：<input type="text" name="username" value="请输入用户名" maxlength="8" size="30"></p>

<!-- 密码框：input type="password" -->
    <p>密码：<input type="password" name="pwd"></p>

<!--单选框标签 radio value为单选框的值 name表示组-->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!-- 多选框 checkbox-->
    <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">游戏
        <input type="checkbox" value="sport" name="hobby">运动
    </p>

<!-- 按钮
input type="button" 普通按钮
input type="image"  图像按钮
input type="submit" 提交按钮
input type="reset"  重置按钮
-->
    <p>按钮:
        <input type="button" name="btnl" value="点我验证">
        <input type="image" src="../../resource/image/img.png"> <!--图片按钮-->
    </p>

<!--  下拉框 列表框  -->
    <p>国家
        <select name="列表名称" >
            <option value="china" selected>中国</option> <!--默认值-->
            <option value="us">美国</option>
            <option value="uk">英国</option>
        </select>
    </p>
<!--   文本域  -->
    <p>反馈:
        <textarea name="textarea" cols="40" rows="3" >文本内容</textarea>
    </p>

<p>
    <input type="submit">
    <input type="reset">
</p>

<!--    文件域 -->
    <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>
<!--  滑块  -->
    <p>音量:
        <input type="range" name="voice" min="0" max="100" step="1">
    </p>

<!--    搜索框 -->
    <p>搜索:
        <input type="search" name="search">
    </p>

</form>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

👉 表单的应用

  • 只读： input 标签里加上 readonly
  • 禁用：input 标签里加上 disabled
  • 隐藏：input 标签里加上 hidden

 

拓展：

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

点击文字部分，会自动跳转到右边的文本框：
在这里插入图片描述

👉 表单初级验证

常用方式：

  • placeholder 提示信息
  • required 非空判断
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>

<p>密码：<input type="password" name="pwd"></p>

在这里插入图片描述

  • pattern 正则表达式
<p>自定义邮箱:
   <input type="text" name="diymail" 
          pattern="[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?">
</p>
苗半里
关注
专栏目录
走进HTML5：20个惊艳的HTML5Canvas应用试验
03-02
如今，HTML5可谓如众星捧月一般，受到众多业内巨头的青睐。很多Web开发者也尝试着用HTML5来制作各种Web应用。HTML5规范引进了很多新特性，其中最令人期待的之一就是Canvas元素，HTML5Canvas提供了通过JavaScript绘制...
走进HTML和CSS
01-03
"走进HTML和CSS"的主题意味着我们将深入探索这两个语言的基础知识及其在网页设计中的应用。 **HTML：网页的骨架** 1. **HTML元素**：HTML由一系列的元素组成，每个元素都有其特定的意义，如`<p>`用于段落，`<h1>`...
HTML中的表格及样式的设置
greentrainsad的博客
10-28 4907
html中的表格如何制作 样式如何设置
HTML的表格单元
VibMike的博客
10-28 1843
1、老样子，新建 2、表格是由<table>标签来定义的 3、每个表格有很多行，行由<tr>标签定义 4、单元格由<td>标签进行定义 5、单元格内即是内容 6、表头由<th>标签定义，应在<td>之前 7、可以看到这个表格没有边框，我们可以设置一个<border>属性来设置边框，首先是万年不变的，先给div写一个类，这里就直接用common..
HTML表格（HTML 表格的使用，收藏这一篇就够了）
热门推荐
weixin_47139649的博客
10-15 7万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
html表格样式excel,单元格样式
weixin_32466193的博客
06-16 458
译者：fanjy 来源：http://blogs.msdn.com/excel发表于：2006年7月7日Cell Styles – More Usable, better defaults单元格样式—更多可用的且已预设好的样式A few posts ago, I presented an overview of the work we are doing in the area of grea...
HTML文档基本格式详细介绍
TSY_1222的博客
09-04 1万+
HTML基本格式主要包括：<!DOCTYPE>文档类型声明、<html>跟标记、<head>头部标记、<body>主体标记 <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> </head> &lt...
走进HTML世界
雨墨
10-16 4343
HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”。超文本：即超越纯文本，这意味着HTML不仅能包含文本，还能包含图片、表格、列表、链接、按钮、输入框等内容。标记语言：HTML通过不同的标签来标记不同的内容标签：标签也称为标记或元素，用于在网页中标记内容。不同标签具有不同的含义，学习 HTML 其实就是学习各个标签的含义，根据实际场景的需要，选择合适的标签，从而制作出精美的网页。语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示。
第一章：走进HTML5
2302_81923853的博客
12-18 960
:用来表示HTML5的开始
一起走进Html的世界(学习什么是HTML)
10-10 1064
HTMLHTML基础入门什么是HTML编写第一个网页HTML基本语法概述扩展名HTML内容标签概述标签的关系搭建环境HBuilder介绍HBuilder下载与安装HBuilder使用创建WEB项目创建HTML页面执行效果文档声明设置编码HTML基本语法注释标签标题标签 h1标题标签hr字体标签 font换行标签br段落标签p格式化标签b，i总结 本篇文章目标 了解什么是HTML 安装HBuilder 简单使用HTML基础语法 HTML基础入门 网页概述：什么是网页 简单来说就是,我们平时用浏览
走进HTML和CSS.rar
10-16
在这个名为"走进HTML和CSS.rar"的压缩包文件中，我们可以预想包含了一个或多个关于这两门技术的学习资源，如电子书"ebook-1.com"。 HTML是网页内容的基础，它使用一系列标签来定义不同的元素，如段落（`<p>`）、...
图书《走进HTML和CSS》电子版
08-27
《走进HTML和CSS》是一本面向初学者的英文电子教程，旨在帮助读者深入理解并掌握这两门基础的网页设计语言。HTML（HyperText Markup Language）是网页内容的结构化标记语言，而CSS（Cascading Style Sheets）则用于...
HTML入门教程4：HTML属性
软考鸭
10-29 874
HTML属性是附加在HTML标签上的额外信息，它们以键值对的形式出现，并放置在标签的起始部分内。这些属性为浏览器提供了额外的指令，以更准确地渲染网页内容。通过本文的介绍，相信大家对HTML属性有了更深入的了解。HTML属性是网页开发中的基础且重要的部分，它们能够极大地增强网页的功能和表现力。在实际开发中，我们应该灵活运用HTML属性，结合CSS和JavaScript等技术，创造出更加丰富和动态的网页内容。同时，也希望大家能够在开发过程中不断学习和探索新的HTML属性，以提升自己的网页开发技能。
HTML入门教程18：HTML类
软考鸭
10-29 297
在HTML中，你使用class属性来为元素分配类名。类名可以是任何你选择的名称，但最好使用能够描述元素用途或样式的名称。类名前面用一个点（.）表示，但在HTML中给元素分配类名时不需要这个点。< div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 1799
【代码】炫酷的登录框!(附源码)
HTML 约束验证
liuxiaoqi_123的博客
10-28 806
HTML5引入了表单相关的一些新机制：它为<input>元素和约束验证增加了一些新的语义类型，使得客户端检查表单内容变得容易。基本上，通过设置一些新的属性，常用的约束条件可以无需 JavaScript 代码而检测到；对于更复杂的约束条件的校验可以尝试使用约束验证 API。
4KB原生html实现table下tr的上下次序自由拖动
易查薪
10-27 433
4KB原生html实现table下tr的上下次序自由拖动
HTML && CSS
最新发布
KKTT01的博客
10-31 550
HTML:HyperText Markup Language，超文本标记语言。超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言HTML标签都是预定义好的。例如：使用 标签展示标题，使用展示超链接，使用展示图片，展示视频。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。
HTML5基础教程：走进Web新标准
"HTML5严格版本Strict DTD是HTML4的一个版本，主要目的是提供干净的标记，去除表现层的混乱，通常与CSS结合使用。HTML5是HTML的最新标准，发布于1999年后的多年更新，以适应互联网的快速发展和多样化需求。HTML5引入...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苗半里

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值