Diary21-全网最全的HTML讲解(含可用代码)

HTML学习

1.网页基本信息

  • DOCTYPE:是一种规范，告诉浏览器我们要使用什么规范

  • head标签代表网页头部

  • title标签代表网页标题

  • body标签代表网页主体

    下面是创建的第一个网页的源代码(在IDEA创建一个html文件会直接生成，我这个其实只改了网页标题)

<!-- DOCTYPE:是一种规范，告诉浏览器我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head><meta charset="UTF-8"><!-- title标签代表网页标题 --><title>sxc的第一个网页</title>
</head>
<!-- body标签代表网页主体 -->
<body>
​
</body>
</html>

2.网页基本标签

2.1标题标签

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

2.2 段落标签

<!--段落标签-->
<p>sxc sxc</p>
<p>大帅逼 大帅逼</p>

2.3水平线标签

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

2.4换行标签

<!--换行标签-->
sxc sxc<br/>
大帅逼 大帅逼<br/>

2.5粗体and斜体

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

2.6特殊符号

空格： love&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;you
<br/>
大于： &gt;
<br/>
小于： &lt;
<br/>
版权符号： &copy;版权所有sxc

下面是完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body>
​
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
​
<!--段落标签-->
<p>sxc sxc</p>
<p>大帅逼 大帅逼</p>
​
<!--水平线标签-->
<hr/>
​
<!--换行标签-->
sxc sxc<br/>
大帅逼 大帅逼<br/>
​
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体： <strong>love you</strong>
<br/>
斜体： <em>love you</em>
<br/>
​
<!--特殊符号-->
空格： love&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;you
<br/>
大于： &gt;
<br/>
小于： &lt;
<br/>
版权符号： &copy;版权所有sxc
​
</body>
</html>

下面是网页的展示效果：

3.图像标签

  • src：图片地址 相对路径（推荐使用）；绝对路径 ../ 代表上一级目录

  • alt: 图片名字（必填）

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body>
​
<!--img学习
src：图片地址相对路径（推荐使用）；绝对路径../   代表上一级目录
alt: 图片名字（必填）
-->
​
<img src="../html/resource/image/1.jpg" alt="库里帅照" title="悬停文字" width="300" height="500">
</body>
</html>

4.超链接标签及应用

4.1 a标签

  • href：必填，表示跳转到哪个页面

  • target：表示窗口在哪里打开 _blank:在新标签中打开 _self：在自己的网页中打开

4.2锚链接

锚链接：实现页面内的跳转

  • 需要一个锚标记

  • 跳转到标记 #

4.3功能性链接

邮件链接：mailto:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body>
​
<!--a标签
href：必填，表示跳转到哪个页面
target：表示窗口在哪里打开_blank:在新标签中打开_self：在自己的网页中打开
-->
​
<!--使用name作为标记-->
<a name="top"></a>
​
<a href="https://www.baidu.com" target="_blank">点击我跳转到百度</a>
<br/>
<a href="web01.html"><img src="../html/resource/image/1.jpg" alt="库里帅照">
</a>
<p><a href="web01.html"><img src="../html/resource/image/1.jpg" alt="库里帅照"></a>
</p>
<p><a href="web01.html"><img src="../html/resource/image/1.jpg" alt="库里帅照"></a>
</p>
​
<!--锚链接：实现页面内的跳转
1.需要一个锚标记
2.跳转到标记 #
-->
<a href="#top">回到顶部</a>
​
​
<!--功能性链接
邮件链接：mailto:
-->
<a href="mailto:1735591043@qq.com">点击联系我</a>
​
</body>
</html>

5.列表标签

5.1有序列表

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

5.2无序列表

<!--无序列表-->
<ul><li>Java</li><li>Python</li><li>C++</li>
</ul>
​

5.3自定义列表

<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容
一般用在公司网站底部
-->
<dl><dt>学科</dt><dd>Java</dd><dd>Python</dd><dd>C++</dd>
</dl>

下面是完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表学习</title>
</head>
<body>
​
<!--有序列表-->
<ol><li>Java</li><li>Python</li><li>C++</li>
</ol>
​
<hr/>
​
<!--无序列表-->
<ul><li>Java</li><li>Python</li><li>C++</li>
</ul>
​
<hr/>
​
<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容
一般用在公司网站底部
-->
<dl><dt>学科</dt><dd>Java</dd><dd>Python</dd><dd>C++</dd>
</dl>
​
</body>
</html>

结果如下图所示：

6.表格标签

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

下面是呈现结果：

7.媒体元素

音频和视频

  • src:资源路径

  • controls：控制条

  • autoplay：自动播放

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

8.页面结构分析

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

9.iframe内联框架

iframe内联框架

  • src：地址

  • w-h：宽度 高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iframe内联框架</title>
</head>
<body>
​
<!--iframe内联框架
src：地址
w-h：宽度 高度
-->
<iframe src="" name="hello"   frameborder="0" width="800px" height="1000px"></iframe>
<a href="web01.html" target="hello">点击跳转</a>
​
</body>
</html>

10.表单post和get提交

表单form

  • action:表单提交的位置，可以是网站，也可以是一个请求处理的地址

  • method：post，get提交方式 get提交方式：我们可以在url中看到提交的信息，不安全，高效 post提交方式：我们不可以在url中看到提交的信息，安全

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单学习</title>
</head>
<body>
​
<h1>注册</h1>
​
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理的地址
method：post，get提交方式get提交方式：我们可以在url中看到提交的信息，不安全，高效post提交方式：我们不可以在url中看到提交的信息，安全
-->
​
<form action="web01.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>

11.单选框与多选框

11.1单选框

单选框标签

  • input type="radio"

  • value：单选框的值

  • name：表示组

 <p>性别：<input type="radio" value="boy" name="sex"/>男<input type="radio" value="girl" name="sex"/>女</p>

注意：name这个地方值必须相同，否则页面中两个选项都可以被选择

11.2多选框

<p>爱好：<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="eat" name="hobby">吃饭<input type="checkbox" value="play" name="hobby">玩<input type="checkbox" value="chat" name="hobby">聊天
</p>
​

11.3按钮

input type="button" 普通按钮 input type="image" 图像按钮 input type="submit" 提交按钮 input type="reset" 重置按钮

<p>按钮：<input type="button" name="btn1" value="点击变长"><input type="image" src="../html/resource/image/1.jpg"></p>
​<p><input type="submit"><input type="reset"></p>

12.列表框文本域与文件域

12.1下拉框

<p>国家：<select name="列表名称"><option value="选项的值">中国</option><option value="选项的值">美国</option><option value="选项的值">德国</option><option value="选项的值">巴西</option></select>
</p>

12.2文本域

<p>反馈：<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

12.3文件域

<p><input type="=file" name="files"><input type="button" name="upload" value="上传">
</p>

13.搜索框滑块和简单验证

13.1邮箱验证

<p>邮箱：<input type="=email" name="email">
</p>

13.2URL

<p>URL：<input type="=url" name="url"></p>

13.3数字

<p>数字：<input type="=number" name="number" max="100" min="0" step="10"></p>

13.4滑块

<p>滑块：<input type="=range" name="voice" max="100" min="0" step="10"></p>

13.5搜索框

<p>滑块：<input type="=search" name="search"></p>

14.表单的应用

  • 隐藏域：hidden

  • 只读：readonly

  • 禁用：disabled

15.表单初级体验

  • 提示信息：placeholder

  • 非空判断（必填字段）：required

  • 正则表达式：pattern

16.总结(脑图)

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

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

相关文章

阿里云实时数据仓库HologresFlink

阿里云实时数据仓库HologresFlink

1. 实时数仓Hologres特点 专注实时场景&#xff1a;数据实时写入、实时更新&#xff0c;写入即可见&#xff0c;与Flink原生集成&#xff0c;支持高吞吐、低延时、有模型的实时数仓开发&#xff0c;满足业务洞察实时性需求。亚秒级交互式分析&#xff1a;支持海量数据亚秒级交…
阅读更多...
python实现一个计算器

python实现一个计算器

实现一个计算器首先熟悉一下这个阅读器的属性import subprocess subprocess.run(["espeak", "-v", "enf3", "This is a Calculator"])class Calculator:def speaker(self,word):subprocess.run(["espeak", "-v", …
阅读更多...
leetcode6 括号匹配

leetcode6 括号匹配

示例 1&#xff1a; 输入&#xff1a;s "()" 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;s "()[]{}" 输出&#xff1a;true示例 3&#xff1a; 输入&#xff1a;s "(]" 输出&#xff1a;false 法一&#xff1a;最容易想到的…
阅读更多...
python的几种解释器

python的几种解释器

https://docs.python.org/3/reference/introduction.html#alternate-implementations CPython&#xff1a;这是最开始的、也是维护最多的Python实现&#xff0c;是用C语言写的。新的语言特性通常首先在这个实现中出现。 Jython&#xff1a;是用Java语言提供的Python实现。可以…
阅读更多...
玩弄GPTs：人人都会的Prompt模板

玩弄GPTs：人人都会的Prompt模板

角色定义 分享一个自用的Prompt模板&#xff0c;只要学会了这个模板&#xff0c;当遇到新场景时&#xff0c;直接套用就行。 简单总结&#xff1a; 角色定义(Master)背景(Background)规则(rule)技能(skill)限制(constaints)工作流(workflow) 经过实际测试发现&#xff0c;这…
阅读更多...
从零开始学习 JavaScript APl（七）：实例解析关于京东案例头部案例和放大镜效果！

从零开始学习 JavaScript APl（七）：实例解析关于京东案例头部案例和放大镜效果！

大家好关于JS APl 知识点已经全部总结了&#xff0c;第七部部分全部都是案例部分呢&#xff01;&#xff01;&#xff08;素材的可以去百度网盘去下载&#xff01;&#xff01;&#xff01;&#xff09; 目录 前言 一、个人实战文档 放大镜效果 思路分析&#xff1a; 关于其它…
阅读更多...
指针（三）

指针（三）

函数指针 定义&#xff1a;整型指针是指向整形的指针,数组指针式指向数组的指针,其实函数指针就是指向函数的指针。 函数指针基础&#xff1a; &#xff08;&#xff09;优先级要高于*&#xff1b;一个变量除去了变量名&#xff0c;便是它的变量类型&#xff1b;一个指针变量…
阅读更多...
两种伦敦银缺口 如何为我们的交易服务？

两种伦敦银缺口 如何为我们的交易服务？

我们做伦敦银也会碰到缺口&#xff0c;有的朋友会说伦敦银不是24小时交易的品种吗&#xff1f;怎么有缺口呢&#xff1f;虽说伦敦银是24小时交易的品种&#xff0c;但是在北京时间的凌晨也会停止交易一段时间&#xff0c;这是平台结算时间。在亚盘早段伦敦银重新开盘之后&#…
阅读更多...
Android的前台服务

Android的前台服务

概述 前台服务是用户主动意识到的一种服务&#xff0c;因此在内存不足时&#xff0c;系统也不会考虑将其终止。前台服务必须为状态栏提供通知&#xff0c;将其放在运行中的标题下方。这意味着除非将服务停止或从前台移除&#xff0c;否则不能清除该通知。 在 Android 8.0&…
阅读更多...
Vue3自定义Hooks定义

Vue3自定义Hooks定义

在Vue3中&#xff0c;自定义Hooks的定义是通过创建一个函数来共享逻辑或状态&#xff0c;以便在多个组件之间重复使用。Vue3中的自定义Hooks与React中的自定义Hooks非常相似&#xff0c;但有一些细微的差别。 要定义一个自定义Hook&#xff0c;可以按照以下步骤进行操作&#x…
阅读更多...
一对一聊天

一对一聊天

1.创建包 .服务界面 package yiduiy;import java.awt.BorderLayout; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; import java.uti…
阅读更多...
1.2 C语言简介

1.2 C语言简介

一、为什么要讲C语言 C语言是编程界的长青藤&#xff0c;可以查看语言排名发现&#xff0c;虽然现在语言很多&#xff0c;但是C语言一直占有一定地址 来源网站&#xff1a;https://www.tiobe.com/tiobe-index/ 在系统、嵌入式、底层驱动等领域存在一定的唯一性&#xff08;C语…
阅读更多...
pytorch学习10-网络模型的保存和加载

pytorch学习10-网络模型的保存和加载

系列文章目录 pytorch学习1-数据加载以及Tensorboard可视化工具pytorch学习2-Transforms主要方法使用pytorch学习3-torchvisin和Dataloader的使用pytorch学习4-简易卷积实现pytorch学习5-最大池化层的使用pytorch学习6-非线性变换&#xff08;ReLU和sigmoid&#xff09;pytorc…
阅读更多...
HTML总结

HTML总结

HTML简介 HTML(Hyper Text Markup Language)的全称为超文本标记语言&#xff0c;是一种标记语言。它包括一系列标签&#xff0c;通过这些标签可以将网络上的文档格式统一&#xff0c;使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本&#xff0c…
阅读更多...
C++模板背后的黑箱操作:编译器

C++模板背后的黑箱操作:编译器

C模板背后的黑箱操作:编译器 编译器如何处理模板 模板代码的处理 为了理解模板的复杂性&#xff0c;你需要了解编译器是如何处理模板代码的。当编译器遇到模板方法定义时&#xff0c;它会进行语法检查&#xff0c;但实际上不会编译模板。编译器不能编译模板定义&#xff0c;…
阅读更多...
Python Opencv实践 - 简单的AR项目

Python Opencv实践 - 简单的AR项目

这个简单的AR项目效果是&#xff0c;通过给定一张静态图片作为要视频中要替换的目标物品&#xff0c;当在视频中检测到图片中的物体时&#xff0c;通过单应矩阵做投影&#xff0c;将视频中的物体替换成一段视频播放。这个项目的所有素材来自自己的手机拍的视频。 静态图片&…
阅读更多...
Java注册并监听全局快捷键

Java注册并监听全局快捷键

背景 之前在博客中分享了SWT托盘功能, 随之带来一个问题, 当程序最小化后无法快速唤醒, 按照平时使用软件的思路, 自然想到了注册全局快捷键, 本文介绍使用java方式实现全局快捷键的注册. 方案 通过google,搜到一个现成的库: jintellitype, 使用maven可以直接引用, 非常方便…
阅读更多...
istio为什么能代替传统的SpringCloud 服务网格Istio概述

istio为什么能代替传统的SpringCloud 服务网格Istio概述

服务网格Istio概述 什么是服务网格(Service Mesh)&#xff1f;istio简介边车模式&#xff08;Sidecar&#xff09;为什么istio能代替传统SpringCloud&#xff1f;整体架构 首先奉上 istio官网 什么是服务网格(Service Mesh)&#xff1f; 服务网格详解 服务网格&#xff08;Se…
阅读更多...
JS - 包装类型

JS - 包装类型

目录 1&#xff0c;什么是包装类型2&#xff0c;作用3&#xff0c;和其他引用类型的区别4&#xff0c;如何为基本类型添加属性或方法 1&#xff0c;什么是包装类型 在 js 中&#xff0c;数据类型分为基本数据类型和引用数据类型。 而这2个类型有个明显的区别&#xff1a;引用…
阅读更多...
SpringMVC修炼之旅（2）基础入门

SpringMVC修炼之旅（2）基础入门

一、第一个程序 1.1环境配置 略 1.2代码实现 package com.itheima.controller;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;//定义…
阅读更多...
最新文章

Copyright @ 2022~2023