HTML Head First学习笔记

在掌赢科技实习期间，组内有每周的头脑风暴环节。所谓的头脑风暴，就是大家每周在会议室开个小会，然后讲解说一下自己有什么好的想法，能够为团队的效率提升作出贡献。因为我们的BUG单都是提交到mantis上面，而每一个版本的迭代都是要求BUG解决率的，当BUG解决率达到80%以上时，且没有严重以及加急BUG时，才允许发布。由于我们看BUG解决率只能在服务器的一个php网页上查看，而开发团队那边拥有一个自己的进度网页，是之前他们自己设计的。我们团队也想这样来设计一个属于我们测试团队的网页 ,通过在开发部门的电视投影上能够让所有路过的员工看到我们组和Android和iOS的进度。因此我们提出了这个倡议。leader同意了我们来做这个东西。之后我们就开始学习HTML+CSS了，其中也包括与后台服务器连接的PHP。虽然这个需求内容不是太复杂，但是通过这个小项目也让我学习到了一些关于前端和PHP的知识。以下是HTML的学习笔记内容。

元素=开始标记+内容+结束标记
CSS是层叠样式表(Cascading Style Sheets)
list item == li 放在列表每一行的前后
ol == ordered list有序列表，ul == unordered list无序列表，将整个列表包围起来
有序列表是有序号，无序列表只是列出来
ol和li要一起使用
q是一个内敛元素，在行内出现，表示引用，blockquote是一个块元素，可以表示引用一块内容，前后各有一个换行
code用来显示计算机程序代码
br表示换行
&放在前面，后面有对应的编码然后会对应每一个特殊字符
测试服务器会根据端口来区分，一般都是使用80，而一些测试服务器则会使用8000等，比如http://www.mydomain.com:8000/index.html
定义了id以后，就可以使用#来定位到这个id，比如

<a href="index.html#chai">See Char Tea</a>  

a元素后面可以加一个target=”_blank”表示在新窗口中打开超链接
img元素是一个内敛元素，它不会在之前或之后插入换行
alt属性可以指定描述图像的一类文本，当图片加载失败时，会读出alt文本来代替图像
width和height也是图片的属性，但是即使设置了width和height，浏览器也会先下载完整图像
photoshop elements可以方便对图片进行编辑，例如save for web等操作
HTML5在文档最开头加一句： html不会再有新的版本，具有向后兼容性
W3C验证工具：http://validator.w3.org/ ——验证html格式是否有错误
要为WEB页面指定一个Unicode，需要在HTML中增加一个meta标记，这样写：该标记放到head元素中
html元素，不能没有它，必须在最上面标定它
只有head和body元素可以放在html元素中，所以所有其他元素都必须放在head和或者body元素中
一定要在head中加一个title元素，只能在head元素中放置title、meta和style元素
w3c是万维网协会的简称 world wide web consortium
alt属性在img元素中的必要属性
CSS Pocket Reference是一本不错的小书，可以方便查询CSS样式
要为HTML增加CSS样式，需要在head元素中增加开始和结束style标记
p{
color: maroon:
}//指定为茶红色颜色
可以同时为多个元素增加样式，只需要在两个选择器之间增加一个逗号比如h1,h2{}
可以单独创建css文件，里面不需要在增加style元素等，该文件中只使用css
使用link元素链接到css文件，举例：link type=”text/css” rel=”stylesheet” href=”lounge.css”
把元素增加到一个类中，可以单独为p元素中的内容分配样式，比如p class=”greentea”
在css中写的时候可以写一个p.greentea{}
如果只写.greentea{}，则会应用到所有定义过这个类的地方，所有使用这个类的元素都会变成相同的样式
元素可以加入多个类，比如p class=”greentea raspberry blueberry”
font-size, font-family, color, font-weight, text-decoration（下划线或者划掉之类）
font-family内可以设置多个字体，在写的时候要注意大小写要与字体名完全一致，这样在浏览器没有第一个字体时，可以转换到第二个字体去进行设置
一个字体中如果包含多个单词，就用双引号把它们括起来
google的字体托管服务是免费的，可以把字体放在上面为web上的用户提供字体woff字体 web open font format web开放字体格式
网上有一些在线字体服务，可以将自己的字体放到其他网站的服务器上，比如wickedlysmart.com网站
font-size使用px为单位调整字体大小
指定字体大小的一种方式：body:small h1 150% h2 120%
/#cc6600是256*256*256色，其中cc表示红中的比例，66表示绿中的比例，00表示蓝中的比例
line-height指定文本中各行之间的垂直间距量
盒模型，利用CSS设计盒模型可以达到很好的效果
利用margin属性可以为内容周围增加XXpx的外边距
利用background-image属性可以为元素增加一个背景图片，background-repeat: no-repeat，background-position: top left
要用id来选择一个段落，就要在id前面使用一个#字符
当使用多个样式表时，最下面的样式表优先，因为它在HTML中最后链接
可以在link中添加一个media类型，这样每个样式就可以指定在不同的设备上运行，比如media = “screen and (max-device-width:480px)” 屏幕宽度不超过480像素
当需要在平板电脑或者手机上设置css样式时，只需要link中设置不同的media属性就可以，根据每个设备的max-device-width进行设置即可

用<div>为网页区分不同的块，可以在每个块中指定它的id，根据它的id为它指定样式
div结构也可以进行嵌套，比如动物中包含猫
width的属性只指定内容区的宽度
利用CSS选择子孙元素，可以利用div h2{} 其中div表示父元素，h2表示div的子孙元素，也可以为div指定一个id，然后利用他的id说明，#id h2{}，可以直接指定他的某个孩子甚至更深的孩子

<pan class="cd"></span>

然后利用.cd {}
a:link{} a:visited{}该选择器适用于已访问的链接 a:hover{}悬停在一个链接上时会应用这个选择器
section、article、aside、nav、header、footer是一些可以帮助建立界面结构的新元素
section用于相关的内容分组
article用于类似博客帖子、论坛帖子和新闻报道等独立的内容
time元素用来标记时间和日期
video是一个新的HMTL元素，用于页面增加视频
表格ex.

<table>
     <tr>
          <th></th>
     </tr>
     <tr>
     </tr>
</table>

使用caption元素提供关于表格的额外信息
使用CSS nth-child伪类可以为表格隔行增加背景颜色
要让数据单元格需要跨多行或多列，可以使用td元素的rowspan或colspan属性

form表单：

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST"></form>

不仅包含构成表单的所有元素，还会告诉浏览器当你提交表单时要把表单数据发送到哪里，脚本的URL放到form元素的action中

First name: <input type="text" name="firstname" value=" ">  

<input type="submit">

还有单选按钮输入：

<input type="radio" name="XXX" value="hot">

复选框输入：type=”checkbox”
select元素提供一个菜单控件，

<select name="characters">
     <option value="">XX</option>
     ...
</select>

另外还有数字输入、范围输入、颜色输入等，number、range、color、data、email、tel、url等
一行的文本使用text，如果多行文本，使用textarea
POST打包表单变量，在后台把它们发送到服务器，GET也会打包表单变量，会把这些数据追加到URL的最后，然后向服务器发送一个请求
type还可以选择password、file文件输入等
input中有一个属性是placeholder是默认填的内容，输入自己的内容后，把原来的覆盖
required属性表示这个域必须有一个值，表单才能正常提交

其中基础知识的学习还使用了

<p>这是一个段落。</p>  

HTML 链接：

<a href="http://www.runoob.com">这是一个链接</a>  
HTML 图像：<img src="w3cschool.png" width="104" height="142">

起始标签（opening tag），闭合标签（closing tag）

<br/>
HTML链接由<a>标签定义，链接的地址在href属性中指定。

<a href="http://www.runoob.com">这是一个链接</a>

推荐使用小写属性
标题：
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
h后面的数字表示字号大小不同，越大越小，浏览器会自动的在标题前后添加空行
hr 元素可用于分隔内容 <hr>

<!-- 这是一个注释 -->

元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为:
<title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
+ 内联样式- 在HTML元素中使用”style” 属性
+ 内部样式表- 在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
+ 外部引用- 使用外部 CSS 文件

<img src="url" />, URL指存储图像的位置。如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<img src="boat.gif" alt="Big Boat">
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
大多数 HTML 元素被定义为块级元素或内联元素。编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：

<h1>, <p>, <ul>, <table>  

内联元素在显示时通常不会以新行开始。例子：

<b>, <td>, <a>, <img>  

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
HTML 表单用于搜集不同类型的用户输入。
<iframe src="URL"></iframe> 用于显示内敛框架
字符实体前面加&
scheme://host.domain:port/path/filename
解释：
+ scheme - 定义因特网服务的类型。最常见的类型是 http
+ host - 定义域主机（http 的默认主机是 www）
+ domain - 定义因特网域名，比如 w3school.com.cn
+ :port - 定义主机上的端口号（http 的默认端口号是 80）
+ path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）
+ filename - 定义文档/资源的名称