HTML与CSS_基础 翁恺 笔记(2015 8.10更新)
<!DOCTYPE html>
<html>
<head>
<title>我的页面</title>
<meta charset=utf-8>
</head>
<body>
<h1>这是我们第一个页面</h1>
<p>这是第一段文字</p>
</body>
</html>
<b></b>加粗字体
<i></i>字斜体
<tt></tt> typewriter一种字体格式
<small></small>比周围相对小的字体
<del></del>表示显示出删掉的效果
与之对应 <ins></ins>表示显示出添加的效果
<s></s>表示包括的内容不推荐使用
如果要表示a的二次方加上b零(a2+b0)
则上标用<sup></sup>表示
下标用<sub></sub>
完整显示如下
<html>
<body>
a<sup>2</sup> + b<sub>0</sub>
</body>
</html>
页面特别强调(HTML5)
<mark></mark>
例子(自编)
<html>
<head>
<meta charset=utf-8>
<h1>
<mark>天朝</mark>你好
</h1>
</head>
<body>
a<sup>2</sup> + b<sub>0</sub>
</body>
</html>
<em></em>emphasize表强调,具体实现由浏览器决定
<strong></strong>表着重
<dfn></dfn>definition
<code></code>表源代码
<samp>例子代码
<kbd>用户输入
<var>variable变量
<cite>引用
<address>
Rm 401 CKP West Wing<br>
玉泉 Camps<br>
</address>
<blockquote> </blockquote>缩进
<q></q>小引用
<pre></pre>中间可放置代码,而且代码按所敲的格式输出
例子
<pre>
int main(void)
{
printf("hello_world\n");
return 0;
}
</pre>上面的代码中int main(void)后面无需插入<br>来换行,因为加有<pre>它按原格式输出(预格式化)保留文字在源代码中的格式,页面中显示的和源代码中的效果完全一致。浏览器再显示其中的内容时,会完全按照其真正的文本格式来显示
2015年8月10日22:56:14更新
===================================================
设置背景色
例子
<html>
<head>
<meta charset = utf-8>
<h1>
<mark>世界</mark>你好
</h1>
</head>
<body style = "background-color:gray">
<pre>
网易云课堂
CSS
</pre>
</body>
</html>
========================================================
默认颜色:transparent 透明
16进制颜色方案
<body style = "background-color:#FF0000"> RRGGBB 纯红色
#FF00FF RRGGBB 红+蓝 (混合)
另一种
<body style = "background-color:rgb(255,255,0)"> (有红有绿)→_→变成黄色
========================================================
→_→又另一种
<body style = "background-color:rgba(255,255,0,0.5)">
example:
<html>
<head>
<meta charset = utf-8>
<h1>
<mark>世界</mark>你好
</h1>
</head>
<body style = "background-color:rgba(255,255,0,1)">
<p style = "background-color:rgba(255,0,0,0.5)">
另一个段落
</p>
<pre>
网易云课堂
CSS
</pre>
</body>
</html>
==========================================================
背景图片
例子(body部分)
<body style = "background-image:url(1.jpg)">
<p style = "background-color:rgba(255,0,0,0.5)">
另一个段落
</p>
</body>
其中 1.jpg是存放在该html文件的同一目录下的本地文件(当然也可以用网络图片)
=======================================================
图片不铺满整个页面(不重复)
<body style = "background-image:url(1.jpg);
background-repeat:no-repeat">
<p style = "background-color:rgba(255,0,0,0.5)">
另一个段落
</p>
</body>
=======================================================
选择重复(x方向重复)
<body style = "background-image:url(1.jpg);
background-repeat:repeat-x">
</body>
=======================================================图像方向
<body style = "background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:center">
</body>
除了center,还可以是top(上),right(右)那么,右上怎么表示?
background-position:right top
=====================================点
background-position:100px 100px
===========================================
是否跟文字滚动
默认背景跟文字滚动
<body style = "background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed">
</body>
fixed意为固定的,设置后背景图片不随文字滚动