前端学习-HTML

2019-06-28 本文已影响0人 michaelxwang

HTML是什么？

HTML（Hypertext Markup Language）超文本标记语言。

纯文本只能保存文字内容。超文本可以保存除文字之外的图片、音频等内容。

可以通过标签来标记内容（标签都是成对出现的，有开始和结束）
例如：<h1>一级标题</h1>

负责网页三个要素之中的结构。
HTML使用标签的形式来标识网页中的不同组成部分。
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另外一个页面。

HTML标准结构

<!DOCTYPE html>
<!-- HTML根标签 ：一个页面有且只有一个根标签，网页中所有内容都应该在该html根标签中-->
<html>
    <!-- head标签： 该标签中的内容不会再网页中直接显示，它用来帮助浏览器解析页面-->
    <head>
        <!-- 
            title标签： 标题标签，默认会显示在浏览器的标题栏中。
            搜索引擎在检索页面时，会首先检索title标签中的内容。
            它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名
        -->
        <title>这是一个非常好的网页</title>
    </head>
    <!-- body标签：用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写 -->
    <body>
        <h1>这是我的第一个网页</h1>
    </body>
</html>

注释

<!-- 这是一个注释 -->
<!-- 
    功能：
    作者：
    日期：
 -->

在这个结构中，可以来编写HTML的注释
注释的内容，不会再页面中显示，但是可以在源码中查看
我们可以通过编写注释对代码进行描述，从而帮助其他的开发人员工作
一定要养成良好的编写注释的习惯，但是注释一定简洁明了。

属性

可以通过属性来设置标签如何处理标签中的内容
属性需要写在开始标签中，实际上就是一个 名&值(属性名=“属性值”) 对的内容
一个标签可以同时设置多个属性，属性之前需要用空格隔开

<h1>这是我的<font color="red" size="7">第一个</ront>网页</h1>

可以去 W3C HTML标签列表 查看都有什么属性

文档声明

为了让浏览器知道使用的HTML版本，我们需要在网页代码的最上边添加一个doctype的声明，来告诉浏览器网页的版本。
其中HTML5的文档声明如下：

<!--
    html5的文档声明，声明当前网页是按照HTML5的标准编写的
    编写网页时一定要将HTML5的文档声明写在网页的最上面
    -->
<!DOCTYPE html>
<html>
    <head>
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <h1>这是我的第一个网页</h1>
    </body>
</html>

注意：如果不写文档声明，则会导致有些浏览器进入一个怪异模式，进入怪异模式后，浏览器解析页面会导致页面无法正常显示，所以，一定要写文档声明。

为了兼容一些一些旧的页面，浏览器中设置了两种解析模式：
1.标准模式（Standards Mode）
2.怪异模式（Quirks Mode）

乱码的问题

首先介绍一下进制的基础知识

进制

几进制就是满几进一

二进制
1. 0 1
2. 10 11 100
十进制
1. 0 1 2 3 4 5 6 7 8 9
2. 10 11 12
十六进制
1.满16进1
2.0 1 2 3 4 5 6 ...9 a b c d e f
3.由于16进制满16进1，所以设置几个特殊字符表示 10 11 12 13 14 15 16
4.使用a b c d e f分别表示 10 11 12 13 14 15 16
八进制
1. 满8进1
2. 0 1 2 3 4 5 6 7
3. 10 11 12 ..17 20 21

乱码的原因以及解决方法

在计算机保存的任何内容，最终都需要转换为0 1这种二进制编码来保存，包括网页中的内容。
在读取内容时，需要将二进制编码，转换为正确的过程。
编码：依据一定的规则，将字符转换为二进制的编码的过程
解码：依据一定的规则，将二进制编码转换为字符的过程
字符集：编码和解码所采用的规则，称之为字符集。（ASCII、GBK、UTF-8）
乱码的原因：编码和解码采用的字符集不同
在中文系统中，默认采用GB231编码
解决办法：通过<mata />标签中告诉浏览器网页的编码

<!DOCTYPE html>
<html>
    <head>
    <!--
    需要告诉浏览器，网页所采用的编码字符集
    mata标签用来设置网页的一些元数据，比如网页的字符集、关键字、简介
    mata是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个 /
    -->
        <mata charset="utf-8" />
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <h1>这是我的第一个网页</h1>
    </body>
</html>

常用标签

标题标签

在HTML中，一共有六级标题标签（h1-h6）
在显示效果上 h1最大，h6最小，但文字的大小我们并不关心
使用Html标签时，关心的是标签的语义，我们使用的是语义化标签
6级标题中，h1最重要，表示一个网页的主要内容，h2-h6重要性依次降低
一般页面中标题标签只使用h1、h2、h3，h3之后的基本不使用

注意：对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检查完title，会立即查看h1

<!DOCTYPE html>
<html>
    <head>
        <mata charset="utf-8" />
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <!--
              在HTML中，一共有六级标题标签**（h1-h6）**
              在显示效果上 h1最大，h6最小
          -->
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
</html>

段落标签

段落标签用于表示内容中的一个自然段
使用<p></p>标签来表示一个段落
p标签中的文字，默认会占用一行，且段与段之间会有一个间隔

在HTML中，字符之间再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。可以使用 <br />标签来表示一个换行
<hr />可以在页面中生成一套水平线

<!DOCTYPE html>
<html>
    <head>
        <mata charset="utf-8" />
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <!--
              段落标签用于表示内容中的一个自然段
              使用p标签来表示一个段落
              p标签中的文字，默认会占用一行，且段与段之间会有一个间隔
        -->
        <p>我是一个p标签，用来表示一个段落</p>
        <!--
        在HTML中，字符之间再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。
        在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签
`        -->
        <p>
          锄禾日当午，<br />
          汗滴禾下土。<br />
          谁知盘中餐，<br />
          粒粒皆辛苦。<br />
        </p>
        <!--
        hr标签是一个自结束标签可以也页面中生成一条水平线。
`       -->
        <hr />
    </body>
</html>

实体

在HTML中，一些如<、>这种特殊字符是不能直接使用的
需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称之为实体（转义字符串）
实体的名字：

<       ：&lt;
>       ：&gt;
空格      ：nbsp;
版权符号  ：&copy;

浏览器解析到实体时，会自动讲实体转换为其自动的字符

<!DOCTYPE html>
<html>
    <head>
        <mata charset="utf-8" />
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <!--
        在HTML中，一些如<、>这种特殊字符是不能直接使用的
        需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称之为实体（转义字符串）
        实体的名字：
                      < ：&lt;
                      >：&gt;
                     空格：&nbsp;
                     版权符号：&copy;
          --> 
    a&lt;b&gt;c
    </body>
</html>

可以点击 W3C HTML实体 查看都有什么实体

图片

使用img标签来向网页中引入一个外部图片
img标签也是一个自结束标签
img标签属性：
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述
width：用来修改图片的宽度，一般用px作为单位
height：用来修改图片的高度，一般用px作为单位
图片的格式
JPEG（JPG）：
-- JPEG图片支持的颜色比较多，图片可以压缩，但不支持透明
-- 一般使用JPEG来保存照片等颜色丰富的图片
GIF：
-- GIF支持的颜色比较少，只支持简单透明，支持动态图
PNG：
-- PNG 支持的颜色比较多，并且支持复杂透明
-- 可以用来显示颜色复杂的透明的图片
图片使用原则：
效果不一致，使用效果好的
效果一致，使用小的

注意：
src属性配置的是图片的路径，日期我们所需要使用的路径全都是相对路径。相对路径指相对于当前资源所在目录的位置。

相对路径在下级的直接写 src=“文件夹名/a.gif”。相对路径在上级的直接写 src=“../a.gif”。
相对路径在每多返回一级就多使用一次“../”，返回上上级的直接写 src=“../../a.gif”

搜索引擎可以通过alt属性来识别不同的图片，若不写alt属性，则搜索引擎不会对img中的图片进行收录。
当宽度和高度两个属性只设置一个，则另一个也会等比例设置大小，如果两个都设置则按设置的来。一般开发中除了自适应的页面，不建议设置width和height。

<!DOCTYPE html>
<html>
    <head>
        <mata charset="utf-
8" />
        <title>图片标签</title>
    </head>
    <body>
        <!--
            img标签属性：
            src：设置一个外部图片的路径
            alt：可以用来设置在图片不能显示时，对图片的描述
            width：用来修改图片的宽度，一般用px作为单位
            height：用来修改图片的高度，一般用px作为单位
        -->
    <!--html文件与图片在同一个文件夹-->
    <img src="a.gif" alt="这是一个大松树">

    <!--html文件与图片不在同一个文件夹-->
    <!--
         src属性配置的是图片的路径，日期我们所需要使用的路径全都是相对路径
         相对路径指相对于当前资源所在目录的位置
         相对路径在下级的直接写 src=“文件夹名/a.gif”
         相对路径在上级的直接写 src=“../a.gif”
         相对路径在每多返回一级就多使用一次“../”，返回上上级的直接写 src=“../../a.gif”
    -->
    <img src="../src/2.gif" alt="这是一个大松树">
    </body>
</html>

<mata />标签

使用mata标签可以用来设置网页的关键字和描述
搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名
使用mata标签可以用来做请求的重定向
<mata http-equiv="refresh" content="秒数;url=目标路径" />

<!DOCTYPE html>
<html>
    <head>
    <mata charset="utf-8" />
    <!--
      使用mata标签可以用来设置网页的关键字
    -->
   <mata name="keywords" content="HTML5,JavaScript,前端" />
   <!--
      使用mata标签可以用来指定网页的描述
    -->     
   <mata name="description" content="发布h5,js等前端相关的信息" />
   <!--
      使用mata标签可以用来做请求的重定向
    -->     
   <mata http-equiv="refresh" content="5;url=http://blog.ineazy.com" />
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <h1>这是我的第一个网页</h1>
    </body>
</html>

可以点击 HTML <meta> 标签来查看 <meta> 标签的具体属性

内联框架

使用内联框架就可以引入一个外部的页面，使用iframe来创建一个内联框架
属性：
src：指向一个外部页面的路径，可以使用相对路径
name：可以为内联框架指定一个name属性
width：宽
height：高

注意：在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索

<!DOCTYPE html>
<html>
    <head>
    <mata charset="utf-8" />
        <title>内联框架</title>
    </head>
    <body>
    <!--
      使用内联框架就可以引入一个外部的页面
    -->
    <iframe src="http://www.baidu.com" name="百度"></iframe>
    </body>
</html>

超链接

使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：
href：指向链接跳转的目标地址，可以写一个相对路径也可以写一个地址
target：属性可以用来指定打开链接的位置
可选值：
_self，表示在当前窗口中打开（默认值）
_blank，在新的窗口中打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开

<!DOCTYPE html>
<html>
    <head>
    <mata charset="utf-8" />
        <title>超链接</title>
    </head>
    <body>
    <!--
      使用a标签来创建一个超链接
      属性：
          href：**指向链接跳转的目标地址，可以写一个相对路径也可以写一个地址
          target：属性可以用来指定打开链接的位置
          可选值：
              _self，表示在当前窗口中打开（默认值）
              _blank，在新的窗口中打开链接
              可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
    -->
   <a href="http://www.baidu.com">我是一个超链接</a>
   <a href="demo1.html">我也是一个超链接</a>
   <a href="demo1.html" target="_blank">在新的页面打开</a>
    </body>
</html>

可以点击 HTML <a> 标签来查看 <meta> 标签的具体属性

<center>标签

center标签中的内容，会默认在页面中居中显示我们可以将要居中的元素全都放到center标签里

<!DOCTYPE html>
<html>
    <head>
    <mata charset="utf-8" />
        <title>center标签</title>
    </head>
    <body>
        <center>
            <p>Hello World!</p>
        </center>
    </body>
</html>

HTML语法规范

HTML中不区分大小写，但是我们一般都使用小写
HTML中的注释不能嵌套
HTML标签必须结构完整，要么成对出现，要么自结束标签
HTML标签可以嵌套，但是不能交叉嵌套
HTML标签中的属性必须有值，且值必须加引号（双引号单引号都可以）

练习

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>练习</title>
    </head>
    <body>
        <center>
            <!-- 
                跳转到id为bottom的元素所在的位置
                直接在href中写 #id属性值
            -->
            <a href="#bottom">去底部</a>
            <a href="#hello">去指定位置</a>
            <h1>这是我的个人博客</h1>
            <hr />
            <h2>东风破</h2>
            <!-- 创建超链接时，如果地址不确定可以直接写一个#作为占位符 -->
            <a href="#">周杰伦</a>
            
            <p id="hello">
                一盏离愁 孤单伫立在窗口 <br />
                我在门后 假装你人还没走 <br />
                旧地如重游 月圆更寂寞 <br /> 
                夜半清醒的烛火 不忍苛责我 <br />
                一壶漂泊 浪迹天涯难入喉 <br />
                你走之后 酒暖回忆思念瘦<br />
                水向东流 时间怎么偷<br />
                花开就一次成熟 我却错过<br />
                谁在用琵琶弹奏 一曲东风破<br />
                岁月在墙上剥落 看见小时候<br />
                犹记得那年我们都还很年幼<br />
                而如今琴声幽幽 我的等候你没听过<br />
                <img src="1.jpg" alt="图片" width="300px" /> <br />
                谁在用琵琶弹奏 一曲东风破<br />
                枫叶将故事染色 结局我看透<br />
                篱笆外的古道我牵着你走过<br />
                荒烟漫草的年头 就连分手都很沉默<br />
                一壶漂泊 浪迹天涯难入喉<br />
                你走之后 酒暖回忆思念瘦<br />
                水向东流 时间怎么偷<br />
                花开就一次成熟 我却错过<br />
                谁在用琵琶弹奏 一曲东风破<br />
                岁月在墙上剥落 看见小时候<br />
                犹记得那年我们都还很年幼<br />
                而如今琴声幽幽 我的等候你没听过<br />
                谁在用琵琶弹奏 一曲东风破<br />
                枫叶将故事染色 结局我看透<br />
                篱笆外的古道我牵着你走过<br />
                荒烟漫草的年头 就连分手都很沉默<br />
                <img src="2.jpg" alt="图片2" width="300px" /> <br />
                谁在用琵琶弹奏 一曲东风破<br />
                岁月在墙上剥落 看见小时候<br />
                犹记得那年我们都还很年幼<br />
                而如今琴声幽幽 我的等候你没听过<br />
                谁在用琵琶弹奏 一曲东风破<br />
                枫叶将故事染色 结局我看透<br />
                篱笆外的古道我牵着你走过<br />
                荒烟漫草的年头 就连分手都很沉默<br />
            </p>
            
            <hr />
            
            友情链接:<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a> <br /><br />
            
            <!-- 
                如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部
                
                html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
                这个属性就是id，id属性在同一个页面中只能有一个不能重复
            -->
                <a id="bottom" href="#">回到顶部</a> | 
                
                <!-- 
                    发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
                    href="mailto:邮件地址"
                    
                    当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址
                -->
                
                <a href="mailto:abc@atguigu.com">联系我们</a>
        </center>
        
        
    </body>
</html>

练习总结：

如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部
html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
这个属性就是id，id属性在同一个页面中只能有一个不能重复
发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
href="mailto:邮件地址"
当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址