文章目录
一、初识HTML1、是什么2、文件扩展名3、声明4、🔺万维网联盟 (w3c)5、第一个HTML页面 —— Hello HTML!
二、🔺基本标签三、特殊(实体)符号1、🔺特点2、几种常用特殊字符
四、🔺图片 img五、🔺超链接 a
一、初识HTML
1、是什么
HTML: 超文本标记语言 (HyperText Markup Language),是用来描述网页的一种语言。
超文本:(超越文本限制) 指页面包含图片、链接,甚至音乐、程序等非文字元素。
注:HTML不是编程语言,是标记语言。
2、文件扩展名
文件扩展名 (后缀名):.html (推荐) 或 .htm
3、声明
HTML的声明:<!DOCTYPE html>
注:加上<!DOCTYPE html>表示代码采用的是HTML5的语法;没加默认采用HTML4.0的语法。
4、🔺万维网联盟 (w3c)
1)w3c:World Wide Web Consortium 万维网联盟
2)万维网之父:Tim Berners-Lee (蒂姆·伯纳斯·李)
扩展: 万维网联盟_百度百科
3)HTML是由w3c规定的。
<标签>内容
</标签>
<标签 属性名="属性值" 属性名="属性值" ...>
<标签 />
4)前端集成开发软件:Dreamweaver、HBuilder、WebStrom (推荐使用) …
扩展: 网页三剑客:Dreamweaver、Fireworks、Flash 【网页三剑客_百度百科】 世界五大主流浏览器: ① IE浏览器:Internet Explorer,微软旗下 ② Google浏览器:google chrome,谷歌旗下 ③ Firefox浏览器:简称FF,Mozilla旗下 ④ safari浏览器:苹果旗下,已停止对Windows系统的支持 ⑤ opera浏览器:挪威厂商opera旗下 【 世界五大主流浏览器_百度百科】
5、第一个HTML页面 —— Hello HTML!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>这是HTML标题
</title>
</head>
<body>
这里是HTML的主体内容,Hello HTML!
</body>
</html>
二、🔺基本标签
<html>
<head>
<meta charset="utf-8" />
<title>HTML基本标签
</title>
</head>
<body>
<h1>标题字1
</h1>
<h2>标题字2
</h2>
<h3>标题字3
</h3>
<h4>标题字4
</h4>
<h5>标题字5
</h5>
<h6>标题字6
</h6>
<p>鹅鹅鹅,
</p>
<p>曲项向天歌。
</p>
<p>白毛浮绿水,
</p>
<p>红掌拨清波。
</p>
蒂姆·伯纳斯·李 [1] (Tim Berners-Lee),OM,KBE,FRS,FREng,FRSA,(Sir Timothy John "Tim" Berners-Lee,1955年6月8日-),英国计算机科学家。
<br />
他是万维网的发明者,南安普顿大学与麻省理工学院教授。1990年12月25日,罗伯特·卡里奥在CERN和他一起成功通过Internet实现了HTTP代理与服务器的第一次通讯。
<br />
万维网联盟(W3C)是伯纳斯·李为关注万维网发展而创办的组织,并担任万维网联盟的主席。
<br />
2004年,英女皇伊丽莎白二世向伯纳斯·李颁发大英帝国爵级司令勋章。2009年4月,他获选为美国国家科学院外籍院士。在2012年夏季奥林匹克运动会开幕典礼上,他获得了“万维网发明者”的美誉。伯纳斯·李本人也参与了开幕典礼,在一台NeXT计算机前工作。他在Twitter上发表消息说:“这是给所有人的”,体育馆内的LCD光管随即显示出文字来。2017年,他因“发明万维网、第一个浏览器和使万维网得以扩展的基本协议和算法”而获得2016年度的图灵奖。
<hr />
<hr color="red" width="50%" />
<hr color='green' width=20%/>
<b>粗体字b
</b> <br />
<strong>粗体字strong
</strong> <br />
<i>斜体字i
</i> <br />
<em>斜体字em
</em> <br />
<del>删除字
</del> <br />
<ins>插入字
</ins> <br />
10
<sup>x
</sup> <br />
5
<sub>m
</sub> <br />
<font color="blue" size="50">字体标签
</font>
<pre>
for (int i = 0; i <= 10; i++) {
System.out.println(i);
}
</pre>
</body>
</html>
三、特殊(实体)符号
1、🔺特点
以 & 开始,以 ; 结束
2、几种常用特殊字符
🔺空格: 小于:< (less than) <大于:> (great than) >引号:" "版权:© ©
四、🔺图片 img
<img src="(相对)路径" title="鼠标悬浮文字" alt="图片加载失败显示的提示信息" />
<img src="img/baidu_logo.png" width="100px" title="我是百度图片哦" alt="图片找不到了呀" />
五、🔺超链接 a
<a href="资源地址">内容
</a>
<html>
<head>
<meta charset="UTF-8">
<title>HTML超链接
</title>
</head>
<body>
<a name="top">这是顶部
</a>
<br /><br /><br />
<a href="http://www.w3school.com.cn/" target="_self">Visit W3School
</a>
<br /><br /><br />
<a href="http://www.hao123.com" target="_blank"><img src="img/hao123_logo.png" /></a>
<br /><br /><br />
此处省略大于1页的文字。。。(用来演示翻页之后点击"置顶",能出现明显回到"这是顶部"的效果)
<br /><br /><br />
<a href="mailto:12345678@163.com">发邮件
</a>
<br /><br /><br />
<a href="#top">置顶
</a>
</body>
</html>
🍅🍅🍅 以往文章 👇
002_HTML基础入门二【列表 + 表格】 003_用户注册表单【HTML-form表单】