网页

什么是网页？

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一"页"，通常是HTML格式的文件，它需要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。

什么是HTML？

HTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。

HTML不是一种编程语言，而是一种标记语言（markup languag）。

标记语言是一套标记标签（markup tag）。

其中，所谓超文本，有两层含义：

0. 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
1. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

网页的形成？

网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。

过程大致如下：

前端人员开发代码 ---> 浏览器显示代码（解析，渲染） ---> 生成最后的web页面。

常用浏览器

网页是通过浏览器来展示的，关于浏览器先介绍以下两点：

常用的浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。

浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

目前国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等。

Web标准（重点）

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

为什么需要Web标准？

一句话概括，就是浏览器不同，它们显示页面或者排版就会有差异。

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下几个优点：

0. 让Web的发展前景更加广阔
1. 内容能被更广泛的设备访问
2. 更容易被搜索引擎搜索
3. 降低网站流量费用
4. 使网站更易于维护
5. 提高页面浏览速度

Web标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

Web标准提出的最佳体验方案：结构、样式、行为相分离。

简单的理解就是：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

HTML基础

HTML语法规范

基本语法概述

HTML标签是由尖括号包围的关键词，例如。

HTML标签通常是成对出现的，例如和，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。

有些特殊的标签必须是单个标签（极少情况），例如 我们称为单标签。

标签关系

双标签关系可以分为两类：包含关系和并列关系。

HTML基本结构标签

第一个HTML网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上写。

HTML页面也称为HTML文档。

HTML文档的后缀名必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。

此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。

HTML常用标签

标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是标签的含义，即这个标签是用来干什么的。

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更加清晰。

标题标签 h1 -- h6 （重要）

未来使网页更具有语义化，经常在页面后面用到标题标签。HTML提供了6个等级的网页标题。

标签语义：作为标题使用，并且依据重要性递减。

特点：

0. 加了标签的文字会加粗，字号也依次变大。
1. 一个标题独占一行。

段落和换行标签（重要）

段落标签

在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示。在HTML标签中，

标签用于定义段落，它将整个网页分为若干个段落。

标签语义：把HTML文档分割为若干个段落。

特点：

0. 文本在一个段落中会根据浏览器窗口的大小自动换行
1. 段落和段落之间保有空隙

换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

标签语义：强制换行

特点：

0. 是个单标签
1. 只是简单的开始新一行，跟段落不一样，段落之间会插入一些垂直的距离

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要。

应重点记住加粗和倾斜

div和span标签

div和span是没有语义的，它们就是一个盒子，用来装内容的。

特点：

div标签用来布局，但是现在一行只能放一个div。大盒子

span标签用来布局，一行上可以放多个span。小盒子

图像标签和路径（重点）

图像标签

在HTML标签中，标签用于定义HTML页面中的图像

src是img标签的必须属性，它用于指定图像文件的路径和文件名

属性：就是属于这个图像标签的特性

图像标签的其他属性：

图像标签属性注意点：

• 图像标签可以拥有多个属性，必须写在标签名的后面
• 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
• 属性采取键值对的格式，即key = “value”的格式，属性 = “属性值”

路径

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到它们，因此我们需要一个文件夹来管理它们

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。

根目录：打开目录文件夹的第一层就是根目录 路径分为：

相对路径：以引用文件所在位置为参考基础而建立出的目录路径。

简单的说就是图片相对于HTML页面的位置

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

超链接标签（重点）

在HTML标签中，a标签用于定义超链接，作用是从一个页面链接到另一个页面

超链接语法格式

<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>

两个属性作用如下：

链接分类

• 外部链接： 例如<a href="http://www.baidu.com">百度</a>

• 内部链接： 网站内部页面之间的相互链接，直接链接内部页面名称即可， 例如<a href="index.html">首页</a>

• 空链接： 如果当时还没确定链接目标时，就使用空链接。 <a href="#">首页</a>

• 下载链接： 如果href里面的地址是一个文件或者压缩包，会下载这个文件

• 网页元素链接： 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

• 锚点链接：点我们点击链接，可以快速定位到页面中的某个位置

  • 在链接文本的href属性中，设置属性值为 #名字 的形式，如<a href="#two">第2集</a>
  • 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如<h3 id= "two">第2集介绍</h3>

HTML中的注释和特殊字

注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中的注释以""结束 快捷键：ctrl +/

添加注释是为了更好的解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代

重点记住以下三个即可：

空格 &nbsp ;

大于号 &gt ;

小于号 &lt ;

表格标签

表格的主要作用

表格主要是用于显示、展示数据，因为它可以让数据显示的很规整，可读性好。

表格的基本语法

<table>
    <th>表头   位于表格的第一行或者第一列  里面的内容会加粗居中来显示</th>
    <tr>      
    	<td>单元格内的文字</td>    
    </tr>
    <tr>       
    	<td>单元格内的文字</td>     
    </tr>
</table>

表格属性：

为了更好的表示表格的语义，将表格分割为头部和主体两大部分

thead 表示表格的头部区域

tbody 表示表格的主体区域

合并单元格

合并单元格方式：

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并： colspan=“合并单元格的个数”

目标单元格：

• 跨行：最上侧单元格为目标单元格，写合并代码
• 跨列：最左侧单元格为目标单元格，写合并代码

列表标签

表格是用来显示数据的，那么列表就是用来布局的

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用场景不同，列表分为三大类：无序列表、有序列表和自定义列表。

无序列表（重点）

ul标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用

<dl>
    <dt>这是一个自定义列表</dt>
    <dd>1</dd>
    <dd>2</dd>
</dl>

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>