HTML初识

我们一般先学习HTML+CSS，这里我们先定一个小计划，我们先学习HTML，后学习CSS。

HTML（英文Hyper Text Markup Language的缩写）中文译为”超文本标记语言“。是用来描述网页的一种语言。

 

所谓超文本，是因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，

与世界各地主机的文件链接。

· HTML指的是超文本标记语言（Hyper Text Markup Language）

· HTML不是一种编程语言，而是一种标记语言（Markup Language）

· 标记语言就是一套标记标签（markup tag）

总结：HTML作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。它是用文字来描述网页的标签。

HTML骨架格式

我们HTML有自己的语法骨架格式：

<!DOCTYPE HTML>

<html>

    <head>

        <title><!-- 标题写这里 --></title>

    </head>

    <body>

        <!-- 正文内容写这里，一般来说我们以后所有的标记标签都写在这里 -->

    </body>

</html>

操作步骤：

1、新建一个Demo名字的txt文件

2、里面写入刚才的HTML骨架。

3、把后缀名改为 .html 。

4、右击 --> 浏览器打开。

HTML骨架解析

 

<!DOCTYPE html>

<!--

    DOCTYPE 文档声明 html指的是html5版本

    这句话就是告诉我们使用哪个html版本? 我们使用的是 html 5 的版本。html有很多版本，

    那我们应该告诉用户和浏览器我们使用的版本号。

-->

<html> <!-- html是文档的根节点元素，我们所有的元素标签都写在html标签里面 -->

    <head> <!-- head是我们网页的头部标签 -->

        <meta charset="UTF-8"/>

        <!--

        meta 元数据 charset 设置文档编码格式为UTF-8 360浏览器编码格式为GBK

 

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

        gb2312 简单中文  包括6763个汉字

        BIG5   繁体中文 港澳台等用

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

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

        -->

        <title></title>

    </head>

    <body>

        <!-- body里面是我们正文内容，正常来说，我们网页上所有可见的东西都是在body中写的 -->

    </body>

</html>

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

HTML标签分类

在HTML页面中，带有"< >"符号的元素被称为HTML标签，如我们HTML骨架中提到的<html>、<head>、<body>等都是html骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。

1、双标签

<标签名> 内容 </标签名>

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

 

例如：<body>我是内容</body>

2、单标签

<标签名/>

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

 

例如：<br/> <hr/> <input/>

HTML标签关系

html标签的相互关系一般分为两种：
一、嵌套关系

<head>

    <title></title>

</head>

二、并列关系

<head>

 

</head>

<body>

 

</body>

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

HTML基础

一、标题标签（熟记）

为了使网页更具有语义化，我们经常会使用到标题标签，HTML提供了6个等级的标题，即

<h1></h1>   <h2></h2>   <h3></h3>   <h4></h4>   <h5></h5>   <h6></h6>

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

注意： h1标签因为重要，所以尽量少用，不要动不动就写一个h1，一般来说，h1都是给logo使用，或者页面中极为重要

的标题。

二、段落标签（熟记）

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

 

<p>段落文本内容</p>

 

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

三、水平线标签（认识）

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr/>

注意：这是一个单标签。

四、换行标签（认识）

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

 

<br/>

五、div、span标签（重点）

div、span是没有语义的，但是同时它又是我们网页布局最主要的两个盒子，我们是不是常听到这样一个词（div+css布局），其基本语法格式如下：

<div>块级元素</div>  <span>行内元素</span>

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

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

方式显示。

 

标签

描述

<b>

定义粗体文本

<strong>

定义加重语气。

<em>

定义着重文字。

<big>

定义大号字。

<small>

定义小号字。

<i>

定义斜体字

<sub>

定义下标字。

<sub>

定义上标字。

<s>

不赞成使用。使用 <del> 代替。

<del>

定义删除字。

<u>

不赞成使用。使用样式（style）代替。

<ins>

定义插入字。

七、标签属性

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

 

<标签名 属性1="属性值1" 属性2="属性值2" ... > 文档内容 </标签名>

 

在上面的语法中，

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

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

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

采取  键值对 的格式 key="value" 的格式

八、图像属性img（重点）

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

 

<img src="图像URL" />

 

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

属性

属性值

描述

src

URL

图像的路径

alt

文本

图像不能显示时替换的文本

title

文本

鼠标悬停时显示的内容

width

像素（XHTML不支持%页面百分比）

设置图像的宽度

height

像素（XHTML不支持%页面百分比）

设置图像的高度

border

数字

设置图像边框的宽度

九、链接标签（重点）

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

 

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

属性

属性值

 

href

目标的url地址

用于指定链接目标的URL地址，当为标签应用href属性时，他它就具有了超链接的功能。

target

_self、_blank

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

注意：

 

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

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

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

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

十、锚点链接（重点）

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

创建锚点链接分为两步：

 

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

  <h3 id="two">第2集</h3>

 

2.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）

  <a href="#two">

十一、base标签（了解）

· base可以设置<a>标签中href属性和target属性

· base必须要写在<head></head>标签中

基本案例

<html>

    <head>

        <title>我的标题</title>

        <base href="https://www.baidu.com/" target="_blank"/>

    </head>

    <body>

        <a href="">前往百度</a>

    </body>

</html>