文章

Head First HTML与CSS(第二版)学习笔记(HTML相关)

发表于
作者 17 分钟阅读

开始学习HTML和CSS，以这本书为敲门砖，主要总结一些比较重点的知识，有必要的代码会敲一遍，在文章的源码中可以体现出来

认识HTML

好吧，本来总结了挺多，没想到书里的章节末尾已经总结的比较详细了，而且关于这里确实没有太需要解释的地方，这里直接采用读一边书，然后摘抄一遍书里总结的内容的方式来加深印象

  • HTML和CSS是我们用来创建网页的语言
  • Web服务器存储并提供由HTML和CSS创建的网页，浏览器获取页面，并根据HTML和CSS显示网页的内容
  • HTML是超文本标记语言(HyperText Markup Language)的缩写，用来简历网页的结构
  • CSS是叠层样式表(Cascading Style)的缩写，用来控制HTML的表现
  • 通过HTML，我们利用标记来标记内容提供结构。我们把匹配标记以及它们包围的内容称为元素
  • 元素由3部分组成：一个开始标记，内容和一个技结束标记。不过有些元素(比如<img>)有所例外
  • 开始标记可以有属性，我们已经见过一个属性：type
  • 结束标记在左尖括号后面，标记名前面有一个/，以明确这是结束标记
  • 所有页面都要有一个<html>元素，其中要有一个<head>元素和一个<body>元素
  • 网页的信息放在<head>元素里
  • <body>元素里的内容就是你将在浏览器里看到的东西
  • 大多数空白符(制表符、回车、空格)都会被浏览器忽略，不过可以利用空白符让你的HTML(对你)更有可读性
  • 可以在<style>元素中写CSS规则，为HTML网页增加CSS。<style>元素总要放在<head>元素里
  • 可以使用CSS在HTML中指定元素的特性

认识HTML中的”HT”

  • 想从一个页面链接到另一个页面时，要使用<a>元素
  • <a>元素的href属性指定了链接的目标文件
  • <a>元素的内容是链接的标签，这个标签就是你在网页上看到的链接文本，默认地，这个标签会有下划线，只是这里是可以单击的
  • 文字或图像都可以用作链接的标签
  • 单击一个链接时，浏览器会加载href属性中指定的Web页面
  • 可以链接到相同文件中的文件，也可以链接到其他文件夹中的文件
  • 相对路径是相对于子链接的源Web页面指向网站中其他文件的一个链接。就像在地图上一样，终点总是相对于起点。
  • 使用”..”可以链接到源文件上一层文件夹中的一个文件
  • ..表示”父文件夹”
  • 记住要用/(斜线)字符分隔路径中的各个部分
  • 指向一个图像的路径不正确时，会在Web页面上看到一个损坏的图像
  • 为网站选择的文件名和文件夹名中不要使用空格
  • 最好在构建网站初期组织网站文件，这样就不用在网站升级时候修改一大堆的路径了
  • 组织网站有很多种方法，具体如何组织由你决定

例子： 这是一个通往百度的链接

Web页面建设

  • 开始输入内容之前要规划好Web页面的结构，首先画出一个草图，然后创建一个略图，最后再写出HTML
  • 规划页面时，首先设计大的块元素，然后再用内联元素完善
  • 记住，要尽可能使用元素来告诉浏览器你的内容的含义
  • 一定要使用与内容含义最接近的元素，例如，如果需要一个列表，就不要使用段落元素
  • <p>、<blockquote>、<ol>、<ul>和<li>都是块元素。它们单独显示，在内容前后分别一个换行(默认地)
  • <q>和<em>是内嵌元素，这些元素中的内容与其包含元素的其余内容放在一起
  • 需要插入你自己的换行时，可以使用<br>元素
  • <br>是一个”void”元素
  • void元素没有内容
  • void元素只有一个标记组成
  • “空”元素没有内容，不过它由开始和结束标记
  • 嵌套元素是指完全包含在另一个元素中的元素。如果元素能正确地嵌套，所有标记都能正确匹配
  • 要结合两个元素建立一个HTML列表，使用<ol>和<li>建立有序列表，使用<ul>和<li>可以建立一个无序列表
  • 浏览器显示一个有序列表时，它会为列表创建序号，所以无需你费心
  • 可以在列表中建立嵌套列表，将<ol>或<ul>元素放在<li>元素中
  • 要对HTML内容中的特殊字符使用字符实体

例子：

这是一个引用块

这是一个段落，是一个块元素；这是一个内嵌元素；这是一个内嵌的引用

有序列表

  1. 第一项
  2. 第二项
  3. 第三项

无序列表

  • 第一项
  • 第二项
  • 第三项

Web镇之旅

  • 要把网站发布到Web上，可以找一家托管公司来托管你的Web页面
  • 域名是一个唯一的名字，如amazon.com或starbuzzcoffee.com，用来唯一标识网站
  • 托管公司可能会为你的域创建一个或多尔Web服务器。服务器通常命名为”www”
  • 文件传输协议(File Transfer Protocol，FTP)是向服务器传输web页面和内容的常用方法
  • FTP应用提供了一个图形界面，使FTP的使用更为容易
  • URL是统一资源定位符或Web地址，可以用来标识Web上的任何资源
  • 典型的URL由一个协议，一个网站名和资源的一个绝对地址组成
  • HTTP是一个请求和响应协议，用来在Web服务器和浏览器之间传送Web页面
  • 浏览器使用file协议从你的计算机读取页面
  • 绝对路径是从根文件夹到一个文件的路径
  • “index.html”和”default.htm”都是默认页面。如果指定一个目录而没有指定文件名，则Web服务器会朝朝一个默认界面返回到浏览器
  • <a>元素的href属性中可以使用相对路径或URL来链接其他Web页面。对于你的网站中的其他页面，最好使用相对路径，对外部链接才使用URL
  • 可以用id属性在页面中创建一个目标。使用#后面加一个目标id，可以链接到页面中的那个位置
  • 为了便于访问，可以在<a>元素中使用title属性提供链接的一个描述
  • 使用target属性在另一个浏览器窗口中打开链接。不要忘了，对于使用各种不同设备和浏览器的用户，target属性可能会有问题

例子：

回到文章开头

查看标签列表

认识媒体

  • 使用<img>元素在Web页面中放置图像。
  • 浏览器对<img>元素的处理与其他HTML元素稍有不同。读取HTML页面之后，浏览器会从Web服务器获取各个图像并显示。
  • 如果Web页面上有多个大图像，则可以通过创建图像的缩略图使你的Web页面更可用，下载也更快，缩略图是一些小图像（大图像的缩小版本），用户单击这些缩略图时可以看到原来的大图像。
  • <img>元素是一个内联元素，这说明浏览器不会在图像前后插入一个换行。
  • 要利用src属性指定图像文件的位置。可以在src属性中使用相对路径包含你自己的网站中的图像，或者可以使用URL包含其他网站的图像。
  • <img>元素的alt属性是对图像的一个有意义的描述。在一些浏览器中，如果无法找到图像，就会显示这个描述，另外屏幕阅读器会使用这个属性为有视力障碍的人描述图像。
  • 图像宽度要小于800像素，这是Web页面中关于照片大小的一个好经验。数码相机拍摄的大多数照片都太大，不能很好地放在Web页面中，所以需要调整它们的大小。
  • 有很多照片编辑应用，Photoshop Elementsis就是其中之一，可以用来调整图像的大小。还可以使用很多免费的联机工具调整图像大小。可以在网上搜索“free online image editor”（免费联机图像编辑器）。
  • 对于浏览器来说太大的图像会使Web页面很难使用，而且下载和显示都很慢。
  • JPEG、PNG和GIF是Web浏览器广泛支持的3种图像格式。
  • JPEG格式最适合保存照片和其他复杂图像。
  • GIF或PNG格式最适合保存logo和其他包含单色、线条或文本的简单图形。
  • JPEG图像可以按不同质量压缩，所以可以很好地权衡图像质量和文件大小，来满足你的需要。
  • GIF和PNG图像格式允许建立一个有透明背景的图像。如果把一个有透明背景的图像放在一个Web页面中，图像后面的东西（如页面的背景色）就会透过图像的透明部分显示出来。
  • GIF和PNG是无损格式，这说明相比于JPEG文件，这些格式的文件往往更大。
  • PNG可以提供比GIF更好的透明度控制，而且不像GIF只支持256种颜色，PNG可以支持更多颜色。
  • PNG有3种不同的大小选择：PNG-24（支持数百万种颜色）、PNG-16（支持数千种颜色），以及PNG-8（支持256种颜色），可以根据需要来选择。
  • 在Photoshop Elements中，使用“Save for Web”（保存为Web格式）对话框中的Matte（蒙版）颜色菜单来选择合适的颜色，柔化PNG或GIF图像的边缘。
  • 图像可以用作指向其他Web页面的链接。要由图像创建一个链接，可以使用<img>元素作为<a>元素的内容，将链接放在<a>元素的href属性中。

例子：

可以在新窗口中打开这张图片

这张图片没有啦

严肃的HTML

  • HTML5是当前的HTML标准。
  • 万维网协会（World Wide Web Consortium，W3C）是定义HTML标准的标准组织。
  • 文档类型定义（doctype）用来告诉浏览器你使用的HTML版本。
  • HTML标准现在是一个“活的标准”，这说明这个标准会不断改变，加入新的特性和更新。
  • <head>元素中的<meta>标记告诉浏览器关于一个Web页面的额外信息，如内容类型和字符编码。
  • <meta>标记的charset属性告诉浏览器Web页面使用的字符编码。
  • 大多数Web页面的HTML文件都使用utf-8编码，另外<meta>标记的charset属性值通常也是utf-8。
  • alt属性是<img>元素中的必要属性。
  • W3C验证工具是一个免费的在线服务，可以检查页面是否符合标准。http://validator.w3.org/
  • 可以使用这个验证工具确保你的HTML合法，而且元素和属性符合标准。
  • 如果遵循标准，则你的页面会更快地显示，而且在不同浏览器中显示时差异会更小，CSS也能更好的工作。
前端知识
HTML CSS
本文由作者按照 CC BY 4.0 进行授权