使用HTML技术

前言：

可以先利用记事本编写一个HTML文件。

结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习1</title>
</head>
<body>

</body>
</html>

当然，为了方便我们有用专门的开发软件工作，这些结构会自动生成。

学习路径：

1.HTML的基本标记

1.1标题标记

1.2段落标记与换行符

1.3块标签

1.4列表属性

1.4.1.有序列表

1.4.2.无序列表

1.4.3.自定义列表

2.多媒体

2.1图像标记

2.1.1.src属性

2.1.2.title属性

2.1.3.width/height属性

2.1.4.border属性

2.1.5.align属性

2.2多媒体文件标记

2.3视频标记

2.4音频标记

3.超链接

3.1超链接标记

3.2超链接类型

3.2.1.内部链接

3.2.2.外部链接

3.2.3.书签链接

3.3超链接路径

学习路径：

HTML的基本标记
多媒体
超链接
表单
表格

1.HTML的基本标记

1.1标题标记

在HTML文档中，标题十分重要。标题是通过<h1>~<h6>共六对标记进行定义的。<h1>定义最大标签，<h6>定义最小标签。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习1</title>
</head>
<body>
<h1>我是第一</h1>
<h2>第二</h2>
<h3>第三</h3>
<h4>第四</h4>
<h5>第五</h5>
<h6>最小</h6>

</body>
</html>

运行显示为：

1.2段落标记与换行符

在HTML文档中，使用段落标记<p>来描述段落，如果想换行则用<br>换行标签来实现。

1.3块标签<div>和<span>

<div>和<span>标记都是定义页面内容的容器，用于编排页面布局本身没有具体的显示效果。这两个标记的显示效果都由style属性或CSS来完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习1</title>
</head>
<body>


<div style="background-color: palevioletred">块状区域1</div>
<div style="background-color: cornflowerblue">块状区域2</div>
<span style="background-color: aqua">行间区域1</span>
<span style="background-color: antiquewhite">行间区域2</span>


</body>
</html>

页面运行效果如图：

1.4列表属性

在HTML中，提供列表，列表可以对网页文字进行更好的布局和定义。HTML文件中可分为三种列表形式：有序列表，无序列表，自定义列表。

1.4.1.有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习2</title>
</head>
<body>

<ol type="" start="">
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>
    
</ol>
</body>
</html>

运行结果为：

可以看出，默认情况下有序列表的列表项目前显示的是1，2，3....序号，从数字1开始计算。

可以使用type属性修改有序列表序号的样式，也可以定义start属性设置列表序号的起始值。

有序列表type属性及说明

属性值	说明
1	数字1 , 2 ...
a	小写字母a ,b ...
A	大写字母A , B ...
i	小写罗马数字i , ii...
I	大写罗马数字I , II ...

1.4.2.无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习2</title>
</head>
<body>
<ul type="" >
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>
    <li>列表信息</li>

</ul>
</body>
</html>

运行结果为：

可以看出，默认情况下无序列表列表的列表项目前显示的是实心圆点，和有序列表一样的，可以使用type属性修改有序列表序号的样式。

无序列表type属性及说明

属性值	说明
disc	实心圆点（默认）
circle	空心圆点
square	方形

1.4.3.自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习2</title>
</head>
<body>

<Dl>
    <dt>名称<dd>说明 
    <dt>名称<dd>说明
    <dt>名称<dd>说明
    <dt>名称<dd>说明
    <dt>名称<dd>说明

</Dl>
</body>
</html>

适用场景：输入用户名或密码时，要以字母开头，需要多少个数字等等要求，可以通过自定义列表完成。

2.多媒体

多媒体作为组成网页的重要元素，包括文字，图像，声音，动画等。虽然文字在网页中占据重要地位，但是图片，声音和动画也必不可少。

2.1图像标记

语法如下：

<img scr ="url" title="description"/>

<img>标记的常用属性及说明

属性名	说明
src	图像地址
title	添加图像的替代文字
width/height	设置图像的宽度和高度
border	设置图像边框
align	设置图像对齐方式

2.1.1.src属性

src属性为必需属性，其他属性为可选项。src属性用来指定图片文件所在的路径，这个路径可以是相对路径也可以是绝对路径。

2.1.2.title属性

<img>标记的title属性用于添加图像的替代文字。当浏览网页时，若图片下载完成，将鼠标光标放在图像上，光标旁边会出现替代文字。若图片没有被下载，图片位置会显示替代文字起到提醒作用。

2.1.3.width/height属性

width/height属性用来设置图像的宽度和高度，默认情况下，网页中显示的图像保持原图的尺寸。图像高度和宽度的单位可以是像素也可以是百分比。若只设置宽度或高度的其中一个，则会按照原图宽高比例等比显示，但如果两个属性都没有按原始大小的缩放比例图片将会变形显示。

2.1.4.border属性

border属性用来设置图像边框， border属性默认是没有边框的，可以为图像定义边框的宽度边框的颜色，默认颜色为黑色。

2.1.5.align属性

align属性用来设置图像对齐方式，图像的绝对对齐方式和正文的对齐方式一样，有左对齐，居中对齐和右对齐。而相对正文文字的对齐方式则是指图片与同行文字的相对位置。

align属性的取值及说明

属性值	说明
top	图像顶部与同行的文字或图像顶部对齐
middle	图片中部与同行的文字或图像中部对齐
bottom	图像底部与同行的文字或图像底部对齐
left	图像在文字左侧
right	图像在文字右侧
absbottom	图像底部与同行最低象的底部对齐
absmiddle	图像中部与同行最大项的中部对齐
baseline	图像底部与文本基本准线对齐
texttop	图像底部顶部与同行最高向顶部对齐


<img src="../图片/wish01.jpg" height="50" width="50" title="洗衣机，你好哈！" style="border: 4px solid palevioletred" align="top"/>格兰斯洗衣机

运行结果为：

鼠标悬停在图片上会显示“洗衣机，你好哈！”

2.2多媒体文件标记

利用<embed>标记可以直接调用多媒体文件:

<embed src="url" autostart="" loop="">  </embed>

src 属性用来指定插入的多媒体文件的地址或多媒体文件名，文件名一定要加上扩展名。
autostart 属性用于设置多媒体文件是否自动播放。有true和false两个取值。true表示在打开网页时自动播放，false时默认值，表示打开网页时不自动播放。
loop 属性用于设置多媒体文件是否循环播放。有true和false两个取值。true表示无限循环播放多媒体文件，false为默认值，表示只播放一次。

2.3视频标记

使用<video>标记来实现视频和播放:

<video src="url" controls="controls">替代文字</video>

2.4音频标记

使用<audio>标记来实现音频的播放:

<audio src="url" controls="controls">替代文字</audio>

3.超链接

3.1超链接标记

定义超链接标签的语法格式如下：

<a href="url" target="target-windows">链接标题</a>

3.2超链接类型

在HTML文件中，超链接可以分为内部链接，外部链接和书签链接。

3.2.1.内部链接

内部链接是指网站内部文件之间的链接。将超链接标记<a>中的href属性的URL值设置为相对路径，就可以在HTML文件中定义内部超链接。

3.2.2.外部链接

外部链接是指网站内的文件链接到站点以外的文件。将超链接标记<a>中的href属性的URL值设置为绝对路径，就可以在HTML文件中定义外部超链接。

3.2.3.书签链接

书签链接是在一个文档内部的链接（适用于文档较长的情况）。如果有的网页内容特别多，页面特别长，需要不断翻页才能看到想要的内容。这时可以在页面中定义一些书签链接这些书签相当于方便浏览者查看的目录，单击书签时就会跳转到相应的内容。实际上跳转的地址也可以是其他文档的某一位置。使用书签链接之前首先要建立一个被称为“锚点”的链接目标地址，格式如下：

<a name="anchorname"></a>

在超链接部分指明用户定义的锚记名称，即可链接到指定的位置。

3.3超链接路径

HTML文件中提供了三种路径——绝对路径，相对路径，根路径。

绝对路径：指文件的完整路径包括文件传输的协议HTTP， FTP等。一般用于网站的外部链接。例如：

<a href="https://mp.csdn.net/"></a>

2. 相对路径: 相对于当前文件的路径它包含了从当前文件指向目的文件的路径,，适用于网站的内部标签只要处于站点文件夹内即不属于同一文件的目录下相对路径建立的链接也适用。

相对路径的使用方法

相对位置	输入方法	举例
同一目录	直接输入要链接的文档名	index.html
链接上一目录	先输入"../",再输入目录名	../images/pic l.jpg
链接下一目录	先输入目录名,再输入"/"	videos/vl. mov

3. 根路径的设置以“/”开头，后面紧跟文件路径，例如/download/index.html。根路径的设置也适用于内部链接的建立，但在一般情况下，不使用根路径。