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意为固定的,设置后背景图片不随文字滚动
posted @ 2015-08-07 22:29  黄滔1996  阅读(639)  评论(0编辑  收藏  举报