例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<h1>第一个标题</h1>
<p>第一个段落</p>
</body>
</html>
对应代码解析:
声明为HTML5文档 | |
---|---|
为根元素 | |
包含了文档的元(meta)数据,上述代码中定义网页编码格式为utf-8 | |
描述文档的标题 | |
包含可见的页面内容 | |
定义了一个大标题 | |
定义了一个段落 |
一、html基础知识点
html使用来描述网页的一种标记语言,即采用标记标签来描述网页,html文档也叫做web页面。html标签是由尖括号包围的关键词 ,且其通常为成对出现的,如下所示,开始和结束标签也被称为开放标签和闭合标签。
<标签>内容</标签>
html的网页结构,只有区域才会在浏览器中显示。
对于设置的后出现网页乱码的问题,问题为:通过meta设置的编码和网页文件在保存时使用的文档编码不相同。
1.1 四个实例
-
标题(heading)是通过h1-h6标签来定义的;
-
段落通过标签 p 来定义的。
-
链接是通过标签 a 来定义的,例如:
<a href="https://www.runoob.com">这是个链接</a>
-
图像是通过标签 img 来定义的。例如:
<img src="/images/logo.png" width="258" height="39"></img>
常见问题:
a. HTML中的href和src的区别:
-
href----超文本引用,在link和a等元素上使用;href的内容与该页面有关联,为引用。例如:
<link href="reset.css" rel="stylesheet"/>
-
src------表示来源地址,在img、script、iframe等元素上使用;src的内容为页面必不可少的部分,是引入。
b.若图片与html文件目录相关问题: -
html文件与图片文件(f盘)不在同一目录下:
<img src="file:///f:/*.jpg" width="300" height="120"/>
-
html文件与图片文件在相同目录下:
<img src="*.jpg" width="300" height="120"/>
-
图片*.jpg在image文件夹中,*.html与image在 同一目录下:
<img src="/image/*.jpg/" width="300" height="120"/>
-
图片在image文件夹中,html在connage文件夹中,image与connage在同一目录下:
<img src="../image/*.jpg/" width="300" height="120"/>
-
图片来自于网络,则写绝对路径:
<img src="http://test.com/images.test.png" width="300" height="120"/>
1.2 html属性
html的属性总是以名称/值对的形式出现,例如:name=“value”。
完整的html的属性列表链接为:HTML 标签列表(字母排序) | 菜鸟教程
下面为适用于大多数html元素的属性:
属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息(作为工具条使用) |
html标题是通过h1 - h6标签进行定义,与word一样,
定义最大最主要的标题,
定义最小的标题,例如:
<h1>标题一</h1>
<h2>标题二</h2>
ps:标题标签只适用于标题,不要为了生成粗体/大号文本使用标题。
hr 标签在html界面中创建水平线,即hr可用于分隔内容,例如:
<p>段落一</p>
<hr />
<p>段落二</p>
<hr />
<p>段落二</p>
html的注释写法如下:
<!--这是个注释-->
1.3 html段落
段落是通过 p 标签进行定义的。
如果希望在不产生一个新段落的情况下进行换行(新行)的效果,则使用 br
<p>这个<br>段落<br>演示了分行的效果<\p>
br 元素是一个空的html元素,因为关闭标签没有任何意义,则没有关闭标签。
html通过标签 b (“blod”)和 i (“italic”)对输出的文本进行格式,即粗体/斜体。
strong或em 意味着需要呈现的文本为重要的。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<\head>
<body>
<b>加粗</b>
<br />
<strong>重要的</strong>
<br />
<big>放大</big>
<br />
<em>斜体</em>
<br />
<i>斜体2</i>
<br />
<small>缩小</small>
<br />
<sup>上标</sup>
<br />
<sub>下标</sub>
</body>
</html>
HTML文本格式化标签
标签 | 描述 | 标签 | 描述 |
---|---|---|---|
b | 定义粗体文本 | sub | 定义下标字 |
em | 定义着重文字 | sup | 定义上标字 |
i | 定义斜体字 | ins | 定义插入字 |
small | 定义小号字 | del | 定义删除字 |
strong | 定义加重语气 |
HTML计算机输出标签
标签 | 描述 |
---|---|
code | 定义计算机代码 |
kbd | 定义键盘码 |
samp | 定义计算机代码样本 |
var | 定义变量 |
pre | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
标签 | 描述 | 标签 | 描述 |
---|---|---|---|
abbr | 定义计算机代码 | q | 定义短的引用语 |
address | 定义键盘码 | cite | 定义引用、引证 |
bdo | 定义计算机代码样本 | dfn | 定义一个定义项目。 |
blockquote | 定义变量 |
1.4 HTML链接
html中的链接是一种用于在不同网页间导航的元素,即将一个网页与另一个网页/资源(文档、图像、音频等)相关联。
a. html超链接
html使用标签 a 设置超文本链接。采用 href 属性描述链接中的地址。默认情况下,链接将以一下形式出现在浏览器中:
-
一个未访问过的链接显示为蓝色字体并带有下划线
-
访问过的链接显示为紫色带下划线
-
点击链接时,链接显示为红色带下划线
ps:如有css样式文件,则根据css的设定而现实。
b. html链接语法
a 元素为创建链接的主要属性,其基本语法和属性如下所示:
href | 指定链接目标的URL |
---|---|
target(可选) | 指定链接如何在浏览器中打开。常见的值为:_blank(在新标签/窗口打开链接)和_self(在当前标签/窗口打开链接) |
title(可选) | 提供链接的额外信息,通常在鼠标悬停在链接上时显示为工具提示 |
rel(可选) | 指定与链接目标的关系,如:nofollow、noopener等 |
基本语法为:
<a href="url">链接文本</a>
例如:
<a href="http://www.baidu.com">访问百度首页</a>
显示为:
上述为文本链接,还可以通过图像进行链接,例如:
<a href="http://www.baidu.com">
<img src="baidu.jpg" alt="示例图片">
</a>
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度</title>
</head>
<body>
<p>创建图片链接:
<a href="http://www.baidu.com">
<img border="10" src="baidu.jpg" alt="百度首页" width="32" height="32">
</a>
</p>
<p>无边框的图片链接
<a href="http://www.baidu.com">
<img border="0" src="baidu.jpg" alt="百度首页" width="32" height="32">
</a>
</p>
</body>
</html>
也可通过锚点链接:即除了链接到其他网站外,还可以在同一页面内创建内部链接,需在目标位置使用 a元素 定义一个标记,并使用#符号引用该标记,例如:
<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>
将其与id属性一起使用,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>
<a href="#C2">查看章节2</a>
</p>
<h2>章节1</h2>
<p>内容...</p>
<h2>
<a id="C2">章节2</a>
<h2>
<p>内容...</p>
<h2>章节3<h2>
<p>内容...</p>
</body>
</html>
下载链接:链接用于下载文件而不是导航到另一个网页,可使用download属性,例如:
<a href="document.pdf" download>下载文档<\a>
发送邮件链接: 创建电子邮件时,可使用关键字mailto进行发送,例如:
<a href="mailto:test@163.com?subject=这是邮件的主题&body=这是内容" rel="nofllow">发送邮件</a>
<a href="mailto:test@163.com?cc=someone@163.com&bcc=somebody@163.com" rel="nofollow">发送邮件</a>
字段说明,多个邮件地址用分号; 隔开,空格用 %20 代替。nofollow是html中a标签的属性,告诉搜索引擎不要追踪该网页上的链接,即告诉搜索引擎该链接不是经过作者信任的,则这个链接不是个信任票。
也可加上
rel="noopener noreferrer"
<!-- 不会打开其他网站,因为恶意病毒可能会修改浏览器的空白网页-->
参数 | 描述 |
---|---|
mailto:name@email.com | 邮件接收地址 |
cc=name@email.com | 抄送地址 |
bcc=name@email.com | 密件抄送地址 |
subject=subject text | 邮件主题 |
body=body text | 邮件内容 |
? | 第一个参数分隔符 |
& | 其他参数分隔符 |
c. target属性
该属性可以定义被链接的文档在何处显示,例如该例子会在新窗口打开文档:
<a href="http://www.baidu.com" target="_blank">访问百度网页</a>
相关字段解释:
target=“_blank” | 在新窗口浏览新的页面 |
---|---|
target=“_self” | 在同一个窗口打开新的页面 |
target=“_parent” | 在父窗口打开新的页面 |
target=“_top” | 以整个浏览器作为窗口显示新页面 |
d. id属性
该属性可用于创建一个html文档标签。【书签不会以任何特殊方式显示,即在html界面是不显示的,即是隐藏的】,例如:
<!-- 在html文档中插入id -->
<a id="tips">有用的提示部分</a>
<!-- 在html中创建一个链接到“有用的提示部分(id="tips")” -->
<a href="#tips">访问有用的提示部分</a>
<!-- 从另一个页面创建一个链接到"有用的提示部分(id="tips")" -->
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>
1.5 html头部 head
元素包含了所有的头部标间元素,可在头部插入脚本(scripts),样式文件(css),以及各种meta信息。可以添加在头部区域的元素标签为:title、style,meta,link,script,noscript和base.a. title标签
title标签定义了不同文档的标题,在html/xhtml文档中为必需的。
-
定义了浏览器的标题
-
当网页添加到收藏夹中,显示在收藏夹中的标题
-
显示在搜索引擎结果页面的标题
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<p>此处为文档内容</p>
</body>
</html>
ps:该标签不仅可以显示文本,也可在左侧显示logo等图片,可将标签放入中。例如:
<!DOCTYPE html>
<html>
<head>
<link rel="short icon" href="图片url">
<title>
</head>
</html>
b. base标签
描述了基本的链接地址/链接目标,该标签作为html文档中所有的链接标签的默认链接:
<head>
<base href="http://www.baidu.com" target="_blank">
</head>
c. link标签
link标签定义了html文档与外部资源之间的关系,通常用于链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
d. style标签
style标签定义了html文档的样式文件引用地址,在style元素中也可直接添加样式渲染html文档。
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
</head>
e. meta标签
meta标签描述了一些基本的元数据,元数据不会显示在页面上,但会被浏览器解析。META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者和其他元数据。
元数据可以用于浏览器(如何显示内容/重新加载界面),搜索引擎(关键词),或者其他web服务。
<!-- 为搜索引擎定义关键词 -->
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
<!-- 为网页定义描述内容 -->
<meta name="description" content="免费 web & 编程 教程">
<!--定义网页作者-->
<meta name="author" content="TEST">
<!-- 每30s刷新当前界面-->
<meta http-equiv="refresh" content="30">
f. script元素
script标签用于加载脚本
head与header标签的区别:
-
head标签用于定义头部文档,他是所有头部元素的容器。该标签中的元素可引用脚本、指示浏览器在哪里找到样式表、提供原信息等。
-
header标签用于定义文档的页眉(介绍信息)。
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<header>
<p>段落</p>
<h1>一级标题</h1>
</header>
</body>
</html>
二、样式-CSS
css—是为了渲染html元素引用的,css可通过以下三种方式引入到html文件中:
-
内联引用--------在html元素中使用“style”属性
-
内部样式表-----在头部head区域使用style元素来包含css
-
外部引用--------使用外部css文件
2.1 内联样式
当特殊的样式需要应用到个别元素时,则可使用内联样式。方法:在相关标签中使用样式属性,样式属性可以包含任何CSS属性
<!--显示出如何改变段落的颜色和左外边距-->
<p style="color:blue;margin-left:20px;">段落</p>
2.2 背景样式background-color
用于定义一个元素的背景颜色,例如:
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是个标题</h2>
<p style="background-color:green;">这是个段落</p>
</body>
旧版采用bgcolor属性定义背景色。
2.3 字体格式
字体的格式主要有:
-
font-family 字体
-
color 颜色
-
font-size 字体大小
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落</p>
文本对齐方式采用text-align 属性指定文本的水平与垂直对齐方式
<h1 style="text-align:center;">剧中对齐的标题</h1>
<p>这是个段落</p>
2.4 内部样式表
当单个文件需要特殊的样式时,可使用内部样式表,可在部分通过
<head>
<style type="text/css">
body {
background-color:yellow;
}
p{
color:blue;
}
</head>
2.5 外部样式表
当样式需要被用到很多页面时,可使用外部样式表,可更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">《
</head>
PS:link与import的区别
-
link属于xhtml的标签,而@import是css提供的一种方式;
-
加载顺序的区别: 当页面被加载时,link引用的CSS会同时被加载,而@import引用的css会等到页面全部下载完毕后再被加载。则浏览器浏览@import加载css页面时开始时是没有样式的。
-
兼容性的差别: @import是CSS2.1提出的,老浏览器不支持,@import只有在IE5上才能识别,link无此问题;
-
使用dom(document object model文档对象模型)控制样式时的差别:使用JavaScript控制dom去改变样式的时候,只能使用link标签,因为@import 不是dom可以控制的。
三、HTML图像
在html中,图像由img标签进行定义,他为空标签,即只包含属性,没有闭合标签,语法为:
<img src="图像的地址" alt="图像描述">
浏览器将图像显示在文档中图像标签出现的地方,例如,将图像标签至于两个段落之间,则浏览器会显示第一个段落,图片,第二个段落。
alt的属性是用于为图像定义一串预备的可替换的文本,即在浏览器无法载入图片时,替换文本属性告诉读者信息。
-
height----设置高度
-
width-----设置宽度
-
属性默认------像素
<img src="图片地址" alt="描述" width="304" height="228">
图像相关标签
标签 | 描述 |
---|---|
img | 定义图像 |
map | 定义图像地图 |
area | 定义图像地图中的可点击区域 |
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像显示测试</title>
</head>
<body>
<p>文件夹下的图像</p>
<img src="baidu.jpg" alt="Baidu" width="33" height="33">
<p>网络上的图片</p>
<img src="https://img1.baidu.com/it/u=4270144465,1604793144&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="logo" width="160" height="60">
<p>创建有边框的图片链接:
<a href="http://www.baidu.com">
<img border="10" src="baidu.jpg" alt="Baidu" width="32" height="32">
</a>
</p>
<p>创建无边框的图片链接:
<a href="http://www.baidu.com">
<img border="0" src="baidu.jpg" alt="Baidu" width="32" height="32">
</a>
</p>
<h4>默认对齐的图像</h4>
<p>这是一些文本<img src="baidu.jpg" alt="Baidu" width="32" height="32">这是一些文本</p>
<h4>图片使用 align="middle"</h4>
<p>这是一些文本<img src="baidu.jpg" alt="Baidu" align="middle" width="32" height="32">这是一些文本</p>
<h4>图片使用 align="top"</h4>
<p>这是一些文本<img src="baidu.jpg" alt="Baidu" align="top" width="32" height="32">这是一些文本</p>
<p>
<img src="baidu.jpg" alt="Baidu" style="float:left" width="32" height="32">图片浮动在文本的左边</p>
<p>
<img src="baidu.jpg" alt="Baidu" style="float:right" width="32" height="32">图片浮动在文本的右边</p>
</body>
</html>