网页与网站

网页

指由图片、链接、文字等元素组成的单一页面，通常后缀名为HTML格式的文件

网站

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

常用浏览器及内核

浏览器	内核
Edige	Chromium
IE	Trident
Firefox	Gecko
Safari	webkit
Opera	Blink
360浏览器、猎豹浏览器内核、2345浏览器	IE+Chrome双内核
搜狗、遨游、QQ浏览器内核	Trident（兼容模式）+Webkit（高速模式）
百度浏览器、世界之窗内核	Trident

HTML概念

HTML定义

HTML指的是超文本标记语言，用来描述网页的语言。

HTML语义化

可以总结为：用最恰当的标签来标记内容
HTML语义化的原因

即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构
语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
便于团队开发和维护，语义化更具可读性
通常语义化HTML会使代码变的更少，使页面加载更快

W3C

万维网联盟（W3C）制定的Web标准

结构、样式、行为相分离

Web标准的构成

构成	作用
结构	用于对网页元素进行整理和分类即HTML
表现	用于设置网页元素的版式、颜色、大小等外观样式即CSS
行为	指网页模型的定义及交互的编写即Javascript

HTML规范及相关概念

HTML语法规范

使用正确的文档类型
即文档类型声明


<!--声明文档类型为html-->
<!DOCTYPE html>

使用小写元素名
HTML5元素名可以使用小写和大写字母
推荐使用小写字母：

小写字母便于识别阅读

使用具有具体含义的小写类名

元素类名推荐使用小写
类名使用小写字母下划线或短线组成，开头不能使用数字


<div class="banner_picture"></div>

使用小写属性名
小写字母容易书写和阅读


<!--不推荐-->
<div CLASS="banner_picture"></div>
<!--推荐-->
<div class="banner_picture"></div>

属性值
若属性值含有空格需要使用引号，建议一般都采用引号包裹属性值


<!--错误写法-->
<div CLASS=banner picture></div>
<!--正确写法-->
<div class="banner picture"></div>

避免单行代码过长
建议每行代码不超过80个字符
类名中空格和等号
等号前后可以使用空格，但建议少用空格


<!--带空格的写法-->
<div CLASS = “banner-picture”></div>
<!--推荐等号两侧不带空格的写法-->
<div class="banner-picture"></div>

空行和缩进

不要无缘无故添加空行
为每个逻辑功能块添加空行，这样更易于阅读
比较短的代码间不要使用不必要的空行和缩进

元数据
HTML5 中 title元素是必须的，标题名描述了页面的主题；标题和语言可以让搜索引擎很快了解你页面的主题，有助于SEO优化；
HTML注释
注释可以写在中
较长的注释则在其中分行写，同时第一个字符缩进两个空格，更易于阅读


<!--注释内容-->
<!--
  第一行注释
  第二行注释
-->

样式表
样式表使用简洁的语法格式(type属性不是必须的)


<link rel="stylesheet" type="text/css"  href="styles.css" >

短的规则可以写成一行


.p-text1 {font-size: 18px; font-family: Verdana;}

长的规则可以写成多行


.picture-banner {
  width: 100%;
  height: 420px;
  border-bottom: 1tx solid black;
}

将左花括号与选择器放在同一行
左花括号与选择器间添加一个空格
使用两个空格来缩进
冒号与属性值之间添加一个空格
逗号和符号之后使用一个空格
每个属性与值结尾都要使用分号
只有属性值包含空格时才使用引号
右花括号放在新的一行
每行最多 80 个字符

HTML页面的基本结构组成

初始html结构


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

文档类型的声明

声明文档类型


<!DOCTYPE html>

开始文档的实际html部分，并使用lang属性添加网站默认语言【英语为en,汉语为zh-CN】


<html lang="en">
...
</html>

开始文档的头部

使用meta及属性charset设置文档的字符编码格式为utf-8
使用title标签设置页面的标题


<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

[[01.HTML中常见META标签#^mobmeta|移动端常用的meta标签]]

开始文档的页面内容


<html>
  ...
</html>

文档页面内容

主要包含四大组件：带导航的页头、主要页面内容区域、相关但较为次要的信息、页脚

创建页眉
一个网页可以有任意数量的页眉，通常页眉包括网站标志、主导航、和其他全站链接、甚至头部搜索框


<header>
  ... 
</header>

标记导航
仅对文档中重要的链接群使用nav


<header>
  <nav>
      ... 
  </nav>  
</header>

标记页面主要区域
一个页面中只有一部分代表其主要内容,可以将这样的内容包含在main元素中
注意

一个页面仅使用一次main
若创建的是web应用,则使用main包围其主要功能
不能将main放置在article、aside、footer、header或nav元素中
role="main"可以帮助屏幕阅读器定位页面的主要内容


<main role="main">
  ...
</main>

创建文章
article元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，就像聚合内容中的各部分


<article>
  ...
</article>

注意

一个页面可以有多个 article元素
一个article元素可以包含一个或多个secrion元素
多个article元素可以互相嵌套，只要外层article元素和里层article元素是父子关系

定义区块
section元素代表文档或应用的一个一般的区块，如网站的主页可以分成介绍、新闻条目、联系信息等区块


<section>
  ...
</section>

注意

从语义上区分，section标记的是页面中的特定区域，而div则不传达任何语义
一个web页面可以有多个section

指定附注栏
从语义上表示为与主体内容相关性不强、可以独立存在的内容
若aside嵌套在页面的主要内容(而不是作为侧边栏位于主要内容之外），则此时其中的内容应与其所在的内容密切相关，而不是仅与页面整体内容相关


<aside>
  ...
</aside>

注意

在HTML中，重要的内容应该放在aside之前
附注栏中对于内容有关的图像(如图表、图形或带有说明文字的插图)应使用figure
HTML5中不允许将aside嵌套在address元素内

创建页脚
footer元素代表嵌套它的最近的artcile、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时，它才是整个页面的页脚
常用于附录、索引、版权页、许可协议这样的内容


<footer>
  ...
</footer>

注意

不能在footer里嵌套header或另一个footer,同时，也不能将footer嵌套在header或address元素里

定义文档或文章联系信息
此标签定义文档或文章的作者/拥有者的联系信息。如果 address元素位于 body 元素内，则它表示文档联系信息。如果 address 元素位于 article元素内，则它表示文章的联系信息。address元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。


<footer>
  <address>
      &copy备案号：京2020890103
  </address>    
</footer>

注意

提示：address标签不应该用于描述通讯地址，除非它是联系信息的一部分。
提示：address元素通常连同其他信息被包含在 footer元素中。

标签、元素属性、元素关系

HTML标签类型

双标签
此类标签都是成对出现，有开始标签也结束标签
单标签(空元素) 此类标签单独出现

属性和值

说明

有的元素可以有多个属性值、各属性之间的顺序任意
不同的属性-值对之间用空格隔开
建议书写属性值两边的引号

标签关系

包含关系

html
<head>
    <title>is me</title>
</head>
<!--这里head标签与title标签关系为包含关系、也称父子关系-->

并列关系

html
<head>
    <title>is me</title>
</head>
<body>
    <p>find you</p>
</body>
<!--这里head标签和body标签关系为并列关系-->

父元素和子元素

说明

如果一个元素包含另一个元素、它就是被包含元素的父元素，被包含元素称为子元素。
子元素中包含的任何元素都是外层元素的后代

Eg:

html
<head>
    <title>is me</title>
</head>
<body>
    <p>find <em>you</em></p>
</body>

此处，head是title的父元素，title是head的子元素。同理，body是p的父元素，p是body的子元素。 p是em的父元素、em是p的子元素，p也是body的后代(但不是子元素)

网页文件命名规则

命名规则

文件名全部使用小写字母，用短横线分割单词，用.html作为扩展
文件夹的名称也全部使用小写字母

命名文件的作用

有助于管理组织文件
有助于增强搜索引擎SEO优化

路径

网页与相关文件的位置关系

相对路径

文件相对于网页的位置

同级相对路径

网页和图片、js\css等在同一目录文件夹下

下一级相对路径

网页的当前目录的某个文件夹下存放着图片、js、css文件

上一级相对路径

网页中存放图片等文件的文件夹相对位于网页上一层目录下
使用"../"表示上一级


<img src="../img/picture/banner.png">

绝对路径

绝对路径：文件的物理地址
构成：https://ip（或host）+文件路径

目录