在线学习HTML5的第02天-CSDN博客

本文链接：https://blog.csdn.net/qq_45838752/article/details/120941851

在线学习HTML5的第02天

（灯哥日记）从小白做起，在线学习HTML5

在线学习HTML5的第02天

一.标签

超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML标签的大小写无关的，例如“主体”<body>跟<BODY>表示的意思是一样的，推荐使用小写。
-----百度百科

1.特点

HTML5 标签的特点：

由尖括号包围的关键词，比如 <html>
通常是成对出现的，比如 <div> 和 </div>
标签对中的第一个标签是开始标签，第二个标签是结束标签；
开始和结束标签也被称为开放标签和闭合标签。
新也有单独呈现的标签，如：<img src="cbd.jpg" />等。
一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如<h1>标题</h1>和 <input type="text" value="按钮" />。
网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。

来源网络

2.编程环境

Microsoft Edge/Chrome/Firefox 等浏览器， Visual Studio Code 或记事本

二.Html的基本标签

1. html的主体标签 body

body 元素是定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body是用在网页中的一种HTML标签，标签是用在网页中的一种 HTML 标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容！.

元素有很多自身的属性，如定义页面文字的颜色、背景的颜色、背景图像等

<body text="#000000" link="#000000" alink="#000000" vlink="#000000"
background="cbd.jpg" bgcolor="#000000" leftmargin=3 topmargin=2 bgproperties="fixed">

属性	描述
text	设定页面文字的颜色
link	设定页面默认的链接颜色
alink	设定鼠标正在单击时的链接颜色
vlink	设定访问过后的链接颜色
background	设定页面的背景图像
bgcolor	设定页面背景的颜色
leftmargin	设定页面的左边距
topmargin	设定页面的上边距
bgproperties	设定页面的背景图像为固定，不随页面的滚动而滚动

2. 换行标签 br

在HTML中br是一个标签元素，表示换行。. 它可在HTML文档中插入一个简单的换行符；如果有地方需要强制换行，那就使用br标签元素即可。

<html>
<head>
<title>换行</title>
</head>
<body>
111
<br>222<br>333<br>444<br>555<br>666<br>777
</body>
</html>

3.换段落标签 p

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

<html>
<head>
<title>分段</title>
</head>
<body>
<p>1234567891011121314151617181920</p>
<p align="right">右</p>
<p align=center>中</p>
<p align="left">左</p>
</body>
</html>

align内的标签是表示对齐方式。

4.居中对齐标签 center

对其所包括的文本进行水平居中。

5.标题文字标签 h(x)

正如上面标题一样，由h1递增，标题大小递减。

6.超链接

在 HTML 中，我们使用 <a> 标签来表示超链接。超链接（Hyperlink）是网页中最常见的元素之一，整个互联网都是基于超链接而构建的。每个网站都由众多的网页组成，超链接使得网页之间不再独立，它就像一根线，把网页连接在一起，形成一个网状结构。互联网之所以能够称之为“网”，就是因为有超链接的存在。

6.1 发送E-mai

<a href="mailto:E-mali 地址: subject=邮件主题">描述文字</a>

属性	描述
Subject	电子邮件主题
Cc	抄送收件人
Body	主题内容
Bcc	暗送收件人

7.网页中插入图片标签 img

img 元素向网页中嵌入一幅图像。请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。 <img> 标签有两个必需的属性： src 属性和 alt 属性。在 HTML 中，<img> 标签没有结束标签。在 HTML 中，<img> 标签必须被正确地关闭。

<html>
<head>
<title>插入图片</title>
</head>
<body>
<center>
<h2>1</h2><img src="1.jpg">
</center>
</body>
</html>

设定上下左右空白位置

<img src="1.jpg" align="left" hspace="20" vspace="20">

设定字画对其方式

<img src="1.jpg"align="left">
123132121321321321321321321332132
此图像相对于文字基准线为靠上对齐的多行文字

图片大小设定

<img src="1.jpg"width="350" height="200">

图像边框的设定

<img src="1.jpg"border="10">

图像的超链接

<a href="http://www.baidu.com/"><img alt="百度" src="1.jpg"></a>

用 img 标签插入avi文件

<img src="1.avi"loop="-1" start="mouseover">

8.网页中插入多媒体元素

8.1 滚动字幕 marquee

<html>
<body>
<center>
<font face="字体2" size=6 color="#ff0000">滚动字幕</font><br>
<marquee>111</marquee>
<p>
<marquee height="200" direction="up" hspace="200">往上滚<br></marquee>
<p>
<marquee direction="right">往右滚</marquee>
<p>
<marquee height="200" direction="down"><center>往下滚</center></marquee>
<p>
<marquee width="500" behavior="alternate">来回滚</marquee>
<p>
<marquee behavior="slide">不滚</marquee>
<p>
<marquee scrollamount="2">慢滚</marquee>
<p>
<marquee scrolldelay="300">走走停停</marquee>
<p>
<marquee scrollamount="20">快滚</marquee>
<p>
<marquee><img src="1.jpg">图片也可以滚</marquee>
<p>
<marquee bgcolor="#FFFFCC" width="700" vspace="30"><font size="+3" color="#FF0000">滚动文字有背景了</font></marquee>
</center>
</body>
</html>

8.2 插入多媒体文件 embed

<html>
<head>
<title>插入视频文件</title>
</head>
<body>
<hr>
<center>
<embed src="2.wmv" width="400" height="500" loop="false"></embed>
</center>
</body>
</html>

8.3 Flash动画

<html>
<head>
<title>插入flash</title>
</head>
<body>
<embed src="3.swf" height="500" width="550"></embed>
<!--插入flash-->
<embed src="3.swf" height="500" width="550" wmode="transparent"></embed>
<!--插入透明flash-->
</body>
</html>

8.4点播音乐

<a href="灯灯吃象.mp3">mp3音乐</a>

9.浮动窗口 iframe

<html>
<head>
<title>浮动窗口</title>
</head>
<body bgcolor="#E1FFE1">
<center>
<iframe src="ml1.html" name="aa" width="600" height="400" marginwidth="30"
marginheight="20" align="middle" allowtransparency="true"> 浮动窗口</iframe>
<p><a href="sl1.html" target="aa">1234</a></p>
<p><a href="sl2.html" target="aa">图像对文字的水平居中</a></p>
<p><a href="sl3.html" target="aa">图像与文本之间的距离</a></p>
<p><a href="sl4.html" target="aa">图像大小的设定</a></p>
<p><a href="http://www.baidu.com" target="aa3">百度</a></p>
</center>
</body>
</html>