WEB与HTML

WEB起源

蒂姆·伯纳斯-李

蒂姆·伯纳斯-李爵士万维网(WWW)的发明人
1991年8月6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线
世界第一个网站：
http://info.cern.ch/hypertext/WWW/TheProject.html
伯纳斯李1994年建立万维网联盟（W3C）
W3C的出现为了指定网页开发标准，以使同一个网页在不同的浏览器中有相同的效果

网页的组成

根据W3C标准： 一个网页主要由三部分组成：结构、表现、行为

WEB标准

结构(HTML)

HTML 用于描述网页结构

表现(CSS)

CSS 用于控制页面中元素的样式

行为(JavaScript)

JavaScript 用于响应用户操作

HTML(HyperText Markup Language)

HTML即 超文本标记语言

超文本：是指一种带有链接关系的任何信息内容（如文字、图片等）
标记语言：通过内容注释的方式来表示相应的信息并使内容结构化的语言

HTML

拓展：超文本文档是指使用超链接的方式，把文字和图片信息相互联结，形成具有相关信息体系，并且超文本文档的格式也有很多，比如苹果推出的的rtf（富士文档）以及我们现在学的html等。

html的发展

HTML1.0

实际上应该没有HTML1,所谓的HTML1是1993年IETF(互联网工作任务组)团队的一个工作草案，并不是成型的标准。

HTML2.0

1995年11月作为RFC1866发布，于2000年6月RFC2854发布之后宣布过时。

HTML3.2

1996年W3C撰写新规范，并于1997年1月推出HTML3.2。

HTML4.0与HTML4.0.1

1997年12月18日成为W3C的推荐标准。

1999年12月24日成为W3C的推荐标准。其中只做了细微的调整。

2000年5月15日发布，基于HTML4.01的ISO HTML成为了国际标准化组织和国际电工委员会的标准，一直被沿用至今，虽然有小的改动，但大体方向没有四年大变化。

HTML5.0

html5

HTML5 是对 HTML 标准的第五次修订，其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入

网页的基本结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5</title>
</head>
<body>
<!--
  主体内容
-->
</body>
</html>

<!DOCTYPE html> 文档类型声明

<html> HTML根标签

<head> 用于对HTML主体内容(<body>)进行全局控制，以及提供或显示除主体内容以外的信息(例如：title、meta)

<meta> 该标签定义了网页描述和关键字(有利于搜索引擎优化)，以及与文档有关的属性(例如：charset="字符编码")

<title> 文档标题(浏览器标签页标题; 搜索引擎结果页面的标题)

<body> 主体内容，包含页面所显示的内容

 HTML注释，注释的内容不会显示在页面中

元数据 `<meta>`

<meta> 元素可提供有关页面的元数据（Metadata），比如针对搜索引擎和更新频度的描述和关键词

<meta> 标签位于文档的头部(<head>)，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对

charset

charset 用来指定 html文本文件采用的字符编码。常见的字符编码有 gb2312、iso-8859-1、utf-8 ( 可参考IANA字符集 )

1
2
3

<head>
  <meta charset="utf-8" />
</head>

通过 charset 属性来指定浏览器采用什么字符集来解析HTML文档。

添加网页描述与关键词

<head>
  <meta name="description" content="一个分享简单教程的博客" />
  <meta name="keywords" content="html, css, javascript, web, 前端" />
</head>

通过name属性来指定描述类型，在通过content属性来指定该类型的值，以上代码定义了description(描述)、keywords(关键词)两种描述类型。

description(作为搜索引擎显示的内容摘要)
keywords(作为搜索引擎搜索时的关键词索引)

Url重定向

1
2
3

<head>
  <meta http-equiv="refresh" content="3;url=http://baidu.com">
</head>

上面的代码会在3秒后自动跳转到百度首页，如果去掉3后面的值(;url=http://baidu.com) ，则会3秒后自动刷新当前页面(无限刷新)。

站点图标( favicon )

favicon

站点图标会显示在浏览器收藏夹和标签页的前面显示。
对于用户来说，可以更容易在书签找到你的站点。

favicon 的使用：

1
2
3

<head>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

favicon 支持的文件类型：

根据网站图标的格式，您必须更改type属性。

PNG，您需要使用 image/png
GIF，您需要使用 image/gif
JPEG，您需要使用 image/gif
ICO，您需要使用 image/x-icon
SVG，您需要使用 image/svg+xml

超链接( a )

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，超链接中可以是除了超链接以外的任何元素，您可以点击这些内容来跳转到新的页面或者当前页面中的某个部分( 锚 )

当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

超链接使用 <a> 标签定义。

1	<a href="https://www.timeic.top" target="_blank" title="我的个人博客">在新窗口打开我的博客</a>

<a> 标签必须定义 href 属性，才能点击跳转。

href="url"：url^[>] 规定链接指向页面的地址
target="_blank"：target属性用来定义页面打开方式 )
① _blank = 新窗口打开
② _self = (默认值) 当前窗口打开
title="超链接" 当鼠标移入超链接时显示的 额外信息，title 为全局属性( 所有元素都可使用 )

title

锚点定位

<a href="#C4">查看章节 4</a> <!-- 点击跳转到 id 属性值为 C4 的元素 -->

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 7</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 8</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 9</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 10</h2>
<p>这边显示该章节的内容……</p>
………………

通过给元素邦定 id 属性，然后通过点击超链接定位到该位置上。

指定了 id 属性的元素，还可以通过在URL后面添加 #id 实现垮页面的定位。

id的属性值是唯一的，不能在同一个HTML页面中重复出现

base 标签

<base> 标签的作用是为页面上的所有的相对链接规定默认 URL 或默认打开方式

<base> 标签必须写在 <head> 标签内

1
2
3

<head>
  <base href="http://127.0.0.1:8080" target="_blank" /><!-- 自结束标签 -->
</head>

href="http://127.0.0.1:8080" ( HTML中所有相对URL会从 “http://127.0.0.1:8080/" 主机目录下访问 )
target="_blank" ( HTML中所有超链接会在新窗口打开 )

图片( img )

图片由 <img> 标签定义，<img> 是单标签，意思是说，它只包含开始标签和属性，没有闭合标签。

1	<img src="/timeic/image.jpg" alt="图片丢失了" width="304" height="228" />

要在页面上显示图像，需要使用 源属性 ( src )

src 指 “source”，源属性的值是图像的 URL 地址
alt 属性用来为图像定义一串预备的可替换的文本，如果图像被删除或由于某些原因不能访问，则会用 alt 中的文本代替显示( 提示作用 )

图片宽高

width 图像宽度，height 图像高度

默认单位为像素 ( px )，默认宽高为图像分辨率的大小( px )

音视频( audio & video)

插入音视频

<h1>音频插入</h1>
<!-- 单文件源引入 -->
<audio controls src="horse.mp3">您的浏览器不支持 audio 标签</audio>

<!-- 多文件源引入 -->
<audio controls>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mpeg" />
您的浏览器不支持该音频
</audio>

<h1>视频插入</h1>
<!-- 单文件源引入 -->
<video controls src="movie.mp4">您的浏览器不支持 video 标签</video>

<!-- 多文件源引入 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
  <track src="subtitles_ch.vtt" kind="subtitles" srclang="zh"
label="Chinese">
您的浏览器不支持 video 标签
</video>

source 标签用来引入媒体资源，可以用来引入多个不同格式的媒体文件，根据浏览器支持的格式进行播放，如果都不支持则会提示 audio 标签中的内容 __”您的浏览器不支持 … 标签”__，type 指定的是文件的类型，可以参考 IANA MIME 类型

<track> 标签用来嵌入视频文字，可用属性如下：

default 默认文字轨道( track )
kind="subtitles" 定义文字类型，这里定义的是字幕类型
srclang 定义文字语言，这里可以参考 ISO 639-2 语言代码表
label 定义文本轨道的标签和标题

共有属性

controls 播放控件( 提供暂停播放按钮及音量和进度滑块 )
loop 循环播放( 默认只放一遍 )
autoplay 自动播放
muted 静音
preload 预加载可选值 auto、metadata、none
1. auto 当页面加载后会载入整个音频
2. metadata 当页面加载后只载入音频元数据，不加载音频实际的数据流
3. none 当页面加载后不载入音频

视频独有属性

width height 容器宽高
poster 指定视频的缩览图( 封面 )，值为图片的URL

HTML5 Audio & Video JavaScript Web APIs：

HTMLAudioElement - Web APIs | MDN

HTMLVideoElement - Web API | MDN

内联框架( iframe )

HTML内联框架元素 (<iframe>)，它能够将另一个HTML页面嵌入到当前页面中，并且不会影响当前页面的内容(独立的文档环境)

例：

<iframe src="https://bilibili.com/" width="100%" height="300px" scrolling="yes" frameborder="1" name="iframe"></iframe>
<a href="https://bilibili.com/" target="iframe">https://bilibili.com/</a>
<a href="https://taobao.com/" target="iframe">https://taobao.com/</a>
<a href="https://timeic.top/" target="iframe">https://timeic.top/</a>

属性说明:

src 源属性，指定嵌入页面的URL
width 宽度
height 高度
scrolling 滚动页面
属性值:
- auto (自动，根据需要自动显示滚动条)
- yes (滚动页面)
- no (不滚动页面，超出的内容无法显示)
frameborder 边框
属性值:
- 1 (有边框)
- 0 (无边框)
name 名称
用于定位嵌入页面的名称。该名称可以用作 <a> 标签的 target 属性值
内联框架不会被搜索引擎检索，所以不建议使用

表格( table )

HTML使用 <table> 标签定义表格

<table>
<caption>性别年龄表</caption>
    <tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr>
    <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
    <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
    <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
    <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
</table>

<caption> 定义表格标题
<th> 定义表头( 默认表现为居中加粗效果 )
<tr> 定义表格行
<td> 定义单元格( td 标签要嵌套再 tr 中 )
属性：
- colspan 规定单元格可横跨的列数。（横向合并单元格）
- rowspan 规定单元格可横跨的行数。（纵向合并单元格）

表单( form )

HTML使用 form 标签定义表单

<form action="">
  <p>用户名: <input type="text" name="username" /></p>
  <p>密码: <input type="password" name="password" /></p>
  <input type="submit" value="登 录" />
</form>

<input> 创建一个交互式控件
属性：
- type 交互控件的类型，具体值如下：
  - text 文本框，默认value=空
  - password 密码框，默认value=空
  - radio 单选框，默认value=off
  - checkbox 复选框，默认value=off
  - button 按钮，默认value=空
  - submit 提交按钮，默认value=”提交”
  - email 邮箱输入框，默认value=空
  - tel 电话号码输入框，默认value=空
  - color 颜色选择器
- name 控件名称，控件名称和控件输入值会以名/值对的形式随表单一起提交
- value 控件输入值，控件名称和控件输入值会以名/值对的形式随表单一起提交
- placeholder 控件(text、password、email、tel)的value为空时显示placeholder属性中的内容
- autocomplete 表单自动填充，可用<form>及所有表单元素中
- readonly 禁止编辑控件的value
- disabled 禁用该控件，该控件的value无法提交
- pattern 使用正则表达式匹配内容
action 属性是用来处理表单提交的URL

表单中的其它控件元素：

<textarea> 多行文本框
<select> 下拉列表
<details> 折叠菜单
<button> 按钮