第3章网页的基石——HTML与CSS基础_Java Web 从入门到项目实践(超值版)-QQ阅读男生中文都市网

上QQ阅读APP看书，第一时间看更新

第3章　网页的基石——HTML与CSS基础

学习指引

HTML也叫作超文本标记语言，它是网页设计的基础，也是网站开发者必须熟练掌握的一门标记语言。本章将讲解HTML的基础知识。

重点导读

•　掌握HTML文档的基本结构。

•　了解HTML的常见元素。

•　了解CSS语法。

3.1　HTML简介

前端即网站前台部分，指运行在PC端、移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML 5、CSS 3、前端框架的应用，跨平台响应式网页设计已经能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

HTML是前端开发人员的必备技能，也是所有程序开发人员都常用到的工具。HTML是指超文本标记语言（Hyper Text Markup Language），是标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分和“主体”部分，其中，“头”部分提供关于网页的信息，“主体”部分提供网页的具体内容。

3.1.1　HTML元素和属性

1. HTML元素

HTML元素指从开始标签到结束标签的所有代码，如表3-1所示。

表3-1　HTML元素实例

2. HTML元素语法

（1）HTML元素通常以开始标签起始，以结束标签终止。

（2）元素的内容是开始标签与结束标签之间的内容。

（3）有些HTML元素具有空内容，空元素在标签中关闭（以开始标签的结束而结束）。

（4）大多数HTML元素可设置属性。

3. 嵌套HTML元素

大多数HTML元素可以嵌套其他HTML元素。

HTML文档由嵌套的HTML元素构成。

HTML文档实例：

上面这段HTML代码包含三个嵌套的HTML元素，分别如下。

1）<p>元素

     <p>Hello World！</p>

这个<p>元素定义了HTML文档中的一个段落。

这个元素拥有一个开始标签<p>，以及一个结束标签</p>。

元素内容是：Hello World！。

2）<body>元素

<body>元素定义了HTML文档的主体。

这个元素拥有一个开始标签<body>，以及一个结束标签</body>。

元素内容是另一个HTML元素（<p>元素）。

3）<html>元素

     <html>
     <body>
     <p> Hello World！</p>
     </body>
     </html>

<html>元素定义了整个HTML文档。

这个元素拥有一个开始标签<html>，以及一个结束标签</html>。

元素内容是另一个HTML元素（<body>元素）。

3.1.2　HTML样式

样式是HTML 4引入的，它是一种新的首选的改变HTML元素样式的方式。通过HTML样式，能够通过使用style属性直接将样式添加到HTML元素，或者间接地在独立的样式表中（CSS文件）进行定义。

【例3-1】HTML样式实例–字体样式。

运行结果：style样式中指定了font-family、color、font-size三种样式，运行结果如图3-1所示。

图3-1　HTML样式实例–字体样式

【例3-2】HTML样式实例–背景颜色。

运行结果：style样式实例分别为<body>、<h2>、<p>指定了background-color样式，设置其背景颜色依次为：灰色、红色、黄色，运行结果如图3-2所示。

图3-2　HTML样式实例–背景颜色

【例3-3】HTML样式实例–文本对齐。

运行结果：style样式分别为<h1>、<p>指定了text-align样式，设置其文本对齐方式均为居中对齐，运行结果如图3-3所示。

图3-3　HTML样式实例–文本对齐

3.1.3　超链接

HTML使用超链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。单击链接可以从一个页面跳转到另一个页面。

超链接可以是一个字，一个词，或者一组词，也可以是一张图片，单击这些内容可以跳转到新的文档或者当前文档中的某个部分。

可以使用<a>标签在HTML中创建超链接，使用<a>标签的方式有以下两种。

（1）通过使用href属性创建指向另一个文档的链接。

（2）通过使用name属性创建文档内的书签。

超链接的HTML代码很简单，通常以如下方式创建超链接。

     <a href="url">超链接文本</a>

href属性规定链接的目标，开始标签和结束标签之间的文字被作为超级链接来显示。

【例3-4】超链接实例。

运行结果如图3-4所示，单击Hello World！即可进入超链接指向的页面。

图3-4　超链接实例

3.1.4　图像标签

在HTML中，图像由<img>标签定义。

<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，需要使用源属性（src）。

src即source。源属性的值是图像的URL地址。

定义图像的语法是：

     <img src="url" />

URL指存储图像的位置，可以是相对位置，也可以是绝对位置。

浏览器将图像显示在文档中图像标签出现的地方。如果将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

     替换文本属性（alt）

alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

     <img src="url" alt="text">

在浏览器无法载入图像时，替换文本属性可以告诉读者丢失的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是一个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

【例3-5】图像标签实例。

运行结果如图3-5所示。

图3-5　图像标签实例

3.1.5　HTML表格

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

【例3-6】表格实例。

运行结果：在浏览器中的显示如图3-6所示。

图3-6　表格实例

1. 边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

2. 表格的表头

表格的表头使用<th>标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本。

【例3-7】表头实例。

运行结果：在浏览器中的显示如图3-7所示。

图3-7　表头实例

3.1.6　HTML头部元素

1. HTML <head>元素

<head>元素是所有头部元素的容器。<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，以及提供元信息等。

以下标签都可以添加到head部分：<title>、<base>、<link>、<meta>、<script>、<style>。

2. HTML <title>元素

<title>标签定义文档的标题。

title元素能够定义浏览器工具栏中的标题，提供页面被添加到收藏夹时显示的标题，显示在搜索引擎结果中的页面标题。

一个简化的HTML文档如下。

3. HTML <base>元素

<base>标签为页面上的所有链接规定默认地址或默认目标（target）。

4. HTML <link>元素

5. HTML <style>元素

6. HTML <meta>元素

元数据（metadata）是关于数据的信息。

典型的情况是，meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词），或其他Web服务。

一些搜索引擎会利用meta元素的name和content属性来索引页面。

下面的meta元素定义页面的描述。

     <meta name="description" content="百度一下，你就知道" />

下面的meta元素定义页面的关键词。

     <meta name="keywords" content="HTML, CSS " />

name和content属性的作用是描述页面的内容。

7. HTML <script>元素

3.1.7　表单

在HTML中表单用于收集用户输入信息。

<form>元素定义HTML表单：

     <form>
     表单元素
     </form>

表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等。

<input>元素是最重要的表单元素。

<input>元素有很多形态，可以根据不同的type属性改变。

<input>元素的常用类型如表3-2所示。

表3-2　<input>元素的常用类型

【例3-8】input元素常用类型实例。

<input type="text">定义用于文本输入的单行输入字段。

运行结果：实例中用到text、radio、submit、reset类型，运行结果如图3-8所示。

图3-8　input元素常用类型实例

1. action属性

action属性定义在提交表单时执行的动作，通常表单会被提交到Web服务器上的网页。

例如：<form action="action_page.jsp">

如果省略action属性，则action会被设置为当前页面。

2. method属性

method属性规定在提交表单时所用的HTTP方法（GET或POST）。

     <form action="action_page.jsp" method="GET">

或：

     <form action="action_page.jsp" method="POST">

1）GET方法（默认方法）

使用GET方法时，表单数据在页面地址栏中是可见的。

     action_page.jsp?name=Name&tel=Tel

GET最适合少量数据的提交。浏览器会设定容量限制。

2）POST方法

如果表单正在更新数据，或者包含敏感信息（例如密码），POST的安全性更佳，因为在页面地址栏中被提交的数据是不可见的。

3. name属性

要正确地提交数据，每个输入字段必须设置一个name属性。

如以下代码只会提交姓名字段。

4. form属性

HTML <form>元素，若设置所有可能的属性，是这样的：

     <form action="action_page.jsp" method="GET" target="_blank" accept-charset="UTF-8"
     ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
     表单元素
     </form>

<form>的属性及描述如表3-3所示。

表3-3　<form>的属性及描述

3.1.8　HTML事件

本节以表格形式列出HTML常用事件，但不做演示，读者可自行学习。

1. Window事件属性

针对Window对象触发的事件（应用到<body>标签），如表3-4所示。

表3-4　Window事件属性

2. Form事件

由HTML表单内的动作触发的事件（应用到几乎所有HTML元素，但最常用在form元素中），如表3-5所示。

表3-5　Form事件属性

3. Mouse事件

由鼠标或类似用户动作触发的事件，如表3-6所示。

表3-6　Mouse事件属性

4. Keyboard事件

由键盘或类似用户动作触发的事件，如表3-7所示。

表3-7　Keyboard事件属性

3.2　CSS简介

层叠样式表（Cascading Style Sheets，CSS）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

在CSS还没有引入到页面设计之前，传统的HTML要实现页面美化在设计上是十分麻烦的，例如要设计页面中文字的样式，如果使用传统的HTML语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS的出现改变了这一传统模式。

3.2.1　CSS语法

CSS语法由两个主要的部分构成：选择器，以及一条或多条声明。例如：

     selector {declaration1; declaration2;…;declarationN }

所有HTML中的标记都是通过不同的CSS选择器进行控制的。

每条声明由一个属性和一个值组成。

属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值，属性和值之间用冒号分开。

     selector {property: value}

例如：

其中，background是属性，red是background属性的一个值。

3.2.2　CSS选择器

常用的CSS选择器有标签选择器，类选择器，id选择器等。使用选择器可以对不同的HTML元素进行样式控制，实现样式效果。

1. 标签选择器

最常见的CSS选择器是标签选择器，文档的元素就是最基本的选择器。如果设置HTML的样式，选择器通常是某个HTML标签，如p、h1、em、a，甚至可以是html本身。

例如：

2. 类选择器

标签选择器在使用中非常简捷，但是会有一定的局限性，如果声明了标签选择器，页面中所有该标签都会应用该样式。假如页面中有三个<span>标签，如果想让每个显示效果都不一样，使用标签选择器就无法实现了。

类选择器允许以一种独立于文档元素的方式来指定样式。类选择器的名称由用户自己定义，以“.”开头，在HTML页面中使用自己定义的class属性声明即可。

只有适当地使用class属性标记文档后，才能使用类选择器，所以使用这两种选择器通常需要先做一些构想和计划。

例如：

以下是<body>中<span>标签的定义方法：

     <span class="one">一</span>
     <span class="two">二</span>
     <span class="three">三</span>

3. id选择器

id选择器通过HTML元素的id属性来选择增添样式，与类选择器使用方法类似。但是HTML页面中不能包含两个相同的id标记，因此定义的id选择器只能被使用一次。

id选择器以“#”号开始，在HTML页面中使用自己定义的id属性声明即可。

例如：

以下是<body>中<span>标签的定义方法。

     <span class=" span_text " id=" one">一</span>
     <span class=" span_text " id=" two">二</span>
     <span class=" span_text " id= " three ">三</span>

3.3　综合案例

利用本章学习的HTML与CSS基础知识，以及简单的JavaScript语句，完成对输入信息的收集与展示。

【例3-9】HTML基础综合案例。

运行结果如图3-9和图3-10所示。

图3-9　页面显示效果

图3-10　提交信息后页面弹出对话框

3.4　就业面试解析与技巧

本章所讲的都是HTML与CSS基础知识，在前端开发的就业面试中，这些是远远不够的，读者还需要更深入地学习掌握JavaScript、jQuery等知识。

3.4.1　面试解析与技巧（一）

面试官：行内元素有哪些？块级元素有哪些？空元素有哪些？

应聘者：

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea。

块级元素：div、ul、li、dl、dt、dd、p、h1~h6、blockquote。

空元素：即没有内容的HTML元素，例如，br、meta、hr、link、input、img。

3.4.2　面试解析与技巧（二）

面试官：简述src与href的区别。

应聘者：

href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如，JS脚本，图片和框架等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将JS脚本放在底部而不是头部的原因。