Headline with the h2 Element
标题 元素
Inform with the Paragraph Element
获取 段落
Uncomment HTML
删除注释
Comment out HTML
注释掉
Fill in the Blank with Placeholder Text
填空 占位符 文本
Use CSS Selectors to Style Elements
用css选择器给元素定义样式
<style>
h2 {color: blue;}
</style>
h2是一个css选择器
Use a CSS Class to Style an Element
用 类 定义元素样式
<style>
.red-text {
color: red;
}
</style>
类选择器前面加.
Style Multiple Elements with a CSS Class
用css class给元素附加样式
Change the Font Size of an Element
改变元素字体尺寸
<style>
.red-text {
color: red;
}
.p{
font-size=16px;
}
</style>
Set the Font Family of an Element
设置元素字体
h2 {
font-family: Sans-serif;
}
Import a Google Font
导入谷歌字体
复制下面的代码片断并将其粘贴到你的代码编辑器的顶部：
<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
Specify How Fonts Should Degrade
说明如何降级字体
p {
font-family: Helvetica, Sans-Serif;
}
添加图片
<img src="https://www.your-image-source.com/your-image.jpg">
设置图片尺寸
<style>
.smaller-image {
width: 500px;
}
</style>
<img class="smaller-image" src="/images/relaxing-cat.jpg" >
Add Borders Around your Elements
边框
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
Add Rounded Corners with a Border Radius
给边框添加圆角 半径
border-radius: 10px; 50%（圆形图片）
Link to External Pages with Anchor Elements
链接 到 外部 也没 用 锚 元素
Nest an Anchor Element within a Paragraph
嵌套一个锚元素 在段落里面
Turn an Image into a Link
转换图片为链接
Create a Bulleted Unordered List
创建一个 符号、无序 列表
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
Create an Ordered List
有序列表
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
Create a Text Field
创建文本字段
<input type="text">
你可以用如下方式创建占位符：
Add Placeholder Text to a Text Field
添加占位符到文本框
<input type="text" placeholder="this is placeholder text">
Create a Form Element
使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。
action属性的值指定了表单提交到服务器的地址。
例如：
<form action="/url-where-you-want-to-submit-form-data"></form>
Add a Submit Button to a Form
<button type="submit">this button submits the form</button>
Use HTML5 to Require a Field
必填字段
<input type="text" required>
Create a Set of Radio Buttons
创建 一组 单选 按钮
多选一的场景就用radio button(单选按钮)
单选按钮只是input输入框的一种类型。
每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
注意：所有关联的单选按钮应该使用相同的name属性。
下面是一个单选按钮的例子：
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
Create a Set of Checkboxes
复选框 （label意思是标签）
<label><input type="checkbox" name="personality"> Loving</label>
Check Radio Buttons and Checkboxes by Default
默认选项
<input type="radio" name="test-name" checked>
Nest Many Elements within a Single Div Element
嵌套 更多元素在单个div层元素中
Give a Background Color to a Div Element
<style>
.green-background {
background-color: green;
}
</style>
Use an ID Attribute to Style an Element
使用 ID选择器 赋予 元素样式
#cat-photo-element {
background-color: green;
}
Adjusting the Padding of an Element
调整 内边距
有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。
元素的 padding 控制内容t和边框 border 之间的距离。
margin 控制边框
Add Different Padding to Each Side of an Element
增加不同方向的距离控制
.green-box {
background-color: green;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
Use Clockwise Notation to Specify the Padding of an Element
用 顺时针 标记法 指定 内边距
padding: 20px 40px 20px 40px;
Inherit Styles from the Body Element
继承 样式 从
Prioritize One Style Over Another
优先于
注意：在 HTML 中这些 class 如何排序是无所谓的。
然而，在 <style> 部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权，但是 id 属性总是具有更高的优先级。
Override Class Declarations by Styling ID Attributes
用ID属性 覆盖 重写 class样式
id 属性总是具有更高的优先级。
很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以使用 !important。 会覆盖所有样式
.pink-text {
color: pink !important;
}
Use Abbreviated Hex Code
用缩写16进制编码 #f00 #FF0000 background-color: rgb(255, 165, 0);
Use Responsive Design with Bootstrap Fluid Containers
用 bootstrap框架 进行响应式设计
Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。
通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。
你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
Make Images Mobile Responsive
使图片响应 移动端
<img class="img-responsive" src="/images/running-cat.jpg">
Create a Bootstrap Button
<button class="btn">like</button>
Create a Block Element Bootstrap Button
创建一个块元素的bootstrap 按钮
<button class="btn btn-block">Like</button>
Taste the Bootstrap Button Color Rainbow
品尝彩色 bootstrap框架按钮
btn-primary（意思是深蓝色属性）
<button class="btn btn-block btn-primary">Like</button>
Bootstrap自带了一些预定义的按钮颜色。红色btn-danger被用来提醒用户该操作具有“破坏性”
浅蓝色 btn-info 被用在那些用户可能会采取的操作上
Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。
下面这张图表显示了 Bootstraps 的12列网格布局是如何起作用的：
请注意，在这张图表中，class属性 col-md-* 正被使用。在这里，md 表示 medium (中等的)，* 代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。
在我们创建的 Cat Photo App 中，将会使用 col-xs-* ，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。
把 Like, Info 和 Delete 三个按钮一并放入一个 <div class="row"> 元素中；然后，其中的每一个按钮都需要各自被一个 <div class="col-xs-4">元素包裹。
当div 元素设置了 class 属性 row 之后，那几个按钮便可嵌入其中。
grid 格子 row 行 columns 列
你可以用 span 标签来创建行内元素。还记得我们是怎样使用 .btn-block来创建填满整行的按钮吗？
这张图展示了 inline 元素与 block-level 块级元素的区别：
通过使用 span 元素，你可以把几个元素放在一起。你甚至可以用此为一个元素的不同部分指定样式。
把 "Things cats love" 中的 "love" 放到 span 标签下。然后为其添加 text-danger class 来使文字变成红色。
举例，"Top 3 things cats hate" 元素的写法如下：
<p>Top 3 things cats <span class = "text-danger">hate:</span></p>
Add Font Awesome Icons to our Buttons
给按钮加 fontawesome图标
Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。
你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标，比如：
<i class="fa fa-info-circle"></i>
你可以通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮中，方法是在i 元素中增加 class 属性 fa 和 fa-thumbs-up。 表情-大拇指-上
Line up Form Elements Responsively with Bootstrap
排列表格元素，用bootstrap响应式框架
通过使用拥有 row class 属性的 div 元素和其它在它之内的具有 col-xs-* class 属性的 div 元素。
House our page within a Bootstrap Container Fluid Div
收容 我们的页面到 div容器中
Create Bootstrap Wells
Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感
Bootstrap 还有一种属于按钮的 class 属性叫做 btn-default 。
Create a Class to Target with jQuery Selectors
使用jQuery选择器创建一个目标类
并不是每一个 class 属性都是用于 CSS 的。 有些时候我们创建一些 class 只是为了更方便地在jQuery中选中这些元素。
为你的每一个 button 都添加 target class。
Add ID Attributes to Bootstrap Elements
除了可以给元素增加 class 属性，还可以给你的每个元素增添一个 id 属性。
每一个指定元素的 id 都是唯一的，并且在每个页面中只能使用一次。
给左边的 well 赋予 id left-well。给右边的 well 赋予 id right-well。
<div class="row"> <div class="col-xs-6"> <div class="well" id="left-well"> <button class="btn btn-default target"></button> <button class="btn btn-default target"></button> <button class="btn btn-default target"></button> </div> </div> <div class="col-xs-6"> <div class="well" id="right-well"> <button class="btn btn-default target"></button> <button class="btn btn-default target"></button> <button class="btn btn-default target"></button> </div> </div> </div>
javascript
<script>
$(document).ready(function(){});
</script>
Target HTML Elements with Selectors Using jQuery
<script>
$("document").ready(function() {
$("button").addClass("animated bounce");
});
</script>
已经了解了3种选择器：元素选择器：$("button")、class选择器：$(".btn")、id选择器：$("#target1")。
removeClass()方法去掉元素上的class。
.css()改变元素的CSS样式$("#target1").css("color", "blue");
.prop()调整元素的属性.$("button").prop("disabled", true);
.html()添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉。
$("h3").html("<em>jQuery Playground</em>");
.remove() 移除HTML元素 $("#target4").remove("");
appendTo()方法可以把选中的元素加到其他元素中。$("#target4").appendTo("#left-well");
clone()方法可以拷贝元素。$("#target2").clone().appendTo("#right-well");
parent()，它允许你访问指定元素的父元素。$("#left-well").parent().css("color", "blue")
children()，它允许你访问指定元素的子元素。$("#left-well").children().css("color", "blue")
target:nth-child(n) CSS选择器允许你按照索引顺序(从1开始)选择目标元素的所有子元素。
示例：你可以给目标元素的第三个子元素添加bounce class。
$(".target:nth-child(3)").addClass("animated bounce");
示例：获取class为target且索引为奇数的所有元素，并给他们添加class。
$(".target:odd").addClass("animated shake");
记住，jQuery里的索引是从0开始的，也就是说：:odd 选择第2、4、6个元素，因为target#2(索引为1)，target#4(索引为3)，target6(索引为5。
Use jQuery to Modify the Entire Page
修改 整个 页面
