一些标签
单双标签
双标签。双标签指标签是成对出现的,也就是有一个开始标签和一个结束标签,开始标签用
<标签名>
表示,结束标签用</标签名>
表示,只有一对标签一起使用才能表示一个具体的含义。例如<html></html>
表示一个 HTML 文档。单标签。单标签指标签不是成对出现的,也就是只用一个标签就能表示一个具体的含义,例如
<br>
表示换行、<hr>
表示创建一条水平线。为了符合 W3C 规范,单标签必须在标签后面加一个斜杠,即<br/>
、<hr/>
,所以单标签通用格式为<标签名/>
。
段落标签
<p> </p>
换行标签
<br/>
水平横线
<hr />
标题标签
<h1 align="center"></h1>
h1-h6
文本样式标签
<font 属性="属性值"> </font>
属性:face字体 size大小 color颜色等
<font face="宋体"> </font>
文本格式化标签
粗体 <strong></strong> 或 <b></b>
文字下画线 <ins></ins> 或 <u></u>
文字斜体 <em></em> 或 <i></i>
文字删除线 <del></del> 或 <s></s>
图像标签
<img src="图像路径"/>
alt 图像不能显示时显示文本
title 鼠标悬停图片显示文本
HTML注释
<!-- 在此处写注释 -->
特殊符号
HTML 原代码 | 显示结果 | 描述 |
---|---|---|
< | < | 小于号或显示标记 |
> | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | “ | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
  | 半个空白位 | |
  | 一个空白位 | |
| 不断行的空白 |
HTML基本结构
<html>
包含<head>、<body>等其他标签
</html>
<head>
头部标签元素
</head>
<body>
主体内容
</body>
常用的头部标签:
标 签 | 描 述 |
---|---|
<title> | 定义页面标题内容(唯一必须的头部标签)。 |
<base> | 当前文档的基准地址,其他相对地址都建立在此基准地址之上。 |
<meta> | 有关文档本身的元信息,例如文档的作者,用于查询的关键词,关于文档的描述等。 |
<style> | 定义 CSS 层叠样式表的内容。 |
<link> | 定义外部文件的链接,最常见的用途是链接外部样式表。 |
<script> | 定义页面中程序脚本的内容。 |
设定关键字、描述和字符集
Keywords 表示关键字定义,content 属性值表示关键字内容,关键字之间要用逗号分隔。
<meta name="Keywords" content="value" />
Description 表示描述定义,content 属性值表示描述内容
<meta name="Description" content="value" />
在中国大陆地区,常用的编码是 GB 码,表示简体中文,字符集应设置为 gb2312 ;中国台湾地区常用的编码是 BIG5 码,表示繁体中文;欧洲地区常用 ISO8859-1 表示英文……
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
HTML5 字符集设置简化写法
<meta charset="UTF-8" />
HTML 块级标签
大多数 HTML 元素被定义为块级元素或内联元素,“块级元素”译为 block level element,“内联元素”译为 inline element。两种元素都有各自的特点。其中块级标签的特点为:
总是以新行开始;
高度、行高、外边距和内边距都可以控制;
宽度缺省是它所在容器的 100%,除非设定一个宽度;
可以容纳行内元素和其他块元素。
<div>其他标签或文档</div>
<p>段落内容</p>
对于段落标签,有一个可选的属性 align,用于表示段落相对浏览器窗口在水平位置上的对齐方式。align 属性有四个可取值,每个可取值的含义如表所示:
值 | 描 述 |
---|---|
left | 段落左对齐 |
right | 段落右对齐 |
center | 段落居中对齐 |
justify | 对行进行伸展,每行都可以有相等的长度 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>学习前端哪里好?</p>
<p style="width: 200px; background-color: darkgray" align="center">
蓝桥软件学院
</p>
</body>
</html>
有序列表
<ol>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
…
</ol>
对于 <ol>
标签有两个可选的属性,下表列出了每个属性、可取值和简单描述。
属 性 | 可 取 值 | 描 述 |
---|---|---|
type | A、a、I、i、1 | 规定列表的类型,默认为数字 |
start | start_number | 规定列表中的起始点,默认为 1 |
<ol type="A" start="3">
<li>华为</li>
<li>小米</li>
<li>苹果</li>
<li>oppo</li>
<li>三星</li>
</ol>
无序列表
在 HTML 文档中,所谓无序列表,是指以实心圆 ●(默认)、空心圆 ○、实心方块 ■ 开头的,没有顺序的列表项目。
在无序列表中,各个列表项之间没有顺序之分。无序列表由 <ul> 和 </ul> 标签对实现,每个列表项也是由 <li> 标签定义的。
无序列表与有序列表非常类似,不同点在于因为无序列表是无序的,所以不存在 start 这个规定列表起始点的属性。
无序列表的 type 属性可以设置为 disc、circle、square,其中 disc 代表实心圆 ●(默认),circle 代表空心圆 ○、square 代表实心方块 ■。
<ul type="disc">
<li>华为</li>
<li>小米</li>
<li>苹果</li>
<li>oppo</li>
<li>三星</li>
</ul>
定义列表
<dl>
<dt>列表项</dt>
<dd>列表描述</dd>
</dl>
HTML 行内标签
超链接
<a href="连接地址或文本">文本或者图片</a>
<a> 标签的 target 属性有一个有 4 个保留的目标名称用作特殊的文档重定向操作:
值 | 描述 |
_blank | 浏览器总在一个新打开、未命名的窗口中载入目标文档。 |
_self | 浏览器在当前窗口载入目标文档。 |
_parent | 浏览器在父窗口载入目标文档。如果这个引用是在窗口或者在顶级框架中,那么它与 _self 等效。 |
_top | 浏览器在最顶端的框架窗体载入目标文档。 |
文档书签
当一个页面内容特别多时,可以通过给页面建立书签的方式,对同一页面里的内容进行链接。这样用户在浏览网页时,可以通过书签进行页面内的内容跳转,提高浏览者的用户体验效果。
<a name="书签名称">文字</a>
定义了书签后,链接到该书签的超链接的基本语法为:
<a href="#书签名称">链接点</a>
下面通过一个案例,演示使用超链接跳转至本文档的另一个位置,即当用户单击“查看本文档第三部分”这个内部链接时,即可链接到本页面的第三部分位置
<body>
<p><a href="#d3">查看本文档第三部分</a></p>
<h2>第一部分</h2>
<p>这是第一部分的内容!</p>
<h2>第二部分</h2>
<p>这是第二部分的内容!</p>
<h2><a name="d3">第三部分</a></h2>
<p>这是第三部分的内容</p>
<h2>第四部分</h2>
<p>这是第四部分的内容!</p>
<h2>第五部分</h2>
<p>这是第五部分的内容!</p>
<h2>第六部分</h2>
<p>这是第六部分的内容!</p>
<h2>第七部分</h2>
<p>这是第七部分的内容!</p>
<h2>第八部分</h2>
<p>这是第八部分的内容!</p>
<h2>第九部分</h2>
<p>这是第九部分的内容!</p>
<h2>第十部分</h2>
<p>这是第十部分的内容!</p>
</body>
<span> 标签
<span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。所以可以这样认为:<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
<span>选中的文本</span>
短语标签
标签 | 描述 |
<em> | 呈现为被强调的文本。 |
<strong> | 用来定义重要的文本。 |
<dfn> | 定义一个定义项目。 |
<code> | 定义计算机代码文本。 |
<samp> | 定义样本文本。 |
<kbd> | 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 |
<var> | 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 |