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元素中嵌套其他内联元素

Head First HTML和CSS(一)的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. Mac 10.12安装SecureCRT

    下载: (链接: https://pan.baidu.com/s/1eSNBoFC 密码: sztc) 安装参考: http://www.cnblogs.com/EasonJim/p/7568734. ...

  2. dotnet core webapi +vue 搭建前后端完全分离web架构(一)

    架构 服务端采用 dotnet core  webapi 前端采用: Vue + router +elementUI+axios 问题 使用前后端完全分离的架构,首先遇到的问题肯定是跨域访问.前后端可 ...

  3. Java网络编程基础之TCP粘包拆包

    TCP是个"流"协议,所谓流,就是没有界限的一串数据.大家可以想象河里的流水,他们是连成一片的,其间并没有分界线.TCP底层并不了解上层业务数据的具体含义,他会根据TCP缓冲区的实 ...

  4. Window.localStorage

    博客园 https://www.cnblogs.com/st-leslie/p/5617130.html 参考文档 https://developer.mozilla.org/zh-CN/docs/W ...

  5. 关于JNI调用从eclipse转到Android Studio遇到的问题（总结）

    将一个小应用从eclipse开发迁移到android studio,程序中有native代码实现,在eclipse是靠Android.mk这么个mk文件来组织编译的,但到android studio上 ...

  6. 如何调用npm已经安装在全局位置的模块

    参考链接  https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders npm install xxx -g ...

  7. Unix/Linux文件类型及访问权限

    在Linux系统中,有7种文件类型. 普通文件 (regular file) 目录文件 (directory) 链接文件 (symbolic link) 管道文件 (FIFO) 套接字文件 (sock ...

  8. PTA (Advanced Level) 1012 The Best Rank

    The Best Rank To evaluate the performance of our first year CS majored students, we consider their g ...

  9. Oracle 12c pdb自动启动

    PDB Pluggable Database是12c中扛鼎的一个新特性, 但是对于CDB中的PDB,默认启动CDB时不会将所有的PDB带起来,这样我们就需要手动alter pluggable data ...

  10. GBK 编码

    GBK编码范围:8140-FEFE,汉字编码范围见第二节:码位分配及顺序. GBK编码,是对GB2312编码的扩展,因此完全兼容GB2312-80标准.GBK编码依然采用双字节编码方案,其编码范围:8 ...