HTML快速入门教程

news2024/11/30 2:50:27

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.coloradmin.cn/o/1449940.html

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

相关文章

C++ //练习 6.7 编写一个函数，当它第一次被调用时返回0，以后每次被调用返回值加1。

C++ //练习 6.7 编写一个函数，当它第一次被调用时返回0，以后每次被调用返回值加1。

C Primer&#xff08;第5版&#xff09; 练习 6.7 练习 6.7 编写一个函数&#xff0c;当它第一次被调用时返回0&#xff0c;以后每次被调用返回值加1。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /**********************…
阅读更多...
【MySQL进阶之路】千万级数据删除导致的慢查询SQL调优实战

【MySQL进阶之路】千万级数据删除导致的慢查询SQL调优实战

欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术的推送&#xff01; 在我后台回复 「资料」 可领取编程高频电子书&#xff01; 在我后台回复「面试」可领取硬核面试笔记&#xff01; 文章导读地址…
阅读更多...
Pandas数据库大揭秘：read_sql、to_sql 参数详解与实战篇【第81篇—Pandas数据库】

Pandas数据库大揭秘：read_sql、to_sql 参数详解与实战篇【第81篇—Pandas数据库】

Pandas数据库大揭秘&#xff1a;read_sql、to_sql 参数详解与实战篇 Pandas是Python中一流的数据处理库&#xff0c;而数据库则是数据存储和管理的核心。将两者结合使用&#xff0c;可以方便地实现数据的导入、导出和分析。本文将深入探讨Pandas中用于与数据库交互的两个关键方…
阅读更多...
2024，欢迎来到性价比时代

2024，欢迎来到性价比时代

「不是XX买不起&#xff0c;而是YY更有性价比。」——翻开过去一年的商业消费史&#xff0c;这句话几乎可以贯穿始终。年轻消费者们追求性价比的眼光一旦定型&#xff0c;一些品牌过去被品质生活、消费升级包装出来的华丽外壳&#xff0c;很容易一击就碎。 胜出的「性价比之王…
阅读更多...
关于nuclei-ai-extension

关于nuclei-ai-extension

nuclei-ai-extension &#x1f341; Nuclei 官方开发的 利用 AI 生成 nuclei 模板的工具。Nuclei AI - 用于快速生成 Nuclei 模板的浏览器扩展&#xff0c;Nuclei AI Browser Extension建立在 cloud.projectdiscovery.io 之上&#xff0c;使用户能够从任何网页中提取漏洞信息&…
阅读更多...
【JAVA-Day77】Java线程继承Thread类实现Runnable接口

【JAVA-Day77】Java线程继承Thread类实现Runnable接口

Java线程继承Thread类实现Runnable接口 《Java线程编程指南&#xff1a;轻松掌握线程的创建和启动》摘要 &#x1f60a;引言 &#x1f680;一、什么是进程和线程 ❓二、线程如何创建 &#x1f60e;2.1 继承Thread类并重写run()方法 &#x1f4dd;2.2 实现Runnable接口并实现run…
阅读更多...
ZISUOJ 2022年算法基础公选课练习四(Map)

ZISUOJ 2022年算法基础公选课练习四(Map)

说明&#xff1a; 博主为了提早预习数据结构和C的一些知识&#xff0c;自己琢磨外加查阅资料所写的代码&#xff0c;题目来源于22年初的学院老师组织的算法基础公选课的练习。我的代码甚至思路肯定存在许多不足和错误&#xff0c;欢迎大家批评指正。 题目列表&#xff1a; 问题…
阅读更多...
操作系统-408

操作系统-408

一、操作系统概述 1、定义 负责协调软件和硬件的计算机资源的工作为上层应用提供简易的服务操作系统是系统软件 2、功能&#xff1a; 操作系统是系统资源的管理者 处理机管理存储器管理文件管理设备管理向上层提供方便易用的服务 命令接口程序接口对硬件机器的扩展 3、特征…
阅读更多...
（四十）大数据实战——Zabbix监控平台的部署搭建

（四十）大数据实战——Zabbix监控平台的部署搭建

前言 Zabbix是一款能够监控各种网络参数以及服务器健康性和完整性的软件。Zabbix使用灵活的通知机制&#xff0c;允许用户为几乎任何事件配置基于邮件的告警&#xff0c;这样可以快速反馈服务器的问题。基于已存储的数据&#xff0c;Zabbix提供了出色的报告和数据可视化功能。…
阅读更多...
OpenGL-ES 学习(1)---- AlphaBlend

OpenGL-ES 学习(1)---- AlphaBlend

AlphaBlend OpenGL-ES 混合本质上是将 2 个片元的颜色进行调和(一般是求和操作)&#xff0c;产生一个新的颜色 OpenGL ES 混合发生在片元通过各项测试之后&#xff0c;准备进入帧缓冲区的片元和原有的片元按照特定比例加权计算出最终片元的颜色值&#xff0c;不再是新&#xf…
阅读更多...
PR：剪辑工具的使用

PR：剪辑工具的使用

这些是剪辑工具&#xff1a; 选择工具 用来选择、拉伸或者拖拽用&#xff0c;如果放置到片段开头和结尾处会变成红色带箭头的方框&#xff0c;可以拉升或者缩短片段的时长 如果缩短的话&#xff0c;两段视频之间会出现空挡 可以点击空挡处&#xff0c;右键点击删除波纹&#xf…
阅读更多...
Java毕业设计-基于ssh的网上电子商城管理系统-第74期

Java毕业设计-基于ssh的网上电子商城管理系统-第74期

获取源码资料&#xff0c;请移步从戎源码网&#xff1a;从戎源码网_专业的计算机毕业设计网站 项目介绍 基于ssh的网上电子商城管理系统&#xff1a;前端jsp、js&#xff0c;后端 struts、spring、hibernate&#xff0c;集成商品浏览&#xff0c;商品详情&#xff0c;购物车&…
阅读更多...
【Apache Superset】从概述、安装到运用，一篇掌握！

【Apache Superset】从概述、安装到运用，一篇掌握！

文章目录 什么是 Superset&#xff1f;Superset 的优势安装安装 Anaconda 包管理工具创建 Superset 的 Python 环境 下载 Superset 依赖更新工具安装 Superset配置 MySQL 元数据库初始化 Superset 数据库报错一报错二报错三数据库初始化完成 初始化 Superset报错一警告信息 启动…
阅读更多...
【顶刊|修正】多区域综合能源系统热网建模及系统运行优化【复现+延伸】

【顶刊|修正】多区域综合能源系统热网建模及系统运行优化【复现+延伸】

目录 主要内容 部分代码 结果一览 下载链接 主要内容 该程序复现《多区域综合能源系统热网建模及系统运行优化》模型并进一步延伸&#xff0c;基于传热学的基本原理建立了区域热网能量传输通用模型&#xff0c;对热网热损方程线性化实现热网能量流建模&#xff…
阅读更多...
VueCLI核心知识1：ref属性、props配置、mixin混入

VueCLI核心知识1：ref属性、props配置、mixin混入

1 ref 属性 ref属性类似于js原生获取DOM元素 <template><div><h1 v-text"msg" ref"title"></h1><button click"showDom">点我输出上方的Dom元素</button><School ref"sch"></School>…
阅读更多...
消息队列RabbitMQ-使用过程中面临的问题与解决思路

消息队列RabbitMQ-使用过程中面临的问题与解决思路

消息队列在使用过程中会出现很多问题 首先就是消息的可靠性&#xff0c;也就是消息从发送到消费者接收&#xff0c;消息在这中间过程中可能会丢失 生产者到交换机的过程、交换机到队列的过程、消息队列中、消费者接收消息的过程中&#xff0c;这些过程中消息都可能会丢失。 …
阅读更多...
UnityShader玉石效果

UnityShader玉石效果

效果&#xff1a; 代码&#xff1a; Shader "MyShader/Jade" {Properties{_DiffuseColor("漫反射颜色",color)(1,1,1,1)_ThicknessMap("厚度图",2d)"white"{}_AddColor("叠加颜色",color)(1,1,1,1)_CubeMap("环境贴图…
阅读更多...
【C++】const、static关键字和构造函数初始化

【C++】const、static关键字和构造函数初始化

&#x1f497;个人主页&#x1f497; ⭐个人专栏——C学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 目录 1. const修饰成员函数 1.1 语法格式 1.2 权限放大缩小 1.3 思考 1.4 解答 2. 再谈构造函数 2.1 构造函数体赋值 2.2 初始…
阅读更多...
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Navigation组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Navigation组件 鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#…
阅读更多...
Mybatis开发辅助神器p6spy

Mybatis开发辅助神器p6spy

Mybatis什么都好&#xff0c;就是不能打印完整的SQL语句&#xff0c;虽然可以根据数据来判断一二&#xff0c;但始终不能直观的看到实际语句。这对我们想用完整语句去数据库里执行&#xff0c;带来了不便。 怎么说呢不管用其他什么方式来实现完整语句&#xff0c;都始终不是Myb…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023