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

练习地址

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

计算机的历史以及原理

计算机的历史以及原理

一、计算机发展历史 计算机的历史可以追溯到几个世纪前，但现代计算机的起源和发展主要经历了以下几个重要阶段： 1. 机械计算设备：早在17世纪，人们就开始尝试制造可以进行基本数学运算的设备。例如，法国哲学家兼数学家Blaise Pascal在1642年发明了Pascalene，这是一种用于…
阅读更多...
洛谷_P1059 [NOIP2006 普及组] 明明的随机数_python写法

洛谷_P1059 [NOIP2006 普及组] 明明的随机数_python写法

这道题的关键在于去重和排序&#xff0c;去重可以联想到集合&#xff0c;那排序直接使用sort方法。 n int(input()) data set(map(int,input().split( ))) data list(data) data.sort() print(len(data)) for i in data:print(i,end )
阅读更多...
深度理解实分析：超越公式与算法的学习方法

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

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

Nginx实战：日志按天分割

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、方式1&#xff1a;定时任务执行分割脚本 1.分割日志脚本 2.添加定时任务 二、方式2&#xff1a;logrotate配置分割 1.logrotate简单介绍 2.新增切割ngi…
阅读更多...
steam搬砖项目赚钱吗？3年亲身经历告诉你真相

steam搬砖项目赚钱吗？3年亲身经历告诉你真相

csgo饰品交易市场由来已久&#xff0c;且玩家众多&#xff0c;绝对蓝海。而steam搬砖项目就是基于csgo游戏的交易。在steam用美金买入道具、装备和饰品&#xff0c;然后搬砖到国内的网易buff售卖&#xff0c;从中赚取一定的差价和汇率差额。 steam搬砖怎么赚钱&#xff1f;在s…
阅读更多...
shumei 滑块 qd参数仿写记录

shumei 滑块 qd参数仿写记录

在对qd参数进行仿写的过程中&#xff0c;由于缺失很多js的基础知识&#xff0c;导致进展一度非常的缓慢&#xff0c;并且不知道自己的方向是不是正确的方向。在不知道自己的方向是否正确的时候&#xff0c;这个时候自己的投入的努力都是畏首畏尾。大概是一种&#xff0c;不知道…
阅读更多...
【网站项目】229企业员工薪酬关系系统

【网站项目】229企业员工薪酬关系系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
在线Windows鼠标主题转换器（ani动态鼠标改为Xcur）

在线Windows鼠标主题转换器（ani动态鼠标改为Xcur）

文章目录 前言在哪访问如何使用惨淡的界面简单粗暴的使用方法目前的bug 前言 在这篇文章中&#xff0c;我使用一些方法把转换脚本包装成了在线服务&#xff0c;现在我将说明如何使用服务。 在哪访问 还是说明一下&#xff0c;访问链是这个&#xff1a;https://www.sakebow.c…
阅读更多...
51单片机编程基础（C语言）：LED点阵屏

51单片机编程基础（C语言）：LED点阵屏

点阵屏介绍 类似于数码管&#xff0c;要用到肉眼视觉效应。扫描&#xff0c;才能把每一个LED都能选中&#xff0c;从而显示我们想要的图形&#xff0c;否则&#xff0c; 只能一次点亮一个LED&#xff0c; LED使用 51单片机点阵屏电路图&#xff1a; 实际连接顺序如下图&#…
阅读更多...
(06)Hive——正则表达式

(06)Hive——正则表达式

Hive版本&#xff1a;hive-3.1.2 一、Hive的正则表达式概述 正则表达式是一种用于匹配和操作文本的强大工具&#xff0c;它是由一系列字符和特殊字符组成的模式&#xff0c;用于描述要匹配的文本模式。 Hive的正则表达式灵活使用解决HQL开发过程中的很多问题&#xff0c;本篇文…
阅读更多...
Python dict函数

Python dict函数

Python中的字典&#xff08;dict&#xff09;是一种非常重要且灵活的数据结构&#xff0c;它提供了键值对的存储和访问机制。字典函数&#xff08;dict()&#xff09;作为创建字典的工具之一&#xff0c;可以从多种数据结构中创建字典对象。在本文中&#xff0c;将深入探讨dict…
阅读更多...
统一数据返回格式 及 可能遇到的问题；统一异常处理

统一数据返回格式 及 可能遇到的问题；统一异常处理

统一数据返回格式 统一数据返回格式就像我们寄快递一样&#xff0c;不管你需要寄的东西具体是什么都需要将它打包到统一的快递箱中。 此时我们需要一个“快递箱”用来将返回的数据“装”在里面。这个类是根据业务情况来自行定义的。 Data public class Resp<T> {//200…
阅读更多...
蓝桥杯嵌入式学习记录——PWM输出

蓝桥杯嵌入式学习记录——PWM输出

目录 一、PWM原理介绍 二、学习目的 三、cubeMX的配置 四、PWM输出代码 一、PWM原理介绍 PWM&#xff08;Pulse Width Modulation&#xff0c;脉宽调制&#xff09;是一种通过改变信号的脉冲宽度来控制电平的技术。它通过调整脉冲信号的占空比&#xff08;高电平时间与周期…
阅读更多...
TMGM官网平台开户运作流程如下：

TMGM官网平台开户运作流程如下：

TMGM官网平台开户运作流程如下&#xff1a; 首先&#xff0c;投资者需要注册并登录TMGM官网平台。在平台上&#xff0c;投资者可以选择适合自己的交易账户类型&#xff0c;包括标准账户、高级账户等。 然后&#xff0c;投资者需要进行身份验证和资金入账操作。TMGM会要求投资…
阅读更多...
系统架构27 - 软件架构设计（6）

系统架构27 - 软件架构设计（6）

基于架构的软件开发方法 基于架构的软件开发方法&#xff08;ABSD&#xff09;概述概念与术语开发模型体系结构需求体系结构设计体系结构文档化体系结构复审体系结构实现体系结构的演化 基于架构的软件开发方法&#xff08;ABSD&#xff09; 基于体系结构的软件设计 (Architec…
阅读更多...
2月3日作业

2月3日作业

1.编程实现单向循环链表的头插&#xff0c;头删、尾插、尾删 尾插/头插&#xff0c;头删&#xff0c;尾删&#xff1a; 头文件&#xff1a; #ifndef __HEAD_H_ #define __HEAD_H_#include<stdio.h> #include<string.h> #include<stdlib.h>enum {FALSE-1,SU…
阅读更多...
【教程】MySQL数据库学习笔记（一）——认识与环境搭建（持续更新）

【教程】MySQL数据库学习笔记（一）——认识与环境搭建（持续更新）

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 【MySQL数据库学习】系列文章 第一章 《认识与环境搭建》 第二章 《数据类型》 文章目录 【MySQL数据库学习】系列文章一、认…
阅读更多...
matplotlib雷达图制作具体步骤

matplotlib雷达图制作具体步骤

此次我们制作的是关于护肤品下的畅销品类雷达图&#xff0c;数据如下&#xff1a; 数据预览&#xff1a; 一、代码展示 import pandas as pd import numpy as np import matplotlib.pyplot as plt plt.rcParams[font.sans-serif][SimHei] adress"D:/pandas练习文件/雷达…
阅读更多...
关于Windows Media Player的一些知识，看这篇文章就差不多了

关于Windows Media Player的一些知识，看这篇文章就差不多了

你知道如何在电脑上打开Windows Media Player吗？如果它不是你电脑上默认的媒体播放器，你知道如何将其设为默认吗？此外，如果你找不到它，你知道怎么把它找回来吗？这篇文章将向你展示你想要了解的所有信息。 在这篇文章中，我们将向你展示以下信息： 如何打开Windows Medi…
阅读更多...
【MySQL/Redis】如何实现缓存一致

【MySQL/Redis】如何实现缓存一致

目录 不实用的方案 1. 先写 MySQL , 再写 Redis 2. 先写 Redis &#xff0c; 再写MySQL 3. 先删 Redis&#xff0c;再写 MySQL 实用的方案 1. 先删 Redis&#xff0c;再写 MySQL, 再删 Redis 2. 先写 MySQL , 再删 Redis 3. 先写MySQL&#xff0c;通过BinLog&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023