HTML 入门知识
基础概念
1、什么是 HTML文件?
全称是 :Hypertext Marked Language,中文名“超文本标记语言”。
从名字来看 ,本身是文本架构,,但是 包含一些 Tag,即“标记”。
标记的作用是 :告诉浏览器 如何显示 这个文件
HTML 文件 后缀 是.html 或者 是.htm
编写平台 :基本的文本编辑器 。譬如,notepad等
运行/浏览 方式:双击打开
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.<b>This text is bold</b>
</body>
</html>
范例解释:
这对tag 告诉浏览器 是 文件的首尾 这对tag 是head信息 ,在浏览器中不显示 但是 有助于 搜索引擎 能够搜索 到 该网页HTML 元素 (HTML Elements)特点
标记文本,表示文本内容 | |
---|---|
用 tag表示 ,成对出现 | |
不区分大小写 | |
– | 起始的叫做 Opening tag 结尾 的叫做 Closing tag |
HTML 元素属性
元素 可以 拥有属性 ,属性 扩展HTML元素的能力
举例:
使用 bgcolor属性 ,使得 页面的成为红色
使用 border 属性,将表格设成 一个无边框的表格
属性 通常 由 属性名 和 值成对出现,name = “value”
属性 通常 是附加给 HTML 的Opening Tag
基础 Tag
用于 标题、段落、分行
正文标题
用
到
这 几个 Tag 来定义 正文标题,从大到小,每个正文标题 自成一段
<h1> This is a heading</h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>
段落划分
使用
和
划分段落<p> This is a paragraph </p>
换行
使用
这个 Tag ,可以在不新建段落的情况下 换行,没有 Closing Tag
不要使用
换行
<p>This is a para <br>graph with line breaks </p>
注释
注释 写在
之间 。浏览器自动忽略。
<!-- This is a comment -->
HTML 文件 会自动截去多于空格。不管你加多少空格,都会被看做一个空格。
一个空行也被看做 一个空格
有些 Tag 能够将文本 自成一段 ,无需再使用
来分段,如

<html>
<body>
<p>
这一段
在源代码里
包含 很多分行,
但是 浏览器 忽略
这些分行。
</p>
<p>
这一段 在浏览器里
包含 很多 空格
但是 浏览器 忽略 多于空格
</p>
<p>
你使用 的浏览器窗口 大小决定了段落的行数 ,
<br><b>如果 你改变浏览器窗口的大小,段落的行数也会因此改变<b>
</p>
</body>
</html>
如何查看HTML的源代码
一是 点击鼠标右键,点击 View Source (查看源代码)命令;
二是 选择浏览器菜单 View(查看)中的Source(源文件)命令;
借鉴 别人写的好的地方
HTML特殊字符显示
有些字符 在HTML中有特别的含义,就拿 < 就表示 HTML Tag的开始,这个
小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示 一个小于号 ,该如何 操作呢?
这就要 说道 HTML 字符实体 (HTML Character Entities)
一个 字符实体 分成 三部分 :第一部分 是一个 & 符号,英文(ampersand);
:第二部分 是实体(Entity)名字 或者 是 # 加上实体编号;第三部分 是 一个分号;
比如 显示 小于号 ( <) 写成 :&It; 或者<;
用实体名字 好处是 易于理解。It 猜出 是 less than 劣 处 是并不是 所有浏览器 都支持 最新的实体名字 ;而 实体编号 ,各种浏览器都能处理
注意:实体是区分大小写的
那么 就可以解决一个问题:如何显示 空格?
通常情况下 ,HTML 会自动截去多余空格,不管你加多少空格,都被看做是一个空格。在网页中增加 空格 可以使用 来表示空格
显示结果 | 说明 |
---|---|
显示一个空格 | |
Entity Name | Entity Number |
nbsp; | #160 |
< | 小于号 |
&It; | < |
> | 大于号 |
gt; | > |
& | &符号 |
amp; | & |
" | 双引号 |
quot; | #34; |