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;支持海量数据亚秒级交…
阅读更多...
玩弄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&…
阅读更多...
一对一聊天

一对一聊天

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语…
阅读更多...
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…
阅读更多...
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;//定义…
阅读更多...
【JaveSE】:认识异常

【JaveSE】:认识异常

异常 一.异常的概念二.异常的体系结构1.基础结构2.异常分类 三.异常的处理1.防御式编程2.异常的抛出3.异常捕获4.try-catch捕获并处理5.finally 四.异常处理流程五.自定义异常 一.异常的概念 在Java中&#xff0c;将程序执行过程中发生的不正常行为称为异常。 算术异常 数组越界…
阅读更多...
推荐一款手持式ECU刷写设备，国产软件配合使用

推荐一款手持式ECU刷写设备，国产软件配合使用

同星智能开发的一款手持式ECU刷写工具——TF1011&#xff0c;在TSMaster中导入诊断流程即可离线一键刷写。在 PC 端完成配置后&#xff0c;在设备可以在手持式离线场景下实现&#xff1a;基于 UDS 协议的诊断和基于 UDS 协议的 Flash Bootloader 程序更新功能。 产品简介—TF10…
阅读更多...
ansible常用模块介绍

ansible常用模块介绍

ansible运行模块的两种方式 Ad - Hoc 利用 ansible 命令直接完成管理 &#xff0c; 主要用于临时命令使用场景 ansible westos -m shell -a ls /mnt playbook ansible 脚本 &#xff0c; 主要用于大型项目场景 &#xff0c; 需要前期的规划 vim test.yml - hosts: all task…
阅读更多...
【栈】车队

【栈】车队

题目&#xff1a; /** 单调栈&#xff1a;存储到终点的时间&#xff0c;需要考虑浮点数* 思路&#xff1a;首先按照距离进行排序&#xff08;目的&#xff1a;如果离终点远的车辆用时比前面的车辆用时短&#xff0c;则是一个车队)* 排序后计算每一辆车辆的时间如果用…
阅读更多...
web：[SUCTF 2019]CheckIn（一句话木马，.user.ini）

web：[SUCTF 2019]CheckIn（一句话木马，.user.ini）

题目 页面显示 上传文件&#xff0c;随便上传一个文件试试 上传了一个文本&#xff0c;显示失败&#xff0c;不是图片 那就换图片马上传试试 不能包含<?,换一种写法&#xff0c;需要加上GIF89a&#xff0c;进行exif_imagetype绕过 上传成功 这里用.user.ini或者用post传参…
阅读更多...
甘草书店：#8 2023年11月22日 星期三「“说一套做一套”的甘草与麦田」

甘草书店：#8 2023年11月22日 星期三「“说一套做一套”的甘草与麦田」

最近与甘草书店的投资方和意向投资方沟通&#xff0c;听取了来自不同领域不同人群的观点。他们讲的都有道理&#xff0c;但他们说的都不是甘草。就像“麦田”成立之前&#xff0c;世间没有“麦田”一样&#xff1b;“甘草”出现之前&#xff0c;世间没有也没有“甘草”。 故事…
阅读更多...
力扣116. 填充每个节点的下一个右侧节点指针（详细讲解root根节点的理解）

力扣116. 填充每个节点的下一个右侧节点指针（详细讲解root根节点的理解）

题目&#xff1a; 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右…
阅读更多...
D. In Love

D. In Love

贪心&#xff0c;维护最靠左的右端点以及最靠右的左端点 // Problem: D. In Love // Contest: Codeforces - Codeforces Round 905 (Div. 3) // URL: https://codeforces.com/contest/1883/problem/D // Memory Limit: 256 MB // Time Limit: 2000 ms // // Powered by CP Edi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023