Head First HTML和CSS(一)

Web语言

  • HTML和CSS是我们用来创建网页的语言。

  • Web服务器存储并提供由HTML和CSS创建的网页，浏览器获取页面，并根据HTML和CSS显示网页的内容

    • HTML是超文本标记语言(HyperText Markup Language)的缩写，用来建立网页的结构。
    • CSS是层叠样式表(Cascading Style Sheets)的缩写，用来控制HTML的表现。

  • 通过HTML，我们利用标记来标示内容提供结构。我们把匹配标记以及它们包围的内容称为HTML元素。元素由3部分组成：一个开始标记、内容和一个结束标记。不过有些元素(如)有所例外。

    • 开始标记可以有属性，比如我们已经见过的一个属性：type
    • 结束标记在左尖括号后面、标记名前面有一个"/"，以明确这是结束标记。

  • 所有页面都要有一个<html>元素，其中要有一个<head>元素和一个<body>元素。

    • <head>元素包含Web页面的有关信息，如页面标题
    • <body>元素里的内容就是你将在浏览器看到的东西

  • 元素可以有"属性"，这是什么意思？

    • 利用属性(Attributes)，可以指定一个元素的附加信息。比方说如果有一个style元素，属性type允许你准确地指定是什么类型的样式。

  • 为什么必须指定<style type="text/css">作为style元素的一个属性，难道还有其他类型的样式吗？

    • 以前的HTML设计者认为以后还会有其他样式，不过现如今完全可以只使用<style>而不带类型属性(默认就是text/css)，所有浏览器都知道你指的是CSS。

  • 大多数空白符(制表符、回车、空格)都会被浏览器忽略，不过可以利用空白符让你的HTML更有可读性。

  • 可以在<style>元素中写CSS规则，为HTML网页增加CSS。<style>元素总要在<head>元素里。

  • 可以使用CSS在HTML中指定元素的特性。好的设计和布局对页面的可读性和可用性会有极大的帮助。

深入了解超文本

  • 想从一个页面链接到另一个页面时，要使用<a>元素。

    • <a>元素的href属性指定了链接的目标文件，href的含义是hypertextreference。
    • <a>元素的内容是链接的标签。这个标签就是你在网页上看到链接文本。默认的这个标签会有下划线，指示这是可以单击的。文字或者图像都可以作为链接的标签。

  • 属性的写法都是一样的：首先是属性名，后面是一个等于号，然后是双引号括起来的属性值。

    • 最佳实践：<a href="top10.html">Great Movies</a>

  • 单击一个链接时，浏览器会加载href属性中指定的Web页面

    • 可以链接到相同文件夹中的文件，也可以链接到其他文件夹中的文件

  • 相对路径是相对于链接的"源Web页面"，指向网站中其他文件的一个链接。就像地图上，终点总是相对于起点。

    • 使用".."可以链接到源文件上一层文件夹中的一个文件。
    • 指向一个图像的路径不正确时，会在Web页面上看到一个损坏的图像。
    • 所有OS在HTML的路径中，都使用通用分隔符"/"，即使OS本身使用了不同的文件分隔符。

  • 为网站选择的文件名和文件夹名不要使用空格。

构建模块

  • 开始输入内容之前要规划好Web页面的结构，首先画出草图，然后创建略图，最后再写出HTML

    • 规划页面时，首先设计大的块元素，然后用内联元素完善。
    • 要尽可能使用元素来告诉浏览器你的内容的含义，一定要使用与内容含义最接近的元素。例如需要一个列表，就不要使用段落元素。

  • 块元素和内联元素

    • <p>、<blockquote>、<ol>、<ul>和<li>都是块元素(block)。它们单独显示，在内容前后分别有一个换行(默认)，常常作为Web页面中的主要构建模块。
    • <q>和<em>都是内联元素(inline)，这些元素的内容与其包含元素的其余内容放在一起，用来标记小段内容。
    • 需要插入你自己的换行时，可以使用<br>元素。

  • <br>是一个"void"元素

    • void元素没有内容，没有结束标记
    • 在XHTML中，<br>被写作<br/>

  • 空元素没有内容，不过它有开始和结束标记。

  • 嵌套元素是指完全包含在另一个元素中的元素，如果元素能正确地嵌套，所有标记都能正确匹配

  • 要结合两个元素建立一个HTML列表：使用<ol>和<li>建立有序列表，使用<ul>和<li>可以建立一个无序列表。

    • 浏览器显示一个有序列表时，它会为列表创建序号。
    • 可以在列表中建立嵌套列表，将<ol>或<ul>元素放在<li>元素中。

  • 要对HTML内容中的特殊字符使用字符实体(character entity)。

    • 一般以&开始以;结尾，比如大于符号&gt;、小于符号&lt;和&符号&amp;
    • 在HTML中可以使用编号，比如&#100，也可以使用实体名，作用是一致的

连接起来

  • 如何选择托管商

    • 技术支持，这家公司有没有一个好的系统来处理你的技术问题
    • 数据传输，这是指托管公司允许你再一定时间内向访问者发送的页面和数据量
    • 备份，这家公司是否会定期对你的页面和数据做备份
    • 可靠性，大多数公司都声称保证99%以上的可用性

  • 绝对路径有什么意义？

    • 绝对路径：在协议(HTTP)和网站名(由服务器名和域名组成)之后的最后一部分
    • 协议部分告诉浏览器用何种方式获取资源，网站名部分告诉浏览器要从互联网上的哪台计算机获取资源，最后的绝对路径告诉服务器我们要找哪个页面。服务器需要绝对路径来找到你请求的文件。
    • 单击一个相对链接是，在后台浏览器会根据这个相对链接和所单击页面的路径创建一个绝对路径。所以所有Web服务器看到的都是绝对路径，这归功于浏览器。

  • 服务器收到不同请求时：

    • http://www.abc.com/，收到类似的请求时，会尝试查找这个目录(此处为根目录)中的一个默认文件。通常为index.html或者default.htm
    • http://www.abc.com，如果收到这样一个末尾没有/的请求，而且这个目录确实存在，服务器就会帮你加上末尾的斜线，它会把这个请求变为http://www.abc.com/
    • "index.html"和"default.htm"都是默认页面，如果指定一个目录而没有指定文件名，则Web服务器会查找一个默认页面返回给浏览器。

  • <a>元素的href属性中可以使用相对路径或URL来链接其他Web页面。

    • 对于同一网站的其他页面最好使用相对路径，对外部链接才用于URL
    • URL很长，不容易编辑，也影响HTML文件的可读性；如果移动这个网站或者改变它的名字时，就必须修改所有这些URL来反映新的网站位置。

  • 超链接指南：

    • 保证链接标签的整洁，不要把整个句子或大段文字放在链接里。一般来说，保证只有几个单词，可以再title属性中提供额外的信息。
    • 保证链接标签是有意义的，避免使用类似"单击这里"、"这一页"之类的链接标签
    • 不要把链接放在一起，用户将很难区分放在一起的链接。

  • 可以用id属性在页面中创建一个目标。使用#后面加一个目标id，可以链接到页面中的那个位置。

    • id的属性值必须以字母开头，后面可以是任意字母、数字、横线、下划线、冒号或者顿号，不允许有空格。

  • 为了方便访问，可以在<a>元素中使用title属性提供链接的一个描述

    • <a href="top10.html" title="This is a movie list">Great Movies</a>

  • 使用target属性在另一个浏览器窗口中打开链接。

    • 如果使用"_blank"作为目标，浏览器总是打开一个新窗口显示页面。

为你的页面增加图像

  • 浏览器对<img>元素的处理和其他HTML元素稍有不同。读取HTML页面之后，浏览器会从Web服务器获取各个图像并显示。

  • 如果在HTML中提供了width和height，浏览器在显示图像之前就可以建立页面布局。

  • 像素数与屏幕上图像的大小有关系吗？

    • 一般经验是96像素/英寸，现在的显示器分辨率更高，所以还可以更高。
    • 我们习惯使用标准的72像素/英寸(ppi)，不过为了应对现代显示器，又创造了CSS像素的概念。
    • 1英寸的1/96为一个CSS像素(96ppi)，所以对于一个3x3(英寸)的图像，要使用96(像素)x3(英寸)=288，共288x288个像素。

  • Photoshop的Matte(蒙版)允许你指定要文本背景的颜色，所以柔化文本时，会根据这个颜色来柔化。

  • <img>元素是一个内联元素，这说明浏览器不会在图像前后插入一个换行。

  • <img>元素的alt属性是对图像的一个有意义的描述，如果无法找到图像，则会取而代之显示alt属性。

  • PNG有3种不同的大小选择：PNG-32、PNG-24、PNG-8，可以根据需要来选择。

  • 要由图像创建一个链接，可以使用<img>元素作为<a>元素的内容，将链接放在<a>元素的href属性中。

标准及其他

  • 万维网协会(World Wide Consortium，W3C)是定义HTML标准的标准组织。

    • HTML的结构和表现分解到两种语言，一种语言用于实现结构(HTML)，一种语言用于表现(CSS)。

  • 文档类型定义(doctype)用来告诉浏览器你使用的HTML版本

    • HTML5的doctype：<!doctype html>

  • HTML5是当前的HTML标准，它现在是一个"活的标准"，说明这个标准会不断改变，加入新的特性和更新。

    • 如果规范对你之前的工作有改变，比如说改变了一个元素或属性的工作方式，那么浏览器会继续支持你使用的老方式，同时支持新方式。
    • HTML5中提供了一些新元素和属性；它有很多新特性，允许Web开发人员用HTML5构建Web应用；HTML5规范比HTML以前的版本健壮得多。

  • <head>元素中的<meta>标记告诉浏览器关于一个Web页面的额外信息，如内容类型和字符编码

    • meta标记的charset属性告诉浏览器Web页面使用的字符编码。大多数Web页面的HTML文件都使用utf-8编码，另外<meta>标记的charset属性值通常也是utf-8。

      • HTML5：<meta charset="utf-8">
      • 更早版本：<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  • alt属性是<img>元素中的必要属性。

    • 图片无法显示时，alt属性会帮你显示所指定的alt文本，来取代图像。
    • 对于有视力障碍的用户，他们的屏幕阅读器可以为用户读出alt文本。

  • 编写合法HTML页面的通用做法

    • 一定要以<doctype>开头
    • 不能没有<html>
    • 使用<head>和<body>
    • 在<head>元素中放置<title>、<meta>和<style>元素
    • 当心元素的嵌套，比如不允许在<img>等void元素中嵌套其他内联元素

 

posted @ 2017-04-17 10:28  又是火星人  阅读(408)  评论(0)  编辑  收藏  举报