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元素后面可以加一个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{}，可以直接指定他的某个孩子甚至更深的孩子

然后利用.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表单：

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

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

<input type="submit">
           

还有单选按钮输入：

复选框输入：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属性表示这个域必须有一个值，表单才能正常提交

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

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属性中指定。

推荐使用小写属性

标题：

<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。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：

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

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 - 定义文档/资源的名称