标记、元素、链接、路径
01.HTML和CSS是用来创建网页的语言。
02.Web服务器存储并提供由HTML和CSS创建的网页。浏览器接收网页并基于HTML和CSS 显示其中的内容。
03.HTML是超文本标记语言(HyperText Markup Language)的缩写,用来结构化网页。
04.CSS是级联样式表(Cascading Style Sheet)的缩写,用来控制HTML的外观。
05.我们使用HTML来标记内容,用标记提供结构。我们称匹配标记和他们之间的内容为元素。
06.一个元素由以下三个部分组成:一个开始标记、内容和一个结束标记。有些元素是例外<img>。
07.开始标记可以拥有属性。我们看过一对了:type和align。
08.结束标记的左尖括号之后,标记名之前有一个“/”,用来区别于开始标记。
09.网页通常应该有一个<html>元素,并伴随有一个<head>元素和一个<body>元素。
10.网页的信息来源于<head>元素。
11.写进<body>元素的内容就是在浏览器中所能看见的东西。
12.浏览器忽略大多数的空白(制表符、回车、空格),但是可以用他们让你的HTML更具有可读性。
13.通过在<style>元素中输入CSS规则,给HTML网页添加CSS。<style>元素通常嵌在<head>元素中。
14.在HTML中用CSS指定每个元素的样式特性。
一直以来,对元素、属性的概念都比较模糊,因为从来没有从基础着手仔细的区分过。
在head first中,作者提到:属性是用来指定元素的附件信息的,由属性名、等号和双引号括起来的属性值组成。而元素,是由开始标记、内容和结束标记一起组成。
属性示例:
<style type="text/css">/*type属性指定使用的样式语言种类,此例中是css*/ <a href="index.html">/*href属性指定超文本链接的目的地为:index.html*/ <img src="bg.gif">/*src属性指定img标记显示的图片文件*/
元素示例:
<car make="bmw" model="mini cooper" convertible="no">my red mini</car> 假设这是一个元素,元素的内容给出的信息只是“my red mini” 其中的make model convertible对“my red mini”进行了属性的描述 告知用户my red mini的一些特性
那么元素的属性是否也是任意的呢?答案是否定的。
我们知道世间万物都有属于他自己并且有意义的特性,所以在HTML的元素中,属性也是特定的,属性用于个性化元素。只有某些属性才能运用到特定的元素中。
链接路径与图片路径:
edit
要点:
01.当你需要从一个网页链接到另一个网页时,使用<a>元素。
02.<a>元素中的href属性说明了链接的目的地。
03.<a>元素中的内容是链接的标签。标签显示在网页上。默认情况下,他会加下划线来说明是可以单击的。
04.链接的标签可以是文字也可以是图像。
05.当你点击链接时,浏览器装载href中指定的网页。
06.可以链接相同文件夹下的文件,也可以是不同文件夹下的。
07.相对路径是指向网站中的其他文件的链接,跟链接的源文件有关。就像地图一样,与终点和起点有关。
08.使用“..”来链接父目录中的文件。
09.".."代表父目录。
10.记得用“/”(斜杠)符号分隔路径的各个部分。
11.当图片的路径有误时,你会在网页上看到损坏的图像。
12.网站中的文件名或文件夹名中不能出现空格。
13.最好在构建的早期组织好你的网站,这样当网站升级时就不用更改一堆路径了。
14.组织网站的方法有很多,怎么做取决于你。
短引用<q>元素与块引用<blockquote>元素:
<blockquote>元素是块(block)元素,而<q>元素是内联(inline)元素;块元素前后都有换行符,而内联元素总是在网页中随着文字流出现在“行内”。
{h、p、blockquote都属于块元素,他们都独立显示,并且前后都有换行;q、em、a等元素都属于内联元素,只显示在段落的文字流中。即块元素特立独行,内联元素随波逐流。}
<q>用于段落中少量文字引用;<blockquote>用于引用一段或更多文字的情况。
每引用一段文字,都需要用一个<blockquote>包围;
在引用过程中,<q>可以放在<blockquote>中使用,但是<blockquote>放在<q>里面,没有任何意义;
空元素<br>
元素分为一般元素与空元素。
<br>元素是一个没有任何内容的元素,用于文本换行。
当一个元素没有任何内容的时候,通常使用缩写形式:<开始标记>,这样不仅减少了HTML标记的数量,并且使页面内容更简洁。
列表元素<li><ol><ul>
li:list item;
ol:order list;
ul:unorder list
列表是一组项目,使用过程中,<li>需要与<ol>/<ul>一起使用;<li>元素用来确定每个项目,<ol>则把他们组成一组。
同时<ol>元素与<ul>元素只是为了配合<li>元素工作的,所以在<ol>元素与<ul>元素中不能再添加其他文字或元素。当然,在<li>元素中,还可以再添加<ol>/<ul>元素。
<a>元素中的链接指南
a.让链接标签简短些。不要用整个句子或者大段文字来做链接标签。通常来说,几个词就可以。在title属性内添加附加信息。
b.注意链接标签要有提示性。不要使用像“click here” “this page”这样无意义的标签。用户会先尝试从网页中寻找链接,然后再浏览网页。所以,提供有意义的链接会提高网页的可用性。
c.避免把链接紧挨在一起。链接靠太近,用户不易区分。
<a>元素的两个特性:
01.跳跃性。从一个页面跳跃到另一个页面。
<a href="mission.html" title="Read more about Starbuzz Coffee's important Mission" target="_blank">
<a>元素从当前页面跳转至mission.html页面,并提示该页面内容:Read more about Starbuzz Coffee's important Mission。
02.可以在页面中设置登陆点,或链接的目的地。
<a>元素常见目的地:
a.找到网页中需要创建登陆点的地方(它可以是文本中的任意位置,不过通常是文章标题的一部分);
b.用<a>元素把文本包围起来;
c.选择登陆点的标识名,并在<a>元素中插入id属性。
为了定位跳转能正常执行,href属性和目标瞄ID中的大小写要保持一致。
!something
章节要点:
通常将网页发布到网上的最佳途径是找一家主机代理商;
域名是一个独一无二的名字,用来标识网站;
主机代理商可以为你的域创建一个或者多个Web服务器,服务器名字通常是“www” ;
FTP(File Transfer Protocol,文件传输协议)是一种把网页和内容传送到服务器上的常用方法;
FTP应用程序,为FTP提供图形用户界面,使其更加简便(Mac:Fetch/Windows:WS_FTP);
URL(Uniform Resource Locator,统一资源定位符),也叫网址,用户标识网络上的资源;
通常URL由一个协议、一个网站名和到资源的绝对路径组成;
HTTP是一种用于在Web服务器和浏览器之间传送网页的请求/响应协议;
浏览器用文件协议从你的电脑中读取网页;
绝对路径是从根目录到文件的路径;
“index.html”和“default.html”都是默认页面,如果只指定了目录而没有文件名,Web服务器会寻找默认页面返回给浏览器;
在<a>元素的href属性中一般使用相对路径,对外部链接时可以使用URL;
使用ID属性在页面中创建目标瞄,链接+#+目标瞄ID,可以链接到页面的特定位置;
<a>元素的title属性可以对元素进行描述,提高可读性;
使用target属性可以实现在新窗口打开链接,但需注意兼容。
<img>
WEB中常用图像格式为jpg和gif两种。
JPEG | GIF |
可在连续调次图像(复制品中有中间层次,如照片)中获得最好效果; 可用1600万种不同的颜色显示图像; 是一种“有损”格式,因为文件缩小时会丢失部分图像信息; 不支持透明。 |
纯色图像、logo和几何图形使用 对于几种纯色或线条组成的图像和含有小段文字的图像,使用GIF比较合适; 用256种颜色显示图像; GIF同样会压缩文件来减小尺寸,但是不会丢失任何东西,是中“无损格式”; 支持透明。 |