Stanford CS142: Web Applications Week1 HTML
HTML是一种标记语言，通过各种指令(dirctive)来规定呈现或描述的内容。
使用方法：
- 从要展示的内容(content)开始
- 用标签(tag)给内容做注释，HTML使用
<>代表标记
例子：
<i>italics word</i>
<title>Title words</title>
HTML标签
HTML标签可以提供以下功能：
-
文本的含义:
<h1>代表顶级标题<p>代表段落<ul><li>代表无序标签(加点的)
-
格式信息:
<i>代表内容文字斜体 -
展示除了文本之外的其他信息，比如
<img>就是展示图片
样例(分割线里的内容):
Introduction
There are several good reasons for taking CS142: Web Applications:
- You will learn a variety of interesting concepts.
- It may inspire you to change the way software is developed.
- It will give you the tools to become fabulously wealthy.
上面这段样例的代码：
<h2>Introduction</h2>
<p>
There are several good reasons for taking
<i>CS142: Web Applications</i>:
</p>
<ul>
<li>
You will learn a variety of interesting concepts.
</li>
<li>
It may inspire you to change the way software is developed.
</li>
<li>
It will give you the tools to become fabulously wealthy.
</li>
</ul>
或
<h2>Introduction</h2>
<p>
There are several good reasons for taking
<i>CS142: Web Applications</i>:
</p>
<ul>
<li>
You will learn a variety of interesting concepts.
</li>
<li>
It may inspire you to change the way software is developed.
</li>
<li>
It will give you the tools to become fabulously wealthy.
</li>
</ul>
通过上面两个代码，说明浏览器并不关注html代码是如何书写的，但是我们程序员要关注代码的书写风格！
HTML与XHTML
可扩展超文本标记语言（英语：eXtensible HyperText Markup Language，XHTML），是一种标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格
浏览器在解析HTML内容时，对于HTML语法的检查不是特别严格，比如尝试在一个html文档中写入一下内容:
<p> 一个小实验
然后看看自己运行结果。
XHTML(XML-based HTML)算是一种具有更严格语法要求(这也是二者的主要区别)的HTML语言。
在project 1, 2, 3中，会是用XHTML语言。
一个XHTML的样例：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
XHTML的基本语法规则
文档(Document)： 一个HTML文档是html元素的分层集合，从<html>开始。
元素(element)：HTML元素包含开始标签(start tag)，内容(content)，结束标签(end tag)。
每个元素都必须包含开始标签和结束标签，例如<foo></foo>就是一个不包含内容的元素，一对标签也可以简写成<foo />
其中，开始标签可以包含一些属性，例如：
<img src="face.jpg">
<input type="text" value="94301" name="zip">
<div class="header">
HTML中的一些特殊符号(字符实体)
有一些符号在HTML语法中是预留的字符(例如<，>)，这些预留的字符也称作字符实体(entity)为了展示这些符号，在HTML中定义了一些专门的表示方法：
<代表<>代表>&代表&"代表"&nbps;代表一个空格
除了这些之外，还有其他字符被定义成实体，有兴趣可以自己查阅。
XHTML的基本语法结构
来看一个例子:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
这一部分是在声明这是一个XHTML 1.0文档。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
包含HTML文档的最外层的元素
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>包含了如网页标题，CSS样式等各种各样的信息
<body>是HTML文档的主体部分
常用的XHTML标签
<p>内容是一个新段落<br>强制段落中的某一行换行<h1>,<h2>，……内容是各种标题<b>,<i>内容文字的粗体、斜体<pre>包含的内容使用固定的缩紧，常用于展示代码<img>包含的内容是一个图片<a href="...">指向另一个位置的超链接<table><tr><td>，表格(一行(行中的每个元素))<ul>,<li>无序列表，其中有<li>会在前面出现一个点<ol>,<li>无序列表，其中有<li>会在前面出现一个数字标号<div>把一组元素聚合在一起，并且会占据单独一整行<span>把一组元素聚合在一起，不会单独占据一整行<form>,<input>,<textarea>,<select>,…… 用来<title>为页面指定一个标题<link>包括一个CSS样式表<script>给页面添加Javascript脚本(也可以在<body>中添加)
HTML5中的新内容
- 添加标记允许内容定义
<article>,<section>,<header>,<footer>,<summary>,<mark>,<figcaption>,<figure><nav>,<menuitem>
- 绘制图片
<svg>可缩放矢量图片<canvas>用JavaScript动态绘制图形
