(使用菜鸟教程学习)
目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
上面的代码解释——
★什么是HTML?
HTML 是用来描述网页的一种语言。超文本标记语言!
它不是一种编程语言。
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签通常是成对出现的:
标签对中的第一个标签是开始标签,第二个标签是结束标签!
Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户~
★<!DOCTYPE> 声明
正确的声明有助于浏览器中正确地显示网页。
doctype的拼写,大小写均可。
所有主流浏览器都支持该声明。以下是完整网页声明——
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK(如360浏览器)。
(使用 VS Code 工具来创建 HTML 文件!)
★HTML 标题(六级,h1~h6)
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
结果——
★HTML 段落定义
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
浏览器会自动地在段落的前后添加空行。
★HTML 链接(通过那个a来定义)
<a href="https://www.runoob.com">这是一个链接</a>
(上面,在 href 属性中指定链接的地址)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。
</p>
<p><a href="//www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>
———— target 属性————
使用 target 属性,你可以定义被链接的文档在何处显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
</body>
</html>
★HTML 图像——img
参见——打开
注意: 图像的名称和尺寸是以属性的形式提供的。
★HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。未来将强制使用小写标签属性,所以别大写~
★HTML 属性
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现,比如:name=“value”,例如链接的地址在 href 属性中指定!
属性值应该始终被包括在引号内。单双引号都可。但在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
name=‘John “ShotGun” Nelson’
查阅——HTML参考手册
★水平线
hr 标签在 HTML 页面中创建水平线。e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
★HTML 注释
写法:
<!-- 这是一个注释,注释在浏览器中不会显示 -->
开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。
★如何查看源代码?
你是否看过一些网页然后惊叹它是如何实现的。如果您想找到其中的奥秘,只需要单击右键,然后选择"查看源文件"(IE)或"查看页面源代码"(Firefox)。
★HTML 折行
在不产生一个新段落的情况下进行换行(新行),请使用 br标签:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>这个<br>段落<br>演示了分行的效果</p>
</body>
</html>
运行结果——
这个
段落
演示了分行的效果
★HTML 输出 - 使用提醒
我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少。
</p>
<p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p>
</body>
</html>
★文本格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<!--use格式化标签-->
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>
运行结果:
★HTML头部详解(head)
- head元素包含了所有的头部标签元素。在head元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
- title
该标签定义了不同文档的标题(浏览器工具栏的标题),在HTML文档中必须存在。标题也是当网页添加到收藏夹时,显示在收藏夹中的标题。还是显示在搜索引擎结果页面的标题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
- base(页面链接标签的默认链接地址)
base标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接!
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
- link元素
该标签定义了文档与外部资源之间的关系。通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- style
标签定义了HTML文档的样式文件引用地址.
在style元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
- meta(元数据)
meta标签描述了一些基本的元数据。
meta 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
</head>
上述代码块定义了:关键词、网页描述内容、网页作者!
- script
用于加载脚本文件,如: JavaScript。 - 总结表