HTML基础（3）

hahai_boy

于 2022-06-27 19:43:43 发布

阅读量414

点赞数 1

文章标签：大数据

原文链接：https://blog.csdn.net/qq_44732593/article/details/107287100?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165633011016782248591167%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165633011016782248591167&biz_id=0&utm_me

版权

排版标签

1.注释标签：<!–注释–>

2.换行标签：<br/>

3.段落标签：<p>文本文字

特点：段与段之间有行高

属性：align对齐方式

(left：左对齐 center：居中 right：右对齐)
4.水平线标签:<hr/>

属性:

width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color: 水平线的颜色
align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)

容器标签（重点）

<div>:块级标签，独占一行，换行
<span>:行级标签，所有内容都在同一行作用：
<div>:主要是结合css页面分块布局
<span>:进行友好提示信息

标题标签 (熟记)

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；

1

2

3

列表标签

容器里面装载着文字或图表的一种形式，叫列表。
列表最大的特点就是整齐、整洁、有序

无序列表 ul （重点）

无序列表标签： <ul></ul>
属性：type :三个值，分别为：
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>

注意：

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表 ol

有序列表标签：<ol>
属性：type：

1、A、a、I、i（数字、字母、罗马数字）
列表项： <li></li>

定义列表dl

\dl>
<dt>名词1
<dd>名词1解释1
<dd>名词1解释2
…
<dt>名词2
<dd>名词2解释1
<dd>名词2解释2
…
</dl>
dl>

名词1

名词1解释1

名词1解释2

... 名词2

名词2解释1

名词2解释2

...

图片标签

独立标签

属性:

src：图片地址：相对路径（同一个网站）绝对路径（不同网站）

width:宽度height:高度border:边框align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）

alt:图片的文字说明hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近

链接标签

文本或图像

超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

（不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接）

文本或图片

属性：

href:跳转页面的地址(跳转到外网需要添加协议)；

name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值

target:_self(自己) _blank(新页面，之前页面存在) _

__parent top 默认

self_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。

如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

base 标签

base 可以设置整体链接的打开状态

base 写到 <head> </head> 之间

锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

1.使用a href=”#id名>“链接文本"</a>创建链接文本。

2.使用相应的id名标注跳转目标的位置

表格标签

表格由<table>标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

字体标签

<font></font>**
属性： size:设置字体大小**
color:设置字体颜色
face:设置字体**

表格**

(table,tr,td)

属性：

border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
<tr>
<td>单元格内的文字</td>
…
</tr>
…
</table>

... ...

单元格内的文字

1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table /table标签中，在 table /table中包含几对 tr /tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对中包含几对，就表示该行中有多少列（或多少个单元格）。

注意：

<tr></tr>中只能嵌套<td></td>
<td></td>标签，他就像一个容器，可以容纳所有的元素

表头标签(th)

表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

表格结构（了解）

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所示：

<thead></thead>：用于定义表格的头部。

必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。

位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

合并单元格

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除。

公式：删除的个数 = 合并的个数 - 1

总结表格

表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的作用。

文本格式化标签

定义粗体文本。
定义大号字。
定义着重文字。
定义斜体字。
定义小号字。
定义加重语气。
定义下标字。
定义上标字。
定义插入字。
定义删除字。

<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。