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>