HTML介绍
- 网页是由文字、图片、视频等元素组成的HTML文件,以htm或html结尾。
- HTML不是编程语言,而是超文本标记语言。
- web标准的构成主要包括以下三点:
- 结构——用于对网页元素进行整理和分类,主要是HTML。
- 表现——用设置网页元素的版式、颜色、大小等外观样式,主要是CSS。
- 行为——编写网页模型的定义和交互,主要是JavaScript。
HTML标签(上)
-
HTML语法规范
-
基本语法概述
HTML标签是由尖括号包围的关键词,如
<html>
。
HTML标签有双标签,如<html></html>
;也有单标签,如<br />
。 -
标签关系
包含关系
并列关系
-
-
HTML基本结构
<html> 最大的标签 <head> 文档头部,在head标签中必须设置title标签 <title>网页标题 </title> </head> <body> 主体内容 </body> </html>
-
开发工具——VScode
输入!并按回车,可以输出HTML的基本模板。
安装open in browser、auto rename tag和css peek插件。 -
文档类型声明标签
-
<!DOCTYPE>
用来告诉浏览器使用哪种HTML版本,<!DOCTYPE html>
——HTML5。注意:
<!DOCTYPE>
声明位于文档最前面的位置。
<!DOCTYPE>
不是HTML标签,而是文档类型声明标签。 -
lang属性,用来定义当前HTML文档显示的语言,en—英语,zh-CN—中文,如
<html lang="zh-CN">
。 -
charset属性,字符集,规定HTML文档使用哪种字符编码,通常使用UTF-8万国码,如
<meta charset="UTF-8" />
。一定要写,避免乱码。
-
-
HTML常用标签
-
标题标签
从<h1>-<h6>
一共六个等级,如<h1>一级标题</h1>
。 -
段落标签和换行标签
<p>
是段落标签,将网页划分为若干个段落,如<p>段落标签</p>
,段落与段落之间留有空行。
<br />
是换行标签,强制换行。 -
文本格式化标签
用于对文字设置粗体、斜体或下划线等效果,突出重要性。
加粗——<strong></strong>
或<b></b>
,优先考虑<strong>
。
倾斜——<em></em>
或<i></i>
,优先考虑<em>
。
删除线——<del></del>
或<s></s>
,优先考虑<del>
。
下划线——<ins></ins>
或<u></u>
,优先考虑<ins>
。 -
特殊标签
<div>
和<span>
两种标签没有语义,用来装内容,布局网页。
分割、分区——<div></div>
,可以看作大盒子,独占一行,在<div></div>
后面写的内容只能显示在下一行。
跨度、跨距——<span></span>
,可以看作小盒子,每行可以放多个<span></span>
。 -
图像标签
<img>
用来定义页面中的图像,是一个单标签,如<img src="图像url"/>
。<img>
标签中的属性:
src是必写属性,用来获取图像的路径。
alt属性,替换文本,在图片显示不出来时的替换文字。
title属性,提示文本,鼠标放到图片上面可以显示文字。
width属性,设置图像宽度。
height属性,设置图像高度。
border属性,设置图像边框。
此外,图像标签可以拥有多个属性,这些属性必须写在标签名的后面;属性之间没有顺序;属性采取键值对的格式,a=“b”。 -
路径
相对路径:以引用文件所在位置为参考,建立出的目录路径,即图片相对于HTML文件的位置。
图片位于HTML文件的同一级,<img src="touxiang.jpg" />
图片位于HTML文件的下一级,<img src="images/touxiang.jpg" />
图片位于HTML文件的上一级,<img src="../touxiang.jpg" />
绝对路径:指目录下的绝对位置。 -
超链接标签
<a>
用于定义超链接,从一个页面链接到另一个页面,如<a href="跳转目标" taget="目标窗口的弹出方式">文本或图像</a>
。其中,href属性用于指定链接目标的url,必须写;target属性用于指定链接页面打开的方式。外部链接,必须加上http:// ,如
<a href="http://www.baidu.com">百度</a>
。
内部链接,网站内部页面内相互链接,直接写内部页面名称即可,如<a href="index.html">索引</a>
。
空链接,如果没确定链接目标时可以使用,如<a href="#">空链接</a>
。
下载链接,如果href里面的地址是一个后缀为.exe或.zip的文件,会下载这个文件,如<a href="a.exe">下载</a>
。
网页元素链接,文本、图片、视频、音乐等都可以添加超链接,如<a href="http://www.baidu.com"><img src="touxiang.jpg" /></a>
。
锚点链接,设置href="#名字",利用id属性=名字,如<a> href="#two">第二章</a> <h2 id=two>第二章介绍</h2>
。
-
-
HTML中的注释和特殊字符
- 注释
<!--这是注释-->
,添加注释可以更好的解释代码的功能,便于开发人员的理解,在VScode中可以使用ctrl+/进行注释。 - 特殊字符
利用特定的字符来表达一些特殊的符号。
- 注释
符号名 | 字符代码 |
---|---|
小于号 | < |
大于号 | > |
空格 |   |