标签的具体用法很多,下文并未写出。只是列出了一些常用标签的定义,和在网页中自带的样式。
结构标签
<!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 ;
<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
表单标签
<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;