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中的文本格式化标签,使文字以特殊的
方式显示。
标签 |
描述 |
定义粗体文本 |
|
定义加重语气。 |
|
定义着重文字。 |
|
定义大号字。 |
|
定义小号字。 |
|
定义斜体字 |
|
定义下标字。 |
|
定义上标字。 |
|
不赞成使用。使用 <del> 代替。 |
|
定义删除字。 |
|
不赞成使用。使用样式(style)代替。 |
|
定义插入字。 |
七、标签属性
使用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>
- 还没有人评论,欢迎说说您的想法!