title: HTML基础学习小结
date: 2016-09-09 14:59:28
tags:
说明：以下内容学习自：http://www.w3school.com.cn/
1、
以下记录了一些常用的html元素，块，类，第一个是html和head，用来申明是html文件，以及head部分的代码：
2、
h1 定义标题的开始
3、
body 定义 HTML 文档的主体
4、
P表示段落
5、
table 定义 HTML 表格
6、
a 用来定义链接，如下代码
<a href="http://www.w3school.com.cn">This is a link</a>
7、
img 定义图像如下代码
[站外图片上传中……(2)]
8、
无序列表始于 ul 标签。每个列表项始于 li。代码和效果如下：
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
9、div是块级元素，它是可用于组合其他 HTML 元素的容器，浏览器通常会在 div 元素前后放置一个换行符。另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法，感觉可以理解成一个函数或集合。举例：
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
10、 span 元素，然后对这个 span 元素的父元素，即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了。
<p class="tip"><span>提示：</span>... ... ...</p>
或者CSS：
p.tip span {
font-weight:bold;
color:#ff9955;
}
11、类的概念，以div的一段代码为例，可以发现，在head部分定义了一个cities的类，然后div引用了这个类，作用是把背景设置为黑色，字体为白色，margin和padding都设置为20px，另外类引用到span也是差不多的，形如<span class="xxx">：
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<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>
</body>
</html>
12、布局，用一张图来体验下，其实就是一些文字+底色的布局，但是看上去有点大气，用到了#符号，以及
div id="header"这样的形式，具体代码参考这里【点我】
13、响应式设计，明显感觉Bootstrap的模式要好，所以省略。
14、框架：frameset 可以在同一个浏览器窗口中显示不止一个页面。
15、内联框架 iframe
16、背景，一个是背景颜色，形如：body bgcolor="#000000" 一个是背景图，形如 body background="http://www.w3school.com.cn/clouds.gif"
17、脚本：JavaScript 使 HTML 页面具有更强的动态和交互性。
18、实体，关于一些特殊符号在html的格式，参考此链接【点我】
