读书笔记：HTML &CSS设计与构建网站

HTML部分：
1.在同一个网页由当前位置跳转到指定位置，实现：在指定位置的标签设置id(或者设置name)，再在当前位置的链接的href属性设置为”#id”(或者”#name”);如果是跳转到其他页面指定位置,则将当前的href属性设置为”文件名#id”（或者”地址/#id”);

2.如何设置表格表头不随浏览器滚动条滚动；如何在输入框前面加入图标；
如何组合表单元素控制外边框的长度和高度；如何更新搜索框的默认值；

3如何设置鼠标滑动到当前位置，出现下（上）拉菜单，左右菜单；

4.服务器/web服务器/客户端/服务端
（1）服务器（server）：管理资源并且为用户提供服务。
（2）web服务器：通过网络提供服务；
（3）服务端：是相对于客户端（Client）软件而言的，是指能够开放网络端口，
接收其他的客户端软件建立连接，并且通过此链接与客户端软件交换数据的软件，
例如向客户端提供资源，保存客户端数据。
（4）服务端，端是软件的意思，是提供客户端功能的管理器权限；
服务器，器是机器的意思，或者是与机器相同的环境。
服务器，是供服务端运行的环境和基础。
（5）客户端：与服务端对应，为客户提供本地服务；除了一些只在本地运行的应用程
序之外，一般安装在普通的客户机上，需要与服务端互相配合运行。

5.网络访问机制
通过（internet）互联网服务提供商（ISP）连接到网络->在浏览器输入域名或者网址来访问->计算机连接到域名系统(DNS)的服务器网络，将域名转换为IP地址（12位）给计算机->DNS服务器返回的IP地址能让浏览器连接到托管你所访问的网络web服务器->web服务器将请求的页面发送到你的web浏览器中。
6.

  （1）<blockquote></blockquote> :标记长的引用的内容
  （2）<q> </q>:标记短的引用内容；建议放在段落p标签中；
  （3）<cite></cite>:标记引用的作品；
  （4）<address>   </address>：标记一系列地址信息；
  （5）定义列表：<dl>
                      <dt>词1</dt>
                         <dd>解释1</dd>
                      <dt>词2</dt>
             <dd>解释2</dd>
                 </dl>
  ```

  （6）email链接：<a href="mailto:email地址">     </a>

（7）图形和图形说明

     <figure>
        <img src="" alt="" title="">
        <figcaption>
                 图像说明，一般放在p标签内
         </figcaption>
        </figure>

7.绝对URL/相对URL

8.主页（index.html）：web服务器通常会这样设置，如果未指定文件名会自动回到index.html页面
9.图库（www.istockphoto.com;
www.gettyimages.com;
www.veer.com;
www.sxc.hu;
ww.fotolia.com ）
10.图片属性 alt:无法查看图片时的说明；
title:鼠标悬停在图片时的说明；
11.表格
标题：
表头： 可用属性scope=”row”/”col”指定是行标题还是列标题
表格要分为三部分：thead,tbody,tfoot;
12.表单如何工作/表单结构
(1)表单控件包括：单行文本框（text）;密码框（password）;文本域（<textarea></textarea>）;按钮（button,submit,reset,）;图片按钮（image）;上传文件(file)；单选框（radio）；复选框（checkbox）；单选(多选)下拉列表（<select> </select>(multiple属性：多选；selected属性:默认选中；size属性:显示的选项数量)）；隐藏控件（hidden）:向表单添加用户不能看到的值（eg:网页设计人员可以使用一个隐藏字段来指出用户在提交表单时位于哪个页面）；日期控件（type=”date”）;电子邮件控件（type=”email”）；URL输入控件（type=”url”）；搜索输入控件
（type=”search”placeholder=”搜索输入框的默认值”）；
(2)表单结构：<from action="" method="post" id="">
action属性：其值是服务器上一个页面的URL，这个页面用来在用户提交表单时接收表单中的信息；
method属性：
（默认）get值（是将表单的内容附加在action所指定URL末尾，适用于：短表单
（eg:搜索框），只从web服务器上检索数据的情形（不发送那些要在数据库中添加或
删除的数据））；
post值(表单中的值被放在HTTP头信息中进行发送，适用于：允许用户上传文件；
非常长；包含敏感信息（例如密码等）；向数据库添加或者删除信息)
(3)表单如何工作：
a.用户填写表单;
b.单击按钮将内容（每一个表单控件的名称和用户输入或者选择的值）
提交 到服务器;
c.服务器利用编程语言（Java，C#，php）对信息进行处理；
d.服务器给于收到的信息创建一个新的页面并将其返回到浏览器；

（4）表单中的控件
（text,password,textarea,radio,checkbox,select）

当用户向表单中输入信息时，服务器需要知道每条数据被输入到
哪个表单控件（eg:在登录时，服务器需要知道哪条数据是作为用户名输入的，哪条数
据是提供密码，因此每一个表单控件都需要一个name特性，它对应的值对表单进行标识
并同输入的信息一同传到服务器）。
（5）文件（视频，MP3，PDF）上传域：如果允许用户上传文件，必须将<form>标签中的method特性值设为post; <button></button>标签：允许其他元素出现在<button>元素内（eg:按钮设置
为图标+文字形式）标签表单控件<label><label>：用此标签将其他表格控件的文字说明和控件
放在一起，提高代码的可读性和简洁度；
（6）组合表单元素：将一个表单相关的控件放在<fieldset>标签中，组合分类。

<fieldset>
              <legend>Contact details</legend>
    <label>
        age:<input type="text" name="text">
    </label>
        </fieldset>

13.html中id属性（可用于设置CSS样式和Javascript对特定元素处理），class属
（可用于设置CSS样式）
14.内联框架<iframe>：用在网页上分割窗口；其他页面可以通过这些窗口显示。
属性：src(显示页面的URL);height;width;scrolling（滚动条,html4）:yes,no,auto;
frameboder(框架边框html4); seamless(html5,不出现滚动条，无属性值);
15.页面信息<meta>:用户不可见，用途：把页面的相关信息告诉搜索引擎，指出页面的设计者，已经页面是否存在时间敏感性（如果存在，可以设置它的过期时间）。
属性:
name(属性):description(用于包含一段有关页面的描述信息);keywords(关键字列表)；
robots(用于指定搜索引擎是否可以将这个页面加入到它们的搜索结果中，如果不加入content设为：noindex;如果加入但该页面上链接的其他页面不加入content设为：nofollow)
http-equiv(属性)：author（网页设计者）；pragma(no-cache用于防止浏览器对页面的缓存（缓存是指将页面保存到本地，以后访问该页面时就可以节省页面加载时间）);expires(由于浏览器经常缓存页面内容，expires选项可以用来指定页面的过期时间以及缓存时间);
content（给name和http-equiv特性的属性添加属性值）；
16.向网站中添加视频的方法：
（1）将视频上传到YouTube或Vimeo这样的站点上，借助这些站点提供的功能将视频嵌入到网页中；优点：不用付费，自动转换为浏览器所支持的格式；缺点：如果想要视频只在自己的网站中出现（不能在其他网站中观看），需要在自己的服务器上提供视频服务并在页面中插入自己的播放器，站点会限制内容：例如有广告的不能上传，限制视频质量；
（2）添加flash视频：a.将视频转换为.flv格式；b.找一个可以播放此视频的flv播放器； c.在网页中插入播放器；
（3）html5的<video>标签：并非所有浏览器都支持相同的视频格式（H264：IE，Safari;WebM:Android,Chrome,Firefox,Opera）
的属性：src(视频的路径);poster(在播放前显示的图片路径);width,height；controls(浏览器需要提供默认的播放控件)autoplay(自动播放);loop(循环播放);
preload(告诉浏览器在页面加载时需要做什么)：none(用户按下播放按钮之前，浏览器不必加载);auto(页面加载时载入视频);metadata(浏览器只需收集少量视频信息，比如大小，图片，播放列表和持续时间);

<!DOCTYPE html>
<html>
    <head>
        <title>Adding HTML5 Video</title>
    </head>
    <body>
        <video src="video/puppy.mp4" 
            poster="images/puppy.jpg" 
            width="400" height="300" 
            preload
            controls
            loop>
            <p>A video of a puppy playing in the snow</p>
        </video>
    </body>
</html>

15网页中添加多个视频源
可用单标签<source>来代替<video>中的src属性
<source>属性：src(视频的路径);type(‘video/mp4’视频的格式,单引号);codecs(编码器);

<!DOCTYPE html>
<html>
    <head>
    <title>Multiple Video Sources</title>
    </head>
    <body>
<video poster="images/puppy.jpg" width="400" height="320"                 
 preload controls loop>
    <source src="video/puppy.mp4"type='video/mp4;
    codecs="avc1.42E01E,    mp4a.40.2"' />
    <source src="video/puppy.webm"   
    type='video/webm;codecs="vp8,vorbis"' />
 <p>A video of a puppy playing in the snow</p>
                       </video>
        </body>
</html>

17.向网站中添加音频的方法：
（1）（托管服务）将音频上传到网站（eg:SoundCloud.com/Myspace.com）;
（2）使用flash；
（3）html5的<audio>标签;
<audio>的属性：src(音频的路径);controls(浏览器需要提供默认的播放控件)；autoplay(自动播放);loop(循环播放);preload(告诉浏览器在页面加载时需要做什么)：none(用户按下播放按钮之前，浏览器不必加载);auto(页面加载时载入视频);metadata(浏览器只需收集少量视频信息，比如大小，图片，播放列表和持续时间);
18网页中添加多个音频源
可用单标签<source>来代替<audio>中的src属性
<source>属性：src(视频的路径);