[Codecademy] HTML&CSS 第三课:HTML Basic II
来源:互联网 发布:南大 知乎 编辑:程序博客网 时间:2024/06/05 19:07
本文出自 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(不排序列表)
我们已经学了排序列表,对于要编号排序的东西很适合使用它。但是如果我们不需要排序编号呢?我们可以使用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。非常棒!
如果我们想要一个排序列表,但是如果列表项里还嵌套这一个不排序列表怎么办呢?效果图如下:
<!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>
效果:
有各种颜色的网址:打开
Font family(字体家族)
除了改变字体的大小和颜色,还可以改变字体类型!
只需要在style属性里添加font-family:Helvetica即可,例如
<h2 style="font-family:Garamond">
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>
效果:
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>
效果:
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. 粗体和斜体
- [Codecademy] HTML&CSS 第三课:HTML Basic II
- [Codecademy] HTML&CSS 第三课:HTML Basic II
- [Codecademy] HTML&CSS 第一课:HTML Basic
- [Codecademy] HTML&CSS 第一课:HTML Basic
- [Codecademy] HTML&CSS第九课 :CSS Selectors
- [Codecademy] HTML&CSS 第五课:HTML Basics III
- [Codecademy] HTML&CSS 第七课:CSS: An Overview
- Codecademy HTML Basics II Font size
- [Codecademy] HTML&CSS 第二课:Build Your Own Webpage
- [Codecademy] HTML&CSS 第四课:Social Networking Profile
- [Codecademy] HTML&CSS 第六课:Clickable Photo Page
- [Codecademy] HTML&CSS 第十课:Sorting Your Friends
- [Codecademy] HTML&CSS 第二课:Build Your Own Webpage
- [Codecademy] HTML&CSS 第四课:Social Networking Profile
- [Codecademy] HTML && CSS课程学习目录
- HTML Basic II
- [Codecademy] HTML&CSS第八课:Design a Button for Your Webwite
- Codecademy上的HTML/CSS课程知识点总结(一)
- Qt-关闭没有标题栏的程序
- 面试算法之排序算法集锦
- 从100PV到1亿级PV网站架构演变
- 1.5新特性静态导入、增强for、可变参数、自动装箱拆箱、枚举
- 百万级访问量网站的技术准备工作
- [Codecademy] HTML&CSS 第三课:HTML Basic II
- SICP 习题 (1.22) 解题总结
- j2se总结
- 新浪微博技术架构分析
- hdu 4706
- Android中Handler作用
- windows 子进程获取父进程的方法。
- 应用系统常用性能指标
- android 隐藏API 在源码下编译报错cannot find symbol symbol