1.2 HTML和CSS
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现使之成为一种标记语言，而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，被用来结构化信息—— 例如标题、段落和列表等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
层叠样式表（Cascading Style Sheets, CSS）是一种可以用来控制网页样式（字体间距、背景颜色、元素大小等）的计算机语言。通过丰富的选择器可以选择HTML上的特定元素，给其增加不同的样式，丰富网页的表现形式。
1.2.1 HTML元素
HTML文档由HTML元素定义。HTML标签一般是闭合的，开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。元素的内容是开始标签与结束标签之间的内容，某些HTML元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束），大多数HTML元素可拥有属性。
<! DOCTYPE html>
<html>
<title>
这里是网站标题
</title>
<body>
<a href="http://www.baidu.com">单击进入百度</a>
</body>
</html>
以上文本包含4个HTML标签，分别是html、title、body、a，其中a标签具有属性href，将以上文本保存为以．html为后缀的文件，在浏览器打开并单击文字部分便会跳转至百度首页。
1.2.2 HTML常用标签
1．标题
标题标签有6个，分别是h1、h2、h3、h4、h5、h6，使用方式如下：
<h1>这是h1标题</h1>
<h2>这是h2标题</h2>
<h3>这是h3标题</h3>
<h4>这是h4标题</h4>
<h5>这是h5标题</h5>
<h6>这是h6标题</h6>
从h1到h6标题中的字越来越小，浏览器会自动在标题的前后添加空行，如图1-1所示。
图1-1
2．段落
段落标签为<p>，使用方法如下：
<p>这是一个段落</p>
<p>这是第二个段落</p>
浏览器会自动在每个段落标签的结尾自动换行，和标题标签一样。
3．换行
有些标签可以实现自动换行，有些标签不行。如果想要换行，可以使用标签<br/>。
<! DOCTYPE html>
<html>
<title>
这里是网站标题
</title>
<body>
实现中国的伟大复兴<br/>
是我们每个人的责任
</body>
</html>
文本将会在“复兴”后换行，如图1-2所示。
图1-2
4．文本格式化标签
以下代码展示文本格式化标签：
<b>b标签加粗字体</b><br/>
<em>em定义着重文字</em><br/>
<i>i定义斜体字</i><br/>
<small>small中的字体比较小</small><br/>
<strong>strong加重字体</strong><br/>
下标<sub>sub定义下标</sub><br/>
上标<sup>sup定义上标</sup><br/>
<ins>ins定义插入字</ins><br/>
<del>del删除文字标志</del><br/>
代码显示结果如图1-3所示。
图1-3
5．超链接
<a href="http://www.baidu.com" target="_blank">单击进入百度</a>
href属性定义打开的链接地址，target属性定义打开链接的方式。
●_blank在一个新的页面打开链接。
●_self在当前页面打开链接。
●_parent在父框架集中打开。
●_top在整个窗口中打开。
如果target的值是某个框架的名字，那么将会在此框架中打开链接。<a>标签的id属性可创建一个HTML文档标记。
<a id="tip">标记</a>
<a href="#tip">单击此处跳到标记</a>
如果文本比较长，可以使用此属性快速回到指定位置。
6．图像
图像标签img用于在网页中插入图片。
<img src="img.jpg" alt="图像说明" width="100px" height="100px" >
src定义图像的位置，可以是本地存储的图片资源，也可以是网络上的图片，width和height分别定义图片的宽和高，alt是在当图片加载失败时显示的文字说明。
7．表格
表格标签有很多个，常用的有：<table>定义表格、<tbody>定义表格主体、<th>定义表头、<tr>定义行、<td>定义单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
<table border="2">
<tbody>
<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
<tr><td>陈小龙</td><td>22</td><td>男</td></tr>
<tr><td>李菁</td><td>20</td><td>女</td></tr>
</tbody>
</table>
以上代码效果如图1-4所示。
图1-4
8．列表
HTML支持有序、无序和定义列表。示例代码如下：
<ul>
<li>项目概述一</li>
<li>项目概述二</li>
</ul>
<ol type="a">
<li>第一个条件</li>
<li>第二个条件</li>
</ol>
<dl>
<dt>陈小龙</dt>
<dd>帅气潇洒的90后伪文青</dd>
<dt>李菁</dt>
<dd>可爱机灵的90后真少女</dd>
</dl>
效果如图1-5所示。其中，type属性定义列表前的标记，默认有序列表前标记使用阿拉伯数字。
图1-5
9. <div>和<span>
HTML <div>元素是块级元素，是可用于组合其他HTML元素的容器。<div>元素没有特定的含义。除此之外，由于它属于块级元素，因此浏览器会在其前后显示折行。如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性。<div>元素另一个常见的用途是文档布局。
HTML <span>元素是内联元素，可用作文本的容器。<span>元素也没有特定的含义。当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。
说明：大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束），如<h1>、<p>、<ul>、<table>。内联元素在显示时通常不会以新行开始，如<b>、<td>、<a>、<img>。
<h3>这是标题</h3>
<div style="color:#00FF00">
div元素包含的内容，这是一个块元素
</div>
<span style="font-size:20px">span包含的内容</span>
效果如图1-6所示。
图1-6
10．表单
HTML表单用来搜集用户的输入，可将用户输入发送给后端程序进行处理。表单使用<form>来设置。常用表单元素的代码如下：
<form action="register.php" method="post">
文本域：<input type="text" name="username"> <br/>
密码字段：<input type="password" name="password"><br/>
单选按钮：<input type="radio" name="sex" value="male">male
<input type="radio" name="sex" value="female"> female<br/>
复选框：<input type="checkbox" name="hobby" value="bike">
<input type="checkbox" name="hobby" value="car">
<br/>
下拉列表<select name="address">
<option value="1">北京</option>
<option value="2" selected>上海</option>
</select><br/>
多行文本域<textarea name=""></textarea><br/>
提交按钮<input type="submit" value="提交">
</form>
表单的action设置当单击type="submit"的按钮时表单中数据提交到的地址，method设置提交的方式，有post和get两种。value设置表单元素的值，name用来区别不同的表单数据名称，后端程序接收数据需要用到此字段，如用PHP接收本例中文本域值则使用$_POST['username']，多个单选按钮的name值保持一致，说明这些按钮为同一组，同理复选框也是这样。<select>表单标签的<option>中加selected表示默认选中该项值。以上代码显示效果如图1-7所示。
图1-7
1.2.3 CSS语法
可以直接在HTML标签内部以内联式的形式应用CSS，也可以在当前HTML文件的head部分写CSS代码，还可以用link引入外部的CSS文件。
内联式：
<div style="color:red">文字内容</div>
内部样式表：
<! DOCTYPE html>
<html>
<title>
这里是网站标题
</title>
<style type="text/css">
h1{color:orange; }
.txt{font-family:"Times New Roman"; font-size:20px; }
</style>
<body>
<h1>h1内容，由标签选择器控制样式</h1>
<p class="txt">p标签内容，由类选择起控制样式</p>
</body>
</html>
还可以使用<link rel="stylesheet" type="text/css" href="mystyle.css">引入外联式样式表。
CSS规则由两个主要的部分构成：选择器及一条或多条声明。
使用选择器选择需要改变样式的元素，每条声明由一个属性和一个值组成，属性和值用冒号分隔，每条声明之间用分号分隔：
1.2.4 CSS选择器
1. 元素选择器
文档的元素就是一种选择器，如果设置HTML的样式，选择器通常会是某个HTML元素，比如：p、h1、em、a，甚至可以是HTML本身：
html {color:black; }
p {color:blue; }
h2 {color:silver; }
这样相应的HTML元素标签里的内容就会应用这些样式。
2．类选择器
类选择器允许以一种独立于文档元素的方式来指定样式，既可以单独使用，也可以与其他元素结合使用。为了使用类选择器，必须为元素指定一个class值。
<h1 class="important">标题使用important类控制样式</h1>
<p class="important">段落也使用important类控制样式</p>
然后在CSS代码中这样写：
.important {color:red; }
注意，在CSS类名前有一个点号（.)。这样<h1>里的文字就会变成红色了。
3. ID选择器
ID选择器和类选择器类似，同样需要给HTML元素定义一个ID值，然后在CSS中使用#ID值的形式定义样式。
<h1 id="important">
标题使用important类控制样式
</h1>
CSS中使用如下代码：
＃important {color:red; }
和类选择器不同的是，HTML元素中ID的值不能重复。
4．属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。如果希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red; }
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有href和title属性的HTML超链接的文本设置为红色，可以这样写：
a[href][title] {color:red; }
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。例如，假设希望将指向Web服务器上某个指定文档的超链接变成红色，可以这样写：
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red; }
关于属性选择器的用法较为丰富，包括可以选择匹配以指定值开头或结尾的元素，使用方式较为灵活。由于篇幅原因，本书不做介绍，读者可自行查阅相关资料。
5．后代选择器
后代选择器可以选择作为某元素后代的元素，比如我们希望div块中使用h1标签包裹的文字为红色，而该div内其他元素内容不受影响：
div h1{color:red}
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。
6．子元素选择器
与后代选择器相比，子元素选择器（child selectors）只能选择作为某元素子元素的元素。如果不希望选择任意后代元素，而是希望缩小范围，只选择某个元素的子元素，就可以使用子元素选择器。
例如，希望选择只作为h1元素子元素的strong元素，可以这样写：
h1 > strong {color:red; }
这个规则会把第一个h1下面的两个strong元素变为红色，但是第二个h1中的strong不受影响：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
7．相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，就可以使用相邻兄弟选择器。
h1+p {color:red}
上述选择器只会把p元素内容变为红色，而h1标签内容不受影响。
8．伪类选择器
伪类选择器的语法：
selector : pseudo-class {property: value}
例如：
a:link{color:#FF0000} /* 未访问的链接 */
p:first-child{color:red; } /* 匹配第一个p元素 */
<p>第一个</p><p>第二个</p>
即“第一个”3个字会变成红色。
1.2.5 CSS样式
1．背景
CSS允许应用纯色和图片作为背景，例如：
p{background-color: red; } /* 把p元素背景设为红色 */
div{background-image:url('img.jpg');} /* 将图片设为div的背景 */
另外，可以通过background-repeat设置背景图片的重复样式，使用background-position设置背景图片位置、background-attachment设置背景关联。
2．文本
使用text-indent属性可以实现文本缩进。例如：
p{text-indent:5em; }
还可以使用word-spacing属性改变字（单词）之间的标准间隔，其默认值normal与设置值为0是一样的。
还可以使用letter-spacing属性，其与word-spacing的区别在于，letter-spacing修改的是字符或字母之间的间隔。
还有许多与文本有关的属性，请读者自行查阅资料。
3．字体
字体属性描述如表1-1所示。
表1-1 字体属性说明
4．列表
CSS列表属性允许放置、改变列表项标志，或者将图像作为列表项标志。列表属性描述如表1-2所示。
表1-2 列表属性说明
5．表格
CSS表格属性可以改善表格的外观，属性说明如表1-3所示。
表1-3 表格属性说明
1.2.6 CSS框模型
CSS框模型（Box Model）规定了元素框处理元素内容、内边距、边框和外边距的方式。CSS框模型示意图如图1-8所示。
图1-8
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置。Border、margin、padding都有对应的top、right、bottom、left。除此之外，border还可以设置style和color。
内边距padding的说明如表1-4所示。
表1-4 内边距
关于外边距的属性说明如表1-5所示。
表1-5 外边距
