一.常用标签
(一)文档标签
<!DOCTYPE>: 定义文档类型.
<html>: 定义HTML文档.
<head>: 定义文档的头部.(头部内包含)
(1). `<meta>`: 定义元素可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词.
(2). `<base>`:定义页面上的所有链接规定默认地址或默认目标.
(3). `<title>`: 定义文档的标题.
(4). `<link>`: 定义文档与外部资源的关系.
(5). `<style>`:定义 HTML 文档样式信息.
(二)布局标签&语义化
<div>:定义块级元素.
<span>:定义行內元素.
<dialog>:定义对话框或窗口.
<nav>:定义导航.
<table>:定义表格.
<tr>:定义一行.
<td>:定义单元格.
<caption>:定义标题.
(三).表单标签
<option>:定义下拉 列表的选项.
<input>:定义输入域.
<button>:定义按钮.(定义围绕表单中元素的边框.)
(四).列表标签
<ul>:定义无序列表.
<ol>:定义有序列表.
<li>:定义列表项.
<dl>:定义自定义列表.
(五).图像&链接标签
<img>:定义图像.注意加上alt属性
<a>:定义超链接.
(六).格式标签
1.文章标签
<h1>-<h6>:定义 HTML 标题.
<p>:定义段落.
<br>:定义换行.
<hr>:定义水平线.
2.短语元素标签
<em>:定义强调文本.
<strong>:定义语气更为强烈的强调文本.
3.字体样式标签
<i>:显示斜体文本效果.
<b>:呈现粗体文本效果.
<big>:呈现大号字体效果.
<small>:呈现小号字体效果.
二.块级元素与行内元素:
(1)块级元素
<div> | 一个层 | |
<dl> | 定义定义列表。 | |
<dt> | 定义定义列表中的项目。 | |
<h1> to <h6> | 定义 HTML 标题。 | |
<li> | 定义列表的项目。 | |
<p> | 定义段落。 | |
<td> | 定义表格中的单元。 | |
<tr> | 定义表格中的行。 | |
<ul> | 定义无序列表。 |
特点:
- 总是在新行上开始;
- 高度,行高以及外边距和内边距都可控制;
- 宽度缺省是它的容器的100%,除非设定一个宽度 。
- 它可以容纳内联元素和其他块元素
(2)行内元素
<a> | 定义锚。 |
|
<b> | 定义粗体字 | |
<br> | 定义简单的折行。 | |
<button> | 定义按钮 (push button)。 | |
<img> | 定义图像。 | |
<strong> | 定义强调文本。 | |
<span> | 定义文档中的节。 |
特点:
- 和其他元素都在一行上;
- 高,行高及外边距和内边距不可改变;
- 宽度就是它的文字或图片的宽度,不可改变
- 内联元素只能容纳文本或者其他内联元素
对行内元素,需要注意如下:
- 设置宽度width 无效。
- 设置高度height 无效,可以通过line-height来设置。
- 设置margin 只有左右margin有效,上下无效。
- 设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。
通过display属性对行内元素和块级元素进行切换(主要看第2.3.4个值):
值 | 描述 |
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker | CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
inherit | 规定应该从父元素继承 display 属性的值。 |
三.超链接与图片标签
<a>
- 通过使用 href 属性 - 创建指向另一个文档的链接
<a href="http://www.w3school.com.cn/">Visit W3School</a>
2. 通过使用 name 属性 - 创建文档内的书签
<a href="#tips">有用的提示</a>
图片标签:
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
text | 规定图像的替代文本。 | |
URL | 规定显示图像的 UR |
四.绝对路径与相对路径
1.相对路径:在同一级目录下。
2.所谓绝对路径,就是指完整的路径,我们要做到图标的相对位置,也就是从c盘开始找就是绝对位置。我们可以用这个图标进行图片显示,别人如果想看到就要用绝对路径,就要从html中的所在目录中招。
五.常用实体元素
HTML 中有用的字符实体
注释:实体名称对大小写敏感!
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
¢ | 分(cent) | ¢ | ¢ |
£ | 镑(pound) | £ | £ |
¥ | 元(yen) | ¥ | ¥ |
€ | 欧元(euro) | € | € |
§ | 小节 | § | § |
© | 版权(copyright) | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
实例:
六.列表
无序列表:
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li
</ul>
有序列表:
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
定义列表: