html基础2

一、表格

*定义：

1.<table> 标签。

2.每个表格均有若干行（<tr> 标签）

3.每行被分割为若干单元格（<td> 标签）

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

<table border="1">
    <tr>
        <td>图书管</td>
        <td>饺子馆</td>
    </tr>
    <tr>
        <td>麻辣烫</td>

        <td>麻辣香锅</td>

    </tr>

</table>

二、列表（有序列表ol、无需列表ul、自定义列表dl）

1.无需列表。

a.无序列表始于 <ul> 标签。每个列表项始于 <li>

b.列表项内部可以使用段落、换行符、图片、链接以及其他列表等

<ul>

<li>香菇</li>

<li><a href="https://baidu.com">百度</a></li>

<li><p>菠菜</p></li>

</ul>

2.有序列表

a.有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

b.列表项内部可以使用段落、换行符、图片、链接以及其他列表等

三、HTML 块元素（换行）

1.大多数 HTML 元素被定义为块级元素或内联元素。

2.“块级元素”译为 block level element，“内联元素”译为 inline element。

例子：<h1>-<h6>, <p>, <ul>, <ol> ,<li> ,<table> ,<div>

3.<div> 元素

(a).<div> 元素是块级元素，通常可用于组合其他 HTML 元素的容器。

(b).<div> 元素没有特定的含义，通常与css一同布局样式使用，简称 div+css布局

四、HTML 内联元素(不换行)

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>,<i>,<span>

1.<span> 元素是内联元素，可用作文本的容器。

2.<span> 元素没有特定的含义。<span> 元素可为部分文本设置样式。

五、HTML 类（class）

1.对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

2.为相同的类设置相同的样式，或者为不同的类设置不同的样式。

<div>

<div class="one">123</div>

<div class="one">456</div>

<div class="one">789</div>

<div class="two">000</div>

</div>

<style>

.one{
color:red;
}

</style>

六、HTML id 属性（唯一）

1.id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一。

2.JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

3.id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。

<!DOCTYPE html>

<html>

<head>

<style>

#myId {

color: black;

text-align: center;

}

</style>

</head>

<body>

<h1 id="myId">My Header</h1>

</body>

</html>

七、HTML Iframe

1.iframe 用于在网页内显示网页。

<iframesrc="demo_iframe.htm"width="200"height="200"></iframe>

八、HTML 文件相对路径与绝对路径

1.定义：文件路径用来描述网站文件夹结构中某个文件的位置，文件包含网页、图像、样式表（css）、JavaScript

2.绝对路径：绝对文件路径是指向一个因特网文件的完整 URL

例子：<img src="https://imgs01.dihe.cn/202202/1815/620f4ec8ef3d2.png" alt="客服">

3.相对路径：相对于当前页面的文件位置。 .例如：/../aa.png 或者 /img/aa.png

<img src="./../aa.png">