[Codecademy] HTML&CSS 第三课：HTML Basic II
2024-10-18 09:05:09
本文出自 http://blog.csdn.net/shuangde800
[Codecademy] HTML && CSS课程学习目录
------------------------------------------------------------------------------------------------
Introduction
在这节课中，我们要进入下一阶段：
a. 制作排序列表的和不排序列表
b. 改变字体大小，颜色和类型
c. 改变背景颜色
d. 字体对齐
Ordered lists(排序列表)
排序列表就是在每一行内容的前面有编号，效果如下：
1. 有序列表以<ol>标签开头</ol>结尾。（ol = ordered lists）
2. 有序列表里面的每一项，用<li> </li>括起来。 (li = list item)
3. 有序列表的每一项占一行，所以一般我们把一项的所有内容放在一行里。
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>List of my favorite things</h1>
<ol>
<li>raindrops on roses</li>
<li>whiskas on kittens</li>
<li>call of duty: modern warfare</li>
</ol>
</body>
</html>
效果图：
Unordered Lists（不排序列表）
.png)
我们已经学了排序列表，对于要编号排序的东西很适合使用它。但是如果我们不需要排序编号呢？我们可以使用unordered lists（不排序列表）。
不排序列表的使用方式和排序列表一样，不过它的标签是<ul></ul>。（ul = unordered lists）。不排序列表的列表项也是用<li></li>标签
<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h1>Some random thoughts</h1>
<p>hahahahaahaha!</p>
<ul>
<li>first line</li>
<li>second line</li>
<li>third line</li>
<li>alksdf</li>
</ul>
</body>
</html>
效果图：
Lists inside a list（嵌套列表）
我们已经学会了ordered lists 和unordered lists。非常棒！
如果我们想要一个排序列表，但是如果列表项里还嵌套这一个不排序列表怎么办呢？效果图如下：
.png)
<!DOCTYPE html>
<html>
<head>
<title>Nested lists</title>
</head>
<body> <ul>
<li>Boys Names.</li>
<ol>
<li>Daming</li>
<li>Lihua</li>
<li>Bob</li>
</ol>
<li>Girls Names.</li>
<ol>
<li>Alice</li>
<li>Lina</li>
<li>Lily</li>
</ol>
</ul> </body>
</html>
效果图：
Making comments(注释)
我们已经学习了关于列表的大部分内容，是时候换种口味了！
如果html是网页的骨架，那么css是骨架的皮肤和漂亮的衣服。
在学css之前，我们要先学习inline css(内联css)，使用inline css意味着我们可以装饰html页面，而不需要单独创建一个css文件！我们先学这个，是因为这样可以让后面的css学习更加容易！
在学习fonts(字体)之前，先学习comments(注释)是很重要的，你可以使用注释来标记html文件的代码，这样可以帮助你在以后回忆起这段代码的功能。
注释以<!-- 开头，-->结尾，<!-- This is an example of a comment! -->
Font size（字体尺寸）
在开口标签处，我们可以使用attributes（属性）来让这个标签实现更多的功能！
一个attributes是一个characteristic (特征)或者一些对内容的描述，在之前已经使用过了<img>中的src和<a>中的href
使用style 属性可以改变字体的尺寸：
<p style="font-size: 12px">
<p style="font-size: 10px"> Some text for you to make tiny! </p>
<p style="font-size: 20px"> Some text for you to make normal size!</p>
<p style="font-size: 40px"> Some text for you to make super big!</p>
<p style="font-size: 20px"> Some text for you to make normal size!</p>
<p style="font-size: 40px"> Some text for you to make super big!</p>
Font color（字体颜色）
除了字体大小，还有很多其他属性，比如可以改变字体颜色：
<h2 style="color:red">
如果既要改变颜色，又要改变大小，那么两个都加上去：
<h2 style="color: green; font-size:12px">
代码：
<!DOCTYPE html>
<html>
<head>
<title>Changing the colors!</title>
</head>
<body>
<h1 style="color:green;font-size:16px">Big Heading</h1>
<p style="color:violet">A giant bear and a little duck were friends.</p>
<p style="color:red;font-size:10px">But the bear got hungry and ate the duck.</p>
</body>
</html>
效果：
.png)
有各种颜色的网址：
打开
打开
Font family(字体家族)
除了改变字体的大小和颜色，还可以改变字体类型！
只需要在style属性里添加font-family:Helvetica即可，例如
<h2 style="font-family:Garamond">
.png)
Background color背景颜色
同样，只要在style属性里添加一句background-color:read即可
例如：
<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body style="background-color:brown">
<h3>Favorite Football Teams</h3>
<ol style="background-color:yellow">
<li>The Hawthorn Football Club</li>
<li>San Franscisco 49ers</li>
<li>Barcelona FC</li>
</ol>
</body>
</html>
效果：
.png)
Aligning the text(对齐文字)
可以设置一行字的对齐方式：向左对齐，居中，向右对齐等
同样是在style属性里添加text-align:center
<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body>
<h3 style="text-align:center">Favorite Football Teams</h3>
<ol>
<li style="text-align:left">The Hawthorn Football Club</li>
<li style="text-align:center">San Franscisco 49ers</li>
<li style="text-align:right">Barcelona FC</li>
</ol>
</body>
</html>
效果：
.png)
Strong words!（粗体）
怎样把字变成粗体呢？意外的是，这并不是在style上动手脚，而是使用<strong>标签：
把要变成粗体字的部分，包围<strong></strong>中
例如，把hello world!变成粗体：
<strong>hello world!</strong>
Emphasize words!(斜体)
除了粗体字，我们还会经常使用italicize（斜体）
和设置粗体一样，设置斜体也不是在style里设置的，而是使用<em>标签
例如，把hello world!变成斜体：
<em>hello world!</em>
Summary（小结）
1. 设置排序列表和不排序列表
2. 改变字体的颜色，尺寸，字体类型
3. 在html中添加注释
4. 改变背景颜色
5. 文本对齐
6. 粗体和斜体
最新文章
- 锋利的jQuery--jQuery事件，动画(读书笔记二)
- 使用复合设计模式扩展持久化的CURD,Select能力
- android viewpager 图片翻页例子
- 硬盘安装ubuntu120.04分区方案
- Codeforces Round #306 (Div. 2) C. Divisibility by Eight 暴力
- Naive Bayes Algorithm
- cuda(2) 矩阵乘法优化过程
- Jboss image upload and http access to show image--reference
- C++编程规范之19：总是初始化变量
- hive 配置MySQL库
- (转)原子操作 Interlocked系列函数
- Eclipse TestNg插件
- Windows下安装lxml库方法
- (最短路 Floyd) P2910 [USACO08OPEN]寻宝之路Clear And Present Danger 洛谷
- [2019BUAA软工助教]第一次阅读 - 小结
- Java-Runoob-高级教程-实例-方法：08. Java 实例 – break 关键字用法
- c#asp.net url 传递中文参数要使用 System.Web.HttpUtility.UrlEncode 而不能使用Server.UrlEncode
- 理解与学习linux 文件系统的目录结构
- hibernate里联合主键composite-id映射,查询单个主键的问题
- Django 翻译与 LANGUAGE_CODE