标签属性：**
只读：readonly
禁用：disabled
隐藏：hidden
1.图像标签：
<img src= "D:\新桌面\Blog\Html5+css3\path" alt="text" title="text" width="x" height="y"/>
alt:图像的替代文字
title：鼠标悬停提示文字
width:图像宽度
height:图像高度
<!--img学习
src:图片地址(必须填) ----相对地址和绝对地址
alt: 图片名字（必须填)
../ 表示上一级目录-->
<img src="../../Resource/image/gift.jpg" alt="一个礼物">
<img src="../../Resource/image/gift.jpg1" alt="一个礼物1">
<img src="../../Resource/image/fruit.jpg" alt="一个水果" title="你看它像不像一个西瓜" width="200" height="200">
<a href="4链接标签学习.html#down">跳转页面4的底部</a>
2.超链接(下方点击可查看源码)
<a href="path" target="目标窗口位置"> 超链接文本或图像 </a>
href:链接路径
target:目标在哪个窗口打开。 常用值：_self(在当前窗口打开), _blank (新窗口打开)
-
文本超链接
-
图像超链接
-
页面间链接——从一个页面链接到另一个页面
-
锚链接 跳转
-
功能性链接
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--a标签
href:必填，表示要跳转的那个页面
target:表示当前窗口在哪里打开
_blank 在新标签中打开. 若没有设置，默认在当前页面打开
_self 在自己的网页打开。 是默认设置
-->
<a href="3图像标签.html" target="_blank">点击我跳转到页面</a>
<a href="http://www.baidu.com" target="_self">点击我跳转到百度</a>
<br>
<!--图片标签-->
<a href="myFirstpage.html">
<img src="../../Resource/image/fruit.jpg" alt="一个水果" title="你看它像不像一个西瓜" width="200" height="200">
</a>
<p><a href="myFirstpage.html">
<img src="../../Resource/image/fruit.jpg" alt="一个水果" title="你看它像不像一个西瓜" width="200" height="200">
</a>
</p>
<p><a href="myFirstpage.html">
<img src="../../Resource/image/fruit.jpg" alt="一个水果" title="你看它像不像一个西瓜" width="200" height="200">
</a>
</p>
<p><a href="myFirstpage.html">
<img src="../../Resource/image/fruit.jpg" alt="一个水果" title="你看它像不像一个西瓜" width="200" height="200">
</a>
</p>
<p><a href="myFirstpage.html">
<img src="../../Resource/image/fruit.jpg" alt="一个水果" title="你看它像不像一个西瓜" width="200" height="200">
</a>
</p>
<p><a href="myFirstpage.html">
<img src="../../Resource/image/fruit.jpg" alt="一个水果" title="你看它像不像一个西瓜" width="200" height="200">
</a>
</p>
<p><a href="myFirstpage.html">
<img src="../../Resource/image/fruit.jpg" alt="一个水果" title="你看它像不像一个西瓜" width="200" height="200">
</a>
</p>
<p><a href="myFirstpage.html">
<img src="../../Resource/image/fruit.jpg" alt="一个水果" title="你看它像不像一个西瓜" width="200" height="200">
</a>
</p>
<p><a href="myFirstpage.html">
<img src="../../Resource/image/fruit.jpg" alt="一个水果" title="你看它像不像一个西瓜" width="200" height="200">
</a>
</p>
<p><a href="myFirstpage.html">
<img src="../../Resource/image/fruit.jpg" alt="一个水果" title="你看它像不像一个西瓜" width="200" height="200">
</a>
</p>
<a name="down"></a>
<!--锚链接 实现页面间的跳转
1.需要一个标记 比如<a name="down"></a>
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a href="#down">down</a>
<!--功能性链接
邮件链接：mailto
QQ链接 ：
-->
<a href="mailto: 1094613417@qq.com">联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击加我QQ" title="点击加我QQ"/>
</a>
3.行内元素和块元素
块元素：
- 无论内容多少，该元素独占一行
- (p , h1-h6) 行行之间间距比较大
行内元素
- 内容撑开宽度，左右都是行内元素的 可以排在一行
- (a , strong , em)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<h7>七级标签</h7>
<h8>aaas把</h8>
两只老虎，两只老虎，
跑得快，跑得快，
一只没有眼睛，一只没有尾巴，
真奇怪！真奇怪！ 这样会放在一行里面。
<!--p 段落标签 快捷键： p+tab
两个空格变成一个空格-->
<p>两只老虎， 两只老虎，</p>
<p>跑得快， 跑得快，</p>
<p>一只没有眼睛， 一只没有尾巴，</p>
<p>真奇怪！ 真奇怪！</p>
<!--换行标签 br-->
两只老虎，两只老虎，<br/>
跑得快，跑得快， <br/>
一只没有眼睛，一只没有尾巴， <br/>
真奇怪！真奇怪！ <br> 这样会放在一行里面。
<!--水平线标签 hr-->
<hr/>
<!--粗体 斜体-->
粗体： <strong>i love you</strong>
斜体: <em>i love you</em>
<br/>
<!--空格-->
空 格 <br>
空 格
<br>
>
<
© 版权所有
<!--特殊符号记忆-->
&+随便一个字母就可看到很多。 或百度
</body>
</html>
4.列表
就是 类似这种：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wSzoSntr-1617029866943)(C:\Users\饮川\AppData\Roaming\Typora\typora-user-images\image-20210317095938757.png)]
它可以让信息结构化和条理化，并以列表的形式展示出来。
列表分类：
- 无序列表
- 有序列表
- 定义列表
<!--有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
<li>前端</li>
<li>C/C++</li>
</ol>
<hr>
<!--无序列表
应用范围：导航栏，侧边栏。。。
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>C/C++</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>编程语言</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>Linux</dd>
<dd>C</dd>
<dt>位置</dt>
<dd>山西</dd>
<dd>山西</dd>
<dd>运城</dd>
<dd>临猗县</dd>
<dd>临晋镇</dd>
</dl>
5.表格
表格基本结构：
- 单元格
- 行
- 列
- 跨行
- 跨列
<!--表格table
行 tr
列 td
-->
<table border="2px">
<tr>
<!-- colspan跨列 值表示：跨几列-->
<td colspan="4">1-1</td>
<!-- <td>1-1</td>-->
<!-- <td>1-2</td>-->
<!-- <td>1-3</td>-->
<!-- <td>1-4</td>-->
</tr>
<tr>
<!-- rowspan跨行 值表示跨几行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
<table border="5">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">狂神</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td >数学</td>
<td >100</td>
</tr>
<tr>
<td rowspan="2">秦疆</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
6.视频和音频
<!--音频和视频
src 资源路径
controls 控制条
autoplay 自动播放
-->
<video src="" controls autoplay></video>
<audio src="../../Resource/video/rBAVGl6YnfaAfKsMAfUsqGlvUDc711.mkv" controls autoplay></audio>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
