HTML&CSS学习

Posted on | In | | Visitors:
Words count in article: 966

HTML&CSS学习

HTML的一些标签

标题

1
<h1>~<h5>

段落

1
<p>

超链接

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

图片

是一个void元素，没有任何内容的元素，甚至没有结束标记。

1
<img src=".jpg">

短引用

常常以双引号显示，当然也可以通过设置css更换样式

1
<q></q>

长引用

1
<blockquote></blockquote>

换行

1
<br>

列表

可嵌套使用，制作嵌套列表

1
2
3
4
5
6
<!-- 无序列表 unordered list -->
<ul></ul>
<!-- 有序列表 ordered list -->
<ol></ol>
<!-- 列表元素 list item -->
<li></li>

一些属性

id属性

1
2
3
4
5
<!-- 比如说像这样 -->
<h2 id="chai">Chai Tea, $1.85</h2>

<!-- 比如说像这样进行访问,在链接最后加一个# -->
<a href="index.html#chai">see Chai Tea</a>

使用target打开新窗口

1
<a target="_blank" href="mission.html">Read about our Mission</a>

开始的一些准备工作

版本说明

html4版本共说明

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

html5版本说明，事实上，浏览器认为你正在使用标准html，不再考虑版本号。事实上html不再会有6,7,8…，制定标准的人已经把这个规范变成了一个活的标准，随着技术的发展不断更新，所以不再有版本号，认知你可以不再叫它html5，因为现在它只是html

1
<!doctype html>

指定字符编码

写在head中

1
<meta charset="utf-8">

CSS（层叠样式表）

style元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
    <title>Title</title>
    <!-- style元素放在html的首部里，type告诉浏览器正在使用寿命类型的样式，这里使用的是css -->
    <style type="text/css">
        body{
            background-color: #d2b48c;
            margin-left: 20%;
            margin-right: 20%;
            border:2px dotted black;
            padding: 10px 10px 10px 10px;
            font-family: sans-serif;
        }
        p{
        background-color: #954b4b;
        color: #a7cece;
        border: 1px solid gray;
      }
        h1{
        font-family: sans-serif;
        color: gray;
      }
        h2{
        font-family: sans-serif;
        color: gray;
      }
    </style>
</head>
<body>
</body>
</html>

link元素

当需要大量页面需要使用相同的css时，可以创建.css文件，统一css样式，同时也方便统一管理和修改。.css文件中的内容（不能包含html）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
	font-family: sans-serif;
}

h1, h2 {    
	color: gray;
}

h1 { 
	border-bottom: 1px solid black;
}

p {
	color: maroon;
}

p.greentea {
	color: green;
}

在html中使用

1
<link type="text/css" rel="stylesheet" href="lounge.css">

创建类选择器

在css中创建一个类，对段落使用

1
2
3
p.pfguo{
	color: red;
}

在HTML中使用

1
2
3
4
5
6
7
8
<p class="pfguo">
  Join us any evening for refreshing 
  <a href="beverages/elixir.html">elixirs</a>, 
  conversation and maybe a game or two of 
  <em>Dance Dance Revolution</em>.  
  Wireless access is always provided;  
  BYOWS (Bring Your Own Web Server).
</p>

如果需要对多个元素使用？

在css中这样写规则

1
2
3
.pfguo2{
	color: black;
}

一个元素可以加入多个类

1
<p class="pfguo1 pfguo2 pfguo3">

广泛的属性

字体

设置字体，可设置多个，当访问用户计算机无第一种字体时，会顺延使用下一个字体，同理，若不含有，依次顺延。

当然如果有需要，也可以设置web字体，有很多网址会提供这样的字体托管服务

1
font-family：Verdana，Geneva，Arial;

字体大小

设置字体大小，其实是字体的高，当然也有其他的设置方法，如large或者百分数等等

1
font-size:14px;

字体颜色

1
color：silver;/*设置字体颜色*/

当然也可以使用16进制码

当然还有很多属性，自己查吧~

1
2
font-weight:bold/*可选的有：lighter、normal、bold、bolder*/
text-decoration:underline;/*下划线：underline 上划线：overline 删除线：line-through*/