01：HTML

HTML概述

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！

文档树：

Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1、页面编码（告诉浏览器是什么编码）

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

2、刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

3、关键词

<meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部">

4、描述

<meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。">

5、IE兼容

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Title

<title>你网址的头信息</title>

Link

css

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

icon

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

Style

在页面中写样式

< style type="text/css" > 
.bb{ 
background-color: red; 
} 
< /style>

Script

1、引进文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

2、写js代码

< script type="text/javascript" > ... </script >

给个完整的实例：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="Refresh" Content="3">-->
    <!--<meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn">
    <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>
    <meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>

    <title>小男孩</title>

</head>
<body>

</body>
</html>

常用标签

标签一般分为两种：块级标签和行内标签

1、a、span、select 等
2、div、h1、p 等
各种符号

下面介绍主要的标签：

1、p是段落标签（默认段落之间是有间隔的）、br是换行标签、hr是画个横线、H1~H6是标题；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>asdfasdfasdasdfasdfasdfasdfasdfasdfasdfasdfasd</p>
<p>asdfasdfasdasdfasdfasdfas<br>dfasdfasdfasdfasdfasd</p>
<a href="http://www.baidu.com">百度</a>
<h1>fuckme</h1>
<h2>fuckme</h2>
<h3>fuckme</h3>
<h4>fuckme</h4>
<h5>fuckme</h5>
<h6>fuckme</h6>

<span>fuckyou</span>
<span>fuckyou</span>
<span>fuckyou</span>

<div id="d1" style="position: fixed; bottom: 0; right: 0;">看我在什么地方</div>
</body>
</html>

具体展示页面如下：

2、a标签，主要功能是：打开连接（_black表示在新的页面打开）和做锚点

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


　　<a href="http://www.baidu.com" target="_blank">百度</a>

    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>

    <div id="i1" style="height:600px;">第一章的内容</div>
    <div id="i2" style="height:600px;">第二章的内容</div>
    <div id="i3" style="height:600px;">第三章的内容</div>
    <div id="i4" style="height:600px;">第四章的内容</div>
<hr>
</body>
</html>

3、input标签、table标签、ul、ol、dl标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Input</title>
</head>
<body>
<form action="" enctype="multipart/form-data">
    <input type="text" name="user">
    <input type="password" name="pwd">
    <hr>
    男：<input type="radio" name="gender" value="1">
    女：<input type="radio" name="gender" value="2" checked="checked">
    <hr>
    形意：<input type="checkbox" name="favor" value="1">
    八卦：<input type="checkbox" name="favor" value="2">
    太极：<input type="checkbox" name="favor" value="3">
    <hr>
    <input type="file" name="f1">
    <hr>
    <select name="city" id="c1">
        <option value="1">南京</option>
        <option value="2">北京</option>
        <option value="3" selected="selected">上海</option>
    </select>
    <br>
    <textarea name="t1" id="t1" cols="30" rows="10"></textarea>
    <input type="submit" value="submit">
    <input type="reset" value="reset">
    <input type="button" value="button">
</form>
<hr>
<table border="1">
    <thead>
        <tr>
            <th>11</th>
            <th>22</th>
            <th>33</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td colspan="2">2列</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td rowspan="2">2行</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>

</table>


<ul>
    <li>点</li>
    <li>点</li>
    <li>点</li>
</ul>

<ol>
    <li>序列</li>
    <li>序列</li>
    <li>序列</li>
</ol>

<dl>
    <dt>1</dt>
        <dd>11</dd>
        <dd>11</dd>
        <dd>11</dd>
    <dt>2</dt>
        <dd>22</dd>
        <dd>22</dd>
        <dd>22</dd>
</dl>

</body>
</html>

4、img、空格、大小于号、fieldset及label（及包括点label跳到对应的input框）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="https://www.sogou.com/web">
    <input type="text" name="query">
    <input type="submit" value="搜索">
</form>

<p>&gt;&nbsp;&nbsp;&lt;</p>

<fieldset>
    <legend>登陆</legend>
    <label for="i1">账号:</label>
    <input id="i1" type="text" name="user">
    <br>
    <label for="i2">账号:</label>
    <input id="i2" type="text" name="passwd">
</fieldset>

<img src="test.gif" title="美女" alt="fuckme">

</body>
</html>

HTML的相关知识就先这样吧……