HTML具有用于创建 unordered lists（无序列表） ，或带项目符号列表的特殊元素

 

　　无序列表以  元素开始，并包含一个或多个元素

 

　　例：

 

　　将会创建一个带项目符号的"milk"和"cheese"列表

 

　　删除最后两个  元素，并在页面底部创建一个有关猫咪喜欢的三件事情的无序列表

 

　　HTML具有用于创建ordered lists（有序列表）, 或数字编号列表的特殊元素

 

　　有序列表以元素开始，并包含一个或多个元素

 

　　例：

 

　　将创建一个包含"Garfield"和"Sylvester"的数字编号列表

 

　　创建一个有关 “Top 3 things cats hate:” （猫咪不喜欢三件事情）的有序列表

 

　　创建一个Web表单

 

　　文本输入框是获取用户输入的一种方便的方法

 

　　可以用如下方法创建：

 

　　注意：元素是自关闭的

 

　　例：在列表下创建一个type（类型）为  的元素

 

　　placeholder text（占位符）是用户在  框输入任何内容之前放置在 input 框中的预定义文本

 

　　你可以创建如下所示的占位符：

 

　　例：将文本  框的的值设置为"cat photo URL"

 

　　可以使用HTML来构建跟服务器交互的Web表单，通过在元素上添加一个属性来执行此操作

 

　　属性的值指定了表单提交到服务器的地址

 

　　例：

 

　　把文本输入框嵌套到元素中，并为此元素添加

 

　　在form中添加一个  (提交)按钮

 

　　点击此按钮，表单中的数据将会被发送到你使用表单  属性指定的地址上

 

　　以下是一个submit按钮的例子：

 

　　例：在  元素中添加一个提交按钮，并以类型为 ， "Submit"为按钮文本

 

　　对于表单，你可以指定某些选项为required（必填项），只有当用户填写了该选项后，用户才能够提交表单。

 

　　例如，如果想要一个文本输入框设置为必填项，可以在  元素中加上  属性，可以使用：

 

　　例：给文本输入框添加 属性，这样用户不填写输入框就无法提交表单

 

　　单选按钮是  输入框的一种类型

 

　　每个单选按钮都应该嵌套在自己的 label(标签) 元素中

 

　　所有关联的单选按钮应具有相同的  属性

 

　　下面是一个单选按钮的例子：

 

　　例子：在表单中添加两个单选按钮，一个叫 ，另一个叫

 

　　checkboxes（复选按钮）通常用于可能有多个答案的问题的形式

 

　　复选按钮是  的输入框的一种类型

 

　　每一个复选按钮都应嵌套在其自己的 元素中

 

　　所有关联的复选按钮输入应该具有相同的 属性

 

　　以下是一个复选按钮的示例：

 

　　例：为表单添加三个复选按钮，每个复选按钮都应嵌套在其自己的  元素，所有复选按钮的属性必须为

 

　　使用  属性可以设置一个单选框和复选框默认被选中

 

　　为此，只需在  元素中添加属性

 

　　例如：

 

　　例：设置第一个单选框和第一个复选框都为默认选中

 

　　元素，也被称作division(层)元素，是一个盛装其他元素的通用容器

 

　　元素是最常用的HTML元素

 

　　可以利用CSS的继承关系把  上的CSS传递给它所有子元素

 

　　可以使用来标记一个div元素的开始，并使用来标记一个div元素的结束

 

　　例：在"Things cats love" 元素之前放置的开始标记，在结束标记之后放置的结束标记，这样两个列表就都嵌套在中了。把"Things cats love"和"Things cats hate"两个列表都嵌套在同一个元素中

 

　　可以使用  属性来设置一个元素的背景颜色

 

　　例：如果想要设置一个元素的背景颜色为，可以将其放在  元素中：

 

　　例：创建一个叫  的类选择器，设置其  为 gray，最后应用到  元素

 

　　除了 属性之外，每一个 HTML 元素也可以具有  属性

 

　　属性应该是唯一的。虽然浏览器不会强制唯一，但这是被广泛认可的。所以不要给一个以上的元素相同的  属性

 

　　下面例子说明如何设置 元素的属性为

 

　　例：设置  元素的属性为

 

　　所有的 HTML 元素本质上都是一些小矩形块

 

　　有三个重要的属性控制每个HTML元素的布局：padding(内边距)、margin(外边距)、border(边框)

 

　　元素的  控制元素与其边框  之间的距离

 

　　可以看到，绿方块和红方块都位于黄方块中。注意：红方块具有比绿方块具有更大的

 

　　当增大绿方块的 时, 它将增加元素内容和元素边框之间的距离

 

　　例：修改绿方块的  ，以使它与红方块匹配

 

　　元素的  （外边距）控制元素  （边框）和周围元素实际所占空间的距离

 

　　可以看到，绿方块和红方块都位于黄方块中。注意：红方块具有比绿方块更大的 （外边距），使其看起来更小

 

　　当增大绿方块的  时，它将增加元素边框和元素实际所占空间之间的距离

 

　　例：修改绿方块的  ，以使它与红方块匹配

 

　　元素的  （外边距）控制元素的 （边框）和周围元素实际所占空间的距离

 

　　如果将一个元素的  设置为负值，则元素将会变大

 

　　例：把  的 margin设置为 -15px，以使它将父容器(黄方块)的横向宽度填充

 

　　需要自定义一个元素，使它的每一个边具有不同的 padding

 

　　CSS 允许使用 、、 和 属性来控制元素四个方向的

 

　　例：使  class的顶部和左侧具有  的 ，而底部和右侧则是

 

　　需要自定义一个元素，使它的每一个边具有不同的

 

　　CSS 允许使用 、、 和  属性来控制元素四个方向的

 

　　例：使  class的顶部和左侧具有  的 ，而底部和右侧则是

 

　　除了分别指定元素的 、、 和  属性外，还可以集中起来指定它们，如下所示：

 

　　这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左

 

　　例：使用顺时针表示法，给".green-box" class在其顶部和左侧具有  的 ，而底部和右侧具有  的

 

　　除了分别指定元素的 、、 和  属性外，还可以集中起来指定它们，如下所示：

 

　　这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

 

　　例：使用 顺时针表示法，给 class 的元素在其顶部和左侧具有  的 ，而底部和右侧具有  的