以下内容转载和参考自:w3school的HTML学习内容,HTML 简介 。
一、概述
HTML不是一种编程语言,它是超文本标记语言 (Hyper Text Markup Language),使用标记标签来描述网页内容。HTML标签是由尖括号包围的关键词,标签通常是成对出现的,标签对中的第一个标签是开始标签(开放标签),第二个标签是结束标签(闭合标签)。一个HTML文档就是由HTML标签和其中的文本组成的,浏览器不会显示 HTML 标签,而是使用标签来解释并展示文本内容。
开始标签到结束标签的所有内容又称为HTML 元素。HTML元素中的属性包含在标签头中,属性值应该始终使用引号包围,如果属性值里含有双引号,那么必须使用单引号来包围属性值。 默认情况下HTML 会自动地在段落、标题这种块级元素前后添加一个额外的空行(换行),其它元素则不会。HTML 标签对大小写不敏感,但推荐使用小写。搜索引擎使用标题为您的网页的结构和内容编制索引,所以应该合理的使用
这是一个标题
这是一个标题
这是一个段落。
这是一个文本 这里是引用内容
这是一个标题
This is a para graph
with line breaks
站内链接
有的HTML首行是,这是一个声明,它用来告知 Web 浏览器页面了HTML 5版本。
仅有 16 种颜色名被 HTML 4.0 标准支持,如black、white、blue、gray、green、red、yellow。
应该通过标签或属性来改变样式输出,如下所示的p段落中,并不会根据源代码来显示段落,源代码中的空行、换行和连续的空格都会被算作一个空格来显示。可以使用pre 标签来定义预格式文本,这样就能保留文本中的空格、换行和空行:
下面为一些文本格式化标签的使用:
a元素还可以创建滚动到本页面指定位置的“锚”,如下所示,当我们点击“转到提示”文本后,页面会滚动到“提示”文本处,也可以使用a打开指定的超链接后滚动到该页面的锚处:
对于子目录的URL,应该将正斜杠添加到URL中,比如href = "http://www.w3school.com.cn/html/",假如这样书写链接:href = "http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。
可以将a、img等元素放到p、h中来混合显示,也可以将img放置a中来设置一个图片链接。图片与文本混合显示的时候,图片默认是底部与文字对齐,也可给img元素添加align属性来设置顶部对齐(align="top")或中间对齐(align = "middle"),如果将align设置成“left”或“right”的话,图像就会在整个段落的最左或最右来显示:
也可以设置图片为整个页面的背景,通过设置body元素的background属性:
。创建图像映射:usemap是标签的一个属性,用来指示使用的图像地图,图像地图把一幅图像分成若干个区域,点击不同的区域会进入不同的页面。如下所示的图片使用planetmap图像地图,点击不同的星球会跳转指定的页面:
可以在网页中嵌入另一个网页,通过iframe元素:
绝对路径:。
相对路径1:,使用本网站根目录中images目录中的picture.jpg。
相对路径2:,使用当前目录中的image目录中的picture.jpg。
二、head
元素是所有头部元素的容器,以下标签都可以添加到 head 部分:
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
测试数据
还可以使用
header | 定义文档或节的页眉 |
nav | 定义导航链接的容器 |
section | 定义文档中的节 |
article | 定义独立的自包含文章 |
aside | 定义内容之外的内容(比如侧栏) |
footer | 定义文档或节的页脚 |
details | 定义额外的细节 |
summary | 定义 details 元素的标题 |
City Gallery
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
测试数据
可以使用position来设置元素的位置,如下所示将按钮的位置设置为在右下角指定位置显示。如果想要鼠标滚动的时候按钮也不跟着滚动还是固定在右下角现实的话,使用fixed替换absolute(比如一些网站会将一张宣传图片固定显示在top,鼠标滚动的话该图片也不会移动,这就是使用fixed的效果)。其中的cursor:pointer设置按钮的鼠标光标形状为小手,text-align:right设置按钮文本为右对齐显示: