HeadFirst HTML&CSS
CH1 认识HTML
- HTML和CSS是我们用来创建网页的语言：
HTML是超文本标记语言（HyperText Markup Language）的缩写，用来建立网页的结构；
CSS是层叠样式表（Cascading Style Sheet）的缩写，用来控制HTML的表现。 - Web服务器存储并提供由HTML和CSS创建的网页。浏览器获取页面，并根据HTML和CSS显示网页的内容。
- 所有页面都要有一个<html>元素，其中要有一个<head>元素和一个<body>元素：
网页的信息放在<head>元素里；<body>元素里的内容就是你将在浏览器里看到的东西。 - 可以在<style>元素中写CSS规则，为HTML网页增加CSS。<style>元素总要放在<head>元素里。
可以在<style>中添加type属性；可以使用CSS在HTML中指定元素的特性。<style type="text/css">
body{
background-color:#d2b48c;
margin-left:20%;
margin-right:20%;
border:2px dotted black;
padding:10px 10px 10px 10px;
font-family:sans-serif;
}
</style>
CH2 深入了解超文本
- 相对路径是相对于链接的源Web页面指向网站中其他文件的一个链接。
使用“..”可以链接到源文件上一层文件夹中的一个文件。<a href ="../../../beverages/elixir.html" >
elixir
</a> - 为网站选择的文件名和文件夹名中不要使用空格！
- ★★★☆☆最好在构建网站初期组织网站文件，这样就不用在网站升级时修改一大堆的路径了:)
CH3 构建模块
- 开始输入内容之前要规划好Web页面的结构。规划页面时，首先设计大的块（block）元素，然后用内联（inline）元素完善。
！记住！要尽可能使用元素来高速浏览器你的内容的含义。一定要使用与内容含义最接近的元素。 - 块（block）元素与内联（inline）元素：块元素通常用作Web页面中的主要构建模块，而内联元素往往用来标记小段内容。
！<a>既可以是内联元素，也可以是块元素；<br>是块元素和内联元素之间的一个模糊地段。 - 要对HTML内容中的特殊字符使用字符实体。较常用的特殊字符主要有：
“<”字符的缩写为“<”（lt，less-than）；
“>”字符的缩写为“>”（gt，greater-than）；
“&”字符的缩写为“&”（amp，ampersand）；
……
（实体名与实体编号等价，更多实体清单可在w3school网站上搜索） - <q>元素与<blockquote>元素：<q>元素是内联元素，用于短引用；<blockquote>元素是块元素，用于长引用。
- HTML列表构建。
<!--有序列表
ol = ordered list
li = list item -->
<ol>
<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Truth or Consequences, NM</li>
<li>Why, AZ</li>
</ol> <!--无序列表
ul = unordered list
li = list item -->
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>and a protein bar</li>
</ul> <!--自定义列表
dl = defined list
dt = defined title
dd = defined data -->
<dl>
<dt>BSS</dt>
<dd>road signs common in the ...</dd>
<dt>2df</dt>
<dd>Ðετröìτ</dd>
</dl> - 本章提及的其他元素：
<code>元素：显示计算机程序代码；
<em>元素：标记想用不同方式展示的文本；
<time>元素：告诉浏览器这个内容是一个日期或时间，或者同事包含日期和时间；
<strong>元素：标记你希望特别强调的文本；
<pre>元素：希望浏览器按你输入的方式原样显示文本时；
……
CH4 连接起来
- ！！！域名≠网站名！！！
域名（domain）是一个唯一的名字，用来唯一标识网站。
例如，“www.headfirst.com”是一个网站名，其中“headfirst.com”是域名，“www”是域中的一个特定服务器的名字。
so，还可以创建使用相同域名的其他网站，比如“corporate.headfirst.com”、“book.headfirst.com”、“OReilly.headfirst.com”等。 - FTP（文件传输协议，File transfer protocol）是向服务器传输web页面和内容的常用方法。
- URL（Uniform Resource Locators，统一资源定位符）【或web地址】，可以用来标识web上的任何资源。
典型的URL由一个协议、一个网站名和资源的一个绝对地址组成。- 协议：通常包括HTTP协议、file协议、FTP协议、mail协议等。
HTTP（HyperText Transfer Protocol，超文本传输协议）是一个请求和响应协议，用来在web服务器和浏览器之间传送web页面；
浏览器使用file协议从本地计算机读取页面。！file协议的URL有3个斜线：file:///document/index.html（可以理解为，如果删去一个HTTP URL中的网站名，那么也会有3个斜线。） - 绝对路径是从根文件夹到一个文件的路径。根文件夹通常用网站名后的第一个“/”表示。
如果指定一个目录而没有没有制定文件名，则web服务器会查找一个默认页面（index.html或default.htm）返回到浏览器。
总的说来，利用URL，可以请求浏览器从Web获取一个页面（或者其他类型的资源）。协议部分告诉浏览器应当使用什么方法来获取资源；网站部分（由服务器名和域名组成）告诉浏览器要从互联网上的哪个计算机获取资源。最后绝对路径会告诉服务器我们要找哪个页面。
- 协议：通常包括HTTP协议、file协议、FTP协议、mail协议等。
- 绝对路径与相对路径：相对路径只用来链接同一网站内的页面，而URL通常用来链接其他网站。
- 关于<a>元素的一些属性：
id：可以用id属性在页面中创建一个目标，使用#后面加一个目标id，可以链接到页面中的那个位置；
target：使用target属性在另一个浏览器窗口中打开链接。but！对于使用各种不同设备和浏览器的用户，target属性可能会有问题，要适当使用，不要过度使用。Read the<a href="http://wickedlysmart.com/buzz/index.html#Coffee"
title="阅读buzz网站" target="_blank">Caffeine Buzz</a>tips：
1.保证链接标签很简洁。不要把整个句子或大段文字放在链接里。一般来讲，要保证只有几个单词。可以在title属性中提供额外的信息对链接进行描述（通常建议title属性值与所链接的web页面的<title>元素值相同）。
2.保证链接标签是有意义的。不要使用类似“单击这里”或“这一页”之类的链接标签。用户往往会首先粗略扫一眼页面，看看有没有链接，然后才会通读页面。所以，通过提供有意义的链接，可以改善页面的可用性。测试方法：只读页面上的链接，能理解吗？是否需要读链接周围的文字。
3.不要把链接放在一起，用户将很难区分放在一起的链接。
CH5 为你的页面增加图像
HeadFirst HTML&CSS的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 前端project师的修真秘籍（css、javascript和其他）
以我的经验,大部分技术,熟读下列四类书籍就可以. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列 全面,巨细无遗地探讨每一个细节,遇到疑难问题时往往能够在这里得到理论解答,如 ...
- 前端工程师的修真秘籍（css、javascript和其它）
以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列 全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如De ...
- Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么（转）
Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
随机推荐
- 【Codeforces 484A】Bits
[链接] 我是链接,点我呀:) [题意] 让你求出l~r当中二进制表示1的个数最多的数x [题解] 最多有64位 我们可以从l开始一直增大到r 怎么增大? 找到l的二进制表示当中0所在的位置 假设i这 ...
- Leetcode 93.复制IP地址
复制IP地址 给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255.11.135& ...
- noip模拟赛 都市
分析:是一道非常有意思的题,30分的暴力的话枚举每个位置是什么数,然后排个序,用map判一下重就好了,比较麻烦. 满分做法显然不可能讨论每个位置所有的情况,肯定是有规律的,现将这n*(n-1)/2个数 ...
- uestc 1904
#include<stdio.h> #define N 1010 int min[N]; int main() { int t,n,p,ti,first,end,num,i,j,max, ...
- 在JQuery中$(document.body)和这个$("body") 这两的区别在哪里？
两种写法代表的是同一个对象 $("body") 是一个选择器,jQuery 会从 DOM 顶端开始搜索,直到找到标签为 body 的元素. 而 $(document.body) 中 ...
- 分块试水--CODEVS5037 线段树练习4加强版
感觉这才算入门题吧..前面那些线段树练习,改几个字符就过了一定要搞成几道题.. n<=2e5的数列,给常数K<=2e5,m<=2e5个操作,区间加,问一个区间里K的倍数. 这题空间? ...
- spring项目启动需要的几个注解
1.@ComponentScan注解,spring context包下,可以理解嘛,扫描srping bean放在ioc容器中的. ApplicationContext是接口,就是IOC容器嘛,也在这 ...
- Workflow：添加工作流存储功能
数据库准备: 1. 创建database(这里我们用的是MSSQL.Workflow支持其它数据库,但是MSSQL是配置最方便,不要问我为什么!). 2. 运行位于[%WINDIR%\Microsof ...
- Eclipse改动Project的文件夹位置
Eclipse打开时会要求指定一个workspace, 在这个workspace中能够创建多个相关的或无关的Project, 这些Project的文件夹位置信息存储在: <path to wor ...
- Mongo性能测试-python脚本
单线程 500+w条数据,插入时间:1小时,13分钟. 脚本: [root@10 hurl]# cat insert-mongo2.py #!/usr/bin/env python #coding=u ...