我挺可怜昨晚那个男生的，毕竟我曾经和他一样无助

# 一、HTML语言

1、什么是HTML语言

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

标签：标记的意思，在日常生活中，我们也经常会见到一些标记，例如交通规则的标记，告诉你应该怎样走。

而这里的标签就是告诉浏览器，在网页上显示什么内容，例如图片，文字，视频等。

文本：文字，那么什么是”超文本“，不仅可以显示文字，而且可以显示出图片，视频等，并且可以对文字，图片加上链接（所谓链接，就是单击一下，可以打开别的页面。）。

2、网页创建

了解了什么是HTML以后，怎样使用HTML编写网页呢？

先创建一个记事本文件，然后重命名，格式为.html。用记事本工具编写，比较麻烦，这里可以写一个标记，演示一下，同时也说清楚了什么是标记。

我们可以用一下其它的工具来编写，提供相应的代码提示。

2.1 常用工具

2.2 Html基本结构

说明：
1、标签的作用是所有HTML中标签的一个根节点。
2、 头部标签，在头部标签中我们必须设置的标签是标签</span><br><span class="line">3、<title> 标签设置网页的标题</span><br><span class="line">4、<body> 页面在的主体部分，用于存放所有的HTML标签</span><br></pre></td></tr></tbody></table></figure>

<p><strong>这个结构要记住。</strong></p>
<p>注意：在使用sublime进行演示时，最开始敲完后不要敲回车键，否则会自动填充整个代码。</p>
<p>通过整个HTML结构我们可以看出来，标签之间都是有关系的。</p>
<title>在<head><meta name="generator" content="Hexo 3.9.0">里面，而<head><meta name="generator" content="Hexo 3.9.0">和</head></head><body>是并列的。



<h3 id="2-3-标签关系"><a href="#2-3-标签关系" class="headerlink" title="2.3 标签关系"></a>2.3 标签关系</h3><p>   标签的相互关系就分为两种：</p>
<p>1.嵌套关系</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><head>  <title>

2.并列关系

1
2

建议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。

我们发现在手敲上面的代码的时候，会比较麻烦，所以可以如下的快速输入方式：

再页面中输入 以下2个单词

1. html: 5
2. !
      在sublime里面然后按下tab键盘即可生成HTML骨架

2.4 文档类型

这句话就是告诉我们使用哪个html版本？我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

2.5 字符集

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字

BIG5 繁体中文港澳台等用

GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

1	记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

二、HTML常用标签

我们学习HTML，最主要的就是用来学习标签

1、排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

1.1 标题标签 (熟记)

我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

1
2
3

、
、
、
、
和


 用来修饰网页的主标题，
表示一个段落的标题，
表示段落的小节标题

1	标题标签语义：作为标题使用，并且依据重要性递减

其基本语法格式如下：

1	<hn> 标题文本 hn>

H1标签最常见的使用方法是用在logo上，如果我们要把H1标签使用在logo上，那么我们记得为图片添加alt标签以及a链接来指向首页，因为蜘蛛是无法识别图片的，所以我们要用alt标签来解释图片的意思。

1.2 段落标签( 熟记)

单词缩写： paragraph 段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

1	<p> 文本内容 p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

1.3 水平线标签(认识)

单词缩写： horizontal 横线

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

就是创建横跨网页水平线的标签。其基本语法格式如下：

1	<hr />是单标签

在网页中显示默认样式的水平线。建议在hr与/之间加上空格。

1.3.1 标签属性

属性就是特性比如手机的颜色手机的尺寸，总结就是手机的。。

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

1	<标签名属性1="属性值1" 属性2="属性值2" …> 内容标签名>

在上面的语法中，

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

比如:

1.4 HTML标签分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的、、都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

1.双标签

1	<标签名> 内容标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

1 2	> 比如 <body>我是文字 body> >

2.单标签

<标签名 />

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

1.5 换行标签(熟记)

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

1.6 div span标签(重点)

div span 是没有语义的是我们网页布局主要的2个盒子

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

div是块级元素，都是独占一行。

span, 跨度，跨距；范围

span都是行内元素，都是在一行，主要用来展示文本。

语法格式：

1	<div> 这是头部 div> <span>今日价格span>

2、HTML标签的语义化

白话：所谓标签语义化，就是指标签的含义。

为什么要有语义化标签

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化，搜索引擎会认为权重比较高。

核心：合适的地方给一个最为合理的标签。

3、文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

b i s u 只有使用没有强调的意思 strong em del ins 语义更强烈

4、图像标签img (重点)

单词缩写： image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

1	<img src="图像URL" class="css样式"/>

三、路径(重点、难点)

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为：相对路径和绝对路径

1、相对路径

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如。

2、绝对路径

绝对路径

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

四、链接标签(重点)

单词缩写： anchor 的缩写。基本解释锚, 铁锚的

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

1	<a href="跳转目标" target="目标窗口的弹出方式">文本或图像a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

1.外部链接需要添加 http:// www.baidu.com

2.内部链接直接链接内部页面名称即可比如 < a href=”index.html”> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=”#”)，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

1、base 标签

base 可以设置整体链接的打开状态

base 写到之间

2、锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本”创建链接文本。

2.使用相应的id名标注跳转目标的位置。

五：CSS样式

1、CSS初识

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2、CSS 网页的美容师

CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。让我们的网页更加丰富多彩。

CSS的最大贡献就是：让 HTML 从样式中解脱苦海，实现了 HTML 专注去做结构呈现。而样式交给 CSS 后，你完全可以放心的早点洗洗睡了！

![](.\图片\db.png)

网页添加 CSS和不添加CSS 的对比：

带有CSS的页面

![](.\图片\Cc.png)



没有CSS的页面

![](.\图片\fff.png)

3、CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

4:选择器（重点）

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

4.1 标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

1 2	标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

4.2 类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

1	.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

1	标签调用的时候用 class=“类名” 即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

DOCTYPE html>
<html>
<head>
    类选择器
    

<body>
   苹果
   橘子
    香蕉
    菠萝

4.3 选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。

能良好区分JavaScript变量命名(JS变量命名是用“_”)

3.不要纯数字、中文等命名，尽量使用英文字母来表示。

4.4 ID选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

1	#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

4.5 类选择器与ID选择器区别

在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜

id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

id选择器和类选择器最大的不同在于使用次数上。

<style type="text/css">
     .fontSize{
        font-size: 25px;
     }
     #blue{
        color: red;
     }
    style>
head>
<body>
    <p class="fontSize">张三p>
    <p class="fontSize">李四p>
    <p id="blue">王五p>
    <p id="blue">马六p>
    

body>
html>

4.6 通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

1	* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
  }

4.7 案例

制作一个完善的新闻详情页面。

第一步：我们首先通过HTML来进行网页结构的设计

第二：通过CSS样式来进行相应的美化。

在这个案例中，我们会讲解几个关于文本修饰的样式。

1
2
3

text-align: center;  /*让文本居中显示*/
text-indent: 2em; /*首行缩进2个字*/
font-weight: bolder; /* 对文字进行加错*/

具体案例如下：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻详情页面title>
    <style type="text/css">
        h1 {
            font-size: 25px;
            text-align: center;  /*让文本居中显示*/
        }
        div {
            font-size: 14px;
            text-align: center;
        }
        p {
            font-size: 14px;
            line-height: 22px;
            text-indent: 2em; /*首行缩进2个字*/
        }
        .sports{
            color: red;
        }
        .co{
            color:#ccc;
            font-weight: bolder;
        }

    style>
head>
<body>
    <h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天h1>
    <div>2017年07月16日20:11 <span class="sports">新浪体育 评论中大奖span>（11人参与）<span class="co">收藏本文span>div>
    <hr />
    <p>新浪体育讯　7月16日是燕京啤酒[微博]2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。p>


<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。p>

<p>据记者多方了解的情况，李虎[微博]极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。p>

<p>这样的情况并没有影响到丽江嘉云昊队[微博]的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。p>
    body>

body>
html>

4.8 后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

<style type="text/css">
    /*
    div p {
        color: red;
    }
    */
   .father p span {
    color:blue;

   }

    style>
head>
<body>
    <p>张三p>
    <div>
        <p>王五p>
    div>
    <div class="father">
        <p>马六
            <span>啊啊啊span>

        p>

    div>
body>

4.9 选择器的优先级

前面，我们学习了，标签选择器，类选择器，ID选择器，后代选择器，那么我们来看一下它们的优先级问题。

1、类选择器优先级高于标签选择器。

2、ID选择器优先级高于类选择器，也高于标签选择器。

3、后代选择器，要根据情况确定，与ID选择器结合使用优先级要高于与类选择器结合使用优先级

<style type="text/css">
    .bxg{
        color: red;
    }
    div {
        color: blue;
    }
    #box{
        color:green;
    }
    div .bxg{
            color:orange
    }
    style>
head>
<body>
   <div>
        <div id="box" class="bxg" >博学谷线上平台div>
    div>
body>
html>

5、块级标签显示模式

5.1、块级元素(block-level)（重点）

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

1	常见的块元素有 ~ 、、、等，其中标签是最典型的块元素。

块级元素非常适合布局(可以打开某个网站，看一下其对应的布局)，所以我们常说DIV+CSS

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素（行内元素）和其他块元素。

<meta charset="UTF-8">
    <title>块级元素title>
    <style type="text/css">
    div {
        background-color: orange;
        width: 500px;
        height: 200px;
    }
    style>
head>
<body>
    <div>张三div>
    <div>王五div>
body>
html>

5.2、行内元素(inline-level)（重点）

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

1	常见的行内元素有、、、、、~~、~~、、、等，其中标签最典型的行内元素。~~~~

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

<style type="text/css">
        span{
            background-color: orange;
            width: 200px;
            height: 300px; /*高度与宽度不起作用*/
        }

    style>
head>
<body>

    <span>张三是一个好人span>
    <span>李四span>
    <span>王五span>
    <p>
    <div>马六div>
    p>
body>
html>

注意：

只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6他们都是文字类块级标签，里面不能放其他块级元素。例如，不能在p标签中添加添加div标签。
链接里面不能再放链接。

5.3、块级元素和行内元素区别（重点）

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

5.4 、行内块元素（inline-block）（了解）

在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

行内块元素既有块级元素的特点，又有行内元素的特定。

    <title> 行内块元素title>
    <style type="text/css">

    input {
        width: 300px;
        height: 20px;
    }
    style>
head>
<body>
    <input type="text" name="userName">
    <input type="text" name="userEmail">
body>

5.5、标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

此阶段，我们只需关心这三个，其他的是我们后面的工作。

    <title>标签显示模式转换 displaytitle>
    <style type="text/css">
    div {
        display: inline; /*将块级元素转换成行内元素显示模式*/
    }
    span {
        display: block; /*将行内元素转换成块级元素显示模式*/
    }
    a {
        background-color: orange;
        width:100px;
        height:30px; /*a标签是行内元素，所以宽高无效，但是我们在后期网页设计中经常来控制a标签的高度与宽度，所以在这里我们可以转换成行内块元素的显示模式*/
        display:inline-block;
    }

    style>
head>
<body>
    <div>张三div>
    <div>李四div>
    <div>王五div>
    <span>123span>
    <span>456span>
    <span>780span>

    <a href="#">abca>
    <a href="#">defa>
    <a href="#">higa>
    body>
html>