最近因为项目需要使用Python对HTMl文件进行解析，所以将HTML的语法构成，层次结构等做一次梳理。以前也看过，练习过HTML，但是因为没有总结，所以总是容易忘记，现在再次将HTML总结一次，备忘。

本篇是Udacity上Intro to Html and CSS课程笔记，比较简单，在Udacity上还有一个课程HTML 和 CSS 入门，讲解了盒子模型，CSS的响应式布局，以及Bootstrap等框架，更加深入一些，有需要的话下次学习。

0. 参考网站

1. HTML语法

1.1 HTML 结构

下面是一个最简单的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>This is a title</title>
    </head>
    <body>
        <h1>Hello </h1>
    </body>
</html>

DOCTYPE，描述HTML的类型
head，描述有关站点的元信息，比如标题，并提供网页正确渲染和交互所需要的脚本和样式表链接
body，描述用户将看到的网页的实际内容
<p>This is a paragraph</p>，这是一个element，两个p分别是前面的p tag，以及后面的p tag
另外，有一种tag没有结束tag，比如image，<img src="image.jpg" alt="a picture">
tag可以相互嵌套包含，比如<div><h1>Article title</h1></div>

1.2 深入了解HTML文档

下面是一个完整的HTML树结构：

body始终可见，显示页面内容
head负责：
1. 文档的标题，比如<title>About Me</title>
2. 相关的CSS文件，比如<link rel="stylesheet" type="text/css" href="style.css">
3. 相关的JavaScript文件（更改渲染和行为的多用途脚本），比如<script src="animations.js"></script>
4. 网页使用的字符集（文本的编码）：<meta charset="utf-8">
5. 关键字、作者和描述（通常对搜索引擎优化（SEO）起作用）：<meta name="description" content="This is what my website is all about!">

1.3 练习

粗体和强调：

<p><b>This text should be bold.</b></p>
<p><em>And this text should have emphasis (italics).</em></p>

创建按钮：

<button>hello </button>

创建各种标题：

<!DOCTYPE html>
<!--
完成标题后，请点击这个 workspace 中的 solution.html，参考我的解决方案。
-->
<body>
  <p>标题不仅能在视觉上分割网页，还能展现不同元素的相对重要性。</p> 
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
</body>
</html>

创建列表：

HTML <li> 元素（或称 HTML 列表条目元素）用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表(<ol>)，一个无序列表(<ul>)，或者一个菜单 (<menu>)。

<!DOCTYPE html>
<html>
  <body>
  <p>网站中任何由相似对象组成的序列，都有可能是一个列表。这可能是你最爱的新闻应用中的文章列表，也可能是 Youtube 或 Netflix 上的视频。</p>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
</body>
</html>

构造超链接：

<a href="https://www.udacity.com">优达学城</a>

创建图像：

<!DOCTYPE html>
<html lang="en">
<body>
  <p>
    这里是一大段有关 Udacity 的文字。很酷！接下来是图像！ <img src="http://udacity.github.io/fend/images/udacity.png" alt="Udacity Logo"> 现在我们还有一个问题：文字如何对图像做出反应？图像是自成一行，还是显示在文字最后？
  </p>
</body>
</html>

路径指南：

外部绝对路径

<a href="http://labs.udacity.com/fend/example/hello-world.html">世界，你好！</a>

本地绝对路径

<a href="/Users/cameron/Udacity/etc/labs/fend/example/hello-world.html"> 世界，你好！</a>

相对路径

fend/example/hello-world.html

2. CSS 入门指南

2.1 CSS语法

CSS写在head中，用style包含
注意html和css中的注释写法

<!DOCTYPE html>

<!-- Instructions: Change the color of "Hello, world!" to green. -->

<html>
<head>
	<title>Quiz - Hello, world!</title>
    <style>
		p {
			color: blue;
		}        
        /* add CSS here */
        
        h1{
            
            color:green;
        }
    </style>
</head>
<body>
	<h1>Hello, world!</h1>
	<p>Are you ready for your first challenge?</p>
	<p>Let's add some style to this webpage!</p>
</body>
</html>

2.2 属性和选择器

标签选择器

h1 {
  color: green;
}

class 属性选择器

.book-summary {
  color: blue;
}

id 属性选择器

#site-description {
  color: red;
}

注意一个tag的class中，能有多个class属性，比如

<p class="highlight module right"></p>

2.3 CSS单位

详细可以参考CSS长度

绝对单位
- px
- mm
- in
- cm
相对单位
- %
- em
- vw
- vh

2.4 CSS练习

设计图片样式：

<!DOCTYPE html>

<!-- Instructions: Replicate the same styling seen in the kitten image below. -->

<html>
<head>
    <title>Style an Image Quiz</title>
    <style>
    	.kitten-image {
                    border: 5px dashed salmon;
                    border-radius: 5px;
                    cursor: pointer;
                    box-shadow: 5px 5px 20px #ccc;
                    }
    </style>
</head>
<body>
    <!-- Image credit: Nicolas Suzor, https://www.flickr.com/photos/nicsuzor/ - via Flickr, Creative Commons. -->
        <img src="http://udacity.github.io/fend/lessons/L3/problem-set/02-style-an-image/kitten.jpg" alt="kitten" class="kitten-image">
</body>
</html>

设计字体样式：

<!DOCTYPE html>

<!-- Instructions: Replicate the same styling seen in the Udacity text below. -->

<html>
<head>
    <title>Style the Font Quiz</title>
    <style>
    	.udacity-text {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 60px;
  text-transform: uppercase;
  text-decoration: underline;
  color: #8001ff;
}
    </style>
</head>
<body>
    <h1 class="udacity-text">udacity</h1>
</body>
</html>

编写选择器：

</html>
<!DOCTYPE html>
<html>
<head>
  <title>练习：编写选择器</title>
  <!-- 请记住，id 只代表单独元素，而类可以反复使用！ -->
  <style>

    #menu {
      text-align: center;
    }

    .item {
      color: red;
    }

    .picture {
      border-radius: 5px;
    }

    .description {
      font-style: italic;
    }
  </style>
</head>
<body>
  <div id="menu">
    <h1 class="item">砂锅鸡肉煲仔饭</h1>
    <img src="img/clay-pot.jpg" alt="clay pot" class="picture">
    <p class="description">砂锅底部粒粒分明的米饭搭配滑嫩的鸡肉和爽口的蔬菜，令人回味无穷</p>
  </div>
</body>
</html>

2.5 单独的CSS样式表

<head>
  <title>我的网页</title>
  <!-- ... -->
  <link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">
  <!-- ... -->
</head>

比如如下效果图：

styles.css:

body {
	font-family: 'Roboto', sans-serif;
}
.container {
	display: flex;
	flex-wrap: wrap;
}
.menu {
	width: 15%;
}
.portfolio {
	width: 85%;
}
.item {
	width: 100%;
	clear: both;
}
.item img {
	float: left
}
.item span {
	display: table-cell;
	vertical-align: middle;
	height: 240px;
}

index.html:

<!DOCTYPE html>

<!-- 说明：在下方指定位置为样式表  'styles.css' 添加链接。 -->

<!-- 提示：

* 示例链接：<link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">
* 样式表路径："css/styles.css"

-->

<html>
<head>
	<title>练习：为样式表添加链接</title>
	<link href="css/styles.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="portfolio">
			<h1>我的作品集</h1>
			<div class="item">
				<img src="img/out-cold.png" width="300">
				<span>这项特殊设计包含一座 3D 效果的山峰图案，下方字体如饱经风霜的岩石一般龟裂开来，暗示了冬季户外的主题。对于户外产品公司和滑雪场来说，这个 logo 是一个绝佳选择。</span>
			</div>
			<div class="item">
				<img src="img/retro-beach.png" width="300">
				<span>这项特殊设计以沙滩落日为主题，两边为棕榈树。太阳上的渐变色横条表示温度随落日发生变化。</span>
			</div>
		</div>
	</div>
</body>
</html>

Haste makes waste

HTML与CSS简介(1)

0. 参考网站

1. HTML语法

1.1 HTML 结构

1.2 深入了解HTML文档

1.3 练习

2. CSS 入门指南

2.1 CSS语法

2.2 属性和选择器

2.3 CSS单位

2.4 CSS练习

2.5 单独的CSS样式表

Haste makes waste

目录

0. 参考网站

1. HTML语法

1.1 HTML 结构

1.2 深入了解HTML文档

1.3 练习

2. CSS 入门指南

2.1 CSS语法

2.2 属性和选择器

2.3 CSS单位

2.4 CSS练习

2.5 单独的CSS样式表