前端基础之HTML
- 了解了web相关基本概念以后,我们开始正式接触网页开发,网页开发的基础是HTML,
- 所以,本章内容主要分两部分,
- 一是介绍HTML的相关概念、发展历史,
- 二是 创建HTML网页文档和认识HTML的基本结构。
- 我们学会如何新建一个 HTML 页面和熟记HTML文档的基本结构和主要标签。
- 所以,本章内容主要分两部分,
【1】、HTML概述
-
HTML,即超文本标记语言(HyperText Markup Language ]),由SGML (标准通用标记语言) 发展而来,也叫web页面。扩展名是 .html 或是 .htm 。
-
HTML,是一种用来制作网页的标准标记语言。超文本,指的就是超出普通文本范畴的文档,可以包含文本、图片、视频、音频、链接等元素。
-
HTML 不是一种编程语言,而是一种写给网页浏览器、具有描述性的标记语言。
- 自1990年以来HTML就一直被用作WWW(World Wide Web的缩写,也可简写WEB,中文叫做万维网)的信息表示语言,使用HTML语言描述的文件,需要通过网页浏览器显示出效果。
- 用户在访问网页时,是把服务器的HTML文档下载 到本地客户设备中,
- 然后通过本地客户设备的浏览器将文档按顺序解释渲染成对应的网页效果。
- 网页本身是一种文本文件,通过在文本文件中添加各种各样的标记标签,
- 可以告诉浏览器如何显示标记中的代表的内容,
- 如:
- HTML中有的标签可以告诉浏览器要把字体放大,就像word一样,
- 也有的标签可以告诉浏览器显示指定的图片,
- 还有的标签可以告诉浏览器把内容居中或者倾斜等等。
- 每一个HTML标签代表的意义都不一样。
- 同样,他们在浏览器中表现出来的外观也是不一样的。
【2】、HTML结构和标签格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1、
<!DOCTYPE html>
告诉浏览器使用什么样的html
或者xhtml
来解析html
文档2、
<html></html>
是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个HTML
文档,在它们之间是文档的头部<head>
和主体<body>
。3、元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。
4、
<title></title>
定义网页标题,在浏览器标题栏显示。5、
<meta charset="UTF-8">
声明编码方式用utf86、
<body></body>
之间的文本是可见的网页主体内容
【3】、标签的语法
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
1、HTML标签是由尖括号包围的特定关键词
2、标签分为闭合和自闭合两种标签
3、HTML不区分大小写
4、标签可以有若干个属性,也可以不带属性,比如就不带任何属性
5、标签可以嵌套,但是不可以交叉嵌套
- XHTML是实现 HTML 到 XML的 过渡。
【4】、基本标签
【4.1】标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
【4.2】换行标签
悟道休言天命,<br>
修行勿取真经。<br>
一悲一喜一枯荣,<br>
哪个前生注定?
【4.3】段落标签
<p>菩提本无树,</p>
<p>明镜亦非台。</p>
<p>本来无一物,</p>
<p>何处惹尘埃。</p>
【4.4】文本格式化标签
- HTML提供了一系列的用于格式化文本的标签,可以让我们输出不同外观的元素,
- 比如粗体和斜体字。
- 如果需要在网页中,需要让某些文本内容展示的效果丰富点,可以使用以下的标签来进行格式化。
<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />
【4.5】特殊符号
® ©
标签大致可分为两类
- 块级标签(block) -- 独占一行
- 内联标签(inline) -- 按文本内容占位
【4.6】div和span标签
<div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现
- 块级元素与行内元素的区别所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。
- 如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
- 这两个元素是专门为定义CSS样式而生的。
【5】、超链接标签
【5.1】超链接基本使用
-
超链接是浏览者和服务器的交互的主要手段,也叫超级链接或a链接,是网页中指向一个目标的连接关系,这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。
-
超链接是网页中最重要的元素之一。
- 一个网站的各个网页就是通过超链接关联起来的,用户通过点击超链接可以从一个网页跳转到另一个网页。
-
几乎可以在所有的网页中找到链接。
- 点击链接可以从一张页面跳转到另一张页面。
- 例如
- 在阅读某个网站时,遇到一个不认识的英文,你只要在这个单词上单击一下,即可跳转到它的翻译页面中,看完单词的解释后点一下返回按钮,又可继续阅读,这就是超链接的常见用途。
- 还有经常到购物网站中去,我们都是在百度搜索,然后点击对应的搜索项进入到对应的购物网站的,这也是超链接的作用。
-
超链接的属性:
属性 | 值 | 描述 |
---|---|---|
href | 网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如:F:\html\index.html ] | 规定链接的跳转目标 |
title | 百度 | 链接的提示信息 |
target | _blank [ 在新建窗口中打开网页 ] _self [ 默认值,覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] | 与前面四项固定值不同,framename是泛指,并不是这个值,这点将在后面框架部分内容中详细介绍,这里可以暂时先略过 |
1、href是超链接最重要的属性,规定了用户点击链接以后的跳转目标,这个目标可以是 网络连接,也可以是本地连接。
2、网络链接指的是依靠网络来进行关联的地址,一般在地址前面是以 http://或者https
标签:5.1,网页,05,标签,单元格,表单,HTML,属性 From: https://www.cnblogs.com/dream-ze/p/17337510.html