HTML常用标签

378 阅读7分钟

标签的具体用法很多,下文并未写出。只是列出了一些常用标签的定义,和在网页中自带的样式。

结构标签

<!DOCTYPE html>

HTML中 声明必须是 HTML 文档的第一行,位于 html 标签之前。 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个HTML版本进行编写的指令。

在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML,所以不需要引用 DTD。

请始终向 HTML 文档添加 声明,这样浏览器才能获知文档类型。


<head></head>

head标签是所有头部元素的容器。head标签内的元素可包含脚本、样式表和提供页面的元信息等等。头部的内容不会显示在浏览器页面中。

添加在head标签中的标签 : meta、title、link、base、style。

display : none ;

有关:display:none;


<body></body>

正文部分,所有在浏览器上可见的内容必须写在body标签内部。

display : block ;

margin : 8 ;


head中的标签

<meta>

meta 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

meta 标签位于文档的头部,不包含任何内容。meta 标签的属性定义了与文档相关联的名称/值对。

display : none ;


<title></title>

title 元素可定义文档的标题。

浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。

display : none ;


<link>

link 标签定义文档与外部资源的关系。link 标签最常见的用途是链接样式表。

link 元素是空元素,它仅包含属性。

display : none ;


<base>

base 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 base 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 a、img、link、form 标签中的 URL。


<style></style>

style 标签用于为 HTML 文档定义样式信息。

引入css的几种方法中,其中一种就是在 head 标签中添加 style 标签,然后就可以为 html 增加样式。

display : none ;


html中head标签内的使用标签详解

布局标签

<div></div>

div 可定义文档中的分区或节(division/section)。

div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

如果用 id 或 class 来标记 div,那么该标签的作用会变得更加有效。

display : block ;


<span></span>

span 标签被用来组合文档中的行内元素。

span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。


文本标签

<h1></h1>~~<h6></h6>

h1 - h6 标签可定义标题。h1 定义最大的标题。h6 定义最小的标题。

由于 h 元素拥有确切的语义,因此应该慎重地选择恰当的标签层级来构建文档的结构。不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。


<p></p>

p 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,也可以在样式表中规定。

display: block;

margin-block-start: 1em;

margin-block-end: 1em;

margin-inline-start: 0px;

margin-inline-end: 0px;


<em></em>

font-style : italic ;

<strong></strong>

font-weight : bold ;


注:

<i></i>

i 标签显示斜体文本效果。

i 标签和基于内容的样式标签 em 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。

font-style : italic ;


<del></del>

定义文档中已被删除的文本。

text-decoration : line-through ;


<img>

img 元素向网页中嵌入一幅图像。

从技术上讲,img 标签并不会在网页中插入图像,而是从网页上链接图像。img 标签创建的是被引用图像的占位空间。


<a></a>

a 标签定义超链接,用于从一张页面链接到另一张页面。

a 元素最重要的属性是 href 属性,它指示链接的目标。

color: -webkit-link;

cursor: pointer;

text-decoration: underline;


序列标签

有序列表

<ol>
<li></li>
<li></li>
</ol>

ol

display: block;

list-style-type: decimal;

margin-block-start: 1em;

margin-block-end: 1em;

margin-inline-start: 0px;

margin-inline-end: 0px;

padding-inline-start: 40px;

li

display: list-item;

text-align: -webkit-match-parent;


无序列表

<ul>
<li></li>
<li>/li<>
</ul>

ul

display: block;

list-style-type: disc;

margin-block-start: 1em;

margin-block-end: 1em;

margin-inline-start: 0px;

margin-inline-end: 0px;

padding-inline-start: 40px;

li

display: list-item;

text-align: -webkit-match-paren


有关:list-style-type属性


表单标签

<form>

form 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

display: block;

margin-top: 0em;


<input>

input 标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

未全部写出

display: inline-block;

text-align: center;

cursor: default;

color: buttontext;

background-color: buttonface;

margin: 3px 3px 0px 5px;

box-sizing: border-box;

padding: 1px 6px;


<button>

button 标签定义一个按钮。

在 button 元素内部,可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

未全部写出

display: inline-block;

text-align: center;

cursor: default;

background-color: buttonface;

box-sizing: border-box;

margin: 0em;

font: 400 13.3333px Arial;

padding: 1px 6px;


表格标签

<table></table>

table 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

display: table;

border-collapse: separate;

border-spacing: 2px;

border-color: grey;


<tr></tr>

tr 标签定义 HTML 表格中的行。

tr 元素包含一个或多个 th 或 td 元素。

display: table-row;

vertical-align: inherit;

border-color: inherit;


HTML 表格中有两种类型的单元格:

表头单元格 - 包含表头信息(由 th 元素创建)

标准单元格 - 包含数据(由 td 元素创建)

<th></th>

th 标签定义 HTML 表格内的表头单元格。

th 元素内部的文本通常会呈现为居中的粗体文本。

display: table-cell;

vertical-align: inherit;

font-weight: bold;

text-align: -internal-center;


<td></td>

td 标签定义 HTML 表格中的标准单元格。

td 元素中的文本一般显示为正常字体且左对齐。

display: table-cell;

vertical-align: inherit;