HTML学习
- 一、 何为HTML
- HTML 元素
- HTML 元素
- HTML 元素语法
- 嵌套的 HTML 元素
- 表格 Table
- HTML 列表
- 锚点
- 二、总结
一、 何为HTML
HTML是超文本标记语言(HyperText Markup Language)的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
“超文本”(hypertext)是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。
HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript)。
HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。
html的基本结构
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
html:元素。这个元素包裹了整个完整的页面,是一个根元素,它元素都嵌套到其中
head:这个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,网页标题可被浏览器用做书签和收藏清单
以下表格列出了 HTML head 元素:
<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件
body:含你能在页面看到的所有内容,包括文本,图片,音频,游戏等等
html实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>nice job!</h1>
</body>
</html>
meta:这个元素设置文档使用utf-8字符集编码,
h1为一级标题,从一级到六级,包括了h1,h2…h6
p表示段落
title里面是网页头部的名字
HTML 元素
HTML 文档由 HTML 元素定义。
HTML 元素
*开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容(empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束)
大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。
HTML 文档由相互嵌套的 HTML 元素构成。
表格 Table
有时,页面的内容需要用表格来进行呈现。我们使用
等标签即可:代码中,表示行,
表示行中的单元, | 是表头的单元(将会加粗显示) |
---|
HTML 列表
HTML 支持有序、无序和定义列表:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
无序列表使用
- 标签,默认使用实心圆点作为每项的标志,其它的标志可以是空心圆circle,实心方块square以及不出现标志。
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
有序列表使用
- 标签,默认使用数字作为每项的标志,其它的标志可以是大写字母A,小写字母a,罗马字母i等。
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
锚点
锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点,然后再使用超链接指向该锚点即可。
<h1 id="123">锚点</h1>
<a href="#123"><br />返回</a>
图片及其文件路径
<img src="image/biying.jpg" alt="biying">
src属性为要显示图片文件的位置 URL,即图片文件的路径
alt属性当获取图片出现问题时显示的文字(占位符)
关于文件路径
文件路径有相对路径和绝对路径两种。
上面图片的例子即为相对路径。下面是绝对路径的例子:
<img src="https://www.baidu.com/">
————————————————
二、总结
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面