03前端成长日记-关于HTML

154 阅读8分钟

HTML

HTML是一种超文本标记语言(Hyper Text Markup Language),由W3C(万维网)制定规范

HTML 发展历史

  • HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
  • HTML 3.2——1997年1月14日,W3C推荐标准
  • HTML 4.0——1997年12月18日,W3C推荐标准
  • HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
  • HTML 5——2014年10月28日,W3C推荐标准

HTML 标签列表

基础

标签 描述
<!DOCTYPE> 定义文档类型
<html> 定义 HTML 文档
<title> 定义文档的标题
<body> 定义文档的主体
<h1>to <h6> 定义 HTML 标题
<p> 定义段落
<br> 换行显示
<hr> 水平线
< !--..--> 注释

格式

标签 描述
<acronym> 定义只取首字母的缩写
<abbr> 定义缩写
<address> 定义文档作者或拥有者的联系信息
<b> 定义粗体文本
<bdi> 定义文本的文本方向,使其脱离其周围文本的方向设置
<bdo> 定义文字方向
<big> 定义大号文本
<blockquote> 定义长的引用
<center> 定义居中文本
<cite> 定义引用(citation)
<code> 定义计算机代码文本
<del> 定义被删除文本
<dfn> 定义定义项目
<em> 定义强调文本
<font> 定义文本的字体、尺寸和颜色
<i> 定义斜体文本
<ins> 定义被插入文本
<kdd> 定义键盘文本
<mark> 定义有记号的文本
<meter> 定义预定义范围内的度量
<pre> 定义预格式文本
<progress> 定义任何类型的任务的进度
<q> 定义短的引用
<rp> 定义若浏览器不支持 ruby 元素显示的内容
<tr> 定义 ruby 注释的解释
<ruby> 定义 ruby 注释
<s> 定义加删除线的文本
<samp> 定义计算机代码样本
<small> 定义小号文本
<strike> 定义加删除线文本
<strong> 定义语气更为强烈的强调文本
<sup> 定义上标文本
<sub> 定义下标文本
<time> 定义日期/时间
<tt> 定义打字机文本
<u> 定义下划线文本
<var> 定义文本的变量部分
<wbr> 定义可能的换行符

表单

标签 描述
<from> 定义供用户输入的 HTML 表单
<input> 定义输入控件
<textarea> 定义多行的文本输入控件
<button> 定义按钮
<select> 定义选择列表(下拉列表)
<optgroup> 定义选择列表中相关选项的组合
<label> 定义 input 元素的标注
<fieldset> 定义围绕表单中元素的边框
<legend> 定义 fieldset 元素的标题
<isindex> 定义与文档相关的可搜索索引
<datalist> 定义下拉列表
<keygen> 定义生成密钥
<output> 定义输出的一些类型

框架

标签 描述
<frame> 定义框架集的窗口或框架
<frameset> 定义框架集
<noframes> 定义针对不支持框架的用户的替代内容
<iframe> 定义内联框架

图像

标签 描述
<img> 定义图像
<map> 定义图像映射
<area> 定义图像地图内部的区域
<canvas> 定义图形
<figcaptions> 定义 figure 元素的标题
<figure> 定义媒介内容的分组,以及它们的标题

音频/视频

标签 描述
<audie> 定义声音内容
<source> 定义媒介源
<track> 定义用在媒体播放器中的文本轨道
<video> 定义视频

链接

标签 描述
<a> 定义锚
<link> 定义文档与外部资源的关系
<nav> 定义导航链接

列表

标签 描述
<ul> 定义无序列表
<ol> 定义有序列表
<li> 定义列表的项目
<dir> 不赞成使用。定义目录列表
<dl> 定义定义列表
<dt> 定义定义列表中的项目
<dd> 定义定义列表中项目的描述
<menu> 定义命令的菜单/列表
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目
<command> 定义命令按钮

表格

标签 描述
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格中的表头单元格
<tr> 定义表格中的行
<td> 定义表格中的单元
<thead> 定义表格中的表头内容
<tbody> 定义表格中的主体内容
<tfoot> 定义表格中的表注内容(脚注)
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组

样式/节

标签 描述
<style> 定义文档的样式信息
<div> 定义文档中的节
<span> 定义文档中的节
<header> 定义 section 或 page 的页眉
<footer> 定义 section 或 page 的页脚
<section> 定义 section
<article> 定义文章
<aside> 定义页面内容之外的内容
<details> 定义元素的细节
<dialog> 定义对话框或窗口
<summary> 为 <details> 元素定义可见的标题

元信息

标签 描述
<head> 定义关于文档的信息
<meta> 定义关于 HTML 文档的元信息
<base> 定义页面中所有链接的默认地址或默认目标
<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸

编程

标签 描述
<script> 定义客户端脚本
<noscript> 定义针对不支持客户端脚本的用户的替代内容
<applet> 不赞成使用。定义嵌入的 applet
<embed> 为外部应用程序(非 HTML)定义容器
<object> 定义嵌入的对象
<param> 定义对象的参数

遇到不会的标签可上MDN文档
1、Google:关键词 + MDN
2、切换成中文

W3C 简介

万维网联盟(W3C)是由Tim Berners-Lee(蒂莫西·约翰·“蒂姆”·伯纳·李爵士)1994年10月离开欧洲核研究组织(CERN)后成立的,它成立于麻省理工学院计算机科学实验室(MIT/LCS)在欧盟委员会和国防高级研究计划局(DARPA)的支持下,该机构开创了ARPANET,这是互联网的前身之一。它位于科技广场,直到2004年,当它与CSAIL一起搬到Stata中心。
万维网是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南,如广为业界采用的超文本标记语言HTML(标准通用标记语言下的一个应用)、可扩展标记语言XML(标准通用标记语言下的一个子集)以及帮助残障人士有效获得Web信息的无障碍指南(WCAG)等,有效促进了Web技术的互相兼容,对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

MDN 简介

MDN Web Docs(旧称Mozilla Developer Network、Mozilla Developer Center,简称MDN)是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站。

MDN 发展历史

该项目始于2005年,最初由Mozilla公司员工Deb Richardson领导。自2006年以来,文档工作由Eric Shepherd领导
网站最初的内容是由DevEdge提供,但在AOL收购Netscape后,DevEdge网站也宣布关闭。为此Mozilla基金会向AOL获取了DevEdge发布的内容,同时将DevEdge内容搬移到mozilla.org。 MDN本身有一个论坛,并在Mozilla IRC网络上有一个IRC频道#mdn。MDN由Mozilla公司提供服务器和员工的资助。
2016年10月3日发表的Brave网页浏览器将MDN作为其搜索引擎选项之一

空标签

没有闭合标签的标签被称作为空标签。
在我们使用的标签中,有的具有闭合标签。例如<td>标签,它有闭合标签</td>。但是也有一部分标签没有闭合标签,例如<br />标签,这一类标签我们称之为空标签。

常见的空标签:

  • <area>
  • <base>
  • <br>
  • <col>
  • <colgroup>
  • <command>
  • <embed>
  • <hr>
  • <img>
  • <input>
  • <keygen>
  • <link>
  • <meta>
  • <param>
  • <source>
  • <track>
  • <wbr>

可替换标签

在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。 简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。某些可替换元素,例如<iframe>元素,可能具有自己的样式表,但它们不会继承父文档的样式。

常见的可替换标签:

  • <iframe>
  • <video>
  • <embed>
  • <img>
  • <input>

有些元素仅在特定情况下被作为可替换元素处理,例如:

  • <option>
  • <audio>
  • <canvas>
  • <object>
  • <applet>