前端小峰哥的学习笔记

html

TIP

最后更新时间：2019年10月2日

字数：7046

参考资料

统一资源标识符（URI）

定义

  • URI：标识、定位任何资源的字符串
  • 具体来说：是一个用于标识某一互联网资源名称的字符串 ，这些资源包括 HTML 页面、XML 文档、图像、多媒体文件等等

分类

  • URI包含两个子集：
    • URL：统一资源定位符
    • URN：统一资源名称

URI组成

URI一般由三部分组成：主机名、标志符和相对URI

主机名

  • 存放资源的自身的名称，由路径表示
  • 一般规范：协议名称://域名.根域名/目录/文件名.后缀

标志符

  • 指向一个资源的内部
  • 可以用/ 、/、#来表示

相对URI

  • 通常指同一台机器上的资源
  • 相对URI可能包含相对路径，例如：../等

统一资源名称（URN）

  • 统一资源名称 (Uniform Resource Name, URN)，是URI两种形式之一

  • 唯一标识一个实体的标识符，但是不能给出实体的位置，系统可以先在本地寻找一个实体，在它试着在Web上找到该实体之前，它也允许Web位置改变，然而这个实体却还是能够被找到

  • URL的一种更新形式，统一资源名称(URN, Uniform Resource Name)不依赖于位置，并且有可能减少失效连接的个数，但是其流行还需假以时日，因为它需要更精密软件的支持。

TIP

  • URN是作为特定内容的唯一名称使用的，与当前资源的所在地无关

  • 使用URN，就可以将资源四处迁移，而不用担心迁移后无法访问

统一资源定位符（URL）

目前URI的最普遍形式就是无处不在的统一资源定位器（URL）

定义

  • url是统一资源定位符，对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址
  • 互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它

URL结构（重点）

一个完整的URL包括：协议部分、域名部分、端口部分、虚拟目录部分、文件名部分、参数部分、锚部分

协议://用户名:密码@域名（主机名）:端口/服务器上资源的路径?参数(查询条件：比如a=b&c=d)#片段(锚)

协议（protocol）

  • 指定传输的协议

  • 常见协议如下：

    • HTTP：超文本传输协议
    • HTTPS：（全称：Hypertext Transfer Protocol over Secure Socket Layer），简单讲是HTTP的安全版
    • FTP：File Transfer Protocol文件传输协议
    • TCP：传输协议，HTTP是应用协议
    • mailto：电子邮件地址
    • ldap：轻型目录访问协议搜索
    • file：当地电脑或网上分享的文件
    • news：Usenet新闻组
    • gopher：Gopher协议
    • telnet：Telnet协议

  • 其余几种协议：

    • MMS：通过 支持MMS（流媒体）协议的播放该资源（代表软件：Windows Media Player）格式 MMS://
    • ed2k 通过 支持ed2k（专用下载链接）协议的P2P软件访问该资源。（代表软件：电驴） 格式 ed2k://
    • Flashget 通过 支持Flashget:（专用下载链接）协议的P2P软件访问该资源。（代表软件：快车） 格式 Flashget://
    • thunder 通过 支持thunder（专用下载链接）协议的P2P软件访问该资源。（代表软件：迅雷） 格式 thunder://

域名（主机名、hostname）

  • hostname是指存放资源的服务器的域名系统(DNS) 主机名或 IP 地址
  • 有时候我们可以见到在主机名前包含连接到服务器所需的用户名和密码（格式：username:password@hostname）
  • 有时候访问服务器是需要权限的，这个时候就可以在这里添加上用户名和密码，不过现在不是很常见了
ftp://username:password@ftp.xxx.com/src/xxx
1

TIP

location.host和location.hostname区别：

  • location.host 包含端口(端口是80的话，就不显示)
  • location.hostname 不包含端口

端口号（port）

  • 服务器针对该服务（网站）对外开放的端口号，必须是整数，可以省略
  • 如果端口号省略，那么就使用默认端口号

虚拟目录（path）和文件名（path）

  • 访问的资源在服务器下的相对路径，不是在服务器的绝对路径，是服务器上的一个目录或者文件地址
比如我的网站所在目录是:
/usr/local/nginx/html

当前页面的网址是：
http://www.xuefeng666.com/html/html/index.html

那么当前页面的path路径就是：
html/html/index.html
1
2
3
4
5
6
7
8

参数（query）

  • 查询搜索的部分，需要向服务器传入参数，就在这输入
  • 通过问号?连接到path后面，有时候也归类到path中
  • 多个参数通过&链接，示例如下：
www.xxx.com/a/b.html?username=zhangsan&password=123456
1

锚（anchor）

  • 锚点，有些地方也叫片段，我们做单页面应用（SPA）的时候，也是路由的一部分
  • 用**#**表示
  • 在html开发中，通过a标签来跳转
小峰哥学习笔记JavaScript部分，ECMAScript锚点
http://www.xuefeng666.com/JavaScript/JavaScript/#ecmascript
1
2

URI、URN和URL关系

TIP

  • URI可被视为定位符（URL），名称（URN）或两者兼备
  • 统一资源名（URN）如同一个人的名称，而统一资源定位符（URL）代表一个人的住址
  • URN定义某事物的身份，而URL提供查找该事物的方法，URN仅用于命名，而不指定地址
  • URL和URN有着互补的作用

html骨架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10

网页声明头

  • 术语叫做Document Type Definition，文档类型定义，简称DTD
  • 这行语句非常的复杂，里面暗含了一个网址，W3C是出web规范的组织机构，html、css、js的规范都是由W3C定义发布的
  • world wide web coalition , 国际万维网联盟
  • 网页声明头可以告诉浏览器，这是一个什么标准的页面
  • html5最新基本使用通用定义了
<!DOCTYPE html>
1

html标签

  • 最大的html标签所有的网页内容，都要包裹在这个标签对里面
  • 最新的html5已经不在包含xmlns了，只有lang：语言（en：英语）

head标签

  • 头标签，成对存在
  • 里边放置网页的配置信息（meta）及网页的标题（title）
    • 配置信息：
      • 使用meta
    • 标题信息：
      • 一般用于seo优化显示灯

body标签

  • 网页内容的显示主体，网页上我们所看到的内容都必须位于该标签

meta标签

元数据

  • 元数据(Metadata)是用来概括描述数据的一些基本数据
  • 比如：我们iOS上架App的时候，就需要填写所谓的元数据信息
  • 所有浏览器都支持<meta>标签，我们的meta标签就是包含网页的一些元数据
  • <meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
  • <meta> 标签位于文档的头部，不包含任何内容,<meta> 标签的属性定义了与文档相关联的名称/值对
  • w3c官方解释：meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务

meta标签的属性

meta标签共有两个属性：

  • name
  • http-equiv

name属性

<meta name="参数" content="具体的描述">
1

name

  • name属性主要用于描述网页，比如网页的关键词，叙述等

content

  • content中的内容是对name填入类型的具体描述，便于搜索引擎抓取

常见name取值

keywords（关键字）

  • 用于告诉搜索引擎，你网页的关键字
  • 一般网站SEO这个属性是必备的，很重要
<meta name="keywords" content="前端技术博客，前端小峰哥">
1

description（网站内容描述）

  • 用于告诉搜索引擎，你网站的主要内容
  • 对于SEO也很重要
<meta name="description" content="前端技术分享博客，专注于分享前端技术_前端博客_前端学习_前端教程">
1

viewport（视口）

<meta name="viewport" content="width=device-width, initial-scale=1">
1

http-equiv属性

标签

标题

段落

样式

链接

图片

列表

表格

表单

脚本

html5

Canvas

地理定位

Video

Audio

新的表单元素

WebSocket

← 核心内容 →