html基础编写和常用标签-day11

　　话说我都不知道有多少天没有更新我的随笔了，不过我忽的一下发现到灵魂深处的罪孽；好吧，不扯淡了，其实就是自己懒得外加上HTML这个东西又实在是很重要，所以良心发现把我自己所学的给记录下来，我会尽量的写的详细点，方便自己回忆，或者是哪些踩了狗屎运翻到了我博客的老爷们提供一些关于HTML相对来说用点用的东西；本篇主要记录HTML和CSS的用法，至于前面没有做笔记的Python基础我会尽量补上来。

　　在记录HTML之前，我们先来了解一下HTML格式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
上面我写了一段裸露的HTML格式，<html></html>将整个代码给括了起来，<head></head>里面写的就是头部信息，当然了解HTML的人知道大部分的头部信息<head>是不会在浏览器中显示
的。这里我再插插上一嘴，不关什么语言都有自己的解释器，HTML也不会例外，HTML的代码是供浏览器解释的。下面我们就来了解下HTML头部会有哪些东西，同时我也会讲HTML的内容给解释
清楚。

一、HTML头部

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <!-- 页面标签,默认字符编码为utf-8 -->
 5     <meta charset="UTF-8">
 6     <!--页面跳转-->
 7     <meta http-equiv="refresh" content="5; Url=http://www.baidu.com" />
 8     <!--关键字-->
 9     <meta name="keywords" content="开发者" />
10     <meta name="description" content="个人博客" />
11     <!--页面图标-->
12     <link rel="shortcut icon" href="123.jpg" />
13     <title>Title</title>
14 </head>
15 <body>
16 
17 </body>
18 </html>

　　现在，我解释下上面的格式，和每行的意思：

　　首先大家需要明白<head></head>这种属于标签；<meta>也属于标签，但是他和前面的还有一些不太一样，这种属于自闭和标签，目前大家记住他就行了，到后面写一写也就明白了。

　　<meta http-equiv="refresh" content="5; Url=http://www.baidu.com" />:<meta />是一个标签我就不再重复了，http-equiv=""是这个标签的属性，=
号后面就是这个属性的值，就和当初我们学Python的时候一样，但是这里的值是有意义的，比如这个就是刷新的意思；content也是这个标签内的属性，他的意思就是5s刷新一
次，后面的Url当然也是属性，这个标签的总体意思就是，这个页面5s后会刷新，然后跳转到URL里面写好的地址中；

　　<meta name="keywords" content="开发者" />就是我用红色框花上的；

　　<meta name="description" content="个人博客" />name="description" 为网站的接受，说通俗点就是为了让某度搜索到你

　　<link rel="shortcut icon" href="123.jpg" /> : rel="shortcut icon"就是上面的图标，后面的为这个图片的路径

二、HTML中body部分（一）

　　2.1纯洁的div标签和span标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div>苍井空</div>
 9     <span>小泽</span>
10     <span>丽花美凉</span>
11 </body>
12 </html>

　　这里咱们涉及了两个标签，一个是div，一个是span；他们两都是白板（纯洁的），如果你里面不加东西就什么都作用不会起，如果你把我这一段来出来运行了你会发现到一个现象，就是两个span标签的东西是连这的。这是怎么回事呢？这里就是标签的性质不同了。

　　首先标签分为两类，一个是块级标签，另一个是内连标签；块级标签的特性是：他会占用父级标签的全部，而span标签是属于内联标签，他们的内容会相互连接，不会占用父级标签的100%。

　　2.2：a标签p标签和br标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>妹子<br />加微信</p><p>妹子加微信</p><p>妹子加微信</p>
    <a href="http://www.baidu.com">百度</a>
    <a href="#">点不动</a>
</body>
</html>

　　"p"标签是用来标记段落的，br标签是用来分割的，a标签是用来跳转的

　　2.3：列表标签:ol和ul

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--标题-->
 9 <ul>小电影
10     <!--标签-->
11     <li>中国的</li>
12     <li>美国的</li>
13     <li>日本的</li>
14 </ul>
15 <ol>小电影
16     <li>中国的</li>
17     <li>美国的</li>
18     <li>日本的</li>
19 </ol>
20 </body>
21 </html>

2.4.input系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <!--test:普通文本框，value为框内的默认值，name为传入后端的k值-->
    用户名：<input type="text" value="alex" name="username" /> <br />
    <!--type为password为密码输入-->
    密码：<input type="password" value="asdf" name="pwd" /> <br />
    <!--目前只需知道submit是一个提交按钮，value是按钮的名字-->
    <input type="submit" value="submit提交"  /> <br />
    <!--redio是小圆点，value是发送到后端是值，name如果相同互斥，checked=checked为默认值-->
    <input type="radio" name="123" value="n" checked="checked" />男 <br />
    <input type="radio" name="123" value="l" />女 <br />
    <!--checkbox为多选框，value为后端对应值-->
    <input type="checkbox" value="12" />man
    <input type="checkbox" value="11" />woman
</div>
</body>
</html>

2.5.其他input系列

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--上传文件-->
 9 <input type="file" name="2222" />
10 <!--网页中提交-->
11 <input type="button" value="button提交" />
12 <!--重置-->
13 <input type="reset" value="重置" />
14 <div>
15     <!--下拉框，multiple为多选，selected="selected"为默认选项-->
16     <select name="city" multiple >
17         <option value="1">BeiJing</option>
18         <option value="2" selected="selected">ShangHai</option>
19     </select>
20 </div>
21 </body>
22 </html>

2.6.其他标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <!--src为图片所在路径-->
 8 <img src="123.jpg" alt="美女" title="this good gril" /> alt为图片加载不出是显示的文字，title为鼠标悬停上的文字
 9 <!--HTML还有很多其他的标签，后面等遇到的时候在仔细说-->
10 </html>

三、CSS选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--标签选择器-->
 7     <style>
 8         /*选中所有a标签*/
 9         a{
10             color: red;
11         }
12     </style>
13     <!--id选择器-->
14     <style>
15         /*选择所有id为i1*/
16         #il{
17             color: blue;
18         }
19         /*class 选择器*/
20         /*选择所有class=c1的*/
21         .c1{
22             color: yellow;
23         }
24         /*属性选择器 important为优先级最高*/
25         /*[n="1"]{
26             color: #dddddd; !important;
27         }*/
28         /*div下面的子子孙孙*/
29         div p{
30             color: darkmagenta;
31         }
32         /*div下面的儿子*/
33         div>p{
34             color: #dddddd;
35         }
36         /*组合选择器*/
37         .c3 .c4{
38             color: #61fdff;
39         }
40         /*鼠标悬停显示字体颜色*/
41         .cla:hover{
42             color: aqua;
43         }
44     </style>
45 </head>
46 <body>
47 <!--演示部分-->
48 <div>
49     <a href="http://www.baidu.com">给你看看宝贝</a>
50 </div>
51 <!--abc是我自定义的一个标签，为了不和别的标签重复-->
52 <abc id="il">hope is good thing</abc>
53 <br />
54 <dbc class="c1">and best thing</dbc>
55 <br />
56 <!--孙子系列-->
57 <div>
58     <div>
59         <p>You're best</p>
60     </div>
61 </div>
62 <!--儿子系列-->
63 <div>
64     <p>
65         BBBBBBBBBBBB
66     </p>
67 </div>
68 </body>
69 </html>

四、CSS基础使用

4.1.CSS的基本使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             /*此处的作用就让边框从定格开始*/
 9             margin: 0;
10         }
11         .w{
12             height: 48px;width: 980px;background-color: #61fdff;
13             /*0就是上下是0，auto是左右自动居中，pandding也是一样*/
14             margin: 0 auto;
15             /*居中*/
16             text-align: center;
17         }
18         .header{
19             /*高度48像素*/
20             height: 48px;
21             /*背景颜色*/
22             background-color: bisque;
23             /*字体颜色*/
24             color: silver;
25             /*使内容自动居中，其中line-height==height*/
26             line-height: 48px;
27         }
28     </style>
29 </head>
30 <body>
31     <div class="header">
32         <div class="w">
33             LOGO
34         </div>
35     </div>
36     <div class="body"></div>
37 </body>
38 </html>

备注：上图标注的地方为body{margin:0;}的作用

4.2.CSS边距

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .c2{
 8             background-color: #dddddd;
 9             padding: 10px;
10             border-left: 3px solid transparent;
11         }
12         .c2:hover{
13             border-left: 3px solid rebeccapurple;
14         }
15     </style>
16 </head>
17 <body>
18     <!--高度为200px，线框为1px，实线，红色(border是边框)-->
19     <div style="height: 200px;border: 1px solid red;"></div>
20     <!--padding是内边距，在后边会做介绍-->
21     <div style="background-color: #dddddd;border-right: 3px solid rebeccapurple;padding: 10px;">
22         搜索数据
23     </div>
24     <div class="c2">
25         搜索数据
26     </div>
27 </body>
28 </html>

4.3.CSS边距

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7 </head>
 8 <body>
 9     <!--margin外边距-->
10     <div style="margin: 50px;background-color: rebeccapurple;color: white;">
11         鼻子
12     </div>
13     <!--padding内边距-->
14     <div style="padding: 50px;background-color: rebeccapurple;color: white;">
15         鼻子
16     </div>
17 </body>
18 </html>

4.4.CSS位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .tip{
 8             /*fixed将事务固定在屏幕上的某一个位置*/
 9             position: fixed;
10             /*离底部未300px*/
11             bottom: 300px;
12             right: 0;
13         }
14         .ab{
15             /*absolute相对事务*/
16             position: absolute;
17             bottom: 10px;
18             right: 0;
19         }
20         .rel{
21             position: relative;
22             height: 300px;
23             width: 300px;
24             background-color: rebeccapurple;
25         }
26         .abs{
27             position: absolute;
28             top: 0;
29             right: 0;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="rel">
35         <div>
36             <div class="abs">asdf</div>
37         </div>
38     </div>
39     <div style="background-color: #dddddd;height: 2000px;"></div>
40     <div class="tip">返回顶部</div>
41     <div class="ab">返回顶部</div>
42 </body>
43 </html>

4.5.CSS浮动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10     </style>
11 </head>
12 <body>
13     <div style="height: 48px;background-color: brown;line-height: 48px;">
14         日本的
15         <!--这里说一下“a”标签为内联标签，意思就是内容不自动换行-->
16         <a>苍老师</a>
17         <a>小泽玛</a>
18         <a>立花</a>
19     </div>
20     <br/>
21     <div style="background-color: rebeccapurple;">
22         <!--float为浮动，lefe让他向左边浮动-->
23         <div style="float: left;background-color: green;">内容一</div>
24         <div style="float: left;background-color: green;">内容二</div>
25         <div style="float: right;background-color: green;">内容三</div>
26         <div style="clear: both;"></div>
27     </div>
28 
29     <div style="height: 48px;background-color: brown;line-height: 48px;">
30         <!--上下居中&ndash;&gt;line-height-->
31         python流弊
32     </div>
33     <br/>
34     <div style="height: 48px;background-color: brown;text-align: center;">
35         <!--test-align-->center为居中-->
36         php垃圾
37     </div>
38 
39 </body>
40 </html>

4.6.CSS布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10         .w{
11             width: 980px;
12             margin: 0 auto;
13         }
14         .left{
15             float: left;
16         }
17         .right{
18             float: right;
19         }
20         .pg-header{
21             height: 48px;
22             background-color: brown;
23             color: white;
24             line-height: 48px;
25         }
26         .pg-header .menus a{
27             padding: 0 10px;
28             /*是标签具有内联标签的属性--->也就是内容不换行*/
29             display: inline-block;
30             /*使内联标签具有块级标签的属性*/
31             /*display: block;*/
32         }
33         .pg-header .menus a:hover{
34             background-color: bisque;
35         }
36     </style>
37 </head>
38 <body>
39     <div class="pg-header">
40         <div class="w">
41             <div class="menus left">
42                 <a href="#">菜单一</a>
43                 <a href="#">菜单一</a>
44                 <a href="#">菜单一</a>
45                 <a href="#">菜单一</a>
46             </div>
47             <div class="menus right">
48                 <a href="#">登录</a>
49                 <a href="#">注册</a>
50             </div>
51         </div>
52     </div>
53     <div class="pg-body">
54         <div class="w">
55             asdka;sdfjk;alsd
56 
57         </div>
58 
59     </div>
60 </body>
61 </html>

　　到此HTML和CSS基础已经大致说完了，后边我会把JS和jQuery的基础写进博客；以及相关的中文文档地址放入博客中，大家也可以一起学习。