2022/1/4

【山赶着山，山山漫漫结成关】

一、基础认知

1.网页的组成

文字图片音频视频超链接等

2.web标准

结构---html
表现---css
行为---JavaScript

3.html基本骨架

<!--html 网页的整体-->
<html>
<!--head  网页的头部-->
   <head>
	<!--title 网页的标题-->
	<title>网页的标题</title>
</head>	
	
<!--body网页的主体(身体)-->
<body>
	网页的主体
</body>
</html>

4.标签的构成以及标签关系

 <!-- 注释快捷键  ctrl+/-->
标签构成 
双边标签
	<p>双边标签</p>
单边标签
	<hr>
标签关系
 兄弟关系  父子关系

二、排版标签

1.标题标签

<h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
特点:
独占一行
文字变粗变大
双边标签

标题标签只有6级

2.段落标签

<p>生活，永远不会亏待用心经营它的人</p>
特点
    双边标签
    独占一行
    段落与段落之间存在垂直间隙
    文字一行装不下会自动换行

3.换行标签水平线标签

<br> 强制换行
<hr> 水平线标签
单边标签

三、文本格式化标签

<!-- 加粗 -->
    <b>加粗</b>的文字<br>
    <strong>加粗</strong>的文字<br>
    <!-- 下划线 -->
    <u>下划线</u>
    <ins>下划线</ins><br>
    <!-- 倾斜 -->
    <i>倾斜</i>的文字
    <em>倾斜</em>的文字<br>
    <!-- 删除线 -->
    <s>删除线</s>
    <del>删除线</del>

推荐使用单词较长的标签,语义更加强烈

重点需要掌握 strong em

四、图像标签

网页中显示一张图片

<img src="图片的路径">

图片标签属性:
src:图片的路径,必写属性
alt 替换文本(图片无法加载显示的文本信息)
title 提示文本(鼠标悬停时显示的文本信息)
width:设置图片的宽度
height:设置图片的高度
border:设置边框

五、路径

1.绝对路径

绝对路径以计算机盘符开始的路径

<!-- 盘符开头 -->
<img src="D:\web81\day01\02-案例\baby.jpg" alt="">
<!-- 网络地址 -->
<!-- 如果绝对路径是以网络地址
    必须以http://开头或者https://
 -->
<img src="http://www.itheima.com/images/logo.png" alt="">

2.相对路径

当前文件：当前的html网页

目标文件：要找到的图片

从当前文件开始出发找目标文件的过程

同级目录

同级目录在相同文件夹中

       方法一: 目标文件名称
       方法二:./目标文件名称

下级目录

	方法一: 目标文件夹/目标文件名称
	方法二:./目标文件夹/目标文件名称

上级目录

	上一级
	../目标文件名称
	上两级
	../../目标文件名称

六、媒体标签

1. 音频

在网页插入一段音频

<audio src="./music.mp3" controls autoplay loop></audio>
常见属性:
        src 播放音频的路径
        controls 音频播放控件
        autoplay 音频加载完毕自动播放
        loop:音频结束之后重新开始播放
        音频标签目前支持三种格式：MP3、Wav、Ogg
        推荐使用MP3

2. 视频

在网页插入一段视频

    <video src="./video.mp4" controls autoplay muted loop></video>
常见属性
        src 视频的播放路径
        controls 显示播放控件
        autoplay 视频加载完毕自动播放 需要配合muted属性实现
        loop 视频结束之后重新开始播放
        视频标签目前支持三种格式：MP4, WebM, 和 Ogg
 	推荐使用MP4

七、链接标签

实现一个页面跳转到另一个页面

<a href="链接的地址" target="打开方式">链接文本</a>
target
	取值
	_self :默认值 覆盖原始窗口
	_blank:保留原始窗口 打开新的窗口
链接的分类
    <h3>1.外部链接</h3>
    <a href="https://www.mi.com/">小米</a>
    <h3>2.内部链接</h3>
    <a href="./05-视频标签.html">跳转当前html页面</a>
    <h3>3. 网页元素链接</h3>
    <a href="https://www.jd.com/"><img src="./lyf.jpg" alt=""></a>
    <h3>4.下载链接</h3>
    <!-- 下载链接
        文件名称必须以.exe .zip .rar结尾的后缀名文件
     -->
    <a href="./lyf.zip">下载</a>
    <h3>5.空链接使用#</h3>
    <a href="#">空链接</a>
特点
	双边标签
	a标签未点击过是蓝色
	a标签点击过是紫色
	a标签有默认的下划线 后期CSS处理

八、列表标签

列表的应用场景
无序列表
有序列表
自定义列表

1. 列表的应用场景

场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
特点：按照行的方式，整齐显示内容
种类：无序列表、有序列表、自定义列表

2. 无序列表

场景：在网页中表示一组无顺序之分的列表，如：新闻列表。
标签组成

   ul 表示无序列表整体，用于包裹li标签<br>
   li 表示无序列表的每一项，用于包含每一行内容

注意点（嵌套规范）

ul标签中只允许包含li标签
li标签可以包含任意内容

3. 有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜。
标签组成

   ol 表示有序列表整体，用于包裹li标签<br>
   li 表示有序列表的每一项，用于包含每一行内容

注意点（嵌套规范）

ol标签中只允许包含li标签
li标签可以包含任意内容

4. 自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现
标签组成：

  dl 表示自定义列表整体，用于包裹dt/dd标签
  dt 表示自定义列表的主题
  dd 表示自定义列表针对主题的每一项内容

显示特点——dd前会默认显示缩进效果
注意点

dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容

九、表格标签

1.表格的基本标签

table 表格整体，用于包裹多个tr
tr 表示表格的每一行，包裹td
td 表示单元格，包裹内容
语法:
   <table>
       <tr>
           <td></td>
       </tr>
   </table>

2.表格的基本属性

table属性
     border 设置表格边框
     width 设置宽度
     height 设置高度
     align 设置表格的对齐方式（left，center，right）
     rules:all 细线表格

3.表格的标题标签

<caption>表格大标题</caption> 书写在table标签内部

<th>表头单元格</th> 用于表格第一行（默认居中加粗显示）

4.表格的结构标签

<thead>头部</thead>
<tbody>主体</tbody>
<tfoot>尾部</tfoot>

5.合并单元格

合并单元格步骤

明确合并哪几个单元格
通过左上原则，确定保留谁删除谁

上下合并→只保留最上的，删除其他
左右合并→只保留最左的，删除其他

给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

跨行合并 <td rowspan="合并的单元格个数"></td>
跨列合并 <td colspan="合并的单元格个数"></td>

世界可以很无聊但我们一定要有趣.

前端基础认知以及常用基础标签回顾