网页的组成
网页主要由三个部分组成：
文本，网页上的标题、段落等内容，一般为
双标签，又被称为不可置换内容其他引用资源，网页中的图片、音频、视频等内容，一般为
单标签，引用的内容通过属性来指示，又被称为可置换内容标签，对文本及其他资源的描述，用户不可见。其基本的语法就是
<标记符>内容</标记符>。标记符通常都是成对使用，有一个开头标记和结束标记。当浏览器收到HTML文件后，就会解析里面的标记，然后把标记对应的功能表达出来。示例：
<p>这是一段文本</p><img src="picture.jpg" alt="这是一张图片" />
代码中的<P></p>，<img />表示标签；这是一段文本表示的是文本；src="picture.jpg"表示的是图片，图片的位置通过src属性来指示
HTML设计思想
- 页面中所有的元素（内容）都是由标签来描述的，如：
<P></p>表示段落，<img />表示图片 - 术语
| 术语 | 表述 |
|---|---|
| 超文本 | 包含了超链接的文本，以电子文档的形式存在 |
| 预定义（内置）标签 | 用于描述元素（内容）的标签，如：<p></p>、<img />等 |
| HTML语言 | HTML不是编程语言，而是描述性的标记语言，用于描述超文本中内容的显示方式。如文字以什么颜色、大小来显示，这些都是利用HTML标记来完成。 |
HTML的基本文档结构
- 基本结构与描述
| 标签 | 描述 |
|---|---|
| <!DOCTYPE html> | 声明文档类型，不区分大小写。html表示告诉浏览器当前是HTML文档 |
| <html></html> | 根标签（元素），定义了HTML文档的开始点与结束点，整个HTML文档必须包裹在其中，位于<!DOCTYPE html>之后 |
| <head></head> | HTML文档的头部，可以引用脚本、指示浏览器在哪里找到样式表、提供元数据（描述某种特定信息的数据）等等。头部中绝大多数的数据仅提供给浏览器和开发者，而不会展示给用户。位于<html></html>之间，<body></body>之前 |
| <meta /> | 提供有关页面的元数据，比如针对搜索引擎关键词，设置可视化屏幕区等。位于<head></head>之间 |
| <title></title> | 网页的标题，显示在浏览器窗口的标题栏上。位于<head></head>之间 |
| <body></body> | 网页的主体，包含文档的所有内容，比如文本、超链接、图像、表格和列表等。位于<html></html>之间，<head></head>之后 |
| <!-- 注释内容文字 --> | 在HTML代码中插入注释。注释不会显示在浏览器中 |
<meta />标签的属性与值
| 属性 | 描述 | 值 |
|---|---|---|
| name | 主要用于描述网页，以便于搜索引擎查找、分类 | author(网页的作者)、description(网页的主要内容、概况)、keywords(网页相关的关键字)、generator(制作网页的软件)、viewport(可视化屏幕区) |
| http-equiv | 把 content 属性关联到 HTTP 头部 | content-type(设定页面使用的字符集)、refresh(自动刷新并指向新页面) |
| content | 定义与 http-equiv 或 name 属性相关的元数据 |
- 示例：
<!DOCTYPE html><html><head><!--设置网页字符集--><meta charset="UTF-8"><!--设置关键字--><meta name="keywords" content="关键词1,关键词2,关键词3" /><!--设置网站内容说明--><meta name="description" content="这是网站的内容简介" /><!--设置作者信息--><meta name="author" content="这是网站的作者" /><!--设置编辑工具--><meta name="generator" content="phpstrom" /><!--设置视口--><meta name="viewport" content="width=device-width,inital-scale=1.0"/><!--设置字符集--><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><!--网页标题--><title>这是标题</title></head><body><!--内容主体区-->这是正文内容</body></html>
元素、属性和值
- 元素与标签
| 名称 | 描述 |
|---|---|
| 非空元素 | 以双标签表示，中间有内容，注意：空字符串也算是内容<h1> </h1> |
| 空元素 | 以单标签表示，内容为外部引用的资源、文件，一定会有属性来表示当前资源来自哪里 |
完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些统称为HTML元素
- 属性与值
| 名称 | 描述 |
|---|---|
| 属性 | 对标签进行进一步描述的文本，如果是双标签，则包含在起始标签中 |
| 属性值 | 有些是预定义的内容，包括：字符串、指定格式、数值、布尔值(代表结果必须为真，最好需要时再使用)；有些是用户自定义 |
几乎所有元素都可以设置的三大标签：id(必须具有唯一性，否则容易出现混乱)、class、style
元素之间要保持正确的嵌套关系，不可随意嵌套
网页中的实体字符
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空白 | |
  |
|
| < | 小于号 | < |
< |
| > | 大于号 | > |
> |
| & | 和号 | & |
& |
| “ | 引号 | " |
" |
| ‘ | 撇号 | ' (IE不支持) |
' |
| ￠ | 分（cent） | ¢ |
¢ |
| £ | 镑（pound） | £ |
£ |
| ¥ | 元（yen） | ¥ |
¥ |
| € | 欧元（euro） | € |
€ |
| § | 小节 | § |
§ |
| © | 版权（copyright） | © |
© |
| ® | 注册商标 | ® |
® |
| ™ | 商标 | ™ |
™ |
| × | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
实体名称对大小写敏感
文件与文件夹
- 按照规范，名称全部采用小写形式，使用
-来进行连接 - HTML文件的文件后缀为
.html、.htm(DOS系统中规定文件的后缀名只能为3个字符)
URL
- URL又称为统一资源定位符，互联网上任何的文件/资源都必须有一个唯一的访问地址，这个地址即为URL
- 语法：协议+域名/主机+访问的资源在服务器上的真实路径，如：
http://www.php.cn/course/379.html,其中,http代表的是使用的协议，www.php.com代表域名，course/379.html代表访问的资源在服务器上的真实路径 - 绝对URL地址与相对URL地址
| 名称 | 描述 |
|---|---|
| 绝对URL地址 | 包含了指向目录或者文件的完整信息，对FTP站点以及几乎所有的不使用HTTP协议的URL，都应该使用绝对URL |
| 相对URL地址 | 以当前的位置作为参照，开始查找 |
手写
总结与补充
- 关键字是整个网站登录过程中最基本也是最重要的一步，是进行网页优化的基础。当用关键字搜索网站时，如果网页中有设置了对应的关键字，就可以在搜索结果中列出来。因此，要优化被搜索的概率，可以进行关键字的设置
空白包括空格、制表符(Tab)、换行符，在html代码中无论输入多少个，在页面中都只显示1个，因此需要显示多个空白时，需要使用到实体字符
HTML标签语义化的优势：1、有意义的标签使得页面结构化，即使去掉css样式页面也能以一种清晰的结构展现；2、根据文档显示结构更易于后期的维护；3、除了人容易理解外，程序和其他设备也可以理解有意义的标签。例如，搜索引擎可以识别出标题行，（因为它被包围在h1中）并给它分配更高的重要度。同时，屏幕阅读器的用户可以依靠标题作为辅助的页面导航