之前在学习HTML的时候，依照Web 前端怎么入门？中汪小黑的答复中所给的学习路线图，照着W3school的HTML基础教程，只学习到了HTML列表局部。在学习CSS的过程中，逐步发现有一些HTML内容（块、类等等）并不相熟。当初在开始着手做练手小我的项目动态网页之前，我想再把HTML的根底补习一下，把HTML基础教程全副看完，并且尽量手敲一下。
1.HTML块元素<div>是块级元素（block level element），用来组合其余HTML元素。<span>是内联元素（ inline element），用来作文本的容器。
这两者次要目标都是为了不便CSS设置款式。Div还能够用于文本布局。（以前用表格进行文本布局是不好的！）
2.HTML类：
对HTML元素（通常是div等）设置Class属性能够不便CSS来设置款式。例：
<div class="cities">3.HTML布局：
Div元素罕用作布局工具，不便通过CSS对其进行定位。
例：应用四个<div>来创立多列布局：（两头用到了之前所讲的CSS中的float，并且在页脚进行clear的手法）
HTML：
<body><div id="header"><h1>City Gallery</h1></div><div id="nav">London<br>Paris<br>Tokyo<br></div><div id="section"><h1>London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></div><div id="footer">Copyright W3School.com.cn</div></body>CSS：
<style>#header { background-color:black; color:white; text-align:center; padding:5px;}#nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; }#section { width:350px; float:left; padding:10px; }#footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }</style>如果应用HTML提供的新语义元素定义网页布局：
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自蕴含文章
aside 定义内容之外的内容（比方侧栏）
footer 定义文档或节的页脚
details 定义额定的细节
summary 定义 details 元素的题目
HTML：
<body><header><h1>City Gallery</h1></header><nav>London<br>Paris<br>Tokyo<br></nav><section><h1>London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></section><footer>Copyright W3School.com.cn</footer></body>CSS：
header { background-color:black; color:white; text-align:center; padding:5px; }nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; }section { width:350px; float:left; padding:10px; }footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }用<table>元素也能够进行布局，然而这样不好。就不贴代码了。
4.响应式web框架：即能够以可变尺寸传递网页的web设计。能够次要应用float来实现这个目标。例：
<!DOCTYPE html><html lang="en-US"><head><style>.city {float: left;margin: 5px;padding: 15px;width: 300px;height: 300px;border: 1px solid black;} </style></head><body><h1>W3School Demo</h1><h2>Resize this responsive page!</h2><br><div class="city"><h2>London</h2><p>London is the capital city of England.</p><p>It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p></div><div class="city"><h2>Paris</h2><p>Paris is the capital and most populous city of France.</p></div><div class="city"><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p></div></body></html>还有一个办法，是应用现成的CSS框架。
CSS框架，说白了就是他人写好的CSS文件，外面对不同的class进行了格局定义。而后间接援用其中的class，就能够实现一些格局属性， 不须要本人来写残缺的CSS文件。例，以下的HTML文件援用了bootstrap框架，因而不须要本人写CSS文件或者其余款式，就能够让文本带有特地的款式属性，并且在不同尺寸的设施上都能适合地显示网页内容：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><div class="container"><div class="jumbotron"> <h1>W3School Demo</h1> <p>Resize this responsive page!</p> </div></div><div class="container"><div class="row"> <div class="col-md-4"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="col-md-4"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="col-md-4"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div></div></div></body></html>5.HTML框架
通过应用frameset，能够将窗口分成几行或几列，别离显示来自不同的html文件。在上面的这个例子中，咱们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"></frameset>注：这种状况下，两列内容的滚动条是离开的。
重要提醒：不能将 <body></body> 标签与 <frameset></frameset> 标签同时应用！不过，如果你增加蕴含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。例：
<html><frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"><noframes><body>您的浏览器无奈解决框架！</body></noframes></frameset></html>其余tips：
1）行和列框架能够混合嵌套应用。
2）noresize=“noresize”：使得框架不可调整尺寸。
3）导航框架（感觉比拟罕用）：导航框架蕴含一个将第二个框架作为指标的链接列表。名为 "contents.htm" 的文件蕴含三个链接。
<html><frameset cols="120,*"> <frame src="/example/html/html_contents.html"> <frame src="/example/html/frame_a.html" name="showframe"></frameset></html>4）框架内初始显示指定节：本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节应用
<a name="C10"> 进行标识。<html><frameset cols="20%,80%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/link.html#C10"></frameset></html>5）应用导航框架跳转至指定的节：本例演示两个框架。左侧的导航框架蕴含了一个链接列表，这些链接将第二个框架作为指标。第二个框架显示被链接的文档。导航框架其中的链接指向指标文件中指定的节。
<html><frameset cols="180,*"><frame src="/example/html/content.html"><frame src="/example/html/link.html" name="showframe"></frameset></html>6.内联框架iframe：用于在网页内显示网页。（套娃）
能够用width和height为inframe设置尺寸，用frameborder设置边框。
Iframe还能够用作链接的指标（target，即点击链接后关上网页显示的地位，如新标签页等）例：
<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>7.HTML脚本：<script>标签用于定义客户端脚本，比方JavaScript。
Script元素既能够蕴含脚本语句，也能够通过src属性指向内部脚本。<noscript> 标签提供无奈应用脚本时的代替内容，比如在浏览器禁用脚本时，或浏览器不反对客户端脚本时。
如何应酬老式的浏览器
如果浏览器压根没法辨认 <script> 标签，那么 <script> 标签所蕴含的内容将以文本形式显示在页面上。为了防止这种状况产生，你应该将脚本暗藏在正文标签当中。那些老的浏览器（无奈辨认 <script> 标签的浏览器）将疏忽这些正文，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即便代码被嵌套在正文标签内。例（JavaScript）：
<script type="text/javascript"><!--document.write("Hello World!")//--></script>8.HTML文件门路：
文件门路会在链接内部文件时被用到，包含网页、图像、样式表、JavaScript。
相对路径（应用相对路径是个好习惯！）：<img src="picture.jpg"> picture.jpg 位于与以后网页雷同的文件夹<img src="images/picture.jpg"> picture.jpg 位于以后文件夹的 images 文件夹中<img src="/images/picture.jpg"> picture.jpg 以后站点根目录（最下级目录）的 images 文件夹中<img src="../picture.jpg"> picture.jpg 位于以后文件夹的上一级文件夹中
相对文件门路：
相对文件门路是指向一个因特网文件的残缺URL，例：<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">
9.HTML头部元素<head>元素是所有头部元素的容器。以下标签都能够增加到 head 局部：<title>、<base>、<link>、<meta>、<script>以及 <style>。
（1）HTML <title> 元素<title> 标签定义文档的题目。
title 元素在所有 HTML/XHTML 文档中都是必须的。
title 元素可能：
定义浏览器工具栏中的题目
提供页面被增加到收藏夹时显示的题目
显示在搜索引擎后果中的页面题目
（2）HTML <link> 元素<link> 标签定义文档与内部资源之间的关系。<link> 标签最罕用于连贯样式表：
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>（3）HTML <style> 元素<style> 标签用于为 HTML 文档定义款式信息。
您能够在 style 元素内规定 HTML 元素在浏览器中出现的款式：
<head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head>（4）HTML <meta> 元素
元数据（metadata）是对于数据的信息。<meta> 标签提供对于 HTML 文档的元数据。元数据不会显示在页面上，然而对于机器是可读的。
典型的状况是，meta 元素被用于规定页面的形容、关键词、文档的作者、最初批改工夫以及其余元数据。<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或从新加载页面），搜索引擎（关键词），或其余 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
上面的 meta 元素定义页面的形容：<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
上面的 meta 元素定义页面的关键词：<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 属性的作用是形容页面的内容。
（5）HTML <script> 元素<script> 标签用于定义客户端脚本，比方 JavaScript。
10.HTML字符实体
HTML中某些字符是预留的，比方大于号>，小于号<等。
例：小于号写作<或<
最罕用的是不间断空格 ，因为浏览器会主动把HTML中的空格缩减为一个。所以如果想应用空格，就须要用这个。
字符实体很多，理论应用时须要参考参考手册。写实体名会更不便记忆一些，但可能有的浏览器不反对实体名，而数字是支持性更好的。
11.HTML URL（uniform resource locator对立资源定位符）
网址，比方 http://www.w3school.com.cn/ht...，恪守以下的语法规定：
scheme://host.domain:port/path/filename
解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比方 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的门路（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
注：scheme也有多种，具体应用的时候再好好理解吧~
URL字符编码：URL只能应用ASCII字符集来通过因特网进行发送。因而其余字符（包含中文等）会被替换为%加两位16进制数字。URL不能蕴含空格，个别用+代替。具体URL编码参考要参考URL编码参考手册。
12.HTML web server
公布本人的网页，须要把它寄存在web服务器上。具体可参考web主机教程。
13.HTML色彩
色彩由红绿蓝混合而成，三个两位的16进制数字。例如#000000是彩色，#FF0000是红色。
大多数浏览器也反对色彩名（brackets的主动补全性能会显示，十分不便）。色彩名有很多，然而仅有16种颜色被W3C的HTML4.0规范反对。
最后，有216种跨平台web平安色。然而不晓得当初这么做的意义还大不大。
14.DOCTYPE申明（文档类型）
Web中文档的类型十分多，在html文件的结尾进行申明，浏览器能力正确地显示文档。
例：< !DOCTYPE >，它不是HTML标签，它只是为浏览器提供一项申明。
附上来自W3School的HTML4.01速查手册
https://www.w3school.com.cn/html/html_quick.asp