HTML基础

1.页面相关的信息

(1)页面编码

     <meta http-equiv=“content-type” content="text/html;charset=utf-8"> 

     <meta charset="UTF-8"> 

(2)刷新和跳转    

     <meta http-equiv="Refresh" Content="5; Url=http://www.baidu.com" /> 

(3)关键词

     <meta name="keywords" content="星际2,专访,F91," /> 

     <meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" /> 

(4)描述     

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自建立以来，博客园一直致力并专一于为开发者打造一个纯净的技术交流社区，推进并帮助开发者经过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />

(5)IE浏览器兼容

      <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 

(6)网页头部信息(title)

    显示在浏览器标签栏的信息

(7)网页头部图标

     <link rel="shortcut icon" href="image/favicon.ico" /> 

(8)引入css文件

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

(9)sytle

 

2.经常使用标签

2.1标签分为块级标签和内联标签

2.2标签p和br

    p表示段落,默认段落之间是有间隔的

    br表示换行

2.3标签a

a.target属性："_blank"表示在新的页面打开
b.锚

<!--在原有窗口打开新网页-->
<a href="http://www.baidu.com">百度</a>
    
<!--新开一个窗口打开新网页-->
<a href="http://www.baidu.com" target="_blank">百度</a> 



<!--锚点-->
<a href="#1">第一章</a>
<a href="#2">第二章</a>
<a href="#3">第三章</a>


<div id="1" style="height:900px;background-color:red">第一章内容</div>
<div id="2" style="height:900px;background-color:blue">第二章内容</div>
<div id="3" style="height:900px;background-color:fuchsia">第三章内容</div>

 

2.4标签H

    H1~H6:字体从大到小

2.5div和span

    div:块级标签

    span:内联标签

2.6列表

    ol:有序列表

    ul:无须列表

    dl:组合

    

    <!--有序列表-->
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
    </ol>

    <!--无序列表-->
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
    </ul>


    <!--组合-->
    <dl>
        <dt>北京</dt>
        <dd>丰台</dd>
        <dd>东城</dd>
        <dd>朝阳</dd>

        <dt>合肥</dt>
        <dd>庐阳</dd>
        <dd>蜀山</dd>
        <dd>瑶海</dd>
    </dl>

运行结果:

    

 

2.7标签img

<!--图片-->
    <img src="a.jpg" alt="测试" title="悬浮效果"/>
    
    <!--title  -鼠标放到图片上,显示的内容-->
    <!--alt  -图片没加载出来显示的内容-->

 

2.8表格

 1 <!--表格边框 boreder-->
 2     <table border="1px">
 3         <tr>
 4             <td>ip</td>
 5             <td>hostname</td>
 6             <td>port</td>
 7         </tr>
 8 
 9         <tr>
10             <td>192.168.1.11</td>
11             <td>c2.com</td> 
12             <td>80</td>
13         </tr>
14 
15         <tr>
16             <td>192.168.1.12</td>
17             <td>c3.com</td>
18             <td>80</td>
19         </tr>
20 
21         <tr>
22             <td>192.168.1.13</td>
23             <td>c4.com</td>
24             <td>80</td>
25         </tr>
26     </table>

表格

 1 <!--表多行合并-->
 2     <table border="1px">
 3         <tr>
 4             <td>ip</td>
 5             <td>hostname</td>
 6             <td>port</td>
 7         </tr>
 8 
 9         <tr>
10             <td>192.168.1.11</td>
11             <td rowspan="2">c2.com</td>      <!-- rowspan="2" 合并两行-->
12             <td>80</td>
13         </tr>
14 
15         <tr>
16             <td>192.168.1.12</td>             <!-- 对应的行少一列-->
17             <td>80</td>
18         </tr>
19 
20         <tr>
21             <td>192.168.1.13</td>
22             <td>c4.com</td>
23             <td>80</td>
24         </tr>
25     </table>

表多行合并(rowspan)

 1 <!--表多列合并-->
 2     <table border="1px">
 3         <tr>
 4             <td>ip</td>
 5             <td>hostname</td>
 6             <td>port</td>
 7         </tr>
 8 
 9         <tr>
10             <td>192.168.1.11</td>
11             <td colspan="2">c2.com</td>      <!-- colspan="2" 合并两列-->
12             
13         </tr>
14 
15         <tr>
16             <td>192.168.1.12</td> 
17             <td>c3.com</td>
18             <td>80</td>
19         </tr>
20 
21         <tr>
22             <td>192.168.1.13</td>
23             <td>c4.com</td>
24             <td>80</td>
25         </tr>
26     </table>

表多列合并(colspan)

2.9标签label

    文本和框创建关系 

<label for="user">用户名</label><input id="user" type="text"/>

2.10fieldset

<fieldset>
        <legend>登录</legend>
        <p>注意事项</p>
</fieldset>

 

3.表单数据

 1     <!--标签form action->提交地址,提交到指定URL method->指定提交方法:GET/POST-->
 2     <!--GET:数据放在请求头,请求体为空-->
 3     <!--POST:数据放在请求体-->
 4     <form action="http://127.0.0.1:8000/index/" method="GET">
 5         <div>
 6             <span>用户名:</span>
 7             <input type="text" name="username"/>  <!--name指定传送的键值-->
 8         </div>
 9 
10 
11         <div>
12             <span>密 码:</span>
13             <input type="password" name="passwd"/>     <!--name指定传送的键值-->
14         </div>
15 
16         <!--submit提交本身form标签内的表单类的值-->
17         <input type="submit" value="Submit"/>
18     </form>

form表单

    <!--标签form action->提交地址,提交到指定URL method->指定提交方法:GET/POST-->
    <!--GET:数据放在请求头,请求体为空-->
    <!--POST:数据放在请求体-->
    <form action="http://127.0.0.1:8000/index/" method="GET">
        <div>
            <span>用户名:</span>
            <!--普通格式文本框-->
            <input id="c1" type="text" name="username" value="bigroot"/>  <!--name指定传送的键值,value为默认值-->
        </div>


        <div>
            <span>密 码:</span>
            <!--密码格式文本框-->
            <input type="password" name="passwd"/>     <!--name指定传送的键值-->
        </div>

        <div>
        <span>邮 箱:</span>
        <!--邮箱格式文本框-->
        <input type="email" name="em"/>      <!--低版本浏览器没有-->
        </div>

        <div>
        <!--单选框-->
        <!--单选框的name值相同时互斥,向后台发送的事value的值-->
        <input type="radio" name="gender" value="1" checked="checked"/>男   <!--checked表示默认选项-->
        <input type="radio" name="gender" value="2" />女
        </div>

        <div>
            <!--复选框-->
            <input type="checkbox" name="fruit" value="11" />苹果
            <input type="checkbox" name="fruit" value="12" />香蕉
            <input type="checkbox" name="fruit" value="13" />橘子
            <input type="checkbox" name="fruit" value="14" />桃子
        </div>

        <!--单选下拉列表-->
        <div>
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="hf">合肥</option>
            </select>
        </div>

        <!--多选选下拉列表-->
        <div>
            <select name="city2" multiple>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="hf">合肥</option>
            </select>
        </div>


           <!--submit提交form标签内的表单类的值-->
        <input type="submit" value="Submit"/>
    </form>

表单类(input)

 1     <!--标签form action->提交地址,提交到指定URL method->指定提交方法:GET/POST-->
 2     <!--GET:数据放在请求头,请求体为空-->
 3     <!--POST:数据放在请求体-->
 4     <form action="http://127.0.0.1:8000/index/" method="GET" >
 5         <div>
 6             <span>用户名:</span>
 7             <!--普通格式文本框-->
 8             <input id="c1" type="text" name="username" value="bigroot"/>  <!--name指定传送的键值,value为默认值-->
 9         </div>
10 
11 
12         <div>
13             <span>密 码:</span>
14             <!--密码格式文本框-->
15             <input type="password" name="passwd"/>     <!--name指定传送的键值-->
16         </div>
17 
18         <div>
19         <span>邮 箱:</span>
20         <!--邮箱格式文本框-->
21         <input type="email" name="em"/>      <!--低版本浏览器没有-->
22         </div>
23 
24         <div>
25         <!--单选框-->
26         <!--单选框的name值相同时互斥,向后台发送的事value的值-->
27         <input type="radio" name="gender" value="1" checked="checked"/>男   <!--checked表示默认选项-->
28         <input type="radio" name="gender" value="2" />女
29         </div>
30 
31         <div>
32             <!--复选框-->
33             <input type="checkbox" name="fruit" value="11" checked="checked" />苹果   <!--checked表示默认选项-->
34             <input type="checkbox" name="fruit" value="12" checked="checked" />香蕉
35             <input type="checkbox" name="fruit" value="13" />橘子
36             <input type="checkbox" name="fruit" value="14" />桃子
37         </div>
38 
39         <!--单选下拉列表-->
40         <div>
41             <select name="city">
42                 <option value="bj">北京</option>
43                 <option value="sh">上海</option>
44                 <option value="hf" selected="selected">合肥</option>    <!--selected表示默认选项-->
45             </select>
46         </div>
47 
48         <!--多选选下拉列表-->
49         <div>
50             <select name="city2" multiple>
51                 <option value="bj" selected="selected">北京</option>    <!--selected表示默认选项-->
52                 <option value="sh" selected="selected">上海</option>
53                 <option value="hf">合肥</option>
54             </select>
55         </div>
56 
57         <div>
58             <!--文本框默认值-->
59             <span>地 址:</span>
60             <input type="text" name="test" placeholder="请输入内容">
61         </div>
62 
63         <div>
64             <div>留言板</div>
65             <textarea name="memo">默认值</textarea>    <!--默认值在标签中间-->
66         </div>
67 
68         <div>
69             <input type="file" name="file"/>   <!--要上传文件还要在form标签中添加enctype="multipart/form-data"属性-->
70         </div>
71 
72         <!--submit提交form标签内的表单类的值-->
73         <input type="submit" value="Submit"/>
74 
75         <input type="button" value="提交页面"/>      <!--默认没有功能-->
76 
77         <input type="reset" value="Reset">         <!--重置-->
78     </form>

表单类

 

4.CSS(层叠样式表)

4.1选择器类型

4.1.1直接选择器

 1     <style>
 2         /*标签选择器*/
 3         p{
 4             color:red;
 5         }
 6 
 7         /*id选择器*/
 8         #d1{
 9             color:sandybrown;
10         }
11 
12         /*类选择器*/
13         .c1{
14             color:darkviolet;
15         }
16 
17         /*属性选择器*/
18         [n='1']{
19             color:blue;
20         }
21         
22         input[type="text"]{
23             color:rebeccapurple;
24         }
25     </style>

直接选择器

 1 <style>
 2         /*标签选择器*/
 3         p{
 4             color:red;
 5         }
 6 
 7         /*id选择器*/
 8         #d1{
 9             color:sandybrown;
10         }
11 
12         /*类选择器*/
13         .c1{
14             color:darkviolet;
15         }
16 
17         /*属性选择器*/
18         [n='1']{
19             color:blue;
20         }
21         
22         input[type="text"]{
23             color:rebeccapurple;
24         }
25          
26         /*组合*/
27         .c1,c2{
28             color: green;
29          }
30 
31 
32 </style>
33 
34 
35 直接选择器

直接选择器

 

 

优先级:
    1.id选择器 > 属性选择器 > 类选择器 > 标签选择器
    2.相同的选择器:就近原则(谁在下面谁优先)
    3.手动指定!important,优先级最高

 

4.1.2间接选择器

 1 - 间接：
 2 # 层级选择器
 3 
 4 div p{
 5       color: green;
 6 }
 7                 
 8                 
 9 div>p{
10       color: green;
11 }
12             
13 - 伪类
14 hover 当鼠标放在上部时，css生效
15 c10:hover{
16            color: green;
17 }
18                 
19 <a class="c10">菜单一</a>

间接选择器

 后代选择器：

 div p  ---> div标签下的<p>标签无论嵌套多少层都受影响，如<a><p></p></a>

子选择器：

 div>p  ---> 与div标签相邻的<p>标签才受影响，如<div><p></p></div>

 

4.2CSS存在形式

- 标签
- 当前页面 <style></style>
- 文件 <link rel='stylesheet' href='' /> *

 

4.3CSS属性

 1 /*字体颜色*/
 2 color: white;
 3 
 4 /*背景颜色*/
 5 background-color: red;
 6 
 7 /*字体大小*/
 8 font-size: 16px;
 9 
10 /*加粗*/
11 /*font-weight: bold;*/
12 
13 /*高度*/
14 /*height: 200px;*/
15 /*height: 10%;  --父标签有指定宽度*/
16 
17 /*宽度*/
18 /*width: 400px;*/
19 /*width: 40%;   --父标签的40%*/ 
20 
21 /* 背景图片 */
22 background-image: url(5.png);
23 background-repeat: no-repeat;    /* 图片重复方式repeat-y repeat-x no-repeat */
24 
25 
26 /* 图片:抠图的效果,经过定位看图片的某个部分 */
27 .c2{
28   background-image: url(a.jpg);
29   background-repeat: no-repeat;
30   width:30px;
31   height:30px;
32   
33   /*经过background-position调整图片展现的位置*/
34   background-position-x: 10px;  
35   background-position-y:10px;
36 
37   /*background:url(a.jpg) no-repeat 10px 10px;能够替代上面四个background-*/
38 
39 }

基本css属性

 

4.4display

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             color:red;
 9             font-size: 30px;
10         }
11         .hide{
12             display:none;
13         }
14 
15     </style>
16 </head>
17 <body>
18 
19     <input type="button" value="出现" onclick="showDiv();" />
20     <input type="button" value="消失" onclick="hideDiv();" />
21      <div id ="i1" class="c1 hide">测试文本</div>
22 
23     <script>
24         function showDiv(){
25             document.getElementById("i1").classList.remove("hide");
26         }
27         function hideDiv(){
28             document.getElementById("i1").classList.add("hide");
29         }
30     </script>
31 </body>
32 </html>

页面隐藏与展示

 

 1 <!--隐藏标签-->
 2 <!--display: none;-->
 3 <!--隐藏设置内联&块级-->
 4 <!--display: block;-->
 5 <!--display: inline;-->
 6 <!--display: inline-block;-->
 7 
 8 <div style="display:inline">1</div>         <!--display:inline块级标签改为了内联标签-->
 9 <div style="display:inline">2</div>
10 <a style="display:block">3</a>               <!--display:block内联标签改为了块级标签-->
11 <a style="display:block">4</a>
12 
13 <a style="background-color: rebeccapurple;height: 200px;width: 400px;">这是测试文本</a>   <!--内联标签宽度、高度不生效-->
14 <a style="background-color: red;height: 200px;width: 400px;display:inline-block">这是测试文本</a>    <!--display:inline-block不会占用一整行,右边空白处能够添加其余内容-->
15 <a style="background-color: chartreuse;height: 200px;width: 400px;display:inline-block">这是测试文本</a>

display属性

 

4.5边框

    <div style="height:200px;border: 1px solid red; "></div>         <!--四面都有边框-->

    <div style="background-color: #dddddd;border-left: 1px solid rebeccapurple;padding: 10px;">  <!--左边框-->
        搜索数据
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #dddddd;
            border-left: 1px solid transparent;
            padding: 10px;
        }
        .c1:hover{
            border-left: 1px solid rebeccapurple;
        }
    </style>
</head>

<body>
    <div class="c1">  <!--鼠标放上去显示左边框-->
        搜索数据
    </div>

</body>
</html>

 

4.6边距

    内边距:padding

    内边距:margin

1 <div style="margin-left: 50px;background-color:deepskyblue">  <!--外边距,左边空表部分不属于div-->
2     搜索数据
3 </div>
4 
5 <div style="padding-left: 50px;background-color: aqua">   <!--内边距,左边空表部分属于div-->
6     搜索数据
7 </div>

 

4.7鼠标移动上方时，显示的图标

    cursor: wait;

 

4.8position

position: relative;
position: absolute;
position: fixed;

 

4.8.1 场景一：
    position: fixed; 某个标签永远固定在浏览器窗口的某个位置
4.8.2 场景二：
    position: absolute; 第一固定后,之后滚动永远在这个位置,至关于钉住了
4.8.3 场景三：
    position: relative; 相对父级标签所在的位置
    position: absolute;

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .tip{
 8             position: fixed;
 9             top: 10px;
10             left: 10px;;
11         }
12 
13         .ab{
14             position: absolute;
15             top: 20px;
16             left: 20px;;
17         }
18     </style>
19 </head>
20 <body>
21     <div style="background-color: #dddddd;height: 2000px;"></div>
22     <div class="tip">返回顶部</div>
23 
24     <div class="ab">返回顶部</div>
25 </body>
26 </html>

fix和absolute

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .rel{
            position: relative;
            height: 300px;
            width: 300px;
            background-color: rebeccapurple;
        }
        .abs{
            position: absolute;
            top:0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="rel">
        <div>
            <div class="abs">sdfsdfsa</div>   <!--一直往上找,直到找到relative,根据relative定位-->
        </div>
    </div>
</body>
</html>

relative和absolute合用

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         .moda1{
 9             height: 600px;
10             width: 800px;
11             background-color: white;
12             position: fixed;
13             top: 50%;
14             left: 50%;
15             margin-left: -400px;
16             margin-top: -300px;
17             z-index: 99;
18         }
19         .hide{
20             display: none;
21         }
22         .zz{
23             position: fixed;
24             background-color: black;
25             top:0;
26             left:0;
27             right:0;
28             bottom: 0;
29             z-index: 98;
30             opacity: 0.5;
31         }
32     </style>
33 
34 </head>
35 <body>
36 
37 
38 
39     <div style="height: 3000px;background-color: #dddddd;">
40         <input type="button" value="出现" onclick="showDiv();" />
41 
42         <p>测试文字</p>
43     </div>
44 
45     <div id="i2" class="zz"></div>
46     <div id="i1" class="moda1">
47         <input type="button" value="消失" onclick="hideDiv();" />
48     </div>
49 
50     <script>
51         function showDiv(){
52             document.getElementById("i1").classList.remove("hide");
53             document.getElementById("i2").classList.remove("hide");
54         }
55         function hideDiv(){
56             document.getElementById("i1").classList.add("hide");
57             document.getElementById("i2").classList.add("hide");
58         }
59     </script>
60 </body>
61 </html>

模拟登录弹窗

 

4.9float

1     <div style="background-color: rebeccapurple;">      <!--标签float,没有设置高度,标签没有撑起来，高度为0,能够 height:100px-->
2         <div style="float:left;background-color: green;">内容一</div>
3         <div style="float:left;background-color: green;">内容一</div>
4         <div style="float:right;background-color: green;">内容二</div>
5         <div style="clear: both"></div>             <!--标签float,没有设置高度,标签没有撑起来，高度为0,也能够这样-->
6     </div>

 

文字上下、左右居中

 1     <!--line-height:上下居中,必须有高度属性-->
 2     <div style="height: 48px;background-color: aqua;line-height: 48px;">
 3         测试文字一
 4     </div>
 5 
 6     <br/>
 7     
 8     <!--text-align:左右居中-->
 9     <div style="height: 48px;background-color: aqua;text-align: center">
10         测试文字一
11     </div>

 

去除body边框

<style>
   body{
        margin: 0;
   }
</style>

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin:0;
 9         }
10 
11         .w{
12             height:48px;width:980px;
13             background-color: green;
14             /*一个:上下左右;两个:上下、左右;四个:上、右、下、左 顺时针*/
15             margin: 0 auto;
16         }
17         .pg-header{
18             height:48px;
19             background-color: brown;
20             color: white;
21             line-height: 48px;
22         }
23     </style>
24 
25 </head>
26 <body>
27     <div class="pg-header">
28         <div class="w">
29             <div style="float:left;">LOGO</div>
30         </div>
31     </div>
32     <div class="pg-body">
33         <div class="w">fdsfsdfjdskjfisjafdsafjl</div>
34     </div>
35 
36 </body>
37 </html>

模拟首页

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin:0;
 9         }
10 
11         .w{
12             height:48px;width:980px;
13             /*background-color: green;*/
14             /*一个:上下左右;两个:上下、左右;四个:上、右、下、左 顺时针*/
15             margin: 0 auto;
16         }
17         .pg-header{
18             height:48px;
19             background-color: brown;
20             color: white;
21             line-height: 48px;
22         }
23         .left{
24             float:left;
25         }
26         .right{
27             float:right;
28         }
29 
30         .pg-header .menus a{
31             padding: 0 10px;
32             display: inline-block;
33         }
34         .pg-header .menus a:hover{
35             background-color: bisque;
36         }
37     </style>
38 
39 </head>
40 <body>
41     <div class="pg-header">
42         <div class="w">
43             <div class="menus left">
44                 <a>菜单一</a>
45                 <a>菜单一</a>
46                 <a>菜单一</a>
47                 <a>菜单一</a>
48                 <a>菜单一</a>
49             </div>
50             <div class="menus right">
51                  <a>菜单一</a>
52                  <a>菜单一</a>
53                  <a>菜单一</a>
54             </div>
55         </div>
56     </div>
57     <div class="pg-body">
58         <div class="w">fdsfsdfjdskjfisjafdsafjl</div>
59     </div>
60 
61 </body>
62 </html>

首页菜单栏