码迷,mamicode.com
首页 > Web开发 > 详细

HTML介绍、文档基本结构、HTML标记的语法

时间:2014-11-30 21:28:07      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   color   os   使用   

一、HTML的介绍

Hyper Text Mark-up Language 超文本标记语言,是一种描述性标记语言(不是编程语言),主要用于描述网页(可以有图像,文字,声音,等..)但没有交互性

HTML运行原理:

  1.本地运行:html文件用浏览器打开
  2.远程访问运行:本地浏览器访问远程服务器(如:tomcal)

网页的文件名最好不要有中文,因为将来网页文件都是保存到服务器上的建议都使用英文

保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 文件后缀。

 

 

二、HTML文档基本结构

1、文档的骨架:所有的网页文件,通常由下面四对标记来构成文档的骨架

<html>
    <head>
        <title> 网页标题 </title
    </head>

    <body>
        这里放置的是要在网页中显示的内容
    </body>
</html>

<html>....</html>:标识网页的开始与结束,所有的html元素都要放在这对标记中
<head>....</head>:标识网页文件的头部信息,如标题,搜索引擎关键字等(里面的内容最先加载
<title>....</title>:标识网页文件的标题
<body>....</body>:标识网页文件的主体部分,即页面可见的内容

 

 

2、meta标签

meta标记用于定义文件信息,对网页进行说明,便于搜索引擎查找,要放置在<head>  <head/>之间

设置关键字:(比较短,用于搜索引擎)
  <meta name="keywords" content="value"/> value表示要设置的关键字,多个关键字之间用,分隔开
设置描述:(用于对关键字进行扩展,或对网页的内容进行概述性的描述)
  <meta name="description" content="value"/> value表示要设置的描述,多个描述之间用,分隔开
设置作者:
  <mate name="author" content="作者名" />作者名一般都是公司名称
设置网页的编码:
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
设置页面定时跳转:
  <meta http-equiv="refresh" content="2;url=http://www.baidu.com" /> (content="2;url=http://www.baidu.com" 2表示该网页过多少秒跳转到url指定的目的地)

描述网页的版本:
  <meta name="revised" content="html4.01">
可设置其他网页信息:
  <meta name="others" content="这个我第一个网站,网站的主要内容有动漫,音乐,文章,博客等等,欢迎大家光临!">

描述网页是通过那种软件产生:
  <meta name="generator" content="记事本">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="网页设计,学网页" />
<meta name="description" content="如何学习网页设计,学习网页设计的方法,HTML中文手册" />
<meta name="author" content="传智播客" />
<meta http-equiv="refresh" content="2;url=http://www.baidu.com" />
<meta name="revised" content="html4.01">
<title>HTML文档基本结构_meta标签</title>
</head>

<body>
    meta标记用于定义文件信息,对网页进行说明,便于搜索引擎查找,
</body>
</html>

 

 

3、base标签:设置超链接的target值

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML中框架的嵌套</title>
<base  target="_blank"/>
<!--base标签的target属性可以设置整个网页的超链接的target值都是一样的,这样就不需要再每个超链接标签中都设置target了-->
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">java</a>
    <a href="http://www.sina.com.cn" target="_blank">php</a>
</body>
</html>

 

 

 

 

 

 

 

三、HTML标记的语法

html最基本的语法就是<标记符>内容</标记符>,标记符通常都是成对使用的一个开头标记和一个结束标记,还有一种单标记没有结束标记,如<hr/>

HTML标记类型:单标记和双标记
  双标记:
    有属性:<标记名称 属性="属性值">...</标记名称> 如:<font size="3">.....</font>
    无属性:<标记名称>...</标记名称> 如:<title>.....</title>

  单标记:
    有属性:<标记名称 属性="属性值"> 如:<hr width="200"/>(默认是居中的)
    无属性:<标记名称> 如:<br />

  <!--  有属性:<标记名称 属性="属性值">...</标记名称> 如:<font size="3">.....</font>-->
    <font size="4" color="#33FF00">2、体育老师说:谁敢穿裙子上我的课,就罚她倒立!</font> 
    
    <!--无属性:<标记名称>...</标记名称> 如:<title>.....</title>-->
    
    <!-- 有属性:<标记名称 属性="属性值"> 如:<hr width="200"/>(默认是居中的)-->
    <hr  width="200"/>
    
    <!--无属性:<标记名称> 如:<br /> 表示换行但不换段-->
    3、住在我心里,你交房租了吗?<br />  
    4、你让我下不了台,我让你连上台的机会都没有。

 

HTML介绍、文档基本结构、HTML标记的语法

标签:des   style   blog   http   io   ar   color   os   使用   

原文地址:http://www.cnblogs.com/LO-ME/p/3659862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!