一、基础知识

（一）HTML历史

Tim Berners-Lee 一位伟大的人物，在1990年左右发明了万维网（www-world wide web）。同时发明了URL、HTML、HTTP，用自己写的浏览器访问了自己写的服务器。

（二）制作网页需要的知识

域名
HTTP服务器
HTML
其他

（三）万维网与互联网

一）万维网

万维网（WWW），俗称网络，是一个信息系统，其中的文件和其它网络资源被确定统一资源定位符（URL，例如https://example.com/)，它们可以通过超链接相互链接，并可通过Internet访问。【在万维网中，所有资源都有一个地址（URL），输入地址就可以通过互联网来访问这个资源。】

Web 资源通过超文本传输协议(HTTP)传输，用户可以通过称为Web 浏览器的软件应用程序访问，并由称为Web 服务器的软件应用程序发布。

万维网不是互联网的同义词，互联网以某种形式早于万维网 20 多年，并且万维网是基于这些技术构建的。

Web 资源可以是任何类型的下载媒体，但网页是用超文本标记语言(HTML)格式化的超文本文档。特殊的 HTML 语法显示带有 URL 的嵌入超链接，允许用户导航到其他网络资源。除了文本之外，网页还可能包含对图像、视频、音频和软件组件的引用，这些组件在用户的网络浏览器中显示或内部执行以呈现页面或多媒体内容流。

具有共同主题且通常具有共同域名的多个网络资源构成了一个网站。网站存储在运行网络服务器的计算机中，网络服务器(Web server)是一个程序，用于响应用户计算机上运行的网络浏览器通过 Internet 发出的请求。网站内容可以由发布者提供，也可以交互地从用户生成的内容中提供。提供网站是出于各种信息、娱乐、商业和政府原因。

以上内容来自维基百科。

二）互联网

在因特网（或互联网）是互连的全球系统的计算机网络，它使用因特网协议套件（TCP / IP协议）实现网络和设备之间的通信。它是一个网络，由本地到全球范围的私人、公共、学术、商业和政府网络组成，通过广泛的电子、无线和光网络技术连接。互联网承载种类繁多的信息资源和服务，如相互关联的超文本文件和应用程序的万维网（WWW），电子邮件、电话和文件共享。

大多数传统通信媒体，包括电话、广播、电视、纸质邮件和报纸，都被互联网重塑、重新定义，甚至被互联网绕过，催生了电子邮件、互联网电话、互联网电视、在线音乐、数字报纸等新服务。视频流媒体网站。报纸、书籍和其他印刷出版正在适应网站技术，或者被改造成博客、网络订阅源和在线新闻聚合器。互联网通过即时消息、互联网论坛和社交网络服务。大型零售商、小型企业和企业家的在线购物呈指数增长，因为它使公司能够扩展其“实体”业务以服务于更大的市场，甚至完全在线销售商品和服务。互联网上的企业对企业和金融服务影响整个行业的供应链。

互联网在技术实施或访问和使用政策方面没有单一的集中治理；每个组成网络都设置自己的策略。Internet 中两个主要名称空间的过度定义，即Internet 协议地址（IP 地址）空间和域名系统(DNS)，由维护者组织Internet Corporation for Assigned Names and Numbers 指导（互联网名称与数字地址分配机构）。核心协议的技术基础和标准化是互联网工程任务组的一项活动(IETF)，一个由松散附属的国际参与者组成的非营利组织，任何人都可以通过贡献技术专长来与之联系。2006年11月，互联网被列入《今日美国》的新七大奇迹名单。

以上内容来自维基百科

（四）HTML是什么

HTML（HyperText Markup Language，超文本标记语言） Lee写的HTML诞生，最初的HTML

HTML5是什么？

最新版的HTML，110个标签，含旧标签和32个新标签
HTML5和它的朋友们

一些好用的工具

JS Bin

代码沙盒

二、语法及标签

（一）语法

<!DOCTYPE html>   //文档类型
<tag attr=value>内容</tag>   //闭合标签，value需不需要引号、使用哪种引号都可以，看需求
<tag attr>内容</tag>   //没有value的attr，例如checked，写了也当没写
<tag attr=value> //自闭合标签，新语法不需要‘/’

（二）HTML起手式

Emmet !

 <!DOCTYPE html>   //文档类型
 <html lang="en">  //语言
 <head>
     <meta charset="UTF-8">  //文件字符编码
     <meta name="viewport" content="width=device-width, initial-scale=1.0">//禁用缩放
     <meta http-equiv="X-UA-Compatible" content="ie=edge"> //IE使用最新内核
     <title>Document</title>
 </head>
 <body>

 </body>
 </html>

（三）章节标签

表示章节的层级

<article> 文章
<header> 头
<main> 主要
<aside> 旁支
<footer> 脚
<section> 章节
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 文章各级标题
<p> 段落
<div> 块划分
<span> 行内划分
```
 <footer>&copy;版权所有</footer>
```

（四）全局属性

class 类匹配“.”
contenteditable 可编辑
hidden 隐藏
id 不唯一的唯一匹配“#” 在JS可以直接获取到元素，但是不能使用document关键字
style 格式设置 JS会覆盖HTML，HTML优先级高于CSS
tabindex tab键响应顺序 -1表示不要响应，0表示最后响应
title 鼠标浮上显示完整内容

reset.CSS 干掉默认样式

* {margin:0; padding:0;box-sizing: border-box; }
*::before,*::after {box-sizing: border-box;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
a {color: inherit;text-decoration: none;}
input,button {font-family: inherit;}
ol, ul {list-style: none;}
table { border-collapse: collapse;border-spacing: 0;}//table border合并

（五）内容标签

（一）有序列表 ordered

<ol>
  <li>1.</li>
  <li>2.</li>
</ol>

（二）无序列表 unordered

<ul>
  <li>*</li>
  <li>*</li>
</ul>

（三）描述列表 description

<dl>
  <dt>HTML</dt> //被描述对象
  <dd>是一种超文本标记语言</dd> //内容
</dl>

（四）其他标签

分割线 <hr>
换行 <br>
超链接 <a href=""></a>
强调<em></em>
加粗<strong></strong>
保留空格、回车、换行<pre></pre>
原样显示，字体等宽<code>这里可以写代码</code>
内联引用 <quoto></quoto>
块级引用 <blockquote></blockquote>
<iframe>内联框架元素，可以将另一个HTML标签嵌入到当前页面中

三、重难点标签

（一）a标签的用法

<a href="" target="">这是一个a链接</a>

（1）href属性取值

网址

 <a href="https://google.com">谷歌</a>
 <a href="http://google.com">谷歌</a>
 <a href="//google.com">谷歌</a>    //默认继承，然后自动跳转到正确网址

路径

 <a href="/a/b/c"></a>   //根目录，是指HTTP服务开启的目录，而不是硬盘根目录
 <a href="a/b/c"></a>    // 相对目录
 <a href="index.html"></a> // 默认打开当前目录中的index.html文件
 <a href="./index.html"></a>  //  打开当前目录中的index.html文件

伪协议

javascript:代码； 访问一段js代码

 <a href="javascript:alert(1);">JavaScript伪协议</a>
 <a href="javascript:;">空的伪协议</a> //让页面什么都不做
 <a href="">查看</a>                  //点击a标签。页面会刷新
 <a href="#">查看</a>                //点击a标签。页面会回滚到最顶部

mailto:邮箱 跳转到邮件应用

 <a href="mailto:123456@qq.com">发邮件给我吧</a>

tel:手机号 跳转到拨号页面，一般用于手机访问
```
 <a href="tel:123 4567 7654">打电话给我吧</a>
```

id

#xxx 跳转到指定标签

（2）target属性取值

内置名字

_blank 在新页面打开

_self 默认值，在本页面打开

_top 在最顶层打开

_parent 父级（上一级）

程序员命名

Windows的name 窗口的命名：如果有，就在该窗口打开；如果没有就自动新建一个窗口并以此命名
```
 <a href="//baidu.com" target=xxx>baidu</a>
 <a href="//google.com" target=xxx>谷歌</a>
```
打开百度在新的窗口打开，并将窗口并命为xxx，（在控制台打印window.name会返回xxx），第二次点击谷歌就会在刚刚命名的xxx窗口打开
iframe的name 在指定的iframe打开

（二）img标签的用法（image）

发送get请求，展示一张图片

<img src="" alt="" height="" width="">

（1）属性

alt 可替换的，图片加载失败显示该内容
src 图片地址
height ``width只写其中一项，另一项根据图片宽高比自适应

（2）事件

用来监听图片是否加载成功

onload事件
onerror事件

<script>
  xxx.onload=function(){
      console.log("图片加载成功");
  };
  xxx.onerror=function(){
      console.log("图片加载失败");//抢救图
      xxx.src="/404.png";
  };
</script>

（3）响应式

max-width:100% 在任何屏幕下宽度占满屏幕

（三）table标签的用法

表格

<table>
  <thead>
      <tr>
          <th></th>
          <th>小红</th>
          <th>小明</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <th>语文</th>
          <td>89</td>
          <td>90</td>
      </tr>
  </tbody>
  <tfoot>
      <tr>
          <td></td>
          <td></td>
          <td></td>
      </tr>
  </tfoot>
</table>

table标签内只能有thead、tbody、tfoot三个标签，其中thead内是表行、表头；tbody和tfoot内是表行、单元格数据。

相关样式
- table-layout
- border-collapse 取消每个单元格间隙
- border-spacing 设置单元格间隙大小

（四）form标签的用法（表单）

发送get或post请求，然后刷新页面

（1）属性

1.action 跳转页面地址

method 控制是get还是post
autocomplete是否自动填充
target在哪个窗口跳转

（2）事件

onsubmit事件点击提交按钮，触发该事件前提是有一个提交按钮

提交按钮子标签:

input:输入框做提交按钮

 <input name="" type="submit" value="提交"/>

button按钮

 <button type="submit">
    <strong>提交</strong>
 </button>

区别：input不可内嵌各种标签；button可内嵌其他标签，如<strong> <img>等

（五）input标签的用法

让用户输入内容

（1）属性

type类型: color、button、checkbox多选框、email、file可选一个文件，mulyiple可选多个、hidden隐藏，给机器看的、number、password密码、radio单选、search、submit、tel、text文本（默认项）其他属性：name、autofocus、checked、disabled、maxlangth、pattern、value、placeholdor……

（2）事件

onchange改变输入触发
onfocus鼠标集中触发 onblur鼠标移开触发

（六）其他用法

（1）验证器

HTML新增功能，例如在input标签里，required属性，必须填写，不填写内容提交页面会弹出提示

（2）其他标签

textarea 一个比较大的输入框，可输入多行内容，右下角可拖动改变输入框大小style="resize:none;"使其固定

select 下拉选框

 <select>
     <option value="1">1</option>
     <option value="2">2</option>
 </select>

label
video视频
audio音频
canvas画画
svg矢量画
nav导航栏可以加列表链接地址等

一些想法

HTML语义化:关于HTML语义化，我的理解就是在前端的发展过程中，逐渐把table或者是div这种单一的标签更加丰富起来，不同的语境使用不同的标签：h就是heading，顾名思义就是标题，h1一级标题，h2二级标题等；文章那就使用article标签，告诉浏览器我这就是一篇article；文章里面章节section；段落paragraph，太长了，就是p等等。html常用标签：除了上面那些，还有nav导航栏，aside侧边栏，button按钮，等等

最后附上一个HTML裸奔页面

HTML

一、基础知识

（一）HTML历史

（二）制作网页需要的知识

（三）万维网与互联网

一）万维网

二）互联网

（四）HTML是什么

HTML5是什么？

一些好用的工具

二、语法及标签

（一）语法

（二）HTML起手式

（三）章节标签

（四）全局属性

reset.CSS 干掉默认样式

（五）内容标签

（一）有序列表 ordered

（二）无序列表 unordered

（三）描述列表 description

（四）其他标签

三、重难点标签

（一）a标签的用法

（1）href属性取值

（2）target属性取值

（二）img标签的用法 （image）

（1）属性

（2）事件

（3）响应式

（三）table标签的用法

（四）form标签的用法（表单）

（1）属性

（2）事件

（五）input标签的用法

（1）属性

（2）事件

（六）其他用法

（1）验证器

（2）其他标签

一些想法

（二）img标签的用法（image）