HTML详解

最新推荐文章于 2024-08-16 10:43:14 发布
最新推荐文章于 2024-08-16 10:43:14 发布
阅读量174 收藏
点赞数
分类专栏： JAVA全栈学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zafu_scarecrow/article/details/119825322
版权

image-20210819113852376

image-20210819115357677

网页基本标签

<!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+TAB键-->
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<!--水平线标签-->
<hr/>
<!--换行标签，紧凑(自闭合标签)-->
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i love you</strong><br/>
斜体：<em>i love you</em><br/>

<!--特殊符号-->
空     格：
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权所有：叶说喜欢你

<!--
特殊符号记忆方式
& ;
-->
</body>
</html>

图像标签

image-20210820095248092

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--img学习
src:：图片地址（必填）
    相对地址（推荐使用)，绝对地址
    ../ ——上一级目录
alt:图片名字（必填）
-->
<img src="../resources/image/1.jpg" alt="笑嘻了" title="笑嘻了" width="480" height="480">
<a href="4.链接标签.html#top">跳转4</a>
</body>
</html>

超链接标签

image-20210820100231289

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<br/>
<!--
a标签
href: 必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
  _blank：在新标签中打开
  _self：在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target=”_blank“>点击我跳转到页面1</a>
<a href="http://www.baidu.com">点击我跳转到百度</a>
<br/>

<a href="1.我的第一个网页.html">
  <img src="../resources/image/1.jpg" alt="笑嘻了" title="笑嘻了" width="480" height="480">
</a>

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

<!--
功能性链接
邮件链接：mailto
-->
<a href="mailto:2775067350@qq.com">点击联系我</a>
</body>
</html>

行内元素和块元素

image-20210820133651048

列表标签

image-20210820134009599

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷,问答
-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C/C++</li>
</ol>
<hr/>
<!--无序列表
应用范围:导航，侧边栏
-->
<ul>
  <li>Java</li>
  <li>Python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C/C++</li>
</ul>

<!--自定义列表
dl：标签
dt:列表名称
dd:列表内容

公司网站底部
-->
<dl>
  <dt>学科</dt>
  <dd>Java</dd>
  <dd>Python</dd>
  <dd>Llnux</dd>
  <dd>C++</dd>

  <dt>位置</dt>
  <dd> 西安 </dd>
  <dd> 杭州 </dd>
  <dd> 北京 </dd>
  <dd> 上海 </dd>
</dl>
</body>
</html>

表格标签

image-20210820135140202

<!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-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>
</body>
</html>

媒体元素标签

image-20210820140008235

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

页面结构分析

image-20210820140537087

<!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>

iframe内联框架

image-20210820141251481

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架学习</title>
</head>
<body>
<!--  <iframe src="//player.bilibili.com/player.html?aid=292466619&bvid=BV15f4y1G7sr&cid=391809862&page=1"-->
<!--          scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--  </iframe>-->
<!--ifram内联框架
w-h:宽度高度
-->
  <iframe src="http://www.baidu.com"name="hello" frameborder="0" width="1300px" height="1300"></iframe>

<a href="1.我的第一个网页.html" target="#hello">点击跳转</a>
</body>
</html>

表单标签，验证（重要）

image-20210820142634599

image-20210820145811765

image-20210820153210111

image-20210820154039454

<!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="1.我的第一个网页.html" method="get">
  <!-- 文本输入框：input type="text"
  value="叶说喜欢你" 默认初始值
  maxlength="8" 最长几个字符
  size="30" 文本框长度-->
  <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
  <p>密码：<input type="password" name="pwd"></p>

  <!-- 单选框标签
  input type="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">游戏
  </p>
  <!-- 按钮
   input type="button"  普通按钮
   input type="image"   图像按钮
   input type="submit"  提交按钮
    input type="reset"  重置按钮
   -->
  <p>按钮：
    <input type="button" name="btn1" value="点击变长">
    <input type="image" src="../resources/image/1.jpg">
  </p>

<!-- 下拉框，列表框
-->
  <p>国家：
    <select name="列表名称">
      <option value="china">中国</option>
      <option value="usa">美国</option>
      <option value="eth" selected>瑞士</option>
      <option value="indien">印度</option>
    </select>
  </p>
  <!--
  文本域
  cols,rows
  -->
  <p>反馈：
    <textarea name="textarea"cols="30" rows="10">文本内容</textarea>
  </p>

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

<!-- 邮件验证 -->
  <p> 邮箱
    <input type="email" name="email">
  </p>
<!-- url验证 -->
  <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" min="0" max="100">
  </p>
<!--搜索框-->
  <p>搜索：
    <input type="search" name="search">
  </p>
<!-- 增强鼠标可用性 -->
  <p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
  </p>
  <p>自定义邮箱：
    <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
  </p>
<!-- 只读，禁用 -->
  <p>
    <input type="submit" disabled>
    <input type="reset" hidden>
  </p>
</form>

</body>
</html>
叶说喜欢你
关注
专栏目录
详解HTML
一个技术宅
10-25 432
1. HTML 1.1. HTML概述 1.1.1. HTML是什么 Html(Hyper Text Mark-up Language)就是超文本标记语言的简写，是最基础的网页语言。 实验：查看网页的源代码 1.1.2. HTML基本结构 Html是通过标签来定义的语言，代码都是由标签所组成。 Html代码不用区分大小写。 Html代码由开始结束。里面由头部分和体部分两部分组成。
HTML表单详解
saraspeer的专栏
04-09 5057
Web页面是一种文档，HTML就是用来编写这些文档的一种标记语言，文档的结构和格式的定义是由HTML元素来完成的，HTML元素是由单一或一对标签定义的包含范围。表单在HTML文档和用户之间，提供了一种交互的方式。利用表单，可以提交信息到Web服务器。1.表单与服务器的交互过程利用表单填写好信息以后，点击“提交”按钮，信息就会被浏览器发送到服务器端。当服务器端收到信息后，对这些信息进行一
html基础知识总结
最新发布
weixin_47511748的博客
08-16 846
html是一种客户端浏览器解析语言，其后缀是.html。HTML语言是通过各种标记来标识文档的结构，以及标识超链接、图片、文字、段落表单等信息。解析HTML网页常用的浏览器：谷歌(Chrome)、firefox、Edge开发工具: VSCode、WebStrom、HBuilder。
HTML详解（基础快速入门版）
03-20
适用人群：初学HTML，想要了解如何创建表格、超链接以及表单的爱好者们
PDF：HTML详解.pdf
02-18
PDF：HTML详解.pdf
html详解资料
12-30
很详细的介绍了如何用html来编写网页，而且配上了很好的例题加以详解
Axios在HTML详解
热门推荐
QHCXY的博客
06-25 1万+
文章目录一、axios是什么？二、怎么在HTML中使用？1.引入axios库2.输入的内容3.获取输入的内容4.提交到后端完整代码 一、axios是什么？ Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 二、怎么在HTML中使用？ 1.引入axios库 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 2.输入的内容 <input type="
ajax教程html详解
07-17
ajax教程，详细说明了XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。...
HTML语言入门
ZQ_abc的博客
09-26 1462
HTML5语言入门 在接触HTML时，很多人可能会有一个疑问到底什么是HTML呢？HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。HTML在开发时遵循的是W3C标准，下面我们就来了解一下HTML。 HTML的发展史 （1）超文本标记语言——1993年6月发布； （2）HTML2.0——1995年11月发布； （3）HTML3.2——1...
HTML
执妄
12-02 882
一、网页基本信息 <!-- DOCTYPE:告诉浏览器，我们要使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!--head标签代表网页头部--> <head> <!-- meta描述性标签，用来描述网站的一些信息 --> <!-- meta一般用来做SEO(搜索优化） --> <meta charset="UTF-8"> <m
详解【HTML】（一）
卷成小麻花的博客
05-08 1136
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (HyperTextMarkupLanguage)HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签HTML 使用标记标签来描述网页。
HTML详解（1.html简介）
qq_43623447的博客
01-16 1万+
文章目录 HTML（HyperText Mark-up Language）即超文本标记语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图 形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的 具体内容。 HTML语言被...
HTML详解（5.html的基本标签）
qq_43623447的博客
01-16 9501
文章目录一，标签集合二，中常见子元素的含义三，标题标记<hx>四，文本标记<b><i><u><del>五，预格式文本<pre>六，字体标签<font>七，换行<br>或者</br>八，水平线<hr>九，超链接十，列表标签<ul><ol><li>...
SpringBoot集成Freemarker生成HTML详解
"这篇文章主要讲解了如何在Java项目中集成Freemarker模板引擎来生成静态HTML页面，通过Spring Boot框架实现。文中通过具体的步骤和示例代码，详细阐述了整个过程，适合学习或工作中需要此类技术的读者参考。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值