1.HTML是什么
HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即我们所见到的网页。
2.使用工具
HBuilderX
也可以用记事本写代码,将记事本文件名后缀改成.html即可
3.Html网页结构
<!DOCTYPE html> <!-- 告诉浏览器使用什么规范 -->
<html>
<head>
<meta charset="utf-8" /> <!-- 使用全世界所有国家需要用到的字符页面编码 -->
<title></title> <!-- 当前浏览页的名字 -->
</head>
<body> <!-- 这里写代码主体 -->
HELLO WORLD!!
</body>
</html>
gb2312包含全部中文字符 utf-8 则包含全世界所有国家需要用到的字符
4.网页上运行
上面工具栏,运行--运行到浏览器---选择一个你自己想用的浏览器即可(推荐谷歌)
5.网页基本标签
h1标签(标题标签)
html中的标签分为双标签和单标签,双标签如<h1>内容</h1>,单标签如<br/>
使用双标签需要将内容括起来,单标签则不需要
标题标签可使字体加大加粗 例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
HELLO WORLD!!
<h1>HELLO WORLD!!</h1>
<h2>HELLO WORLD!!</h2>
<h3>HELLO WORLD!!</h3>
<h4>HELLO WORLD!!</h4>
<h5>HELLO WORLD!!</h5>
<h6>HELLO WORLD!!</h6>
</body>
</html>
网页中如下:
p标签(段落标签)
一般用于一篇文章 例:
<h1>北京欢迎你</h1>
<p>北京欢迎你,有梦想谁都了不起!</p>
<p>有勇气就会有奇迹。</p>
网页中演示:
br标签(换行标签)
在Html里面,内容是不会自动换行的例如:
我们想让他换行的话就需要用到br标签 例:
<h1>北京欢迎你</h1>
<p>
北京欢迎你,有梦想谁都了不起!<br />
有勇气就会有奇迹。<br />
北京欢迎你,为你开天辟地<br />
……
</p>
加上了br标签就会换行了
hr标签(水平线标签)
想在北京欢迎你的标题下面加一行水平线可以这样做
<h1>北京欢迎你</h1>
<hr /> <!-- 添加了一行水平线 -->
<p>
北京欢迎你,有梦想谁都了不起!<br />
有勇气就会有奇迹。<br />
北京欢迎你,为你开天辟地<br />
……
</p>
strong和em标签(加粗和倾斜标签)
与以上用法一样,直接演示
<strong>徐志摩人物简介</strong>
<p>
<em>1910</em>年入杭州学堂<br />
<em>1918</em>年赴美国克拉大学学习银行学<br />
……
</p>
文字变粗和倾斜了
注释与特殊符号
在html里面注释是这样的
<!-- 我是注释 -->
他没有任何作用,是用来给开发者提示代码是做什么的或者说什么话都可以,当后期开发程序代码多而复杂时可以为开发者快速的理解代码。
特殊符号的使用与正常文字使用没有差异只是将符号替换成了以下字符例如在html里打多个空格只会显示一个但是多打几个 ;就可以多打几个空格。 例如:
img标签(图片标签)
语法
<img src="image/hetao.jpg" >
a标签(链接标签/超链接)
<a href=""></a>
超链接的经典应用:
页面间链接语法
超链接是HTML中的一个重要标签。
<a>标签用以定义超链接,作用是从一个页面跳转到另一个页面。
三种重要属性
1.href属性
href属性是超链接标签必须存在的属性,href用于连接目标的URL地址。
2.target属性
target用于指定页面的连接方式。其中_self是默认值,即在当前窗口打开连接的打卡方式,_blank为在新窗口的打开方式。
3.title属性
title为超链接设置一些介绍信息。当鼠标移到设置了title属性的超链接上时,会显示title属性值的内容。
连接分类
1.外部链接
外部链接是该网站网页跳转到另外一个网站的网页的连接。外部链接一定是 http:// 开头的。
例如:从自己的网页跳转到百度:
<a href="https://www.baidu.com/">百度</a>
2.内部链接
网站内部页面之间的相互跳转。内部连接直接连接内部页面名称。且通常使用相对路径。
<a href="02-vscode.html">内部链接</a>
3.空链接
当我们没想好或不知道链接到哪个页面时,我们可以先写一个空超链接。超链接要求必须存在href,所以当我们要写超链接时,规定href属性为"#",不能空白噢。
<a href="#">空链接</a>
4.下载链接
1.当在同一目录时,通过点击超链接可以直接下载文件,地址链接的文件.exe,或者zip等压缩包,href属性值赋予地址即可。
<a href="文件地址">点击超链接下载文件或压缩包</a>
2.浏览器可以直接打开图片或.txt文档,如果我们希望浏览器不打开直接下载,则可以通过download属性来实现这一功能。
<a href="下载地址" download="名字"></a>
5.各种网页元素链接
网页中的各种元素也可添加链接,如文本,图片,表格,音频,视频等可添加超链接。
例如:链接到一张QQ图标的图片
<a href="222.png"><img src="222.png"></a>
6.锚点链接
锚链接可以链接到本页面的特定位置,也可以链接到另一个页面的特定位置。其实现方式是添加锚标记。即:
<a href="#名字">跳转</a>,"#"必不可少。
<标签名 id="与刚才的名字一致"></标签名>
关于“#标记名”,它其实是页面中某一个标签的id属性值。也就是说,如果要跳转到网页的某个位置,就先在这个位置所在的标签设置id属性,然后就可以通过锚链接跳转到这个位置了。
当跳转到当前页面的特定位置时,直接将锚标记设为href属性的值。如:
<a href="#top">跳转到本页面的id标记处</a><br/>
<h3 id="top">标记处</h3>
当跳转到另一个网页的特定位置时,将锚标记添加到链接地址的末尾。如:
<a href="http://www.baidu.com#标记名">跳转到另一个页面的标记处</a>
<a href="https://www.bilibili.com/#标记名">跳转到哔哩哔哩动画</a>
行内元素和块元素
块元素:无论内容多少,该元素独占一行(p、h1-h6…)
行内元素:内容撑开宽度,左右都是行内元素的可以排在一行(a、strong、em…)