HTML快速入门教程

HTML：超文本标记语言（Hyper Text Markup Language），是通过标签的形式将内容组织起来然后共享到网络之上供其他电脑访问查看。

大家可以思考一下，怎么将自己电脑上的文件或图片共享给其他电脑？

这时候会说通过qq或者微信之间传过去就行了，那我们回溯到1990年，那个互联网刚刚开始的时代，那时候还没有万维网，没有网上冲浪。当你学习了HTML之后，就会发现其设计的魅力和简单！

目录

历史版本

文本格式化标签

计算机输出

引文, 引用, 及标签定义

常用标签汇总

布局

表单和输入

颜色

音标符

字符实体

URL编码

练习地址

历史版本

Html 1.0:1993年6月

Html 2.0:1995年11月

Html 3.2:1997年1月14日

Html 4.0:1997年12月18日

Html 4.01:1999年12月24日（微小改进）

Html 5:2014年10月28日（各个网站都开始从Flash转向HTML5）

文件的后缀名为.html或者.htm

这里要记住的是HTML都是标签（开始和结束）组合起来的，
你想要的表现形式都可以有个标签来实现，如果不行就需要组合使用！

<h1 class=”111” id=”id” title=”hhh” style="font-family:verdana;">一个标题</h1>

文本格式化标签

<b>

定义粗体文本

<em>

定义着重文字

<i>

定义斜体字

<small>

定义小号字

<strong>

定义加重语气

<sub>

定义下标字

<sup>

定义上标字

<ins>

定义插入字

<del>

定义删除字

计算机输出

<code>

定义计算机代码

<kbd>

定义键盘码（常用）

<samp>

定义计算机代码样本

<var>

定义变量

<pre>

定义预格式文本

引文, 引用, 及标签定义

<abbr>

定义缩写

<address>

定义地址

<bdo>

定义文字方向

<blockquote>

定义长的引用

<q>

定义短的引用语

<cite>

定义引用、引证

<dfn>

定义一个定义项目。

常用标签汇总

标签

含意

实例

p

段落

<p>这是一个段落。</p>

a

链接

<a href="https://xxx">这是一个链接</a>

  • href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
  • target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）、 _self（在当前标签或窗口中打开链接）_parent（父框架集中打开）、_top（整个窗口中打开）、framename（指定框架中打开）。
  • title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
  • rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
  • id(可以快速定位导航)

img

图像

<img src="/images/logo.png" width="258" height="39" alt=”名字” />

<br>

换行

<h1> - <h6> 

标题

<h1>这是一个标题。</h1>

<hr>

水平线

<!--   -->

<!-- 这是一个注释 -->

<head> 

头

可以添加在头部区域的元素标签为:

<title>标题, <style>样式, <meta>描述、关键字、作者、字符集, <link rel="stylesheet" type="text/css" href="mystyle.css"> 样式表, <script>脚本，<style>样式表, <noscript> 和 <base href>所有链接标签的默认链接

table

表格
  • tr：tr 是 table row 的缩写，表示表格的一行。
  • td：td 是 table data 的缩写，表示表格的数据单元格。
  • th：th 是 table header的缩写，表示表格的表头单元格。  <th colspan="2">跨两列</th><th rowspan="2">跨两行</th>

ol:有序

ul:无序

li:列表项

dl:定义列表

dt自定义项

dd描述

列表

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

div

区块（块级）

 大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时会换行： <h1>, <p>, <ul>, <table>

内联元素不换行：<b>, <td>, <a>, <img> 

span

区块（内联）

iframe

框架

用于内嵌页面

<iframe src="xx.html" width="200" height="200" frameborder="0"></iframe>

<meta> 

meta标签描述了一些基本的元数据。 

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于 <head> 区域

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

布局

HTML 布局 | 菜鸟教程 (runoob.com)icon-default.png?t=N7T8https://www.runoob.com/html/html-layouts.html

表单和输入

<form>

定义供用户输入的表单，action提交的url，method有get、post

<form action="/" method="post">

<input>

定义输入域

<input type="text" id="name" name="name" value="hhh" required>

type有：text、password、radio、checkbox、submit、button

<textarea>

定义文本域 (一个多行的输入控件): <textarea rows="10" cols="30">

<label>

定义了 <input> 元素的标签，一般为输入标题

<label for="name">用户名:</label>

<fieldset>

定义了一组相关的表单元素，并使用外框包含起来

<legend>

定义了 <fieldset> 元素的标题

<select>

定义了下拉选项列表

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

</select>

<optgroup>

定义选项组

<option>

定义下拉列表中的选项

<button>

定义一个点击按钮<button type="button" disabled >点我!</button>

type有：button、reset、submit。

<datalist>H5

指定一个预先定义的输入控件选项列表

<keygen>H5

定义了表单的密钥对生成器字段

<output>H5

定义一个计算结果

颜色

红色、绿色和蓝色的值组成（RGB）、最小值0（十六进制#00）、最大值255（十六进制#FF）

颜色(Color)

颜色名

颜色十六进制(Color HEX)

颜色RGB(Color RGB)

 

Black 

#000000

rgb(0,0,0)

 

Red 

#FF0000

rgb(255,0,0)

 

Lime 

#00FF00

rgb(0,255,0)

Green 

#008000

 

Blue 

#0000FF

rgb(0,0,255)

 

Yellow 

#FFFF00

rgb(255,255,0)

 

Aqua 

#00FFFF

rgb(0,255,255)

Pink 

#FFC0CB

 

Fuchsia 

#FF00FF

rgb(255,0,255)

 

Silver 

#C0C0C0

rgb(192,192,192)

Gray 

#808080

 

White 

#FFFFFF

rgb(255,255,255)

HTML 颜色名 | 菜鸟教程 (runoob.com)icon-default.png?t=N7T8https://www.runoob.com/html/html-colornames.html

音标符

音标符	字符	Construct	输出结果̀	a	a&#768;	à́	a	a&#769;	á
̂	a	a&#770;	ẫ	a	a&#771;	ã̀	O	O&#768;	Ò́	O	O&#769;	Ó
̂	O	O&#770;	Ỗ	O	O&#771;	Õ

字符实体

显示结果	描述	实体名称	实体编号空格	&nbsp;	&#160;
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;
"	引号	&quot;	&#34;
'	撇号 	&apos; (IE不支持)	&#39;
￠	分	&cent;	&#162;
£	镑	&pound;	&#163;
¥	人民币/日元	&yen;	&#165;
€	欧元	&euro;	&#8364;
§	小节	&sect;	&#167;
©	版权	&copy;	&#169;
®	注册商标	&reg;	&#174;
™	商标	&trade;	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;

URL编码

HTML URL 编码参考手册 | 菜鸟教程 (runoob.com)icon-default.png?t=N7T8https://www.runoob.com/tags/html-urlencode.html

练习地址

以上都是通过学习“菜鸟教程”里面的知识总结出来的（在这里感谢菜鸟教程的分享总结），

希望大家可以去菜鸟教程去实际敲一下哟~

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

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

相关文章

.target勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

.target勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

导言&#xff1a; 网络安全威胁如勒索病毒已经成为企业和个人数据安全的重大挑战之一。.target勒索病毒作为其中的一种&#xff0c;以其高度复杂的加密算法和迅速变化的攻击手法备受关注。本文将深入介绍.target勒索病毒的特点&#xff0c;探讨如何有效地恢复被加密的数据文件…
阅读更多...
【小记】MacOS Install golang

【小记】MacOS Install golang

问题 - command not found: go ➜ brew install golang ➜ go version go version go1.21.7 darwin/arm64写在最后&#xff1a;若本文章对您有帮助&#xff0c;请点个赞啦 ٩(๑•̀ω•́๑)۶
阅读更多...
【Visual Studio】使用空格替换制表符

【Visual Studio】使用空格替换制表符

环境 VS版本&#xff1a;VS2013 问题 如何生成空格替换制表符&#xff1f; 步骤 1、菜单 工具->选项&#xff0c;文本编辑器->C/C->制表符&#xff0c;选择【插入空格】。
阅读更多...
电容串联额定耐压问题

电容串联额定耐压问题

例如:两个电容器,其中电容C1 200uF,耐压UM1 100V;电容C2 50uF,耐压UM2500V。 &#xff08;1&#xff09;若将两电容串联使用,其等效电容和耐压各是多少? &#xff08;2&#xff09;若将两电容器并联使用,其等效电容和耐压各是多少? 分析&#xff1a; &#xff08;1&…
阅读更多...
Ubuntu Desktop - Terminal 输出全部选中 + 复制

Ubuntu Desktop - Terminal 输出全部选中 + 复制

Ubuntu Desktop - Terminal 输出全部选中 复制 1. Terminal2. Terminal 最大化3. Edit -> Select All4. Copy & PasteReferences 1. Terminal 2. Terminal 最大化 3. Edit -> Select All 4. Copy & Paste Edit -> Copy or Shift Ctrl C Edit -> Paste…
阅读更多...
深度理解实分析：超越公式与算法的学习方法

深度理解实分析：超越公式与算法的学习方法

在数学的学习旅程中&#xff0c;微积分和线性代数为许多学生提供了直观且具体的入门体验。它们通常依赖于明确的公式、算法以及解题步骤&#xff0c;而这些元素往往可以通过记忆和机械练习来掌握。然而&#xff0c;当我们迈入实分析的领域时&#xff0c;我们面临着一种全新的挑…
阅读更多...
【蓝桥杯单片机入门记录】认识单片机

【蓝桥杯单片机入门记录】认识单片机

目录 单片机硬件平台 单片机的发展过程 单片机开发板 单片机基础知识 电平 数字电路中只有两种电平&#xff1a;高和低 二进制&#xff08;8421码&#xff09; 十六进制 二进制数的逻辑运算 “与” “或” “异或” 标准C与C51 如何学好单片机 端正学习的态度、培…
阅读更多...
最详细STM32 启动流程

最详细STM32 启动流程

一、STM32三种启动方式 常规模式&#xff08;主闪存存储器&#xff09;&#xff1a; 这是最常见的启动模式。在此模式下&#xff0c;处理器会执行复位向量表中的复位地址&#xff0c;从而启动芯片。芯片会执行各种初始化操作&#xff0c;包括时钟初始化、外设初始化等&#xff…
阅读更多...
Kubernetes 核心概念

Kubernetes 核心概念

一、什么是 Kubernetes 1、含义&#xff1a; Kubernetes 是一个自动化的容器编排平台&#xff0c;它负责应用的部署、应用的弹性以及应用的管理。 2、核心功能&#xff1a; (1) 调度&#xff1a; Kubernetes 的调度器可以把用户提交的容器放到 Kubernetes 管理的集群的某一…
阅读更多...
BUGKU-WEB 社工-初步收集

BUGKU-WEB 社工-初步收集

题目描述 题目截图如下&#xff1a; 描述:其实是杂项&#xff0c;勉强算社工吧。来自当年实战 进入场景看看&#xff1a; 解题思路 做题先看源码关注可下载的资源(zip压缩包)抓包寻找可能存在的加密信息&#xff08;base64&#xff09;不管三七二十一先扫描目录再说 ps&…
阅读更多...
【AI之路】使用RWKV-Runner启动大模型，彻底实现大模型自由

【AI之路】使用RWKV-Runner启动大模型，彻底实现大模型自由

文章目录 前言一、RWKV-Runner是什么&#xff1f;RWKV-Runner是一个大语言模型的启动平台RWKV-Runner官方功能介绍 二、使用步骤1. 下载文件 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; ChatGPT的横空出世&#xff0c;打开了AI的大门&#xff…
阅读更多...
Android---Jetpack Compose学习005

Android---Jetpack Compose学习005

动画 1. 简单值动画 示例&#xff1a;背景颜色在紫色和绿色之间&#xff0c;以动画形式切换。使用 animateColorAsState() val backgroundColor by animateColorAsState(if (tabPage TabPage.Home) Purple100 else Green300) 该句代码中&#xff0c;有一个 backgroundColo…
阅读更多...
HTTP基本概念-HTTP缓存技术

HTTP基本概念-HTTP缓存技术

大家好我是苏麟 , 今天说说HTTP缓存技术 . 资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) HTTP缓存技术 HTTP 缓存有哪些实现方式? 对于一些具有重复性的 HTTP 请求&#xff0c;比如每次请求得到的数据都一样的&#xff0c;我们可以把这对「请求-响…
阅读更多...
【C语言】指针练习篇（上），深入理解指针---指针和数组练习题和sizeof，strlen的对比【图文讲解,详细解答】

【C语言】指针练习篇（上），深入理解指针---指针和数组练习题和sizeof，strlen的对比【图文讲解,详细解答】

欢迎来CILMY23的博客喔&#xff0c;本期系列为【C语言】指针练习篇&#xff08;上&#xff09;&#xff0c;深入理解指针---指针数组练习题和sizeof&#xff0c;strlen的对比【图文讲解,详细解答】&#xff0c;图文讲解指针和数组练习题&#xff0c;带大家更深刻理解指针的应用…
阅读更多...
iTop-4412 裸机程序（二十二）- RTC时钟

iTop-4412 裸机程序（二十二）- RTC时钟

目录 0.源码1. RTC2. iTop4412 中的 RTC使用的相关寄存器3. BCD编码4. 关键源码 0.源码 GitHub&#xff1a;https://github.com/Kilento/4412NoOS 1. RTC RTC是实时时钟&#xff08;Real Time Clock&#xff09;的缩写&#xff0c;是一种用于计算机系统的硬件设备&#xff0…
阅读更多...
Matplotlib自定义辅助函数 (一)：让你的图表大放异彩！

Matplotlib自定义辅助函数 (一)：让你的图表大放异彩！

Matplotlib美化秘诀&#xff1a;自定义辅助函数&#xff0c;让你的图表大放异彩&#xff01; 利用Matplotlib进行数据可视化示例 &#x1f335;文章目录&#x1f335; &#x1f333;一、创建自定义样式函数&#x1f333;&#x1f333;二、创建自定义颜色映射&#x1f333;&…
阅读更多...
Momentum2

Momentum2

攻击机 192.168.223.128 目标机 192.168.223.147 主机发现 nmap -sP 192.168.223.0/24 端口扫描 nmap -sV -A -p- 192.168.223.147 开启了22 80 端口 看一下web界面 源码&#xff0c;robots.txt ,url都观察了一下好像没什么有用信息 扫一下目录 gobuster dir -u http:…
阅读更多...
实现JNDI

实现JNDI

实现JNDI 问题陈述 Smart Software Developer Ltd.想要开发一款Web应用程序，它使用servlt基于雇员ID显示雇员信息，雇员ID由用户通过HTML用户界面传递。雇员详细信息存储在Employee_Master表中。另外，Web应用程序应显示网站被访问的次数。 解决方案 要解决上述问题，需要执…
阅读更多...
Linux中sigaction函数和SIGCHLD信号的使用

Linux中sigaction函数和SIGCHLD信号的使用

sigaction函数&#xff1a; 函数说明&#xff1a;注册一个信号处理函数 函数原型&#xff1a;int sigaction(int signum, const struct sigaction *act, struct sigaction *oldact); 函数参数&#xff1a; signum:捕捉的信号act:传入参数&#xff0c;…
阅读更多...
Verilog不支持浮点数以及错误事例

Verilog不支持浮点数以及错误事例

Verilog 是一种硬件描述语言&#xff08;HDL&#xff09;&#xff0c;用于描述和设计数字电路和系统。它的主要目的是描述硬件行为和结构&#xff0c;因此不直接支持浮点数。Verilog 主要用于设计数字逻辑电路、处理器和其他数字系统&#xff0c;它的数据类型主要是位向量和整数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023