HTML基础入门

1、文本标记

1、在 HTML 中，标记通常会被分为 2大类

1、行内元素

多个元素能够在一行内排列出来

<b>,<i>,<s>,<u>,<sub>,<sup>,<span>

作用：为了包裹文本并处理文本的样式

display:inline;

2、块级元素

每个元素会独占一行

<h1>~<h6> , <p> , <div

作用：布局

display:block;

2、嵌套的注意

1、p元素是不能嵌套块级元素

2、行内元素中 不要 嵌套块级元素

2、元数据

元数据都是对网页进行解释说明的

1、<meta name="keywords" content="关键字1,关键字2">

2、<meta name="description" content=" ... ... ">

以上两个标记不面向用户，是面向搜索引擎的

==============================================

1、图像 和 链接

1、URL

URL : Uniform Resource Locator , 统一资源定位符，俗称：路径

目录结构：一个站点中的目录与目录之间的关系

URL 就是负责到目录中将资源文件的地址描述出来

资源文件：就是网页要用到的文件(如：图片，音频，视频，... ...)

URL 在 Web 上共有3种表现形式：

1、绝对路径

2、相对路径

3、根相对路径

路径详解：

1、绝对路径

指的是从资源文件所在的最高级目录下开始查找所经过的目录，就是绝对路径

1、获取网络资源

由四部分组成

1、协议名称

http / https

2、域名/IP地址/计算机名

www.baidu.com

3、目录路径

img

4、文件名称

childrens-day-start_e9fdc805825f196d9b367eec86e65d62.png

https://www.baidu.com/img/childrens-day-start_e9fdc805825f196d9b367eec86e65d62.png

2、获取本机资源

从文件所在的最高目录处开始查找

最高目录：盘符

E:\Images\jd_logo.png

2、相对路径

从当前文件所在目录位置处开始查找资源文件所经过的路径

1、同目录，直接用

2、子目录，先进入

3、父目录，先返回

通过 ../ 表示向上返回一级目录

3、根相对路径

永远都是从 WEB项目 所在的根目录处开始查找资源文件的位置

以 / 作为开始的路径表现形式就是 根相对路径

2、图像

1、图像的格式

1、 **.jpg

2、 **.png (透明背景的)

3、 **.gif (动图)

2、图像

标记：<img>

属性：

1、src

要显示的图像的URL

所有的URL都要严格区分大小写

2、width

宽度，以 px 或 % 为单位的数值

3、height

高度，以 px 或 % 为单位的数值

注意：

3、超链接

1、语法

<a>内容</a>

属性：

1、href ：链接的URL

2、target

目标，指定打开新网页的形式

取值：

_blank : 在新标签页中打开网页

_self : 在当前标签页中打开网页

2、链接的表现形式

1、下载资源

链接地址为 rar / zip / exe 的时候，则为下载资源

2、电子邮件的链接

<a href="mailto:email地址">联系我们</a>

3、返回页面顶部的空连接

<a href="#">返回顶部</a>

4、链接到Javascript

<a href="javascript:..."></a>

3、锚点

锚点能够在页面的任意位置处做记号，允许在任何情况下跳转到该记号位置处

锚点的使用方式：

1、定义锚点

1、通过 a 标记的 name 属性来定义锚点

<a name="锚点名称">内容</a>

2、通过任意标记的 id 属性来定义锚点

<ANY id="锚点名称">

2、链接到锚点

<a href="#锚点名称">内容</a>

<a href="页面URL#锚点名称">内容</a>

2、表格

1、表格的介绍

表格的本质是由一些"单元格"按照从上到下，从左到右的顺序排列一起组合而成的。

2、表格的语法

1、创建表格：<table></table>

2、创建表行：<tr></tr>

3、创建列 / 单元格 ：<td></td>

3、表格的属性

1、table 的属性

1、width ：宽度

2、height ：高度

3、align ：水平排列(left/center/right)

4、border ：边框宽度

5、cellpadding ：单元格内边距

6、cellspacing ：单元格外边距

7、bgcolor ：背景颜色

2、tr 的属性

1、align

当前行内容的水平排列方式

取值：left / center / right

2、valign

当前行内容的垂直排列方式

取值：top / middle / bottom

3、bgcolo

当前行内容的背景颜色

3、td 的属性

1、width

2、height

3、align

4、valign

5、bgcolo

6、colspan ：设置单元格跨列属性

7、rowspan ：设置单元格跨行属性

4、表格中的其它标记

1、<caption></caption>

作用：为表格定义标题

注意：

1、caption 最多只能有一个

2、caption的位置必须位于 <table>下的第一条语句

2、<th></th>

所有的 td 都可以被替换成 th

th 中的文本 会以加粗，水平居中的效果显示出来

5、表格的复杂应用

1、行分组

可以将效果相同的连续的若干行划分到一个组中

1、表头行分组

允许将第一行 或 最上方的几行 划分到表头行分组中

语法：<thead></thead>

2、表尾行分组

允许将最后一行 或 最下方的几行 划分到表尾行分组中

语法：<tfoot></tfoot>

3、表主体行分组

所有的行都可以被划分成若干个表主体行分组

语法：<tbody></tbody>

注意：如果没显示的为tr指定行分组的话，那么默认都在 tbody 中

2、不规则的表格创建

可以通过 td 的 colspan 和 rowspan 两个属性来创建不规则的表格

1、colspan

合并列，也称为跨列

从指定单元格的位置处开始，横向向右合并几个单元格，其中包含自己。注意，被合并掉的单元格，要删除出去

2、rowspan

合并行，也称为跨行

从指定单元格的位置处开始，纵向向下合并几个单元格，其中包含自己。注意，被合并掉的单元格，要删除出去

3、表格的嵌套

被嵌套的内容必须放在td中

3、列表

1、列表的作用

按照从上到下的顺序来排列显示数据

2、列表的组成

1、列表的类型

1、有序列表

语法：<ol></ol> --- Order List

2、无序列表

语法：<ul></ul> --- Unorder List

2、列表项

列表中的内容

语法：<li></li> --- List Item

3、列表的属性

1、<ol>的属性

1、type

列表项前面的标识的类型

取值：

1、1 ，使用 数字 作为标识

2、a ，使用 小写字母 作为标识

3、A ，使用 大写字母 作为标识

4、i ，使用 小写罗马数字 作为标识

5、I ，使用 大写罗马数字 作为标识

2、start

设置 列表项前的标识的起始标号是从 几开始

2、<ul>的属性

1、type

列表项前面的标识的类型

取值：

1、square : 实心矩形

2、circle : 空心圆

3、disc : 实心圆(默认值)

4、none : 不显示标识

4、列表的嵌套

被嵌套的列表只能放在li里

5、定义列表

1、作用

用于给出一类事物的定义的情形

2、语法

<dl>

<dt></dt>

<dd></dd>

</dl>

dl : 定义一个定义列表

dt : 列表中要解释的专业术语 或 名词

dd : 对上述的专业术语 或 名词的解释

3、使用场合

图文混排时使用