HTML:世界通用的超文本标记语言。标记语言是一套标记标签。HTML文档包括了HTML标签及文本内容。HTML文档也叫做web页面。
编辑规范:1.文件扩展名默认html/htm,而图片则基本上存为gif/jpg。2.浏览器默认忽视回车符。3.标记符用<></>,大多数标记符必须成对使用,用以说明起始和结束。4.必须使用半角字符。
HTML简介
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我是第一个标题</h1>
<p>我是第一个段落。</p>
</body>
</html>
-
DOCTYPE
声明了文档的类型,不区分大小写 -
<html>
标签是 HTML 页面的根元素,该标签的结束标志为</html>
-
<head>
标签包含了文档的元(meta
)数据,如<meta charset="utf-8">
定义网页编码格式为utf-8。 -
<title>
标签定义文档的标题 -
<body>
标签定义文档的主体,即网页可见的页面内容,该标签的结束标志为</body>
-
<h1>
标签作为一个标题使用,该标签的结束标志为</h1>
-
<p>
标签作为一个段落显示,该标签的结束标志为</p>
HTML基础
HTML标题
HTML 标题(Heading)是通过
<h1> - <h6>
标签来定义的。
h
是英文header
标题的缩写,标题无处不在,它的应用范围十分广泛:网站结构、写作文、PPT 等。
这里有六个标题元素标签 ——<h1>
、<h2>
、<h3>
、<h4>
、<h5>
、<h6>
,每个元素代表文档中不同级别的内容:
<h1>
表示主标题(the main heading),<h2>
表示二级子标题(subheadings),<h3>
表示三级子标题(sub-subheadings),<h4>
、<h5>
、<h6>
依次递减字体的大小。
HTML段落
HTML 段落是通过标签
<p>
来定义的,P
是英文paragraph
段落的缩写,经常被用来创建一个段落,就和你写作文一样。
HTML空格
无论你用了多少
空格(包括空格字符,包括换行)
,当渲染这些代码的时候,HTML解释器会将连续出现的空格字符减少为一个单独的空格符。
HTML链接
HTML 链接是通过标签
<a>
来定义的。a
标签,也叫anchor(锚点)
元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。
<a href="http://www.w3cschool.cn">这是一个链接</a>
HTML图片
HTML 图像是通过标签
<img>
来定义的。使用img
元素来为你的网站添加图片,使用src
属性指向一个图片的具体地址。
请注意:img元素是自关闭元素,不需要结束标记。
<img src="logonew2.png" width="206" height="36">
HTML强调
在HTML中我们可以使用em(emphasis)元素来标记这样的情况,浏览器默认风格为斜体,在HTML中我们还可以使用<strong>(strong importance)元素来标记这样的请况,浏览器默认风格为粗体。
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
<p>This liquid is <strong>highly toxic</strong>.</p>
HTML元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
< br>这是一个换行标签
HTML元素大小写不敏感,注意元素的开始和结束。
HTML属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以
名称/值对
的形式出现,比如:name="value"。 - 属性/属性值对大小写不敏感。
HTML 属性常用
引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'
class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式(inline style)
title 描述了元素的额外信息 (作为工具条使用)
HTML标题
HTML标题
标题(Heading)是通过
<h1> - <h6>
标签进行定义的.
- 浏览器会自动地在标题的前后添加空行。
- 默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
- 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
HTML水平线
< hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容,使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。
HTML注释
< !--...-->
小结
<html> 定义 HTML 文档
<body> 定义文档的主体
<h1> - <h6>定义 HTML 标题
< hr>定义水平线
< !--...-->定义注释
HTML段落
段落是通过 <p> 标签定义的。
浏览器会自动地在段落的前后添加空行。(</p>是块级元素)
HTML 折行
在不产生一个新段落的情况下进行换行(新行),请使用 <br />标签。
在 HTML 语言中, <br />标签定义为一个换行符,它可以理解为简单的输入一个空行,而不是用来对内容进行分段。
小结:
<p>定义一个段落
< br>插入单个折行(换行)
HTML文本格式化
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong> 定义加重语气
< sub>定义下标字
< sup>定义上标字
<ins>定义插入字
<del> 定义删除字
HTML链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML使用标签<a>
来设置超文本链接,是可以从一个页面指向另一个目的端的链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,
您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a href="//www.w3cschool.cn/">Visit W3Cschool</a>
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手
。
在标签<a>
中使用了href
属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带上下划线
- 点击链接时,链接显示为红色并带上下划线
注意:如果为这些超链接设置了CSS样式,展示样式会根据CSS的设定来显示.
HTML 空链接
指向链接后,鼠标变成手形,但单击后仍停留在当前页面。
临时加的空链接,主要为了能更好的看到最终的效果。
<a href="#">链接文字</a>
属性:
- 使用 Target 属性,你可以定义被链接的文档在何处显示(在新的窗口打开,还是在原有的窗口中打开)。默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。
- id 属性可用于在一个 HTML 文档中创建书签标记。
书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。
HTML头部
<head>
HTML 头部元素包含关于文档的概要信息,也被称为元信息(meta-information)。
<head>定义了文档的信息 。
<head>
元素描述了文档的各种属性和信息,其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
<title>定义了文档的标题。在 HTML/XHTML 文档中是必须的。
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时,显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
<base> 定义了页面链接标签的默认链接地址。<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。在 HTML 中,<base> 标签没有结束标签;在 XHTML 中,<base> 标签必须被正确地关闭。
<head>
<base href="//www.w3cschool.cn/images/" target="_blank">
</head>
<link> 定义了一个文档和外部资源之间的关系。<link> 标签定义了文档与外部资源之间的关系。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<meta>定义了HTML文档中的元数据。元数据也不显示在页面上,但会被浏览器解析。META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定义网页作者:
<meta name="author" content="Hege Refsnes">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
<script>定义了客户端的脚本文件 。
<style><style> 标签定义了HTML文档的样式文件引用地址。
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>