HTML与CSS_基础翁恺笔记（2015.8.10更新）

来源：互联网发布：qq会员永久软件编辑：程序博客网时间：2024/05/21 19:49

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>这是我们第一个页面</h1>

这是第一段文字

</body>

</html>

加粗字体

字斜体

<tt></tt> typewriter一种字体格式

比周围相对小的字体

<del></del>表示显示出删掉的效果

与之对应 <ins></ins>表示显示出添加的效果

<s></s>表示包括的内容不推荐使用

如果要表示a的二次方加上b零（a2+b0）

则上标用表示

下标用

完整显示如下

<html>

<body>

a2 + b0

</body>

</html>

页面特别强调（HTML5）

例子（自编）

<html>

<head>

<h1>

天朝你好

</h1>

</head>

<body>

a2 + b0

</body>

</html>

emphasize表强调，具体实现由浏览器决定

表着重

<dfn></dfn>definition

<code></code>表源代码

<samp>例子代码

<kbd>用户输入

<var>variable变量

<cite>引用

Rm 401 CKP West Wing

玉泉 Camps

</address>

<blockquote> </blockquote>缩进

<q></q>小引用

<pre></pre>中间可放置代码，而且代码按所敲的格式输出

例子

<pre>

int main(void)

{

printf("hello_world\n");

return 0;

}

</pre>上面的代码中int main(void)后面无需插入 来换行，因为加有<pre>它按原格式输出（预格式化）保留文字在源代码中的格式，页面中显示的和源代码中的效果完全一致。浏览器再显示其中的内容时，会完全按照其真正的文本格式来显示

2015年8月10日22:58:32更新

===================================================

设置背景色

例子

<html>

<head>

<h1>

世界你好

</h1>

</head>

<pre>

网易云课堂

CSS

</pre>

</body>

</html>

========================================================

默认颜色：transparent 透明

16进制颜色方案

<body style = "background-color:#FF0000"> RRGGBB 纯红色

#FF00FF RRGGBB 红+蓝（混合）

另一种

<body style = "background-color:rgb(255,255,0)"> (有红有绿)→_→变成黄色

========================================================

→_→又另一种

example:

<html>

<head>

<h1>

世界你好

</h1>

</head>

另一个段落

<pre>

网易云课堂

CSS

</pre>

</body>

</html>

==========================================================

背景图片

例子（body部分）

另一个段落

</body>

其中 1.jpg是存放在该html文件的同一目录下的本地文件（当然也可以用网络图片）

=======================================================

图片不铺满整个页面（不重复）

<body style = "background-image:url(1.jpg);

background-repeat:no-repeat">

另一个段落

</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意为固定的，设置后背景图片不随文字滚动

0 0

HTML与CSS_基础 翁恺 笔记（2015.8.10更新）

HTML与CSS_基础翁恺笔记（2015.8.10更新）