前端开发之HTML篇一

主要内容：

　一、HTML简介

　　二、HTML标签

三、HTML文档结构和注释

四、head标签及相关内容

五、body标签及相关内容

　1️⃣ HTML简介

　　（1）HTML

　　HTML是一个网页的主体部分，也是一个网页的基础。因为一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容。所以HTML部分是整个前端的基础。

　　HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。

　　HTML则是世界通用的、用于描述一个网页的信息的标记语言，我们使用的浏览器具有将HTML文档渲染并展示给用户的功能（当你访问知乎网站的时候，实际上你获得了一份由知乎提供给你的HTML文档。浏览器将根据HTML文档渲染出你看到的网页）。

　　head,div这类的带尖括号的玩意儿叫标签，标签描述了文本的作用，比如p标签表示其内部的文本是一个段落，a标签标识内部的文本是超链接等；与此同时，通过标签的互相嵌套，表示了这个文档的结构。至于哪个标签表示什么意思、总共有多少个种类的标签这类的问题，由W3C(万维网联盟)这一组织规定。 很显然，HTML作为一种标记语言它并没有什么逻辑，简单来说就是一些符号，一些有特殊意义的符号，一些浏览器认识的有特殊意义的符号。

　　我们写好的HTML文件最终都会运行在浏览器上，由浏览器来解析。

　　（2）开发环境

　　HTML编辑器可以选择，常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。

　　（3）文件后缀名

　　文件后缀一般使用.html或.htm， .html与.htm均是静态网页后缀名，网页文件没有区别与区分，html与htm后缀网页后缀可以互换，对网页完全没有影响同时也没有区别。可以认为html与htm没有本质区别，唯一区别即多与少一个“l”。

2️⃣ HTML标签
　　1、HTML标签是干什么的？

    HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的。我们学习HTML主要就是学习的HTML标签。

　　　2、标签的特点

　　 （1）在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签。

    （2）HTML中标签通常都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。

    （3）标签之间是可以嵌套的。例如：div标签里面嵌套p标签的话，那么`</p>`必须放在`</div>`的前面。

    （4）HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，因为大部分程序员都以小写为准。

3️⃣ HTML文档结构和注释
　　
　　1、HTML文档结构
　　　（1）什么是HTML文档结构？

　　　　HTML文件的结构：一个HTML文件是有自己固定结构的。

　　　　（2）HTML文档结构的特点

<!DOCTYPE HTML>

<html>

    <head>

        头部信息相关内容

    </head>

    <body>

        页面主体相关内容

    </body>

</html>

对于上面代码的解释：
    首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML文档。
    ① <html></html> 称为根标签，，所有的网页标签都在<html></html>中。
    ② <head></head>,用于定义文档的头部，它是所有头部元素的容器。常见头部元素有<title>、<script>、<style>、<link>和<meta>等标签。
    ③ 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容最终会在浏览器中显示出来。

小结：

　　HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。

　 2、HTML注释

　　　无论我们学习什么编程语言，一定要重视的注释。
　　　（1）HTML中注释的格式

<!--此处为代码注释-->

    注意： 注释中可以直接使用回车换行。

　　　　（2）我们习惯用注释的标签把HTML代码包裹起来。如下：

<!--代码注释，写在html代码之前>

    运行的代码

<!--代码注释，写在html代码之后-->

　　　　（3）HTML注释的注意事项

        HTML注释不支持嵌套；

        HTML注释不能写在HTML标签中。

4️⃣ head 标签及相关内容

　　1、 head 标签的内容和作用

    文档的头部描述了文档的各种属性和信息，包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）的等。

　　示例如下：

<!DOCTYPE html>

<html lang="en"> <!--lang="en"表示页面默认是英文-->

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

在网页中显示的内容

</body>

</html>

　　2、title 标签

　　　　（1）作用：

     在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

　　　　（2）使用示例：

<!DOCTYPE HTML>

<html>

    <head lang="en">

        <meta charset="utf-8">

        <title>暮光微凉的博客</title>

    </head>

    <body>

    </body>

</html>

　　3、meta标签

　　　　（1）作用：

    元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。提供的信息是用户不可见的。

　　　　（2）meta 标签的组成

    meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

　　　　　　<1> http-equiv属性

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

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

如：<meta http-equiv="Content-type" content="text/html" charset="utf-8"/>

② <!--重定向3秒跳转到指定的网址，注意有分号-->

如：<meta http-equiv="refresh" content="3;url=https://www.cnblogs.com/schut/">

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

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

　　　　　　<2> name 属性　　　　　

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

 <!--为了我们的SEO优化，工作的时候下面这两句要写-->

    <meta name="keywords" content="meta总结,html meta,meta属性，meta跳转" >

    <meta name="description" content="暮光微凉">

　　4、style 标签

　　　　（1）作用：

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

　　　　（2）示例：

   <style type="text/css">

   p{

       color:red;

   }

   </style>

　　5、link 标签

　　　　主要作用如下：　

   （1） <!--icon图标（网站图标）-->

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

   （2）<!--引入外部样式表-->

   <link rel="stylesheet" type="text/css" href="./file.css"> <!--同一目录下用“./”导入-->

　　6、script 标签

 <!--定义JavaScript代码或引入JavaScript文件-->

    <scrpt src="myscript.js"></script>

5️⃣ body 标签及相关内容

　　网页中显示的内容一定要放在body标签中。

　　1、h 标签，主要用作标题（块级元素，独占一行）

　　　　示例：

    <!--以下是h1到h6标签,h1字体最大，h6字体最小，一般用于标题-->

    <h1>暮光微凉</h1>

    <h2>暮光微凉</h2>

    <h3>暮光微凉</h3>

    <h4>暮光微凉</h4>

    <h5>暮光微凉</h5>

    <h6>暮光微凉</h6>

　　2、段落标签 -- p

　　　　<p>段落内容</p> --> paragraph的简写，定义段落。

　　　　示例：　　　

<!DOCTYPE html>

<html  lang="en">

      <head>

             <meta charset="utf-8">

             <title>文本样式标签</title>

      </head>

      <body>

 <p>段落内容</p>  --> paragraph的简写，定义段落

    <p> HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。</p>

    <p>标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。</p>

    <p>与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。</p>

      </body>

</html>

　　3、文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等...

　　　　主要有以下几种：

（1）<b></b>：加粗

（2) <i></i>: 斜体

（3）<u></u>：下环线

（4）<s></s>: 删除线

（5）<sup></sup>：上标

（6）<sub></sub>：下标

（7）如果想在一段文字中特别强调某几个字，这时候就可以用到`<em>`或`<strong>`标签。

这两个标签都是表示强调，但是两者在强调的语气上有区别:`<em>`表示强调，`<strong>`表示更强烈的强调。

在浏览器中`<em>`默认会用斜体表示，`<strong>`会用粗体来表示。两个标签相比，我们通常会推荐大家使用`<strong>`表示强调

　　　　示例：　

<!DOCTYPE html>

<html  lang="en">

      <head>

             <meta charset="utf-8">

             <title>文本样式标签</title>

      </head>

      <body>

         <p> <b>HTML</b>，<i>全称是超文本标记语言</i>（<u>HyperText Markup Language</u>），<s>它是一种用于创建网页的标记语言</s>。</p>

    <p><em>标记语言</em>是一种将文本<sup>（Text）</sup>以及文本相关的其他信息结合起来，展现出关于<strong>文档结构和数据处理细节</strong>的计算机文字<sub>编码</sub>。</p>

      </body>

</html>

　　4、超链接标签 -- a

　　超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像。
　　
　　通常有两种使用<a>标签的方式：

1、通过使用 href 属性 - 创建指向另一个文档的链接

2、通过使用 name 属性 - 创建文档内的书签

　（1）常见用法如下：

 <!--a链接 超链接

                target:_blank 在新的网站打开链接的资源地址

                       _self 在当前网站打开链接的资源地址

                 title:鼠标悬停时标题-->

                <a href="http://www.baidu.com" target="_blank" title="暮光微凉">暮光微凉</a> <!--链接跳转网址-->

                <a href="1.rar">软件包</a> <!--下载软件包链接-->

                <a href="fav.ico">图标</a> <!--下载图片-->

                <a href="mailto:935259249@qq.com">联系我们</a>  <!--联系方式-->

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

                <a href="#nav">跳转到指定nav处标签处</a>

                <a href="javascript:alert(1)">提示</a> <!--点击会弹出提示1-->

                <a href="javascript:">提示</a> <!--点击无任何反应-->

                    <!--a标签介绍结束-->

　　（2）链接到同一个页面的不同位置

<!DOCTYPE HTML>

<html>

<body>

<p>

<a href="#c6">查看chapter 6</a>

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla</p>

<h2><a name="c6">Chapter 6</a></h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>

<p>This chapter explains ba bla bla</p>

</body>

</html>

　　5、列表标签 -- ul（无序标签）、ol（有序标签）、dl（定义列表）

　　　　网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容。

　　　　<ul> : unordered lists的缩写，即无序列表。

　　　　<ol> : ordered listsde的缩写，即有序列表。

　　　　示例如下：

     <ul>

        <li>我的购物车</li>

        <li>我的优惠券</li>

        <li>我的收藏</li>

        <li>退出</li>

    </ul>

    <ol>

        <li>我的钱包</li>

        <li>我的积分</li>

        <li>我的账单</li>

        <li>退出</li>

    </ol>

　　　　（1）ul 标签的属性　　　

ul标签的属性：

        disc：实心圆(默认值)

        circle：空心圆

        square：实心矩形

        none：不显示标识

如下实例：

    <ul type="circle">

        <li>我的购物车</li>

        <li>我的优惠券</li>

        <li>我的收藏</li>

        <li>退出</li>

    </ul>

　　　　（2）ol 标签的属性

    type：列表标识的类型

        1：数字

        a：小写字母

        A：大写字母

        i：小写罗马字符

        I：大写罗马字符

        注意：列表标识的起始编号默认为1

示例如下：

    <ol type="I">

        <li>我的钱包</li>

        <li>我的积分</li>

        <li>我的账单</li>

        <li>退出</li>

    </ol>

　　　　（3）dl标签的属性

　　　　自定义列表不仅仅是一列项目，而是项目及其注释的组合。

　　　　自定义列表以 <dl> 标签开始；每个自定义列表项以 <dt> 开始；每个自定义列表项的定义以 <dd> 开始。　　

<html>

<body>

<h2>一个自定义列表：</h2>

<dl>

   <dt>计算机</dt>

   <dd>用来计算的仪器 ... ...</dd>

   <dt>显示器</dt>

   <dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

</body>

</html>

　　6、盒子标签 -- div　　

　　<div>可定义文档的分区 division的缩写 译：区 <div> 标签可以把文档分割为独立的、不同的部分。
　　
　　如下示例：

 <!DOCTYPE html>

<!--html中的标签都是闭合标签，闭合标签包含双闭合和单闭合

    双闭合：如<html></html>;

    单闭合：如<meta />

-->

<!--页面的根结点-->

<html lang="en">

    <head>  <!--包含头部的信息，是一个容器，包含如style,title,meta,script,link等-->

        <meta charset="utf-8"/>    <!--声明头部的元信息，比如对我们文档规定编码格式--->

    </head>

    <body>

        <div id="content">

            <div class="h_list">

                <!--包含浏览器显示的内容标签，如div,p,a,img,input等-->

                <p style="height: 500px">这是第一个HTML5文档</p>

                <p id="nav">nav跳转到此处</p>

                <!--以下是h1到h6标签-->

                <h1>暮光微凉</h1>

                <h2>暮光微凉</h2>

                <h3>暮光微凉</h3>

                <h4>暮光微凉</h4>

                <h5>暮光微凉</h5>

                <h6>暮光微凉</h6>

                <p>段落内容</p>

                <!--h结束-->

            </div>

            <div class="p_list" style="height: 300px">

                <!--p标签开始-->

                <p> <b>HTML</b>，<i>全称是超文本标记语言</i>（<u>HyperText Markup Language</u>），<strong>它是一种用于创建网页的标记语言</strong>。</p>

                <p><em>标记语言</em>是一种将文本<sup>（Text）</sup>以及文本相关的其他信息结合起来，展现出关于<strong>文档结构和数据处理细节</strong>的计算机文字<sub>编码</sub>。</p>

                <p>与文本相关的其他信息（<s>包括例如文本的结构和表示信息等</s>）与原来的文本结合在一起，但是使用标记（markup）进行标识。<u>HTML则是世界通用的、用于描述一个网页的信息的标记语言</u>，我们使用的<u>浏览器具有将HTML文档渲染并展示给用户的功能</u>（当你访问知乎网站的时候，实际上你获得了一份由知乎提供给你的HTML文档。浏览器将根据HTML文档渲染出你看到的网页）。</p>

                <p>header,div这类的带尖括号的玩意儿叫标签，标签描述了文本的作用，比如p标签表示其内部的文本是一个段落，a标签标识内部的文本是超链接等；与此同时，通过标签的互相嵌套，表示了这个文档的结构。至于哪个标签表示什么意思、总共有多少个种类的标签这类的问题，由W3C(<strong>万维网联盟</strong>)这一组织规定。 很显然，HTML作为一种标记语言它并没有什么逻辑，简单来说就是一些符号，一些有特殊意义的符号，一些浏览器认识的有特殊意义的符号。

                我们写好的HTML文件最终都会运行在浏览器上，由浏览器来解析。</p>

                <!--p标签结束-->

            </div>

            <div class="a_list" style="height: 100px">

                <!--a标签介绍开始-->

                <!--a链接 超链接

                target:_blank 在新的网站打开链接的资源地址

                       _self 在当前网站打开链接的资源地址

                 title:鼠标悬停时标题-->

                <a href="http://www.baidu.com" target="_blank" title="暮光微凉">暮光微凉</a> <!--链接跳转网址-->

                <a href="1.rar">软件包</a> <!--下载软件包链接-->

                <a href="fav.ico">图标</a> <!--下载图片-->

                <a href="mailto:935259249@qq.com">联系我们</a>  <!--联系方式-->

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

                <a href="#nav">跳转到指定nav处标签处</a>

                <a href="javascript:alert(1)">提示</a> <!--点击会弹出提示1-->

                <a href="javascript:">提示</a> <!--点击无任何反应-->

                    <!--a标签介绍结束-->

            </div>

            <div class="ul_ol_li" style="height: 300px">

                <!--列表标签介绍开始-->

                <ul type="circle">

                    <li>我的购物车</li>

                    <li>我的优惠券</li>

                    <li>我的收藏</li>

                    <li>退出</li>

                </ul>

                <ol type="I">

                    <li>我的钱包</li>

                    <li>我的积分</li>

                    <li>我的账单</li>

                    <li>退出</li>

                </ol>

                <!--列表标签介绍结束-->

            </div>

        </div>

    </body>

</html>

　　上面示例中的代码可以分为以下层次：　

　　<div id="content">

        <div class="h_list">关于h标签的内容</div>

        <div class="p_list">关于p标签的内容</div>

        <div class="a_list">关于a标签的内容</div>

        <div class="ul_ol_li">关于ul,ol,li标签的内容</div>

    </div>

　　小结：　　　

　　我们将文档放在一个父级的区（div）中，它里面包含四块区（div）域，浏览器查看效果,你会发现每小块区域都是独占一行的，所以div是块级元素。另外，每块区域表示独立的一块，id属性和class属性其实很简单，你可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id，跟身份证号码一样，class可以设置同样的属性值，并且可以设置多个，例如class=’para n1‘

　　
　　7、图片标签 -- img

　　　　一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。
　　　　
　　　　语法：

　<img src="图片地址" alt="图片加载失败是显示的内容" title="提示信息"/>

　　　　注意：　　　

 1、src设置的图片地址可以是本地的地址也可以是一个网络地址。

        2、图片的格式可以是png、jpg和gif。

        3、alt属性的值会在图片加载失败时显示在网页上。

        4、还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度

        5、与行内元素在一行内显示

        6、可以设置宽度和高度

　　　　示例1：　

      <div class="img标签介绍">

                <!--img标签介绍-->

                <img src="pic1.jpg" alt="图片1，可爱萌妹" style="width: 400px ;height: 300px">

                <img src="pic2.png" alt="图片2，霸气御姐" style="width: 400px ;height: 300px">

            </div>

　　　　示例2：

       <div class="ex1">

            <ul type="none">

                 <li><a href="pic1.jpg" ><img src="pic1.jpg" alt="萌妹" title="可爱萌妹" style="height: 800px;height: 600px"/></a></li>

                 <li><p>这是一个可爱的萌妹额，想要吗？对不起，我也没有</p></li>

            </ul>

        </div>

　　8、span 标签可以单独摘出某一块内容，结合css设置相应的样式。

　　例如：　　

  <p> <span>CSS</span>,全称“（层叠样式表）”。以后我们在别的地方看到<span>“层叠样式表”、“CSS样式”</span>，指的就是CSS。</p>

　　9、其它标签

　　　　（1）换行标签 -- <br />

　　　　<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。

　　　　（2）分割线 -- <hr />

　　　　<hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容.

　　　　（3）特殊符号

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

　　　　　　常见特殊字符如下:

空格      　　&nbsp;

>               &gt;

<               &lt;

&               &amp;

￥               &yen

版权          &copy

注册          &reg

　　　　　　更多特殊字符请见：http://tool.chinaz.com/Tools/HtmlChar.aspx

返回顶部