Unit 1.前端基础之html

一.什么是html

　　定义:全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。需要注意的是:html不是一种编程语言,而是一种标记语言.使用标记标签来描述网页内容.

二.html文档结构

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

<html> 与 </html> 告知浏览器其自身是一个 HTML 文档。限定了文档的开始点和结束点，在它们之间是文档的头部(head)和主体(body).

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

<title> 元素可定义文档的标题。显示在浏览器标题栏

body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

补充:html注释

<!--这里是注释的内容-->

注释不能嵌套

注释不能写在标签中

三.head标签

　　head的作用:描述了文档的各种属性和信息，包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）的等。head内可以使用的标签包含:(meta,style,link,title,script)等

　　1.meta标签

　　作用:元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词,标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。meta标签有2个属性:http-equiv和name,必须的属性是content.就是说http-equiv和name属性都必须有content

　　1.1 http-equiv属性

　　它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

　　 <!--指定文档的内容类型和类型编码-->

    <meta http-equiv="Content-Type" content="text/html;charset="UTF-8"/>

    <!-- 5秒之后重定向到指定的URL -->

    <meta http-equiv="refresh" content="5;URL=https://www.baidu.com"/>

    <!-- 告诉IE浏览器以最高级模式渲染当前网页 -->

    <meta http-equiv="x-ua-compatible" content="IE=edge"/>

　　1.2 name属性

　　主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

    <!-- 指定关键字,用于seo优化 -->

    <meta name="kwywords" content="html基础,meta总结,meta属性,meta跳转"/>

    <!-- 网页描述信息 -->

    <meta name="description" content="路飞学城"/>

　　2.title 标签
　　作用:显示网页标题信息,会显示在网页的标题栏中.用来展示网页的主题.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">　　charset用来设置网页字符编码格式

  <title>网页标题</title>

</head>

<body>

</body>

</html>

四.其他标签

    <!-- 连接外部的css样式表 -->

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

    <!-- 定义内部的css样式表 -->

    <style type="text/css">

    </style>

    <!-- 定义脚本内容 -->

    <script type="text/javascript">

    </script>

    <script src="./index.js"></script>

    <!-- 定义网站图标 -->

    <link rel="icon" href="./fav.ico">

五.body标签

　　作用:定义文档主体,包含文档所有内容(文本,图片,超链接,列表,表格等).

　　5.1基本标签

'''

<hn></hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p></p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b></b>：加粗

<i></i>：斜体

<u></u>：下划线

<s></s>：删除线

<sup></sup>：上标

<sub></sub>：下标

<br>:换行.

<hr>:水平线,在行之间生成一个水平线

特殊字符：

      &lt; &gt；&quot；&copy;&reg;&nbsp

'''

　　5.2 a标签(超链接标签)

　　作用:把当前位置的文本或图片连接到其他的页面、文本或图像,还可以是应用程序.　　

<a href="" target="_blank" title="描述信息">click</a>

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

    绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）

    相对 URL - 指当前站点中确切的路径（href="index.htm"）

    锚 URL - 指向页面中的锚（href="#top"）

<!-- _blank 表示在新的网页中打开,默认是_self表示在当前页打开>

        <!-- 超链接作用:把当前位置的文本或图片连接到其他的页面、文本或图像-->

        <!-- target的默认值是:_self,指的是在当前页面打开资源

                             _blank,指的是在新网站打开资源

         -->

         <!-- a标签属于行标签:在一行内显示 -->

         <!-- 连接到其他页面 -->

        <a href="https:www.google.com" target="_blank" title="鼠标点上去的描述信息">打开谷歌</a>

        <!-- 做下载连接 -->

        <a href="./a.zip">下载压缩包</a>

        <!-- 做邮箱连接 -->

        <a href="mailto:junkec@126.com">联系我吧</a>

        <!-- 跳转到顶部内容 -->

        <a href="#">跳转到顶部</a>

        <!-- 跳转到指定的标签 -->

        <a href="#p1">跳转到指定的标签</a>

<!-- javascript:表示点击a标签时,执行一段js代码

             javascript:; 表示取消点击a标签时的动作

         -->

        <a href="javascript:alert(1)">内容</a>

        <a href="javascript:;">啥都不干</a>

补充

　　5.3列表标签ul,ol　　

        <!-- 列表标签分2种:

            1,ul:无序列表

            2,ol:有序列表

        -->

        <!-- type是用来设置列表前缀的显示字符

        ul的type类型有:disc:实心圆(默认)

                      circle:空心圆

                      square:实心矩形

                      none:不显示标示

        ol的type类型有:1:数字 (默认)

                      a:小写字母

                      A:大写字母

                      i:小写罗马字符

                      I:大写罗马字符

        如果type类型设置错误,则使用默认的type

         -->

        <ul type=none>

        <li>我的账户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的优惠券&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的收藏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>退出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        </ul>

        <ol type="i">

        <li>我的账户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的优惠券&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的收藏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>退出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        </ol>

　　5.4 div标签

　　作用:把文档分割为独立的、不同的部分.　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>body常用标签一</title>

</head>

<body>

    <div class="p1">

        <p style="height: 2000px" id="p1">顶部</p>

    </div>

    <div class="heading">

        <!-- heading:标题h1-h6级 -->

        <h1>路飞学成</h1>

        <h2>路飞学成</h2>

        <h3>路飞学成</h3>

        <h4>路飞学成</h4>

        <h5>路飞学成</h5>

        <h6>路飞学成</h6>

    </div>

    <div class="p1">

        <!-- 段落标签 -->

        <p>本地调试时，<strong><i>控制台</i></strong>经常会<span>打印</span>如下的错误（对 favicon.ico 的请求在 chrome 调试面板下不可见，可在抓包工具，比如 Fiddler 中看到</p>

        <p>本地调试时，控制台经常会打印如下的错误（对 favicon.ico 的请求在 chrome 调试面板下不可见，可在抓包工具，比如 Fiddler 中看到</p>

    </div>

    <div class="anchor">

        <!-- 超链接作用:把当前位置的文本或图片连接到其他的页面、文本或图像-->

        <!-- target的默认值是:_self,指的是在当前页面打开资源

                             _blank,指的是在新网站打开资源

         -->

         <!-- a标签属于行标签:在一行内显示 -->

         <!-- 连接到其他页面 -->

        <a href="https:www.google.com" target="_blank" title="鼠标点上去的描述信息">打开谷歌</a>

        <!-- 做下载连接 -->

        <a href="./a.zip">下载压缩包</a>

        <!-- 做邮箱连接 -->

        <a href="mailto:junkec@126.com">联系我吧</a>

        <!-- 跳转到顶部内容 -->

        <a href="#">跳转到顶部</a>

        <!-- 跳转到指定的标签 -->

        <a href="#p1">跳转到指定的标签</a>

        <!-- javascript:表示点击a标签时,执行一段js代码

             javascript:; 表示取消点击a标签时的动作

         -->

        <a href="javascript:alert(1)">内容</a>

        <a href="javascript:;">啥都不干</a>

    </div>

    <div class="lists">

        <!-- 列表标签分2种:

            1,ul:无序列表

            2,ol:有序列表

        -->

        <!-- type是用来设置列表前缀的显示字符

        ul的type类型有:disc:实心圆(默认)

                      circle:空心圆

                      square:实心矩形

                      none:不显示标示

        ol的type类型有:1:数字 (默认)

                      a:小写字母

                      A:大写字母

                      i:小写罗马字符

                      I:大写罗马字符

        如果type类型设置错误,则使用默认的type

         -->

        <ul type=none>

        <li>我的账户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的优惠券&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的收藏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>退出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        </ul>

        <ol type="i">

        <li>我的账户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的优惠券&nbsp;&nbsp;&nbsp;&gt</li>

        <li>我的收藏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        <li>退出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt</li>

        </ol>

    </div>

    <div class="img">

        <div class="img1">

            <a href="">

            <img src="./homesmall.png" alt="python"style="width: 300px; height:200px">

            </a>

        </div>

        <img src="./homesmall2.png" alt="python"style="width: 300px; height:220px">

    </div>

    <i>床前</i>明月光<br>疑是地上霜<hr>举头望<b>明月</b>

<!--

三种元素:

1.块级元素:1,独占一行 2,可以设置宽高,如果不设置宽度,默认是浏览器的宽度

2.行内元素:1,在一行内展示 2,不可设置宽高

3.行内块元素:1,在一行内展示 2,可设置宽高

 -->

</body>

</html>

div分割区域

分割后的div区域:

　　5.5 img标签

　　作用:向网页中嵌入一幅图像。　　

<img src="" alt="金融量化分析" title="我是是打酱油的"style="width:200px;height:200px">

src:表示图片路径,可以是本地的,也可以是网络图片.

alt:图片加载失败时,显示的文本.

title:鼠标放在图片上时,显示的文本.

style:用来设置图片的宽高

注意：

src设置的图片地址可以是本地的地址也可以是一个网络地址。
图片的格式可以是png、jpg和gif。
alt属性的值会在图片加载失败时显示在网页上。
还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
与行内元素在一行内显示

六.其他标签

　　6.1 特殊符号

　　浏览器在显示的时候会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。　　

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>路飞学城</title>

    </head>

    <body>

        <p>帮助有志向的年轻人

            通过努力学习获得

            体面的   工作    和    生活！</p>

    </body>

</html>

空格和回车例子

　　6.2特殊字符

　　在上一个实例中，我们演示了HTML中输入空格、回车都是没有作用的。要想输入空格，需要用特殊符号 --  。

　　常见的特殊符号:

　　特殊符号对照表