1.HTML的语法规范
HTML标签是由尖括号包围的关键词,例如<html>。
HTML标签通常是成对出现的,例如<html>和</html>,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。
有些特殊的标签必须是单个标签,例如<br />,我们称为单标签。
标签的关系
双标签关系可以分为两类:包含关系与并列关系。
1包含关系 2<head> 3 <title> </title> 4</head> 5 6并列关系 7<haed> </head> 8<body> </body>
2.HTML基本结构标签
每个网页都会有一个基本的结构标签(也称为骨架标签),如下所示。页面内容也是在这些基本标签上书写的。HTML页面也称为HTML文档。
<html></html>:HTML标签,页面中最大的标签,称为根标签。
<head></head>: 文档的头部,注意在head标签中必须要设置的标签是title。
<title></title>: 文档的标题,让页面拥有一个属于自己的网页标题。
<body></body>: 元素包含文档的所有内容,页面内容基本都是放在body里面的。
1<html> 2 <head> 3 <title>我的第一个页面</title> 4 </head> 5 <body> 6 白夜追凶 7 </body> 8</html>
3.开发工具
输入!按下Tab键就会生成页面骨架结构。
ctrl + /:注释与取消注释!
4.HTML常用标签
<!DOCTYPE>标签:文档类型的声明标签,作用就是告诉浏览器使用哪种HTML版本来显示网页。<!DOCTYPE>声明位于文档中最前面的位置,处于<html>标签之前。<!DOCTYPE>不是一个HTML标签,它就是文档类型声明标签。
1<!DOCTYPE html> // 当前页面采用的是HTML5版本来显示网页!
lang语言:用来定义当前文档显示的语言。en定义语言为英语;zh-CN定义语言为中文。其实,对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文。charset字符集:字符集是多个字符的集合,以便计算机能够识别和存储各种文字。在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。charset常用的值有;GB2312、BIG5、GBK、UTF-8等,其中UTF-8被称为万国码,基本包括了全世界所有国家需要用到的字符。
1<meta charset="UTF-8 />
4.1 标签语义
标签的含义,重点是记住每个标签的语义,即这个标签是干嘛的。根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更加清晰。
4.2 标题标签<h1>-<h6>[重要]
为了使网页更加具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题。即<h1>-<h6>。
1<h1>我是一级标题</h1> // 单词head的缩写,意思是头部、标题。
h标签语义:作为标题使用,并且依据重要性递减。
特点:a.加了标题的文字会变的加粗,字号也会依次变大。b.一个标题独占一行。
1<h1>标题一共六级选</h1> 2<h2>文字加粗一行显</h2> 3<h3>从大到小依次减</h3> 4<h4>从重到轻随之变</h4> 5<h5>语法规范书写后</h5> 6<h6>具体效果刷新见</h6>
4.3 段落和换行标签[重要]
在网页中,要把文字有条理的显示出来,就需要将这些文字分段显示。在HTML标签中,<p>标签用于定义段落,它可以将整个网页分成若干段落。
1<p>我是一个段落标签</p>
p标签语义:可以把HTML文档分割成若干个段落。
特点:
a.文本在一个段落中会根据浏览器窗口的大小自动换行。b.段落之间保留空隙。
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br />。
1<br /> // break的缩写,意思是打断、换行。
br标签语义:强制换行。
特点:
a.<br />是一个单标签。
b.<br />标签只是简单的开始新的一行,与段落不一样,段落之间会插入一下垂直的间距。
4.4 文本格式化标签
在网页中,有时候需要为文字设置粗体、斜体或下划线等效果,这时候就需要用到HTML中的文本格式化标签,使得文字以特殊的方式显示。
文本格式化标签语义:突出重要性,比普通文字更重要!
1<strong></strong>或者<b></b>:加粗,更推荐使用<strong>标签加粗,语义更加强烈 2<em></em>或<i></i>:倾斜,更推荐使用<em>标签倾斜,语义更加强烈 3<del></del>或<s></s>:删除线,更推荐使用<del>标签删除,语义更加强烈 4<ins></ins>或<u></u>:下划线,更推荐使用<ins>标签插入,语义更加强烈
4.5 <div>和<span>标签
<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。
1<div>这是头部</div> // div是divsion的缩写,表示分割,分区;span表示为跨度,跨距。 2<span>今日价格</span>
特点:
a.<div>标签是用来布局的,但是现在一行只能放一个<div>,大盒子。b.<span>标签用来布局的,一行上可以放多个<span>,小盒子。
4.6 图像标签与路径[重点]
图像标签:在HTML标签中,<img>标签用于定义HTML页面中的图像。
1<img src="图像URL" />
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
属性:属于这个图像标签<img>的特性。
图像标签<img>的其他属性:
1src 图片路径 必须属性 2alt 文本 替换文本,图像不能正常显示时,需要用该文字对图像进行替换! 3title 文本 提示文本,鼠标放到图像上,可以显示出文字对图片进行描述 4width 像素 设置图片的宽度 5height 像素 设置图片的高度 6border 像素 设置图片的边框粗线
图像标签属性注意点:
a.图像标签可以拥有多个属性,必须写在标签名的后面。b.属性之间不分先后顺序的,标签名与属性、属性与属性之间以空格分开。c.属性采取键值对的形式,即key="value"的格式,属性="属性值"。
路径:页面中的图片会非常的多,通常我们会新建一个文件夹来存放这些图像文件images,这时候再查找图像,就需要采用路径的方式来指定图像文件的位置。路径可以分成:
a.相对路径:以引用文件所在的位置作为参考基础,从而建立出的目录路径。即图片相对于HTML页面的位置。相对路径是从代码所在的文件出发,去寻找目标文件,因此这里所说的上一级、下一级和同一级就是图像相对于HTML页面的位置。
1同一级路径 图像文件位于HTML文件同一级 2下一级路径 / 图像文件位于HTML文件下一级 3上一级路径 ../ 图像文件位于HTML文件上一级
b.绝对路径:目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
4.7 超链接标签[重点]
在HTML标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。
超链接的语法格式:
1<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> // a是 单词anchor的缩写,意思是锚点
两个重要的属性如下:
a.href:用于指定链接目标的url地址,必须的属性,当标签应用href属性时,它就具有了超链接的功能。b.target:用于指定链接页面的打开方式,其中self为默认值,blank为在新窗口中打开方式。链接的分类:
a.外部链接:如<a href="https://www.baidu.com"> 百度 </a>。
b.内部链接:网站内部页面之间的相互链接。直接链接内部页面的名称即可,例如<a href="index.html">首页</a>。
c.空链接:如果当时没有确定链接的目标时,<a href="#">首页</a>。
d.下载链接:如果href里面的地址是一个文件或压缩包,会下载这个文件。
e.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
f.锚点链接:当我们点击链接时,可以快速定位到页面中的某个位置。
在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第2集</a>。
找到目标位置标签,里面添加一个id属性=刚才的名字,如<h3 id="two">第2集介绍</h3>。
5.HTML中的注释和特殊字符
5.1 HTML中的注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。HTML中的注释以"<!--"开头,以"-->"结束。注释标签中的内容是给程序员看的,这个代码是不执行不显示到页面中的。
1<!-- 注释语句 --> 快捷键: ctrl + /
5.2 特殊字符
在HTML页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符代替。
1空格 记忆 2< < 记忆 3> > 记忆 4& & 5¥ ¥ 6© © 7® ® 8° #deg; 9± #plusmn; 10× × 11÷ ÷ 12² ² 13³ $sup3;