html基础知识复习笔记

什么是 HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

HTML 提示:使用小写属性

属性和属性值对大小写不敏感。

不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

注释:浏览器会自动地在标题的前后添加空行。

注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。

对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

预格式文本可以使文本按照你代码里面的格式进行输出,不会出现多个空格当一个空格来使用的情景:

Eg:

<html>

<body>

<pre>

这是

预格式文本。

它保留了      空格

和换行。

</pre>

<p>pre 标签很适合显示计算机代码:</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

效果:

这是

预格式文本。

它保留了      空格

和换行。

pre 标签很适合显示计算机代码:

for i = 1 to 10

print i

next i

Html块引用:

<html>

<body>

这是长的引用:

<blockquote>

这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

</blockquote>

这是短的引用:

<q>

这是短的引用。

</q>

<p>

使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。

</p>

</body>

</html>

效果:

这是长的引用:

这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

这是短的引用:  这是短的引用。

使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。

图像标签(<img>)和源属性(Src)

在 HTML 中,图像由 <img> 标签定义。

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是:

在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。注意:这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。

当前页面过一段时间自动刷新跳转至另一个页面:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />

</head>

<body>

<p>

对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a>

</p>

<p>您将在 5 秒内被重定向到新的地址。</p>

<p>如果超过 5 秒后您仍然看到本消息,请点击上面的链接。</p>

</body>

</html>

HTML <meta> 元素

元数据(metadata)是关于数据的信息。

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。

典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta> 标签始终位于 head 元素中。

元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

如需显示小于号,我们必须这样写:< 或 <

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用   字符实体。

URL 的英文全称是 Uniform Resource Locator,中文也译为“统一资源定位符”。

时间: 2024-09-29 12:01:22

html基础知识复习笔记的相关文章

Java 基础知识 复习笔记

OOP:面向对象的程序设计 面向过程程序设计,注重功能方法的实现 面向对象的程序设计,把一个实物抽象化成一个类 多太,同一个事件发生在不同的对象上回产生不同的结果 指允许不同类的对象对同一消息做出响应.即同一消息可以根据发送对象的不同而采取多种不同的行为方式 多太存在的三个必要条件: 1.要有继承: 2.要有重写: 3.父类引用指向子类对象 重载,方法名要一样,但是参数类型和个数不一样,返回值类型可以相同也可以不同. 无法以返回类型作为重载函数的区分标准: 调用方法时,通过传递给他们的不同参数个

一些js基础知识复习笔记

1.var a=123  b=++a   //b=124,a=124  var a=123  b=a++  //b=123,a=124 ++的优先级问题,执行顺序不同: 2.未初始化的变量值为undefined,var a:alert(a)  //undefined;  javascript会自动给吧未初始化的变量设置为undefined: 3.五大基本类型:typeof(数字型) //number:  typeof(字符串) //string:  typeof(布尔型) //boolean:

linux基础知识复习

@(tigerfive)[linux,基础知识,复习笔记] linux基础复习(一) 今天只整理框架,具体内容之后详细整理吧 文件管理 文件基本操作>创建文件和目录>拷贝文件和目录>剪切文件和目录>删除文件和目录>查看文件和目录>查看文件属性>查看文件内容>过滤文件内容>编辑文件内容>统配符使用>命令别名 用户和组管理 用户基本操作>添加账户>设置密码>删除账户>修改密码组基本管理>创建组>查看组>

考试备战系列--软考--02基础知识复习

这部分主要是计算机基础知识的概念介绍,相关系列文章如下所示. 考试备战系列--软考--01基础架构概念 考试备战系列--软考--02基础知识复习 考试备战系列--软考--03综合知识复习 考试备战系列--软考--04考题收集 考试备战系列--软考--05案例收集 考试备战系列--软考--06论文准备 操作系统时计算机系统的核心系统软件,其他软件均建立在其上,其分类包括:单用户操作系统和批处理操作系统.分时操作系统和实时操作系统.网络操作系统和分布式操作系统.嵌入式操作系统.其4大特征为并发性.共

php高级进阶系列文章--第二篇(PHP基础知识复习)

php基础知识复习 本文中对于简单的知识点只会提及一下(例如什么控制结构什么的),对于较有难度的详细复习下(例如面向对象的反射等等) 再次申明,本系列文章不是从最基础的开始复习,对于零基础的可能不适用,本文的初衷是我要准备攻读源码,在攻读前将之前的知识牢固下,太过简单的就写在文中了 1,echo print echo 可以输出一个或者多个字符串 print 只可以输出一个字符串,返回值总为1 2,PHP7中的组合比较符 echo 1 <==> 1 // 0 echo 1 <==>

ARM基础知识学习笔记

/*****************数电知识*******************/ PN结(Positive-Negative) 三极管:BJT(双极结型三极管Bipolar Junction Transistor)               FET(场效应管Field Effect Transistor)          (单极结型) 1.MOSFET (金属氧化物半导体Metal Oxide Semiconductor FET)               2.JFET(结型Junct

C++基础知识学习笔记

基本语法 C面向过程思想:程序=(数据结构)+(算法) 数据结构与算法分离,以算法(函数)为主. C++面向对象思想:程序=(数据结构+算法) 数据结构(属性)与算法(操作)绑成一个类,定义一个个对象对象=(数据结构+算法)  ,程序=(对象+对象+对象+--) 面向对象程序设计的程序员有两类:1.面向对象应用程序设计2.类库的设计 头文件:类的声明            ---类的外部接口       (成员函数在类声明中实现时,一般很简短,默认为内联函数)源文件:类的成员函数定义     -

c基础知识复习

C的发展历程 C原本是为了开发UNIX操作系统而设计的语言:如此说,应该C比UNIX更早问世,而事实并非如此,最早的UNIX是由汇编写的: C语言本来是美国人开发的,解读C的声明,最好还是用英语来读: 解读C声明的步骤: 1.首先着眼于标识符(变量名或者函数名) 2.从距离标识符最近的地方开始,依照优先顺序解释派生类型(指针.数组和函数).优先顺序说明如下: a.用于整理声明内容的括号: b.用于表示数组的[ ],用于表示函数的( ) c.用于表示指针的* 3.解释完成派生类型,使用 “of”.

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head