HTML：超文本标记语言_第二天
- 行级标签和块级标签
- 相对路径
- 换行标签和实体
- 内联框架
- 段落和标题标签
- img标签
- audio标签
- 列表标签
- video标签
一. 行级标签和块级标签
在HTML中标签分为行级标签和块级标签
1. 块级标签
块级标签默认宽度为父标签的宽度, 默认高度为内容的高度, 没有内容没有高度
块级标签独占一行，所以前后的内容不会和块级标签在一行。
常见的块级标签：div、p、
…
标签等。
2. 行级标签
行级标签特点是标签的宽度默认为内容所占宽度。 所以可以和前后的文字或其他行级标签在一行。
可以和其他内容(非块级标签)在同一行
常见的行级标签：a、b、img、span标签等
三. 相对路径
相对路径：从一个资源所在的文件夹出发>找到另一个资源所经的过程。
之前我们学习的标签，可以实现跳转到”www.baidu.com”官网。其实也可以通过标签实现跳转到另一个页面。所以就必须知道相对路径如何去写
语法：
<a href="相对路径">文字内容</a>
相对路径中需要记忆的内容：
1. 当前文件夹 (./可以省略不写)
2. 跳出当前文件夹 …/ (必须要写)
1. 示例1
a.html 和 b.html在同一个文件夹中, 当两个资源在同一个文件夹的时候, a.html跳转到b.html, 就相当于找到当前文件夹中的b.html
相对路径：./b.html（./ 可以省略不写）
在a.html中代码如下:
<a href="./b.html">跳转到b.html</a>
<!-- ./ 可以省略 -->
<a href="b.html">跳转到b.html</a>
2 示例
当a.htm l和 c.html不在同一个文件夹中的时候, 如果希望在a.html中跳转到b.html时, 需要先找到当前文件夹中的subPath文件夹, 然后再找到c.html
相对路径：./subPath/c.html (./ 可以省略)。
在a.html中代码示例
<a href="subPath/c.html">跳转到c.html</a>
3 示例3
当a.html 和 d.html不在同一个文件夹中的时候, 如果希望在a.html中跳转到d.html时, 需要先跳出当前文件夹, 也就是返回到上一层文件夹中, 然后再找到d.html
在a.html中代码示例
<a href="../d.html">跳转到d.html</a>
四. 换行标签和实体
1. 当在HTML页面中包含换行，浏览器会认为是一个空格。
2. 当在HTML页面中连续添加多个空格，浏览器也会认为是一个空格。所以为了让内容运行换行和添加多个空格时，就需要使用换行标签和实体(特殊符号)
1.br标签
<br/> 是单标签。浏览器解析<br/>会认为是换行符。几个<br/>就是几个换行。
代码示例：
<!-- 添加几个br标签就会有几个换行 -->
内容一<br/>内容二
2. 实体
HTML的语法由于是标签式结构，所以里面很多字符都带有特殊含义。
例如:
< , >就是标签的角括号。是属性的取值。所以为了区分开HTML中添加实体特性，当文字内容和HTML语法结构内容等冲突时，使用实体替代。
下图罗列了HTML支持的全部实体：重点记忆空格实体。 这六个字符会被浏览器解析为一个空格（顺序不能变,少一个字符都无效果）。希望在浏览器内容中添加几个空格就需要添加几组
一个空格 结尾<br/>
两个空格 结尾<br />
三个空格 结尾<br />
五. 导航菜单
完成QQ空间中导航。只保留日志、相册、说说、音乐四项。
要求:
1. 使用超链接实现，每个超链接跳转到不同的页面中。
2. 每个超链接之间包含四个空格。
3. 结尾有换行。
1. 实现流程
1.1 新建项目
1.在HBuilder中新建Web项目
<img src="images/10.png" alt="03" style="zoom:60%;" />
2.把项目名称定义为：QQZone
<img src="images/11.png" alt="03" style="zoom:80%;" />
1.2 新建文件
在项目中新建pages文件夹。并新建四个HTML文件，分别命名为: rizhi.html、xiangce.html、saysay.html、yinyue.html 。
在每个页面添加一句文字说明
1.3 编写index.html
在index.html中编写如下代码
<!--
标题标签:块级标签, h数字越大字体越小
./ -> 当前目录(QQZone)
-->
<h3>主页</h3>
<a href="pages/log.html">日志</a>
<a href="pages/photo.html">相册</a>
<a href="pages/saysay.html">说说</a>
<a href="pages/music.html">音乐</a>
六. iframe内联框架
1. iframe讲解
iframe是行级标签。可以实现把其他页面或资源嵌入到当前页面中。
包含如下属性
| 属性名 | 属性含义 | 属性可取值 |
|---|---|---|
| src | 内联页面 | 内联页面路径 |
| width | 宽度 | 多使用整数。单位:像素 |
| height | 高度 | 多使用整数。单位:像素 |
| frameborder | 边框宽度 | 整数。取值0表示没有边框。 |
| name | 自定义名称 | 自定义名称。与超链接实现联动效果时需要此属性。 |
2. iframe 和 a 的联动
当包含name属性且和的target取值相同时, 可以实现点击超链接更换中的内容。
在a.html中添加如下代码
<!--
将a标签中的href属性中指定的页面, 在target属性指定的iframe标签中显示
-->
<a href="b.html" target="aa">将b.html引入, 在iframe标签中显示</a>
<a href="../d.html" target="aa">将d.html引入, 在iframe标签中显示</a>
<br />
<!--
src: 默认内联页面的路径(第一次访问该页面时, 内联的页面)
name: 指定iframe的名字(a 标签的target属性使用)
frameborder: 0 no 不显示边框 | 1 yes 显示边框
width: 宽度
height: 高度
-->
<iframe src="subPath/c.html" name="aa" frameborder="0"></iframe>
七. 切换的效果
1. 需求
实现点击导航中内容，下面内容跟随切换。修改项目中index.html代码
<h3>主页</h3>
<a href="pages/log.html" target="aa">日志</a>
<a href="pages/photo.html" target="aa">相册</a>
<a href="pages/saysay.html" target="aa">说说</a>
<a href="pages/music.html" target="aa">音乐</a>
<!--
默认访问加载 日志的页面
-->
<p>
<iframe src="pages/log.html" frameborder="0" name="aa" width="420" height="500"></iframe>
</p>
八. 段落和标题标签
1. 标题标签
HTML中有
6种标题标签。这些标签都是块级标签，除此还具备加粗、外边距的样式。
中内容最大，
最小。从h1-h6在谷歌浏览器中大小分别为(px:像素):36px、24px、18.72px、16px、13.28px、12px
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
2. 段落标签<p>
<p>标签称为段落标签，是HTML中比较常用的块级标签。当有大段文字或文章段落时可以使用<p>标签包含。
<p>标签默认样式带有外边距。无常用属性。
<p>文章段落</p>
九. 日志功能
1. 新建第一条日志对应的HTML文件
在pages文件夹下新建名称为subLog的文件夹，并在此文件夹中新建first.html
<h2 align="center">Hello</h2>
<p>
World!
</p>
2. 新建第二条日志对应的HTML文件
在subLog文件夹中新建second.html文件
<h2 align="center">你最近过的还好吗?</h2>
<p>
好, 很好, 非常好!!!
</p>
3. 修改log.html
修改log.html文件如下
<table>
<tr>
<td width="240">
<a href="subPages/firstLog.html">Hello</a>
</td>
<td>09-06</td>
<td>(0/0)</td>
<td>编辑</td>
</tr>
<tr>
<td>
<a href="subPages/secondLog.html">你最近过的还好吗?</a>
</td>
<td>09-06</td>
<td>(0/0)</td>
<td>编辑</td>
</tr>
</table>
十. img标签
<img src="images\34.png" style="zoom:67%;" />
1. 实现步骤
把软件/img文件夹中的图片复制到项目的img文件夹中
修改photo.html代码如下：
1. 创建2行3列的表格
2. 每个单元格放上标签，并设置图片的宽度、高度。
<table>
<tr>
<td width="130">
<img border="2" src="../img/pig.jpeg" height="100px" width="100px" alt="丢失了"/>
<p>记录</p>
</td>
<td width="130">
<img border="2" src="../img/duck.jpeg" height="100px" width="100px" alt="丢失了"/>
<p>学习</p>
</td>
<td width="130">
<img border="2" src="../img/cloud.jpeg" height="100px" width="100px" alt="丢失了"/>
<p>生活</p>
</td>
<td width="130">
<img border="2" src="../img/dragon.jpeg" height="100px" width="100px" alt="丢失了"/>
<p>点滴</p>
</td>
</tr>
<tr>
<td width="130">
<img border="2" src="../img/momo.jpeg" height="100px" width="100px" alt="丢失了"/>
<p>记录</p>
</td>
<td><img border="2" src="../img/pig.jpeg" height="100px" width="100px" alt="丢失了"/>
<p>学习</p></td>
<td>
<img border="2" src="../img/person.jpeg" height="100px" width="100px" alt="丢失了"/>
<p>生活</p>
</td>
<td>
<img border="2" src="../img/mubiao.jpeg" height="100px" width="100px" alt="丢失了"/>
<p>点滴</p>
</td>
</tr>
</table>
十二. audio音频标签
audio标签可以播放音频文件
1. 可用属性
controls: 显示音频面板
loop: 单曲循环
autoplay: 自动播放。谷歌浏览器禁用了此功能
muted: 默认静音
以上属性的属性名和数值值都相同
src: 音频路径
2. 代码演示
播放音频：
<audio src="audio/zv.mp3" controls="controls" loop="loop" autoplay="autoplay">
您的浏览器不支持播放音频文件
</audio>
从HTML5开始简化了语法
规定：当属性名和属性值相同时可以只写属性名。
经常使用简化的写法:
播放音频：
<audio src="audio/z.aac" controls loop autoplay>
您的浏览器不支持播放音频文件
</audio>
<!--
音频 <audio></audio>
必须指定:
src: 音频的路径
controls: 控件
可选:
loop: 循环
muted: 静音
autoplay: 自动播放(谷歌禁用)
可以简写: 直接写属性名
注意: 必须为属性名和属性值相等才可以简写
-->
<audio src="../audio/dj.mp3" controls muted loop>
您浏览器不支持音频的播放
</audio>
十四. 列表标签
无序列表、有序列表、自定义列表三种列表标签。
1. 无序列表 ul
ul称为无序列表，块级标签。
ul 默认效果中具备外边距和内边距样式。
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
1.1 可用属性
虽然type属性在HTML5中已经不推荐使用， 但是浏览器依然支持type属性。通过type属性可以修改列表项
- 最前面的图形
-
type属性可取值:
disc 实心点
circle 空心圆
square 实现方框
none 什么也没有2. 有序列表 ol
ol有序列表。和
- 最大的区别是每个列表项前显示有序标识。
<ol> <li>111</li> <li>222</li> <li>333</li> </ol>2.1 可用属性
ol可以通过type属性控制列表以什么方式进行显示。type=””
1: 阿拉伯数字
a : 小写字母
A : 大写字母
i : 小写罗马数字
I : 大写罗马数字3. 定义列表 dl
dl 定义列表。
dl下可以包含多个dt定义项标签，每个定义项标签后面紧跟多个dd定义描述标签
样式说明：<dt>是没有缩进的。 <dd>有缩进。<dl> <dt>定义项1</dt> <dd>描述1-1</dd> <dd>描述1-2</dd> <dt>定义项2</dt> <dd>描述2-1</dd> <dd>描述2-2</dd> </dl>十五. video标签
video标签可以显示视频文件。
1. 可用属性
controls: 显示视频面板
loop: 视频循环
autoplay: 自动播放。谷歌浏览器禁用了此功能
muted: 默认静音
以上属性值和属性名相同
src: 视频路径
poster: 视频封面2. 代码演示
把视频文件粘贴到HBuilder中audio文件夹
<video src="video/movie.mp4" controls width="640" height="400" poster="img/duck.jpeg"> 把音频文件粘贴到video中
修改saysay.html文件<table cellspacing="40"> <tr> <td valign="top"> <img src="../img/mubiao.jpeg" height="50" width="50" alt="" /> </td> <td> <p> <a href="">Arvin</a> 快乐ing </p> <p> <video src="../video/1.mp4" height="220" width="150" controls></video> </p> </td> </tr> <tr> <td valign="top"> <img src="../img/mubiao.jpeg" height="50" width="50" alt="" /> </td> <td> <p> <a href="">Arvin</a> nice </p> <p> <video src="../video/movie.mp4" height="150" width="220" controls></video> </p> </td> </tr> </table>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
