HTML基础、列表、表格

ゞ浴缸里的玫瑰 2022-04-17 05:20 294阅读 0赞

## HTML基础、列表、表格 ##

=======================HTML网页的基本结构=============================

1.  1.  什么是HTML?
        
        1.  Hyper Text Markup Language(**超文本标记语言**)，是一种用来描述网页的标记语言
        2.  HTML不是一种程序语言，不强调任何的逻辑性
        3.  HTML是由一套标签组成

双标签格式：<标签名称></标签名称>

例如：<body></body>

单标签格式：<标签名称/>

例如：<br/>

1.  1.  开发工具

记事本、EditPlus、sublime、WebStorm

1.  1.  基本结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70][]

1.  1.  网页头部的信息标签
        
        1.  title   网页的标题
        2.  meta(了解)

==========================文本标签=============================

1、标题标签:

<h1>……<h6>  <h1>字体最大   <h6>字体最小

2、段落标签

<p>……</p>   段落前后会空一行

3、换行标签

<br/>

4、水平线标签

<hr/>

5、字体样式标签

<strong>静夜思</strong> 加粗、<em>静夜思</em> 斜体

6、特殊符号标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1][]

7、注释

==========================图像标签(**重点**)===============================

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2][]

绝对路径：从根盘符开始寻找资源

相对路径：从页面所在的位置开始寻找资源

============================链接标签===================================

1、页面间链接(重点)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3][]

target属性常用的值：

\_self：表示在本窗体打开目标页面

\_blank：表示在新窗体中打开目标页面

普通文本超链接：<a href=”目标位置”></a>

图片超链接：<a href=”目标位置”><img/></a>

空连接：<a href=”\#”></a>

2、锚链接

1）同一页面的锚链接

先创建标记

再创建锚链接：点击该链接就会跳转到标记位置

<a href="\#标记名称">锚连接位置</a>

2）不同页面之间的锚链接

先在B页面创建标记

再在A页面创建锚链接

<a href="B页面\#标记名称">锚连接位置</a>

3、功能性链接(了解)

邮件连接：

![20181113164213766.png][]

注意：mailto使用的前提是电脑中安装的邮件客户端

==============================列表===================================

1、有序列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4][]

ol标签有个type属性用来设置项目符号的显示样式

![20181113165004402.png][]

2、无序列表

![20181113164951148.png][]

ul标签有个type属性用来设置项目符号的显示样式：

![20181113164925408.png][]

3、定义列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5][]

说明：

dl：定义列表标签

dt：定义列表标题

dd：定义列表内容

==========================表格============================

1、基本结构:行、列、单元格

2、基本语法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 6][]

3、对齐方式

1）表格的对齐：

align=left(左对齐,默认)、center(中间)、right(右对齐)

2）单元格的对齐：

align=left(左对齐,默认)、center(中间)、right(右对齐)

valign=top(顶部)、middle(居中,默认)、bottom(底部)

4、表格其他属性

width：表格的宽度    可以用像素来设置，也可以使用百分比来设置

height：表格的高度

border：表格的边框宽度

cellspacing：表格单元格之间的距离

cellpadding：单元格中的内容与单元格边框的距离

bgcolor：设置背景颜色

5、表格跨列、跨列

![20181113164555343.png][]

例如：

![20181113164541156.png][]

![2018111316503532.png][]

例如：

![20181113165052474.png][]

利用跨行、跨列实现如下效果：

![20181113165110645.png][]

6、表格的嵌套

表格嵌套就是指表格中包含了其他表格

7、表格中的其他标签

th: 列名单元格，字体默认会变粗并居中对齐

caption: 表格标题

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]: /images/20220417/028fc3382c064774a4d9c26361f7d015.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1]: /images/20220417/7cccfd274c8c455eb008ca399132f45a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2]: /images/20220417/e2dab56303c040a5808602de707e4ab2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]: /images/20220417/c28638c87e314646b7609047e3e7f290.png
[20181113164213766.png]: /images/20220417/1d96ba42ff354eea844455a597e616a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]: /images/20220417/38c6a9e1b8384cec8cec622f26b6634d.png
[20181113165004402.png]: /images/20220417/9138404c883047b599e84586b03bcb18.png
[20181113164951148.png]: /images/20220417/fb292c53c42c44b9a92fe182caf108f5.png
[20181113164925408.png]: /images/20220417/94bc9f8d317a45b39749b4aee5423828.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]: /images/20220417/4a8740795cd249ff92ea789966e0f00d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 6]: /images/20220417/4dc16a6ffedb4d328280597bb295fe08.png
[20181113164555343.png]: /images/20220417/b2c214ae1b2c407eb25106bf7c1e70e8.png
[20181113164541156.png]: /images/20220417/1c4130b20ec241b2817c649d10a59ee4.png
[2018111316503532.png]: /images/20220417/01421791777045c28cff117da50787b7.png
[20181113165052474.png]: /images/20220417/d09ac2b59f704d07b2ecd01b405b2088.png
[20181113165110645.png]: /images/20220417/e5bc52902a0f406ba4a1bf9bb06e5ba8.png