HTML基础(第一部分)

目录

一、基本概念

二、结构标签

[1. HTML的基本结构](#1. HTML的基本结构)

[2. 头部标记](#2. 头部标记)

[3. 标题标记](#3. 标题标记)

[4. 元信息标记](#4. 元信息标记)

[5. 主体标记](#5. 主体标记)

三、基础标签

[1. 文本和段落](#1. 文本和段落)

[2. 插入图像](#2. 插入图像)

[3. 添加多媒体](#3. 添加多媒体)

[4. 图像的超链接](#4. 图像的超链接)

[5. 图像热区链接](#5. 图像热区链接)

[6. 建立超链接](#6. 建立超链接)


一、基本概念

HTML的英文全称是Hyper Text Markup Language(超文本标记语言),它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。

二、结构标签

1. HTML的基本结构

复制代码
<html>
	<head>
		文件头
	</head>
	<body>
		文件主体
	</body>
</html>

2. 头部标记

一般需要包括标题、基础信息和元信息等。
语法:

复制代码
<head>......</head>

说明:<head>元素的作用范围是整篇文档。

3. 标题标记

语法:

复制代码
<title>......</title>

**说明:**标题位于<head>和</head>之间。

4. 元信息标记

META标签包含 http-equiv 和 name 两大类属性。

(1) http-equiv 使用方法:

1) Content-Type:

说明主页制作所使用的文字以及语言。

例:

复制代码
<meta http-equiv="Content-Type" content="text/html;charset=gb_2312-80">
<meta http-equiv="Content-Language" content="zh-CN">

2) Refresh:

定时让网页在指定的时间n内,跳转到指定的页面。
例:

复制代码
<meta http-equiv="Refresh" content="n;url=http://yourlink">

3) Expires:

可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需

要注意的是必须使用GMT时间格式。

例:

复制代码
<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT">

4) Pragma:

是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开

网页就无法从Cache中再调出。

例:

复制代码
<meta http-equiv="Pragma" content="no-cache">

5) set-cookie:

cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须

使用GMT时间格式。

例:

复制代码
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">

6) Pics-label:

网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些

受限制的网站,而网站的限制级别就是通过meta属性来设置的。

例:

复制代码
<meta http-equiv="Pics-label" content=>

7) windows-Target:

强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作

一个frame页调用。

例:

复制代码
<meta http-equiv="windows-Target" content="_top">

8) Page-Enter:

设定进入和离开页面时的特殊效果,这个功能即FrontPage中的"格式/网页

过渡",不过所加的页面不能够是一个frame页面。

例:

复制代码
<meta http-equiv="Page-Enter" content="revealTrans(duration=10,transition= 50)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=20,transition=6)">

(2) name 使用方法:

1) author

作者信息。

例:

复制代码
<meta name="author" content="作者的姓名">

2) description

页面说明。

例:

复制代码
<meta name="description" content="设置页面说明">

3) generator

编辑工具。

例:

复制代码
<meta name="generator"content="编辑软件的名称">

4) keywords

关键字。

例:

复制代码
<meta name="keywords" content="输入具体的关键字">

5. 主体标记

(1) 背景色

语法:

复制代码
<body bgcolor="背景颜色">

**说明:**颜色的值可以是一个已命名的颜色,也可以是十六进制的颜色值(#993300)。

(2) 背景图片

语法:

复制代码
<body background="图片的地址">

**说明:**图片的地址可以是相对地址,也可以是绝对地址。

(3) 文字颜色

语法:

复制代码
<body text="文字的颜色">

(4) 链接文字属性

1) link: 设置访问前的文字颜色

2) alink: 设置正在访问的文字颜色

**3) vlink:**设置访问后的链接文字的颜色

例:

复制代码
<body link="颜色1" alink="颜色2" vlink="颜色3">

(5) 边距

语法:

复制代码
<body topmargin=上边距的值 leftmargin=左边距的值>

**说明:**在默认情况下,边距的值以像素为单位。

(6) 注释

语法:

复制代码
<!--注释的内容 -->

三、基础标签

1. 文本和段落

(1) 标题字标记

复制代码
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

对齐属性:

默认情况下,标题文字是左对齐的。

语法:

复制代码
<align=对齐方式>

<!--
    left(左对齐)
    center(居中对齐)
    right(右对齐) 
-->

(2) 文本基本标记

<font>标记用来控制字体、字号和颜色等属性,它是 HTML中最基本的标记之一。

1) 字体属性:
语法:

复制代码
<font face="字体样式">......</font>

2) 字号属性:
语法:

复制代码
<font size="文字字号">......</font>

<!--
	说明:size 属性用来设置字体的大小,它有绝对和相对两种方式。从1到7的整数,代表字体大小的绝对字号。从-4到+4的整数,字体相对于3号放大和缩小字号。
-->

3) 颜色属性:
语法:

复制代码
<font color="字体颜色">......</font>

(3) 文本格式化标记
1) 粗体标记:

复制代码
<b>加粗的文字</b>
<strong>加粗的文字</strong>

2) 斜体标记:

复制代码
<i>斜体文字</i>
<em>斜体文字</em>
<cite>斜体文字</cite>

3) 上标标记:

复制代码
<sup>上标内容</sup>

<!-- 说明:允许嵌套使用 -->

4) 下标标记:

复制代码
<sub>下标内容</sub>

<!-- 说明:允许嵌套使用 -->

5) 大字号标记:

复制代码
<big>大字号内容</big>

6) 小字号标记:

复制代码
<small>小字号内容</small>

7) 下画线标记:

复制代码
<u>下画线的内容</u>

(4) 段落标记

语法:

复制代码
<p>段落文字</p>

<!--
    说明:段落标记可以没有结束标记</p>,而每一个新的段落标记开始的同时也意味着上一个段落的结束。
-->

(5) 换行标记
语法:

复制代码
<br>

(6) 不换行标记
语法:

复制代码
<nobr>不换行文字</nobr>

(7) 水平线
语法:

复制代码
<hr>

属性:

1) 水平线宽度:
语法:

复制代码
<hr width="宽度">
<!--
    说明:在该语法中,水平线的宽度值可以是确定的像素值,也可以是窗口的百分比。
-->

2) 水平线高度:

语法:

复制代码
<hr size="高度">
<!--
    说明:在该语法中,水平线的高度值只能是像素值。
-->

3) 水平线去掉阴影:
语法:

复制代码
<hr noshade>

4) 水平线颜色:
语法:

复制代码
<hr color="颜色">

5) 水平线排列:
语法:

复制代码
<hr align="对齐方式">
<!--
    说明:默认情况下是居中对齐,包括center、let和ight
-->

(8) 特殊符号

描述 转义符号
空格 &nbsp;
左双引号 "
右双引号 "
左单引号 '
右单引号 '
乘号 &times;
除号 &divide;
加号 &plus;
减号 &minus;
大于号 &gt;
小于号 &lt;

2. 插入图像

(1) 语法:

复制代码
<img src="URL地址" alt="图像的替代文本" ......>

(2) 属性:

属性 描述
src 图像的源文件
alt 提示文字
width, height 宽度和高度
border 边框
vspace 垂直间距
hspace 水平间距
align 排列
dynsre 设定 avi 文件的播放
loop 设定 avi文件循环播放次数
loopdelay 设定 avi文件循环播放延迟
start 设定 avi文件播放方式
lowsrc 设定低分辨率图片
usemap 映像地图

3. 添加多媒体

(1) 滚动效果
语法:

复制代码
<marquee>......</marquee>

滚动属性:

|---------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------|
| 属性 | 描述 | 例 |
| direction | 滚动方向,滚动方向包含4个取值, 分别为up(向上)、down(向下)、 left(向左)和right(向右),其中left 为默认效果。 | <marquee direction="滚动方向"> ...... </marquee> |
| behavior | 滚动方式,属性值为:scroll:循 环滚动,默认效果;slide:只滚动 一次就停止;alternate:来回交替 进行滚动。 | <marquee behavior="滚动方式"> ...... </marquee> |
| scrollamount | 滚动速度 | <marquee scrollamount="滚动速度(像素)"> ...... </marquee> |
| scrolldelay | 滚动延迟 | <marquee scrolldelay="时间间隔(毫秒)"> ...... </marquee> |
| loop | 滚动循环 | <marquee loop="循环次数"> ...... </marquee> |
| width | 滚动范围 | <marquee width="背景宽度(像素)" height ="背景高度(像素)"> ...... </marquee> |
| bgcolor | 滚动背景颜色 | <marquee bgcolor="背景颜色"> ...... </marquee> |
| hspace、vspace | 空白空间,默认情况下,滚动对象 周围的文字或图像是与滚动背景紧 密连接的,使用hspace(水平范围) 和vspace(垂直范围)可以设置它们 之间的空白空间。 | <marquee hspace="水平范围(像素)" vspace="垂直范围(像素)"> ...... </marquee> |

(2) 插入多媒体文件

1) 插入 Flash 动画

语法:

复制代码
<embed src="多媒体文件地址" width="多媒体的宽度" height="多媒体的高度">......</embed>

2) 插入音频和视频文件

语法:

复制代码
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度">......</embed>

3) 设置背景音乐

语法:

复制代码
<bgsound src="背景音乐的地址" loop="播放次数">
<!--
    说明:如果希望无限次地循环播放背景音乐,可将循环次数设置为true。
-->

4) 插入Java Applet
语法:

复制代码
<applet code="Lake.class" width="宽度" height="高度">
	<param name="文件夹的名称" value="图片名称">
</applet>

4. 图像的超链接

语法:

复制代码
<a href="链接地址"><img src="图像文件的地址"></a>

5. 图像热区链接

语法:

复制代码
<!--
    1.首先需要在图像文件中设置映射图像名,在图像的属性中使用<usemap>标记添加图像要引用的映射图像的名称如下:
-->
<img src="图像地址" usemap ="映射图像名称">
<!--
    2.然后需要定义热区图像以及热区的链接属性如下:
-->
<map name="映射图像名称">
	<area shape="热区形状" coords="热区坐标" href="链接地址">
</map>

6. 建立超链接

(1) 基本知识
1) URL: 统一资源定位符
2) 绝对路径: 是包括服务器规范在内的完全路径。
**3) 相对路径:**可以表述源端点同目标端点之间的相互位置,它同源端点的位置密

切相关。

(2) 内部链接

内部链接是指链接的对象是在同一个网站中的资源。

语法:

复制代码
<a href="链接地址" target="目标窗口的打开方式">......</a>

target的属性值:

属性值 描述
self 在当前页面中打开链接
blank 在一个全新的空白窗口中打开链接
top 在顶层框架中打开链接,也可以理解为在根框架中打开链接
parent 在当前框架的上一层里打开链接

(3) 锚点链接

1) 建立锚点

锚点就是指在给定名称的一个网页中的某一位置,在创建锚点链接前首先要

建立锚点。

语法:

复制代码
<a name="锚点的名称">......</a>

2) 链接同一页面中的锚点

建立了锚点以后,就可以创建到锚点的链接,需要用#号以及锚点的名称作

为 href 属性值。

语法:

复制代码
<a href="#锚点的名称">......</a>

3) 链接到其他页面中的锚点

锚点链接不但可以链接到同一页面,也可以在不同页面中设置。

语法:

复制代码
<a href="链接的文件地址#锚点名称">......</a>

(4) 外部链接

外部链接是指跳转到当前网站之外的资源中。

1) 链接到外部网站

网页中最常用的利用HTTP协议进行外部链接是在设置友情链接时。
语法:

复制代码
<a href="http://......">......</a>

2) 链接到 E-mail

语法:

复制代码
<a href="mailto:邮件地址">......</a>

3) 链接到FTP
语法:

复制代码
<a href="ftp://ftp地址">......</a>

4) 链接到 Telnet
语法:

复制代码
<a href="telnet://地址">......</a>

5) 下载文件
语法:

复制代码
<a href="文件地址">......</a>
相关推荐
kirinlau2 小时前
pinia状态管理在vue3项目中的用法详解
前端·javascript·vue.js
zhuà!2 小时前
腾讯地图TMap标记反显,新增标记
前端·javascript·vue.js
未知原色2 小时前
web worker使用总结(包含多个worker)
前端·javascript·react.js·架构·node.js
ttod_qzstudio3 小时前
CSS改变图片颜色方法介绍
前端·css
curdcv_po3 小时前
我接入了微信小说小程序官方阅读器
前端·微信小程序
程序员鱼皮3 小时前
什么是 RESTful API?凭什么能流行 20 多年?
前端·后端·程序员
www_stdio3 小时前
让大语言模型拥有“记忆”:多轮对话与 LangChain 实践指南
前端·langchain·llm
inferno3 小时前
JavaScript 基础
开发语言·前端·javascript
cindershade3 小时前
Intersection Observer 的实战方案
前端