前端三件套之HTML（二）

在介绍完HTML基础知识后，阿皮将带大家了解HTML的基础元素。

众所周知，HTML是由一系列的元素组成的，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

一、标题介绍与应用

前端页面的编写跟我们写文章一样，需要有一个标题，而前端页面的标题是通过 <h1> - <h6> 标签进行定义的。 <h1> 定义最大的标题 <h6> 定义最小的标题。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

生成h1~h6快捷键：h$*6

注意：这件事很重要！！！这件事很重要！！！这件事很重要！！！

请确保将 HTML 标题标签只用于标题。 不要仅仅是为了生成粗体或大号的文本而使用标题。

正确使用标题有益于 SEO 。应该将 < h1> 用作主标题（最重要的），其后是 <h2> （次重要

的），再其次是 <h3> ，以此类推

 二、标签之段落、换行、水平线

1.标签之段落

段落是通过 <p> 标签定义的

<p>这是一个段落 </p>
<p>这是另一个段落</p>

2. 换行

 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> <br /> 元素是一个空的 HTML 元素。

<p>这个<br>段落<br>演示了分行的效果</p>

 3.水平线

<hr/> 标签在 HTML 页面中创建水平线

<hr color="" width="" size="" align=""/>

 

属性：

1 color ：设置水平线的颜色

2 width ：设置水平线的长度

3 size ：设置水平线的高度

4 align ：设置水平线的对齐方式（默认居中），可取值 left|right

三、标签之图片

网站中最多的元素毋庸置疑，一定是图片 。 <img> 标签定义 HTML 页面中的图像

<img src="" alt="" title="" width=""
height="">

注意事项

<img> 是单标签，不需要进行闭合操作

属性：

1 src ：路径（图片地址与名字）

<img src = "" alt = "" title = "" width = ""

height = "" >

1 2 alt ：规定图像的替代文本

3 width ：规定图像的宽度

4 height ：规定图像的高度

5 title ：鼠标悬停在图片上给予提示

四、路径详解

A.绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

E:\api\1.jpg

<img src="E:\itbaizhanCode\1.jpg">

B.相对路径

两者相对关系，两者在同⼀路径下可以直接访问

1

⼦级关系 : /

2

⽗级关系 : ../

3

同级关系 : ./

C. 网络路径

具体的⽹络地址 :
百度安全验证https://www.baidu.com/s?wd=%E6%8E%98%E9%87%91%E9%98%9F%E5%A4%BA%E9%98%9F%E5%8F%B2%E9%A6%96%E4%B8%AANBA%E6%80%BB%E5%86%A0%E5%86%9B&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1

<div style="text-align: center;">
    <img src="./1.webp" alt="">
    <h3>黑鲨4S</h3>
    <p>磁动力升降肩键</p>
    <p>2699元起</p>
</div>

四、标签之超文本链接 

HTML 使用标签 <a> 来设置超文本链接

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

在标签 <a> 中使用了 href 属性来描述链接的地址

默认情况下，链接将以，以下形式出现在浏览器中：

1

一个未访问过的链接显示为蓝色字体并带有下划线。

2

访问过的链接显示为紫色并带有下划线。

3

点击链接时，链接显示为红色并带有下划线。

特别提示

后期我们会通过 CSS 样式修改掉这些效果

<a href="url">链接文本</a>

超链接表现

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手

五、超链接之锚点

超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个 部分。

跳转到当前文档的某个部分的形式就是 “ 锚点 ”

<a href="#hello">跳转到当前页</a>
<p id="hello">文本信息</p>

六、标签之文本

常用文本标签

标签	描述
<em>	定义着重文字
<b>	定义粗体文本
<i>	定义斜体字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<del>	定义删除字
<span>	元素没有特定的含义

特别提示

常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇

七、列表标签之有序列表

有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
    <li>1</li>
    <li>2</li>
</ol>

a.type 属性

   <ol> 的属性 type 拥有的选项

1 1 表示列表项目用数字标号（ 1,2,3... ）

2 a 表示列表项目用小写字母标号（ a,b,c... ）

3 A 表示列表项目用大写字母标号（ A,B,C... ）

4 i 表示列表项目用小写罗马数字标号（ i,ii,iii... ）

5 I 表示列表项目用大写罗马数字标号（ I,II,III... ）

b.有序列表嵌套

列表是可以进行嵌套的

<ol>
    <li>1</li>
    <li>
        <ol>
            <li>A</li>
            <li>B</li>
        </ol>
    </li>
    <li>2</li>
</ol>

八、列表标签之无序列表

a,无序列表实现

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

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

<ul>
    <li>1</li>
    <li>2</li>
</ul>

b.type 属性

<ul> 的属性 type 拥有的选项

disc 默认实心圆

circle 空心圆

square 小方块

none 不显示

c.无序列表嵌套

列表是可以进行嵌套的

<ul>
    <li>1</li>
    <li>
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>2</li>
</ul>

常见应用场景

1 无序的列表效果

2 导航效果

<ul>
    <li>Xiaomi手机</li>
    <li>Redmi 红米</li>
    <li>电视</li>
    <li>笔记本</li>
</ul>

快捷键

快速生成 ul+li 的布局： ul>li*3 （数字根据自己的需要的 li 数量修改）

快速生成ul+li+超文本布局： ul>li>a[href=#]

九、列表标签之自定义列表

1.自定义列表实现

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。

每个自定义列表项的定义以 <dd> 开始

<dl>
    <dt>1</dt>
    <dd>2</dd>
    <dt>3</dt>
    <dd>4</dd>
</dl>

2.应用场景

在一些需要对列表进行解释的部分，可以使用自定义列表

十、标签之表格

a.表格展示效果

表格在数据展示方面非常简单，并且表现优秀

表格组成与特点

行、列、单元格

单元格特点：同行等高、同列等宽。

表格标签

表格： <table>

行： <tr>

单元格 ( 列 ) ： <td>

1 <table border="1">
2    <tr>
3        <td>1</td>
4        <td>2</td>
5    </tr>
6    <tr>
7        <td>3</td>
8        <td>4</td>
9    </tr>
10 </table>

快捷键

快速生成表格结构： table>tr*2>td{ 单元格 }

表格其他标签

表格名字： <caption> 表格头部： <thead>

特殊单元格： <th>

表格的身体： <tbody>

表格的脚步： <tfoot>

 

b.复杂且并不常用的表格标签

<table>
    <caption>表格名字</caption>
    <thead>
        <th>姓名</th>
        <th>年龄</th>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>30</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>李四</td>
            <td>20</td>
        </tr>
    </tfoot>
</table>

十二、表格属性

<table> 表格属性

border ：设置表格的边框

width ：设置表格的宽度

height ：设置表格的高度

align ：设置表格的水平对齐方式

cellpadding ：设置内容距离边框的距离

cellspacing ：设置单元格之间的距离

bgcolor ：设置表格背景颜色

bordercolor ：设置边框颜色

background ：设置背景图片

<tr> 的属性

height ：设置一行的高度

bgcolor ：设置一行的背景颜色

background ：设置一行的背景图片

align ：设置行里内容水平对齐方式，取值： left 、 center 、 right

valign ：设置行里内容垂直对齐方式，取值： top 、 middle 、 bottom

<td> 的属性

width ：设置单元格的宽度，同列等宽

height ：设置单元格的高度，同行等高

align ：设置单元格内容水平对齐方式

valign ：设置单元格内容垂直对齐方式

bgcolor ：设置单元格背景颜色

background ：设置单元格背景图片

十三、表格单元格合并

1.单元格合并属性

水平合并： colspan

垂直合并： rowspan

<table align="center" border=""
width="500px" height="200px"
cellspacing="0">
    <tr>
        <td colspan="3">单元格1单元格2单元格
</td>
        <td>单元格4</td>
       <td>单元格5</td>
    </tr>
    <tr>
        <td rowspan="2">单元格6-11</td>
        <td>单元格7</td>
        <td rowspan="3">单元格81318</td>
        <td colspan="2" rowspan="2">单元格
9101415</td>
    </tr>
    <tr>
        <td>单元格12</td>
    </tr>
    <tr>
        <td>单元格16</td>
        <td>单元格17</td>
        <td>单元格19</td>
        <td>单元格20</td>
    </tr>
 </table>