#预格式文本

保留输入的文本格式

1
2
3
4
5
6
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>

#缩写和首字母缩写

1
2
3
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

#文字方向

文字效果从左向右显示

1
2
3
<bdo dir="rtl">
Here is some Hebrew text
</bdo>

#删除字效果和插入字效果

1
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

块引用

使用blockquote元素引用长的句段,节

1
2
3
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

使用p元素引用短的句段览器通常会在 q 元素周围包围引号
例:WWF 的目标是“构建人与自然和谐相处的”世界。

1
<p>WWF 的目标是 <q>构建人与自然和谐相处的世界。</q></p>

#选择器

派生选择器

只有 li 元素中的 strong 元素的样式为斜体字,无需为 strong 元素定义特别的 class 或 id。
例1:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
li strong {
font-style: italic;
font-weight: normal;
}
</style>
<body>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
</body>

例2:
strong和h2元素里的字是红色,h2元素里的strong元素里的字是蓝色

1
2
3
4
5
6
7
8
9
10
11
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}

ID选择器

可作为单独的选择器/派生选择器

1
2
3
4
5
6
7
8
<style>
#red {color:red;}
#green {color:green;}
</style>
<body>
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
</body>

类选择器

*类名的第一个字符不能使用数字

1
2
3
4
5
6
7
8
<style>
.center {text-align: center}
</style>
<body>
<h1 class="center">
This heading will be center-aligned
</h1>
</body>

作为派生选择器使用时
例:类名为fancy里的td(表格)元素 的设置

1
2
3
4
.fancy td {
color: #f60;
background: #666;
}

也可以基于类被选择
例:表格里,类被设置为fancy的表格将是带有灰色背景的橙色

1
2
3
4
5
6
7
8
9
<style>
td.fancy {
color: #f60;
background: #666;
}
</style>
<body>
<td class="fancy">
</body>

*你可以应用多个class到一个元素,只需要在多个class之间用空格分开即可

1
<img class="class1 class2">

小结:
ID具有唯一性,Class具有普遍性 ID是唯一的,所以尽量在结构外围使用,通常用于页面布局
Class是可重复的,所以尽量在结构内部使用,通常用于样式定义 ID的样式优先级高于Class

#固定链接

想为你的网站添加一个a元素,但此时你还不知道要将它们链接到哪儿,此时可以使用固定链接

1
<a href="#'></a>

#alt属性

alt属性,也被称为alt text, 是当图片无法加载时显示的替代文本

1
<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">

#列表

无序列表

1
2
3
4
5
6
<ul type="disc/circle/square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>

有序列表

1
2
3
4
5
6
<ol type="a/A/i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>

定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合
自定义列表以 <dl> 标签开始,每个自定义列表项以 <dt> 开始,每个自定义列表项的定义以 <dd> 开始
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

1
2
3
4
5
6
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

#预定义文本

1
<input type="text" placeholder="this is placeholder text">

#单/复选按钮

每一个单选按钮都应该嵌套在它自己的label(标签)元素中 所有关联的单选按钮应该使用相同的name属性
例:给你的表单添加两个单/复选按钮,一个叫indoor,另一个叫outdoor,设置你的单选按钮的name属性为indoor-outdoor,第一个按钮默认被选中

1
2
<label><input type="radio/checkbox" name="indoor-outdoor" checked>indoor</label>
<label><input type="radio/checkbox" name="indoor-outdoor">outdoor</label>

#Html布局

padding(内边距)、margin(外边距)、border(边框)
元素的 padding 控制元素内容content和元素边框 border 之间的距离 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,为负值时元素将变大

#继承

例1:当body与class的属性冲突时,class属性会覆盖掉body元素的属性

1
2
3
4
5
6
7
8
9
10
11
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text{
color:pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>

例2:在 <style> 部分中 class 的声明中,第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明,它覆盖了 .pink-text 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text{
color:blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>

例3:最高优先级!important

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

小结:
!important>行内样式>id选择器>class选择器>嵌入式