HTML总结

HTML总结

一、什么是HTML:
HTML的全称是超文本标记语言,是一种用以描述网页的标记语言。它通过标签将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以表现各种形式来达到制作者的目的。

二、HTML元素(HTML Elements):
HTML元素是用来标记文本,表示文本的内容,比如:body、p、title就是HTML的元素。
HTML元素用Tag来表示,以 “<” 开始 以 “>” 结束;

三、HTML元素的属性

HTML元素可以拥有属性。属性可以扩展HTML元素的能力。

<body style="background:red;"></body>   // 设置背景颜色
<table border="0"></table>     // 设置表格边框为0

属性通常由属性名和值成对出现,就像这样:name=“value”。上面例子中的
border 就是 name,0 就是 value。属性值一般用双引号标记起来。

四、HTML 相对路径和绝对路径

1、HTML 相对路径(Relative Path)
相对路径就是一级一级去找需要引入的文件

2、绝对路径 (Absolute Path)
HTML 绝对路径(absolute path)指带域名的文件的完整路径。

五、HTML 图片

用 img 这个 Tag 可以在 HTML 里面插入图片。

<img src="url">   // url 表示图片的路径和文件名。可以是相对路径也可以是绝对路径

图片 alt 属性
假使浏览器没有载入图片的功能,浏览器就会转而显示 Alt 属性的值。其实,现在大多数浏览器都支持图片载入。在此介绍 Alt 属性,是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字,所以用ALT 属性写上图片的说明,便于搜索引擎抓取你网页的内容。

图片 align 属性
用 align 属性,可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。

背景图片

<html>
<body background="../images/html_tutorials/background.jpg">
<h3>这个网页有背景图片哦!</h3>
<p>如果图片比页面小,图片会自动重复。</p>
</body>
</html>

六、HTML 字体fonts

在 HTML 里,可以用 font 这个元素及其属性来设定字体的大小,颜色和字体
风格。

字体大小
用字体大小属性(size)来设定字体的大小。示例代码如下:

<p><font size="2">这一段的字体大小的值是 2。</font></p>

字体风格
用 face 属性来设定字体风格。示例代码如下:

<p><font fac="arial">这一段的字体风格是 arial。</font></p>  // 字体风格如:arial、courier、 verdana

字体颜色
用颜色属性(color)来设定字体颜色。

<p><font color="#FF0000">这一段的字体颜色是红色</font></p>

七、HTML 头部信息(Head)

HTML 头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容,主要是被浏览器所用,不会显示在网页的正文内容里。
另外,搜索引擎如 google,yahoo,baidu 等也会查找你网页中的 head 信息。为了让搜索引擎能够收录你的网页,你也要填写适当的 head 信息。(网站被搜索引擎收录,还有其它的方法,比如被其它网站链接,这里不赘述,请浏览搜索引擎网站。)

下面说几个常用的 head 信息里的 html 元素:
如标题(title),链接(link),样式(style)以及关于信息(meta)。

1、标题(title)
标题(title)是最常用的 head 信息。它不显示在 HTML 网页正文里,显示在浏
览器窗口的标题栏里。

<head><title>学习html</title></head>

2、链接(link)
用链接(link)可以建立和外部文件的链接。常用的是对 CSS 外部样式表
(external style sheet)的链接。示例代码如下:

1

3、样式(style)
用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下:

<head>
<style>
		body {background-color:white; color:black;}
		h1 {font: 18pt arial bold;}
</style>
</head>

4、关于网页信息(meta)
在计算机语言里,你经常可以看到一个前缀 – meta,meta 就是“关于”(about)的意思。
这 meta 解释起来比较拗口,比如 metadata,意为描述 data 的 data,英文即 data about data。还有一个词叫 metalanguage,表示一种描述其它语言的语言。再举一个例子,metafile,表示描述其它文件的文件。
在 HTML 里,meta 标记(meta tags)表示用来描述网页的有关信息。示例代码:

<meta name="description" content="HTML 中文教程之头部信息">
<meta name="keywords" content="HTML,tutorials,source codes">
<meta name="author" content="站长网 站长学院">

利用 meta 中的 Refresh 你还可以实现自动跳转页面的功能。示例代码:

<meta http-equiv="Refresh"content="5;url=http://www.admin5.com/html/html_tutorials/index.html">
<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://www.admin5.com/html/html_tutorials/index.html">
</head>
<body>
	<p>
	由于网站版本更新,站长网 站长学院网站的 HTML 中文教程链接已改为 <a
	href="http://www.admin5.com/html/html_tutorials/index.html">
	http://www.admin5.com/html/html_tutorials/index.html </a>。
	</p>
	<p>
	如果在 5 秒钟后网页没有自动跳转,请点击上面的链接,进入站长网 站长学院网站的 HTML 中文
	教程。
	</p>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值