html标签学习1

html:超文本标记语言

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

<!--这是一段注释。注释不会在浏览器中显示。-->

<!DOCTYPE html>     开头部分
head标签下主要用
meta标签 meta标签下常用
    name  主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。    
    http-equiv 相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
非meta标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="梦山哥">
    <meta name="descripthion" content="梦山哥哥帅">
    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com/"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
    <title>梦山网</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>

</body>
</html>

块级标签内联标签

body标签

基础标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="梦山哥">
    <meta name="descripthion" content="梦山哥哥帅">
    <meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
    <title>梦山网</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
    <h1>hello</h1>   <!--取值范围1-6 字体从大到小  块级标签-->
    <b>hello</b>     <!--加粗 内联标签-->
    <em>hello</em>   <!--斜体 内联标签-->
    <sub>4</sub>     <!--下角标 内联标签-->
    <sup>5</sup>     <!--上角标 内联标签-->
    <hr>              <!--下划线 块级标签-->
    <br>              <!--换行 块级标签-->
    <p>hello</p>       <!--段落，包裹的内容被换行.并且也上下内容之间有一行空白. 块级标签-->
    <strike>hello</strike><!--为文字加上一条中线 内联标签-->
</body>
</html>

<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

图形标签: <img>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="梦山哥">
    <meta name="descripthion" content="梦山哥哥帅">
    <meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
    <title>梦山网</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
    <img src="1.jpg" width="200" height="300"title="美女" alt="图片跑掉了">
    <img src="0.jpg" width="200" height="300"title="美女" alt="图片跑掉了">
</body>
</html>

超链接标签(锚标签): <a> </a>

什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

<a href="" target="_blank" >click</a>

href属性指定目标网页地址。该地址可以有几种类型：

    绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
    相对 URL - 指当前站点中确切的路径（href="index.htm"）
    锚 URL - 指向页面中的锚（href="#top"）

<a href="https://www.baidu.com/">百度</a>
<a href="https://www.baidu.com/" target="_blank">百度</a>
<a href="https://www.baidu.com/" title="这是什么网页？点开看看">**</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="梦山哥">
    <meta name="descripthion" content="梦山哥哥帅">
    <meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
    <title>梦山网</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
    <a href="https://www.baidu.com/">点我</a>   <!--可接网址-->
    <a href="1.html">点我1</a>                     <!--文件地址-->
    <a href="#abc">点我2</a>                        <!--跳转到索引地址-->
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    <div id="abc"></div>
</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="梦山哥">
    <meta name="descripthion" content="梦山哥哥帅">
    <meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
    <title>梦山网</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
    <ol>             <!--有序标签-->
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <ul>             <!--无序标签-->
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <dl>               <!--定义标签-->
        <dt>安徽省</dt>
        <dd>合肥市</dd>
        <dd>六安市</dd>
    </dl>

</body>
</html>

表格标签 table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="梦山哥">
    <meta name="descripthion" content="梦山哥哥帅">
    <meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
    <title>梦山网</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
    <table border="1" cellpadding="100"><!--border 表格边框，cellpadding内边距，-->
        <thead>
            <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">1,2</td> <!--横向合并单元格-->

                <td rowspan="2">3,6</td>  <!--纵向合并单元格-->
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>

            </tr>
        </tbody>
    </table>
</body>
</html>

星期一菜谱作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="梦山哥">
    <meta name="descripthion" content="梦山哥哥帅">
    <meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
    <title>梦山网</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
   <table border="1">
       <tr>
           <td colspan="7">星期一菜谱</td>
       </tr>
       <tr>
           <td rowspan="2">素菜</td>
           <td colspan="4">青草茄子</td>
           <td colspan="3">花椒扁豆</td>
       </tr>
       <tr>
           <td colspan="4">小葱豆腐</td>
           <td colspan="3">炒白菜</td>
       </tr>
       <tr>
           <td rowspan="7">荤菜</td>
           <td colspan="4">油焖大虾</td>
           <td colspan="3">海参鲍鱼</td>
       </tr>
       <tr>
           <td colspan="4">红烧肉</td>
           <td colspan="3">烤全羊</td>
       </tr>
   </table>
</body>
</html>