HTML
一种用来描述网页的语言
Html文档后缀名:.html .htm
<!DOCTYPE>定义文档类型, <!DOCTYPE> 声明不是一个 HTML 标签,位于文档中的最前面的位置,处于 <html> 标签之前。<!DOCTYPE> 标签没有结束标签。且<!DOCTYPE> 声明不区分大小写。有助于浏览器正确显示网页
标签
<!--…-->定义注释,注释在浏览器中不会显示
<a>定义超文本链接
<abbr>定义缩写
<area>定义图像映射内部的区域
<article>定义一个文章区域
<aside>定义页面侧边栏内容
<audio>定义音频内容
<b>定义文本粗体
<base>定义页面中所有链接的默认地址或默认目标
<bdo>定义文字方向
<blockquote>定义长的引用
<body>定义文档主体
<br>定义换行。空元素,在开始标签中已关闭,无关闭标签
<button>定义按钮
<caption>定义表格标题
<cite>定义引用
<code>定义计算机代码文本
<col>定义表格中一或多列的属性
<command>定义命令按钮,例如单选按钮,复选按钮或复选框
<dd>定义定义列表中项目的描述
<del>定义被删除的文本
<dfn>定义定义项目
<dialong>定义对话框
<div>块级元素,浏览器会在其前后显示折行。可用于组合其他HTML元素容器 。没有特定含义,与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性,另一个常见用途是文档布局,定义了文档区域
<dl>定义列表详情
<dt>定义列表中项目
<em>定义强调文本
<embed>定义插入内容,如插件
<filedset>定义围绕表单的元素边框
<form>定义HTML文档表单
<frame>定义框架集的窗口或框架
<frameset>定义框架集
<h1>to <h6>定义 HTML 标题,浏览器会自动在标题前后添加空行
<head>定义关于文档的信息,head 的内容不会在浏览器中显示,它的作用是包含一些页面的元数据。可以添加在头部区域的元素标签为: <title>, <style>:文档样式文件引用地址, <meta>, <link>, <script>:用于加载脚本文件, <noscript> 和 <base>:描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
<header>定义了文档的头部区域
<hr>定义水平线,可用于分隔内容
<html>定义HTML文档
<i>定义斜体字
<iframe>定义内联框架,设置高度与宽度,移除边框
<img>定义图像
<input>定义输入控件,可以创建文本输入框、密码框、单选和复选按钮
<ins>定义被插入文本
<kbd>定义键盘文本
<keygen>规定用于表单的密钥对生成器字段。
<label>定义 input元素的标注,为表单元素添加标签,提高可访问性
<legend>定义fieldset元素的标题。
<li>定义列表的项目
<link>定义文档与外部资源的关系
<main>定义文档的主体部分。
<map>定义图像映射
<mark>定义带有记号的文本。请在需要突出显示文本时使用 <em> 标签。
<menu>不赞成使用。定义菜单列表。
<meta>定义关于 HTML 文档的元信息。
<meter>定义度量衡。仅用于已知最大和最小值的度量。
<nav>定义导航链接的部分
<noframes>定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript>定义针对不支持客户端脚本的用户的替代内容。
<object>定义内嵌对象
<ol>定义有序列表。
<optgroup>定义选择列表中相关选项的组合。
<option>定义选择列表中的选项。
<output>定义不同类型的输出,比如脚本的输出。
<p>定义段落,浏览器会自动在段落前后添加空行,可运用<br>拆行(在不产生新段落的情况下换行)
<param>定义对象的参数。
<pre>定义预格式文本。
<progress>定义运行中的进度(进程)。
<q>定义短的引用。
<rp>标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>标签定义字符(中文注音或字符)的解释或发音。
<ruby>标签定义 ruby 注释(中文注音或字符)。
<samp>定义计算机代码样本。
<script>定义客户端脚本,既可包含脚本语句,也可通过 src 属性指向外部脚本文件。例如JavaScript
<section>标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<select>定义选择列表(下拉列表)。
<small>定义小号文本。
<source>标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
<span>内联元素,不会显示新行,可作文本容器。无特定含义,用来组合文档中的行内元素,与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性
<strong>定义强调文本,网页阅读器会重读
<style>定义文档的样式信息。
<sub>定义下标文本。
<summary>标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。
<sup>定义上标文本。
<table>定义表格,每个表格有若干行,由<tr>定义,每行有若干单元格,由<td>定义,表格可以包含标题行,用于定义列的标题<th>
<tbody>定义表格中的主体内容。
<td>定义表格中的单元。
<textarea>定义多行的文本输入控件。
<tfoot>定义表格中的表注内容(脚注)。
<th>定义表格中的表头单元格。
<thead>定义表格中的表头内容。
<time>定义日期或时间,或者两者。
<template>定义在页面加载时隐藏的一些内容。
<title>定义文档的标题。
<tr>定义表格中的行。
<track>标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt>定义打字机文本。
<u>不赞成使用。定义下划线文本。
<ul>定义无序列表。
<var>定义文本的变量部分。
<video>标签定义视频,比如电影片段或其他视频流。
<wbr>规定在文本中的何处适合添加换行符。
大多数元素被定义为块级元素或内联元素
块级元素在浏览器显示时,通常会以新行来开始(和结束),例如<h1>
内联元素在显示时通常不会以新行开始,例如<b>
<mate>元数据
通过<meta charset="utf-8">指定字符编码:这个元素简单的指定了文档的字符编码(在这个文档中被允许使用的字符集)。 utf-8 是一个通用的字符集,它包含了任何人类语言中的大部分的字符。 这意味着你的web页面可以显示任意的语言; 所以对于你的每一个页面,使用这个设置是很好的!
许多<meta> 元素包含了name 和 content 特性:name 特性指定了meta 元素的类型; 说明该元素包含了什么类型的信息。content 指定了实际的元数据内容。
输出提醒
源代码中所有连续的空格或空行输出时都会显示为一个空格
字符实体(对大小写敏感)
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 字符实体类似这样:&entity_name;或&#entity_number;
如需显示小于号,我们必须这样写:< 或 < 或 <
不间断空格( )
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 字符实体。
属性
属性是HTML元素提供的附件信息,属性值应永远包括在引号内
accesskey设置访问元素的键盘快捷键。
class规定元素的类名(classname)可多用class=“”(引号里可填入多个class属性)
contenteditableNew规定是否可编辑元素的内容。
contextmenuNew指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
data-*用于存储页面的自定义数据
dir设置元素中内容的文本方向。
draggable指定某个元素是否可以拖动
dropzone指定是否将数据复制,移动,或链接,或删除
download用于下载文件而不是跳转到另一个网页,例如<a href="document.pdf" download>下载文档</a>
href规定链接指向页面的URL,如果不存在<a>标签就不再是超链接
hidden属性规定对元素进行隐藏。
id创建一个HTML文档书签,不会以任何特殊方式显示,对于读者来说是隐藏的,想让读者看到需要创建一个链接,例如:在HTML文档中插入ID:<a id="tips">有用的提示部分</a>在HTML文档中创建一个链接到"有用的提示部分(id="tips")":<a href="#tips">访问有用的提示部分</a>或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>,规定元素唯一 ,只能单独设置id=“”(引号里只能填一个,多个无效)
lang设置元素中内容的语言代码。
spellcheck检测元素是否拼写错误
style规定元素的行内样式(inline style)
tabindex设置元素的 Tab 键控制次序。
title规定元素的额外信息(可在工具提示中显示)
translate指定是否一个元素的值在页面载入时是否需要翻译