HTML/CSS

HTLM

HTML—超文本标记语言(Hypertext Markup Language)并不是真正的的程序语言，是一种标记语言 ，用来结构化和含义化想要放在web网站上的那些内容。它由一系列的元素（elements）所组成，这些元素可以用来封装你的内容中担任不同工作的各部分和各个角色。闭合标签（ tags）可以使得一个文字或者一张图片连接到其他网址，可以使得文字为斜体，可让文字变大或者变小等等。

Exp 想要比较正式的去指明 My cat is very grumpy 这句话是一个段落，可以将其封装成为一个段落paragraph元素：

Exp 元素可以有Attribute属性

属性（Attribute）包含了关于元素的一些额外的信息，这些信息本身并不需要被显现在内容（Content）中。在这个例子中，class 是一个属性名称（name），editor-note 是属性的值(value).class。属性允许你为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。

一个属性应该包含：

在属性与元素名称或上一个属性（如果有超过一个属性的话）之间的空格符
属性的名称，并接上一个等号
由引号所包围的属性值

可以将一个元素置于其他元素之中——这被称作嵌套

Exp 如果想表明 cat 非常非常的暴躁，可以将 “非常” 用<strong>元素包裹，这意味着这个单词将被特别强调:

1 <p>My cat is <strong>very</strong> grumpy.</p>

Exp有一些元素并不包含内容，它们被称为空元素。比如 HTML 代码中的 <img> 标签：

1 <img src="images/firefox-icon.png" alt="My test image">

这个元素包含了两个属性，但是这里并没有 </img> 的闭合标签，而且没有任何内容。这个因为一个 image 标签不包含任何有效的内容，它的作用是向其所在的位置嵌入一个图像。src (source) 属性包含图像文件路径。alt (alternative) 属性描述图片的内容

Exp 标题元素允许指定内容的标题和子标题。就像一本书拥有主标题，然后每一章还有标题，然后还有更小的标题，HTML 包括六个级别的标题。

1 <h1>My main title</h1>
2 <h2>My top level heading</h2>

Web上的很多内容都是列表，所以 HTML 有列表元素。要标记列表通常包括至少两个元素。最常用的列表类型是有序列表（ ordered lists）和无序列表（ unordered lists）：

无序列表 中项目的顺序并不重要，就像购物列表。这些内容被包括在一个 <ul> 元素里。
有序列表 中项目的顺序很重要，就像一个食谱。这些内容被包括在一个 <ol> 元素里。

列表内的每个项目被包括在一个 <li> (list item)元素里。

Exp 把下面的段落碎片改成一个列表：

1 <p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

1 <p>At Mozilla, we’re a global community of</p>
2     
3 <ul> 
4   <li>technologists</li>
5   <li>thinkers</li>
6   <li>builders</li>
7 </ul>
8 
9 <p>working together ... </p>

Exp 链接让 Web 成为了 WEB（万维网）。要植入一个链接，需要使用 <a> — "anchor" （锚）的缩写。要将一些文本添加到链接中，只需如下几步：

将文本包含在 <a> 元素内，比如 Mozilla Manifest
赋予 <a> 元素一个 href 属性
把你想要链接的网址放到 href 属性内：

1 <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

一个完整的HTML页面：

 1 <!DOCTYPE html>          //文档类型说明（doctypes）
 2 <html>          // <html> 元素. 这个元素包含了整个页面的内容，有时也被称作根元素。
 3   <head>          //<head> 元素包含了所有和该页面相关的信息，但是不会被用户所看到。这里面包括像想被搜索引擎搜索到的关键字                                                                     （keywords）和页面描述，CSS样式表和字符编码声明等等。
 4     <meta charset="utf-8">          //这个元素指定了你的文档需要使用的字符编码
 5     <title>My test page</title> //<title>元素设置了页面的标题，显示在浏览器标签页上，而且将网页添加到收藏夹或喜爱中时将作                                                                                                        为默认名称。
 6     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>  //设置字体                                                                                                          颜色和风格
 7   </head>
 8   <body>            //<body> 元素包含了你想被用户看到的内容，不管是文本，图像，视频，游戏，可播放的音轨或是其他内容。        
 9     <h1>Mozilla is cool</h1>          //标题元素
10     <img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">
11                    //设置图片路径和描述
12     <p>At Mozilla, we’re a global community of</p>         //分段
13     
14     <ul> <!-- changed to list in the tutorial -->         //列表
15       <li>technologists</li>
16       <li>thinkers</li>
17       <li>builders</li>
18     </ul>
19 
20     <p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>             //分段
21 
22     <p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn even more about the values and principles that guide the pursuit of our mission.</p>    //分段、链接
23   </body>
24 </html>

打开页面：

CSS

CSS（层叠样式表）也不是真正的编程语言，是样式表语言，允许有选择性地为 HTML 文档的元素添加样式。

Exp 选择所有的 p 元素阿然后将它们的文本改成红色

1 1 p {
2 2   color: red;
3 3 }                                    
4 //
5 1.将这三行 CSS 代码粘贴到文本编辑器里的新文件中，然后保存文件名为  style.css ，保存到 styles 文件夹内
6 2.将 CSS 文件引用到 HTML 文档内: 打开 index.html 文件，然后将下面一行粘贴到头部<head>和</head>间
7   <link href="styles/style.css" rel="stylesheet" type="text/css">

选择符（Selector）：HTML 元素放在规则最开始。它选择了一个或多个需要添加样式的元素。

声明（Declaration）一个单独的规则比如 color: red; 这指定了你想要添加样式元素的属性。

属性（Properties）这是你改变 HTML 元素样式的方法。（在这个例子中 color 就是 p 元素的属性。）在 CSS 中，你通过选择合适的属性来改变的规则。

属性值（Property value）选择属性的一个值。

Exp 同时修改多个属性：

1 p {
2   color: red;
3    500px;
4   border: 1px solid black;
5 }

Exp 选择多个元素：

1 p,li,h1 {
2   color: red;
3 }

Exp 拥有许多不同类型的选择符。上面只有元素选择符，用来选择 HTML 文档中给定的元素。但是可以选择更加具体的类型：

举例

盒模型

在写 CSS 时会发现大部分都是关于盒模型的——设置它们的尺寸，颜色，位置等等。大部分 HTML 元素都可以被看作一个一个层叠的盒子。

CSS 布局就是基于盒模型的。每个占据页面空间的块级元素都有相似的属性：

内边距（padding）, 围绕着内容的空间（比如围绕段落的空间）
边框（border）, 紧接着内边距的实体线段
外边距(margin), 围绕元素外部的空间

在这一部分用：

width (属于一个元素的)
background-color, 元素内容和内边距之后的颜色
color, 元素内容的颜色（通常是文本）
text-shadow: 为元素内的文本设置阴影
display: 设置元素的显示模式

Exp 改变整个页面的颜色

1 html {
2   background-color: #00539F;
3 }

Exp 解析body元素

1 body {
2    600px;          //强制页面永远保持600像素宽。
3   margin: 0 auto;     //第一个值代表元素上下方，第二个代表左右（特殊值auto代表水平对称），可使用更多值
4   background-color: #FF9500;     //元素背景色
5   padding: 0 20px 20px 20px;     //设置上下左右四个值让内边距四周产生一点空间
6   border: 5px solid black;      //为页面四周设置了5像素的黑色实线边框
7 }

Exp 为标题定位和添加样式

1 h1 {
2   margin: 0;    //覆盖掉默认的间隙
3   padding: 20px 0;    //标题的上内边距和下内边距为20像素
4   color: #00539F;
5   text-shadow: 3px 3px 1px black;     //四个值设置字体阴影的水平值,垂直值,模糊度，颜色
6 }

Exp 居中图像

1 img {
2   display: block;    //使图像变成块级元素使之有边框
3   margin: 0 auto;   //调整居中
4 }