HTML入门经典

时间：2016-08-14 19:07:41 阅读：261 评论：0 收藏：0 [点我收藏+]

标签：

HTML

一、HTML基础(树干)

1、基础概念：

1.1、html全称：hyper text markup language

中文：超文本标记语言

1.2、注释： 快捷键：Ctrl+?

1.3、整体页面设置： <!DOCTYPE html> : 定义文档类型

2、HTML中头部(head)的应用

2.1、网页名标签

<title>显示上方标题</title>:表示标题

<title>显示上方标题</title>

2.2、<meta charest=“UIF-8"> :字符编码集，万国码，防止乱码出现

2.3 引用标签：

Link：引用外部资源

　 <link rel="stylesheet" href="css/com.css">
             <!--CSS-->

2.4 样式标签

Style：引用页面中的样式

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>F32班</title>
    <style>
        .text1{  background-color: black;
              
    }
    </style>
</head>
<body>
<!--最常使用且可重复使用-->
<div  class="text1">引用样式</div>

</body>
</html>

3、HTML中主体(body)的应用

3.1标签分为2类(对写CSS样式有用)：

块级元素：
1. <p>:表示段落

2. <div>:表示区域

3. <h>:表示标题

4. <ul>:表示无序列表

5. <ol>:表示有序列表

6. <li>:表示列表项目

7. <dl>:表示定义标签

8. <dt>:表示列表中的定义项目

9. <dd>:表示列表中的定义条目

10. <pre>:定义预格式化的文本

11. <hr>:表示水平线

12. <table>:表示表格

13. <thead>:表示表头

14. <tbody>:定义表格正文

15. <tfoot>:定义表头页脚

16. <th>:定义表格单元格

17. <tr>:表示表格行

18. <td>:表示表格列

19. <caption>:表示表格外部标题

20. <form>:表示表单

行内元素：
1.<span>:跨越多个字符

2.<img>:表示网页中的图片（特殊的行内元素，可以设置宽高）

3.<a>:表示链接

4.<blockquote>:表示引用

5.<q>:表示引用

6.<cite>:表示引用

7.<strong>:表示强调字体

8.<b>:表示字体加粗

9.<br>:表示换行

10.<em>:表示斜体

11.<i>:表示斜体

12.<input>:表示输入

13.<label>:表示input元素定义标签

14.<select>:表示单选和多选菜单

15.<textarea>:表示多行文本输入

快级元素和行内的区别：行内元素是根据内容有多少就占多少，快级标签是不管多少都会占一行。

3.2常用标签应用：

表单中的标签：form、input、select、lable、textarea

用于格式的标签：<br />、<hr /> 、<h1-6></h1-6>

列表标签：ul、li、ol、dl、dt、dd

表格标签：table(<thead>、<tbody>、<tr>、<td>、<th>)

布局标签：div、span

引用、跳转外部标签：a(文字跳转)、meta(页面跳转)、link(引用外部资源)

3.3 标签的应用

1. img:表示图片

<body>
    <img src="miqi.jpg"，alt="米奇"/>
</body>

2. P:表示段落

<p>赠人玫瑰，手有余香
</p>

3.a:表示超链接

<a href="http://www.baidu.com">点击这个链接去百度
</a>

4.h:标题标记

<h1>1级正文标题</h1>
<h2>2级正文标题</h2>
<h3>3级正文标题</h3>
<h4>4级正文标题</h4>
<h5>5级正文标题</h5>
<h6>6级正文标题</h6>

5.序列标签

ul:表示无序列表

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
    <li>列表6</li>
</ul>

ol:表示有序列表
<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
    <li>列表6</li>
</ol>

dl:表示定义列表

<dl>
    <dt>美人鱼</dt>
    <dd>是一种鱼</dd>
</dl>

6.pre:预格式文本

<pre>
很多          很多
</pre>

7.引用：

blockquote:表示引用(长引用)

<blockquote>举头望明月</blockquote>


q:有引号的引用

<q>青出于蓝而胜于蓝</q>

8.span:跨越多个字符

<p>
    没什么<span style="color:red">遗憾</span>

</p>

9.div:区域划分

<div>

<p>感谢天感谢地</p>
</div>

10.strong和b:表示语气强调

<strong>你的地盘你做主</strong>

<b>我的地盘我做主</b>

11.em和i:表示斜体

<em>土耳其卖土豆</em>

<i>吃了一斤土豆</i>

12.br:表示换行

<em>土耳其卖土豆</em>  </br>  <i>吃了一斤土豆</i>

13.hr:表示水平线
<hr/>

14.abbr:表示一个缩写形式

 <p>
      <abbr title="笔记本电脑">笔记本<abbr>
</p>

15.cite:表示引用
<cite>静夜思</cite>是谁写的

16.figure：表示定义

<figure>
        <img src="" alt="米奇"/>
        <figcaption>米奇</figcaption>
</figure>

17.video:视频

<video>
     <source src=""/>
</video>

18.audio:音频

<audio>
      <source src=""/>
</audio>

19.table:表示表格

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

<table border="2" style="border-collapse: collapse" width="100" cellpadding="20">
    <!--表头-->
    <caption>计算机</caption>
    <tr>
        <!--表头-->
    <th colspan="4" align="" >计算机</th>
    </tr>
    <tr>
        <td colspan="4" align="right" >18.5</td>
    </tr>

    <tr>
        <td>AC</td>
        <td>+-</td>
        <td>%</td>
        <td>/</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>x</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>-</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>+</td>
    </tr>
    <tr>

        <td colspan="2">0</td>
        <td>.</td>
        <td>=</td>
    </tr>
    <tfoot>
           <tr>
               <td>2016年8月10号</td>
           </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>1-1</td>
    </tr>
    </tbody>
    <thead>
    <tr>
        <td>78</td>
    </tr>
    </thead>
</table>
</body>
</html>

7.thead:表示表格表头
<thead>
       <tr>
          <td>表头
            </td>
         </tr>
</thead>

8.tbody:表示表格身体部分

<tbody>
      <tr>
          <td>身体</td>
         </tr>

</tbody>

9.tfoot:表示表格的页脚

<tfoot>
      <tr>
          <td>页脚</td>
         </tr>

</foot>

10.th:定义表格表头，且表头显示粗体
<table>
       <tr>
          <th>表头粗体</th>
          </tr>
</table>

colspan:横向合并

<table>
         <tr>
            <td colspan="2">1</td>
             <td>2</td>
             
         </tr>
          <tr>
            <td>1</td>
             <td>2</td>
             <td>3</td>
         </tr>
</table>

rowspan:纵向合并

<table>
         <tr>
            <td rowspan="2">1</td>
             <td>2</td>
             <td>3</td>
         </tr>
          <tr>
            <td>1</td>
             <td>2</td>
            
         </tr>
</table>

20.form：表示用户输入的表单
<form action="外部的链接路径" method="get/post">
</form>
method:用于向action 的链接发送数据的HTTP方法。
注意：post比get安全性高

21.input：标签数据输入文字，用户输入数据

<form  action="外部的链接路径" method="get/post">
          用户名：<input type="text" maxlength="11" value="请输入用户名"/>

          密码：  <input type="text" maxlength="6" placeholder="请输入密码"/>
       
          <input type="button" value="登录按钮"/>
          <button>登录按钮</button>
          <input type="reset" value="重置"/>
          <input type="submit"value="提交"/>
          <input type="file" />:文件的选择 
</form>

注意：

      1.value和placeholder的区别：

      value：直接显示在文本框中，需要用户自己删掉

      placeholder:用户输入时，自己消失

     2.<input type="button" value="登录">和<button>登录</button>区别

      <input type="button" value="登录">：登录按钮不会自动发送请求

      <button>登录</button>：登录按钮会自己发送请求

22.radio:代表单选框

 男<input type="radio" name="sex"/>
     女<input type="radio" name="sex"/>

<label for="man">男</label>
    <input type="radio" name="sex" id="man"/>
<label ror="woman">女</label>
    <input type="radio" name="sex" id="woman"/>

checkbox:代表多选框

网红1<input type="checkbox" name="gif"/>
网红2<input type="checkbox" name="gif"/>

23.导航

<nav>
    <a href="#">新闻</a>
    <a href="#">八卦</a>
    <a href="#">9卦</a>
    <a href="#">大卦</a>
    <a href="#">黄马褂</a>
</nav>

二、CSS样式(修饰)：

1、style和class

1.1、style的三种存放位置(从高到低)

(1)标签属性(在属性中加style)

(2)html头部

(3)单独的CSS文件

优先级：标签属性最高，不管html头部和CSS文件是否存在，绝对以标签属性为准。

html头部和单独的CSS文件是继承关系，如果样式不同便会相互继承，但当 html头部和单独的CSS文件样式相同时html头部优先级比单独的CSS文件高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet"href="csstest.css"/>
    <style>
        .color{  background-color: black;
            color: aliceblue;
        }
    </style>
</head>
<body>
<!--第一种方式-->
<!--当前div样式只用着一次，可这样写-->
<div style="color: aliceblue">直接设置样式</div>
<hr />
<!--第二种方式-->
<!--当前div只用于这一个页面，可这样写-->
<div  class="color">引用样式</div>
<hr />
<!--第三种方式-->
<!--当前div样式被多个页面引用，可这样写-->
<div class="color2">引用样式文件</div>
</body>
</html>

2、CSS选择器：用于选择不同样式进行引用

 <style>
        /*通配 所有标记*/
        *{
            margin: 0;
            padding:0;
        }
    p{
        background-color:red;
        border: 5px solid green;
        font-size: 30px;
        font-weight: 900;
        width: 50px; ;
    }
    /*a标记没有被访问时和样子*/
    a{
        color: black;
    }
    a:link{
        color: black;
        /*font-size: 30px;*/
    }
    /*a标记访问之后的样子*/
    a:visited{
        color:gainsboro;
    }
    /*移入的样子*/
    a:hover{
        color: blueviolet;
    }
    /*点击时的样子*/
    a:active{
        font-size: 20px;
    }
    /*指根元素*/
    :root{
        background-color:palevioletred;
    }

    table{
        background-color:blue;
        border: 20px solid  yellow;
    }
    /*空*/
    table td:empty{
        background-color: gainsboro;
    }
    /*获取焦点*/

    input[type="text"]:focus{
        border:5px  solid darkmagenta;




    }
    input[type="text"]{

            border:20px  solid darkmagenta;
            display: block;
            width: 20px;

            /*height: 30px;*/





    }
    /*元素选取*/
    ::selection{
        background-color: darkgreen;
        color: green;
    }
    /*id*/
    #testp1{
        background-color:green;
        font-weight: 900;


    }

    /*伪元素*/
    .box1{
        width: 200px;
        border: 1px solid red;
    }
    /*第一个字*/
    .box1 p:first-letter{
        font-size: 50px;

    }
    .box1 p:first-line{
        background-color: yellow;
    }
    .a1{
        font-size: 50px;
    }
    /*在链接的前面*/
    .a1:before{

        content: "我是前面";

    }
    /*在链接的后面*/

    .a1:after{
        content:"你在我后面";
    }
    /*第4排*/
    ul li:nth-child(4){
        background-color: yellow;
    }
    /*第一行*/
    ul li:first-child{
        background-color: yellow;
    }
    /*最后一行*/
    ul li:nth-last-child(1){
        background-color: yellow;
    }
    /*基数*/
    ul li:nth-child(2n+1){
        background-color: red;
    }
    ul li:nth-child(odd){
        background-color: aqua;
    }
    /*偶数*/
    ul li:nth-child(even){
        background-color: blue;
    }
    </style>

3.选择器的优先级
!important>内嵌>id>伪类/属性/class>元素/伪元素>通配符

<style>
<div class="box">
    <p id="p1" >
    <span class="span1">你好</span>
</div>

 优先级：    
        .box #p1 .span1{
            color:green;
        }
>
       .box #p1 span{
           color: yellow;
       }
>
        #p1 span {
               color:red;
           }
>
        div p span {
            color:green;
        }
>
        span{
            color: blue;
        }
</style>

如果加!important优先级升级

span{
           
            color: blue !important;
        }
这时候就该显示蓝色。

3、DIV样式设置

3.1、基本设置(在style中设置属性)常用：

类型：设置字体颜色等

<style>
           /*类型设置*/
        .type{
               font-saze:12px;               /*字体大小设置*/
               color: red;                  /*字体颜色*/
               text-decoration: none;    /*没有下滑线*/
             }
    </style>

背景：设置页面背景等

<style>
          /*背景设置*/
        .background
                 {
                  /*当背景颜色和图片同时设置时，你要知道这是两层，背景颜色在图片的下面*/
                   background-color: red;                      /*背景颜色*/
                   background-image: url("image/111.PNG");  /*背景图片*/
                   background-repeat: no-repeat;             /*背景图片不重复*/
                    background-position: 22px/*(水平位置)*/   22px/*垂直位置*/;
                         /*会根据你写X和Y的坐标，去到图片坐标显示的地方*/
                   height: 139px;                             /*背景高度*/
                   width: 100px;                             /*背景宽度*/
                 }
    </style>

边框:用于设置DIV或span的边框

<style>
       /*边框设置*/
         .cheek
              {
                  border: 1px solid red;
                  /*用于设置边框属性，选项有三个：边框粗细 类型 颜色*/
              }
   </style>

图片替换技术：两种方法：

1. 利用行高替换

<h1 class="way1">
    <a href="http://taibao.com">淘宝</a>

</h1>

<style>
.way1{
width:154px;
height:30px;
border:1px solid blank;
background:url("../img.11.jpg") no-repeat;
overflow:hidden;
}

.way1 a{
line-height:100px;
display:block;

}
</style>

2.利用首行缩进：

<h1 class="way2">
    <a href="http://taibao.com">淘宝</a>

</h1>

<style>
.way2{
width:154px;
height:30px;
border:1px solid blank;
background:url("../img.11.jpg") no-repeat;
text-indent:-500px;
overflow:hidden;
}

.way2{
display:block;
}
</style>

雪碧图：只访问一张图片

<div class="sprite"></div>

<style>
.sprite{
weith:54px；
hight:72px;
border:1px solid blank;
background:url("");
background-position:-54px 157px;

“向左和上平移都为-”

}
.sprite:hover{
background-position:-168px -57px;

}
</style>

渐变：

1.向右线性渐变 
background：linear-gradient(to right,red,yellow);
2.垂直渐变

background:linear-gradient(90deg,yellow,red);

3.径向渐变

background：linear-gradient（pink,#58a）;

4.transform:translate( ):平移

transform:translate(30px,50px);

5.transform:rotate():旋转

transform：rotate（45deg）;

6.transform：scale（）：放大缩小

transform：scale（1，0.5）；

7.放慢的一个动画：  transition: all linear 2s;

8./*兼容前缀，谷歌，火狐，微软，欧朋*/
            -webkit--transition: all linear 0.5s;
            -moz-transition: all linear 0.5s;
            -ms-transituon:all   linear 0.5s;
            -o-transition:all linear 0.5s;

animation:yangjing 3s infinite 动画效果：

 .box3{
            width: 100px;
            height: 100px;
            background: red;
            animation: yangjing 3s 2;

        }
        @keyframes yangjing {
            /*第一种*/
/*from{*/
    /*background: red;*/

/*}*/
            /*to{*/
                /*background: gold;*/
            /*}*/
/*第二种*/
20%{
width: 300px;
    border-radius: 50%;
    background: purple;
}
            30%{
                width: 400px;
                height: 150px;
                border-radius: 20px/30px;
                background: green;

            }
            40%{
                width: 100px;
                height: 100px;
                background: powderblue;
                transform: rotate(45deg);

            }
            60%{
                background: darkgoldenrod;
            }
            80%{
                border-radius: 50%;
            }
            100%{
                background: orangered;
            }
        }

HTML入门经典

标签：

原文地址：http://www.cnblogs.com/1992yangjing/p/5770717.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行