Head First HTML与CSS（1）

1、认识HTML和CSS

HTML: HyperText Makeup Language
CSS: cascading Style Sheet

Web浏览器工作原理：点击链接来访问某个页面，点击促使浏览器向web服务器发送请求，服务器收到请求后，会查找请求的资源，再把找到的资源传递给浏览器
元素=开始标记+内容+结束标记（有部分特殊标记如br，img，em没有结束标记，空标签）

2、元素认识

超文本链接元素< a>

超文本链接元素< a>
使用< a>元素创建一个超文本链接，链接到另一个web页面。< a>元素的内容会成为web页面中可单击的文本，href属性告诉浏览器链接的目标文件。

<a href="new_page.html">页面显示内容，点击跳转到链接new_page页面</a>

< a>元素有target属性，当target=_blank时，点击链接会在一个新的空窗口打开，不写默认覆盖原窗口

属性

href="new_page.html"称为元素的属性，一个给定元素只能使用某些特点的属性。属性用来定制一个元素，提供元素的附加信息。

路径

当前路径 ./ （一个点）
上级路径 …/ （两个点）

< html>、< head>、< title>、< body>这几个标签在写HTML时必不可少

引用元素< q>、< blockquote>

< q>是一个内联元素，适合一句话这种短引用，< blockquote>是块级元素，前后自动换行，适合诗歌等段引用

换行元素< br>

< br>没有实际内容，只是一个换行，只有开始标记，没有结束标记，没有内容的元素叫void元素。

有序列表< ol>、无序列表< ul>、自定义列表< dl>

< ol>ordered list、< ul>unordered list和< li>list item标签配套使用，中间不能加其他元素
< dl>defined list,自定义列表，里面有定义术语< dt>和定义描述< dd>

< img>图像元素

示例 < img src="…/images/green,jpg">

不同浏览器可能无法显示页面图像，因此建议提供候选格式或设置 alt属性 提醒。

技巧：当图片比较大时，建议先进行压缩变成缩略图。后面将缩略图链接到大图片，当用户对某个缩略图感兴趣时，点击即可跳转到大图。
方式：将< img>元素放到< a>元素中，img变成了< a>元素的内容

3、网站网址

http：HyperText Transfer Protocol 超文本传输协议

4、HTML标准化

html5为html的最终版本，具有向后兼容性

1、HTML5 doctype 增加文档类型定义
< !doctype html> 必须位于文档内容首行，用途在于让浏览器明确知道你在使用HTML5
2、增加一个< meta>指定字符编码
< meta charset=“uft-8”>

技巧：w3c验证工具
网址：http://validator.w3.org，可以检查编写的HTML是否符合标准