目录
1. HTML语法规范
1.1 基本语法概述
(1) HTML标签是由尖括号包围的关键词,例如<html>。
(2)HTML标签通常是成对出现的,例如<html>和</html>,我们称为双标签。标签对中第一个标签是开始标签,第二个标签是结束标签。
(3)有些特殊的标签必须是单个标签(极少情况),例如<br />,我们称为单标签。
1.2 标签关系
双标签关系可以分为两类:包含关系和并列关系。
包含关系
<head>
<title> </title>
</head>
并列关系
<head> </head>
<body> </body>
2. 基本结构标签
2.1 第一个HTML网页
每个网页都会有一个基本的结构标签(也成为骨架标签),页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
我只是一只生活在大草原上羊,那儿也有灰太狼。
</body>
</html>
3. 部分标签说明
<!DOCTYPE html> 文档类型说明标签,告诉浏览器这个页面采取html5版本来显示页面。
<html lang="en" >告诉浏览器或者搜索引擎这是一个英文网站,本页面采用英文显示。
<meta charset="utf-8">采取UTF-8保存文字,万国码,必须存在,如果没有则会出现乱码。
4. HTML常用标签
4.1 标题标签(重要)
为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的标题,即<h1> - <h6>,重要性依次递减。
<h1>我是一级标题</h1>
特点 :
1. 加了标题的文字会变得更粗,字号也会变大。
2. 一个标题独占一行。
4.2 段落标签(重要)
<p>标签用于定义段落,它可以将整个网页分为若干段落。
<p>我是一个段落</p>
特点 :
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。
4.3 换行标签(重要)
<br />换行标签,可以在某段文本强制换行。
特点 :
1. <br />是个单标签。
2. <br />标签只是简单的开始新的一行,跟段落不一样,段落之间会插入一些垂直间距。
案例:体育新闻
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>体育新闻</title>
</head>
<body>
<h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
<h4>数据统计:水花兄弟合砍61分</h4>
<p>库里22投11中,三分14投4中,罚球11罚全中得到37分8篮板8助攻,职业生涯季后赛得分
30+次数来到35次,超过哈登排名现役第3位,仅次于詹姆斯和杜兰特。</p>
<p>汤普森22投8中,三分8投4中得到24分3篮板2助攻,德拉蒙德-格林
得到16分10篮板7助攻5盖帽,凯文-鲁尼得到14分7篮板2助攻,今天勇士有7名替补出场。</p>
<h4>兄弟对决升级:小库里给哥哥造成压力</h4>
<p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中,小库里没有给哥哥
造成压力,他出场19分钟,7投1中只得到3分3篮板2助攻,在场期间输掉10分。</p>
<p>但在西决第2场中,小库里攻防两端都打出杰出的表现,全场送出4次抢断,
包括直接抢断自己的哥哥库里,在防守端给库里造成了极大的困扰。</p>
<p>作者: pink老师<br />2019-8-8</p>
</body>
</html>
4.4 文本格式化标签
在网页中,有时文字需要设置粗体,斜体或下划线等效果,突出其重要性。这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
4.5 <div>和<span>标签
<div>和<span>是没有语义的,就是一个盒子,用来装内容的。
<div>这是头部</div>
<span>今日价格</span>
特点 :
1. <div>标签用来布局,但是一行只能放一个<div>。不属于此<div>的内容不会再此行显示。大盒子
2. <span>标签用来布局,一行上可以放多个<span>。小盒子
4.6 图像标签和路径(重点)
4.6.1 图像标签(单标签)
在 HTML标签中,<img>标签用于定义HTML页面中的图像。
<img src="图像URL"/>
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
其它属性:
注:
1. 图片和 HTML文件要放在同一文件夹下。
2. 图像标签可以有多个属性,必须写在标签名的后面。
3. 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开,
4. 属性采取键值对的格式,即key="value"的格式,属性="属性值"。
4.6.2 路径(前期铺垫知识)
1. 目录文件夹和根目录:
目录文件夹:就是普通文件夹,里面存放了做页面的相关素材。
根目录:打开目录文件夹的第一层就是根目录。
2. 路径
路径可分为相对路径和绝对路径。
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。简单来说,就是图片相对于HTML页面的位置。
绝对路径:是指目录下的绝对位置,直接到达目录位置,通常从盘符开始的路径。或完整的网络地址。
4.7 超链接标签(重要)
在HTML标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。
4.7.1. 链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
两个属性的作用如下:
4.7.2. 链接的分类
(1)外部链接:例如<a href="http://www.baidu,com" >百度</a>。
(2)内部链接:网站内部页面的相互连接,直接链接内部网页名称即可,例如<a href="index.html" >首页</a>。
(3)空链接:如果当时没有确定链接目标时,<a href="#" >首页</a>。
(4)下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。
(5)网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频等都可以添加超链接。
(6)锚点链接:点击链接时,可以快速定位到页面中的某个位置。
在链接文本的 href 属性中,设置属性值为 #名字的形式,如<a href="#two" >第2集</a>。
找到目标位置标签,里面添加一个id属性=刚才的名字,如:<h3 id="two">第2集介绍</h3>。
5 HTML中的注释和特殊字符
5.1 注释标签
可以在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字。
HTML中的注释以"<!--"开头"-->"结束。