之前在学习HTML的时候，按照Web 前端怎样入门？中汪小黑的回答中所给的学习路线图，照着W3school的HTML基础教程，只学习到了HTML列表部分。在学习CSS的过程中，逐渐发现有一些HTML内容(块、类等等)并不熟悉。现在在开始着手做练手小项目静态网页之前，我想再把HTML的基础补习一下，把HTML基础教程全部看完，并且尽量手敲一下。
1.HTML块元素
是内联元素( inline element)，用来作文本的容器。
这两者主要目的都是为了方便CSS设置样式。Div还可以用于文本布局。(以前用表格进行文本布局是不好的！)
2.HTML类：
对HTML元素(通常是div等)设置Class属性可以方便CSS来设置样式。例：
3.HTML布局：
Div元素常用作布局工具，方便通过CSS对其进行定位。
例：使用四个
HTML：
City Gallery
London
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.
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.
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;
}
如果使用HTML提供的新语义元素定义网页布局：
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
HTML：
City Gallery
London
Paris
Tokyo
London
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.
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.
Copyright W3School.com.cn
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;
}
用
4.响应式web框架：即可以以可变尺寸传递网页的web设计。可以主要使用float来实现这个目的。例：
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
W3School Demo
Resize this responsive page!
London
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.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.
还有一个方法，是使用现成的CSS框架。
CSS框架，说白了就是别人写好的CSS文件，里面对不同的class进行了格式定义。然后直接引用其中的class，就可以实现一些格式属性， 不需要自己来写完整的CSS文件。例，以下的HTML文件引用了bootstrap框架，因此不需要自己写CSS文件或者其他样式，就可以让文本带有特别的样式属性，并且在不同尺寸的设备上都能合适地显示网页内容：
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
W3School Demo
Resize this responsive page!
London
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.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
5.HTML框架
通过使用frameset，可以将窗口分成几行或几列，分别显示来自不同的html文件。在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：
注：这种情况下，两列内容的滚动条是分开的。
重要提示：不能将
标签与 标签同时使用！不过，假如你添加包含一段文本的 标签，就必须将这段文字嵌套于 标签内。例：其他tips：
1)行和列框架可以混合嵌套使用。
2)noresize=“noresize”：使得框架不可调整尺寸。
3)导航框架(感觉比较常用)：导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接。
4)框架内初始显示指定节：本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用
5)使用导航框架跳转至指定的节：本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
6.内联框架iframe：用于在网页内显示网页。(套娃)
可以用width和height为inframe设置尺寸，用frameborder设置边框。
Iframe还可以用作链接的目标(target，即点击链接后打开网页显示的位置，如新标签页等)例：
7.HTML脚本：
Script元素既可以包含脚本语句，也可以通过src属性指向外部脚本。
标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。如何应付老式的浏览器
如果浏览器压根没法识别
8.HTML文件路径：
文件路径会在链接外部文件时被用到，包括网页、图像、样式表、JavaScript。
相对路径(使用相对路径是个好习惯！)：
picture.jpg 位于与当前网页相同的文件夹
picture.jpg 位于当前文件夹的 images 文件夹中
picture.jpg 当前站点根目录(最上级目录)的 images 文件夹中
picture.jpg 位于当前文件夹的上一级文件夹中
绝对文件路径：
绝对文件路径是指向一个因特网文件的完整URL，例：
9.HTML头部元素
、、、、
扫一扫
2204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
