HTML基本标签
<!DOCTYPE html> <!- 声明HTML文档 ->
<html> <!- 网页内容 ->
<head>
<title>the title</title> <!- 地址栏标题 ->
</head>
<body> <!- 网页主体 ->
<header>
网页顶部
</header>
<h1>h1</h1> <!- 标题 h1-h6 从大到小 ->
<p>paragraph 1</p> <!- 段落 ->
<p>I am a <br> paragraph of text</p> <!- 换行 ->
<p>I am a <strong>strong</strong> paragraph of text</p> <!- 加粗 ->
<p>I am a <em>strong</em> paragraph of text</p> <!- 加斜 ->
<button>I'm a button</button> <!- 按钮 ->
<ul>
<li>an item</li>
<li>an item</li>
<li>an item</li>
</ul> <!- 被 ul 包裹的是无序列表,被li包裹的是有序列表,常在 ul 内 使用 li 实现顶部菜单栏等 ->
<footer>
网页底部
</footer>
</body>
</html>
CSS
层叠样式表
如何引用
- 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
- 内部样式表
<head>
<style type="text/css">
body {
background-color: red
}
p {
margin-left: 20px
}
</style>
</head>
- 内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
语法
body {
background-color: red
}
p {
margin-left: 20px
}
CSS 规则由两个主要的部分构成:
- 选择器
- {一条或多条声明}
每条声明由一个属性和一个值组成
常见选择器
元素选择器(element)
body { /* element选择器可以设定某元素的样式。 */ }
类选择器(class)
<h1 class="important">Welcome to FishC.com</h1> <p class="important">Welcome to FishC.com</p> .important { /* 类选择器允许以一种独立于文档元素的方式来指定样式, 类选择器允许以一种独立于文档元素的方式来指定样式, 该选择器可以单独使用,也可以与其他元素结合使用 */ }
id 选择器
#waleslau { /* id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 注意:id 属性只能在每个 HTML 文档中出现一次。*/ <p id="waleslau">Hi I'm waleslau</p>
伪类选择器
<!- 形似:xxx即伪类选择器 :hover { /* :hover 选择器用于选择鼠标指针浮动在上面的元素。*/ } <!- 比如我们希望当鼠标移到某<a>标签上时,它会自动加上红色背景,移开后恢复,就这样写: a:hover { background-color:red; }
CSS属性举例
- background-color 背景颜色
- font-family 规定元素的字体系列
- width 元素的宽度
- margin 外边距
- padding 内边距
... ...
更多信息参见HTML5&CSS3速查宝典
未完待续 。。。