整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html基础(一)

一章. 页面基本元素

1.1页面基础元素:<html>

<html>是页面的基础元素,主要用来定义页面的开始和结束部分。元素语法结构如下<html>....</html>(开头标记为<>,结束标记为</html>)先介绍一下完整的HTML文件的基本结构

<html> 文件开始标记

<head> 文件头开始标记

......... 文件头部分的内容

</head> 文件头结束标记

<body> 文件主体开始标记

......... 文件主题部分的内容

</head> 文件主题结束标记

</html> 文件结束标记

在<html>和</html>之间写入想要编辑的页面内容就构成了一个简单的页面

1.1.1 文本显示方向属性:dir

【作用与语法】dir属性用来指定浏览器文本显示的方向,同时也决定浏览器滚条的位置。dir属性的语法结构如下

<html dir="浏览器中文本的方向">......</html>(在元素名称和属性之间要加入空格)

dir属性可以取两个值,ltr(left title right)和rtl(right title left),分别表示从左向右显示和从右向左显示

1.1.2 指定语言属性:lang

【作用与语法】lang属性用来指定文档中所使用的语言。lang属性的语法结构如下

<html lang="指定的语言">包含的内容部分</html>

lang属性的取值可以使用ISO标准中的语言代码。在<html>元素中加入lang属性,使浏览器更好的显示界面,并不会更改页面的文字编码

ISO标准中语言代码的取值及含义语言名称写法语言名称写法英语en法语fr汉语zh德语de日语ja意大利语it

1.2 页面头部元素:<head>

【作用与语法】HTML的头部元素是以<head>为开始标记,以</head>为结束标记。它用于包含当前文档的相关信息,可包含<title>元素、<meta>元素等,分别用来定义页面的标题、编码。使用<head>元素可以将基本信息部分和页面主体内容区分开来。<head>元素的语法结构如下

<head>......</head>

1.3 页面标题元素:<title>

【作用与语法】HTML页面的标题一般是用来说明页面用途的,它显示在浏览器的标题栏中。在HTML文档中,标题信息设置在页面的头部,也就是<head>和</head>之间。<title>元素的语法结构如下。

<title>......</title> (说明:在标记中间的“......”就是标题的内容,它位于HTML文档的头部,即<head>和</head>之间)

1.4 元信息元素:<meta>

【作用与语法】元信息元素<meta>用来定义页面的附加信息,其中包括页面的作者、版权、关键字等相关信息。<meta>元素的语法结构如下。

<meta 属性=“属性值”/>

<meta>元素是一个自封闭的元素,通过其中的属性来添加各种附加信息。<meta>元素在不适用任何属性时,对页面没有影响。

1.4.1 元信息元素名称属性:name

【作用与语法】name属性用来制定文档中附加信息的名称。例如,最常用的值“keywords”用来定义文档中的关键字,方便搜索引擎的搜索。name属性的语法结构如下。

<meta name="信息名称"/>

在<meta>元素中,名称必须对应有相关的值才能生效

1.4.2 元信息元素的值:content

【作用与语法】content属性用来指定文档中附加信息的值,它与name属性成对出现。content属性的语法结构如下

<meta name="信息名称" conten="附加信息的值"/>

<meta>元素中所定义的“keywords”信息是用来为搜索引擎定义关键字的,所以对页面显示效果并不产生影响,故页面显示效果并无太大变化

1.4.3 元信息元素的附加属性:http-equiv

【作用与语法】http-equiv属性和name属性类似,用来指定附加信息的名称。在浏览器加载页面之前,服务器会把http-equiv属性定义的相关信息发送给浏览器,便于在浏览器中正确显示页面。http-equiv属性的语法结构如下

【作用与语法】<meta http-equiv="信息名称",content="附加信息的值">

说明:和name属性相似,http-equiv属性一般要和conten属性成对出现

1.4.4 定义页面的跳转

【作用与语法】在浏览器网页的时候经常会看到一些欢迎信息的页面,并经过一段时间后,这一页面会自动转到其他页面,这就是网页的跳转。使用HTML中的HTTP代码就可以很轻松的实现这一功能。页面跳转的语法结构

<meta http-equiv="refresh" content="跳转时间";url="链接地址">

说明:在该语法中,refresh表示网页的刷新,而在content中则设定刷新的时间和刷新后的地址,时间和链接地址之间用分号相隔。默认情况下,跳转时间是以秒为单位的

1.5 基本设置元素:<base>

在HTML中,基本设置元素<base>使用来定义相对路径的根目录。使用<base>元素,可以方便的定义页面中的超级链接。语法结构如下

<base 属性="属性值"/>

<base>元素在不使用任何属性时,对页面没有影响。<base>元素中可以使用的属性有链接路径属性href和链接窗口属性target

1.5.1 链接路径属性:href

【作用与语法】href属性用来指定文档中相对链接的根目录。文档中的所有链接(包括图片、音频等内容)都按照href属性所指定的根目录显示。href属性的语法结构如下

<base href="指定路径">包含的内容部分</base>

href属性的取值为url值。它可以使用绝对路径,也可以指

向某个文件夹。

需HTML标记

有四组必需的HTML标记来构成每个HTML文件的基本结构:

  • <html></html>
  • <head></head>
  • <title></title>
  • <body></body>

定义 - <html> </html>

标记html定义一个网页文档。它标识了HTML文档的开始和结束。所有其他标记必须位于html标记之间。

页眉/头部 - <head> </head>

标记head包含关于文档的信息,这些信息不会出现在实际页面上,例如文档的标题、作者、使用的样式表以及元标记。

标题 - <title> </title>

标记title标记定义网页在web浏览器标题栏中的标题。标题必须出现在head标记之间。

正文 - <body> </body>

标记body包含页面上的所有信息和其他可见内容。所有图像、链接和纯文本必须位于<body>和</body>标记之间。

这四个标记很特别。每个只能有一组,并且它们必须按照下面示例中的正确顺序排列。

例子

下面是一个基本的html文档。请注意,所有内容都在html标记之间,标题出现在文档的头部,而正文位于头部之后:

浏览器显示内容如下所示:

天开始小编将会给大家讲解HTML的入门知识以及做项目会遇到的某些问题以及如何解决此类问题的方法。说道网页设计,HTML是我们必不可少的一部分。基础网页的构成,无论怎么变幻,都是由原声的HTML代码组成构成网页。

下面我就根据工作中所用和看过的书籍一点一点总结下我们常用的HTML格式和代码。

一、什么是HTML。

HTM不是一段编程语言,而是一款标记语言,本身不能显示在浏览器中。经过浏览器的编释和编译,才能正确反映HTML标记语言的内容。HTML从1.0到5.0经历了巨大的变化,从单一的文本显示功能到多功能互动,已经成为了一款非常成熟的标记语言。

二、HTML文件的基本结构

<!doctype html>

<html>文件开始标记

<head>文件头开始的标记

<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">

<title>XX系统</title>

</head>文件头结束

<body>文件主题的内容

</body>文件主题的结束

</html>文件结束的标记

这里主要说明title和meta(元信息)

<!--说明文件头-->

<title>XX网站</title>

<!--添加作者信息-->

<meta name="author" content="_永不言弃" >

<!--设置网页文字及语言 -->

<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">

<!--设置网页定时(20秒后)跳转-->

<meta http-equiv="refresh" content="20;url=index.html">

三、HTML主要常用标签

3.1标题

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

3.2 标题字对齐属性align

默认情况下,标题文字是左对齐的。在网页制作过程中,常常需要选择对其他的方式,这时我们就需要用到align属性。

3.3 段落标记p

段落标记是文档中最常见的标记,<p>用来起始的一个段落。

3.3 换行标记

换行标记<br>作用是在不另起一段的情况下将当前文本强制换行。

3.4 不换行标记nobr

<nobor>表示的是不换行的标记</nobor>

3.5 水平线

<hr/>

四、建立超链接

与自身网站页面有关的连接被称为内部连接

4.1绝对路径

绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置都可以非常精确地找到,除非是目标文档的位置发生变化,否则连接不会失效。

4.2相对路径

为了避免绝对路径的缺陷,对于在同一站点之中的连接来说,使用相对路径是一个很好的方法。

4.3 内部连接

<a href="# target="目标窗口的打开方式 " >

属性值

含义

-self在当前页面中打开连接

-blank在一个全新的空白窗口中打开连接

-top在顶层框架中打开连接,也可以理解为在根框架中打开连接

-parent在当前框架的上一层里打开连接

4.4 锚点连接

锚点到本页面中的位置

<a href="#1" >商品名称</a>

<a href="#2" >产品特点</a>

<a href="#3" >产品规格</a>

<a neme="1">XX商品</a>

<a neme="2">XX产品特点</a>

<a neme="3">XX规格</a>

锚点到其他页面的位置

<a href="index.html#1"></a>对应连接到index.html中name=1的位置

4.5 连接到外部网站

在设置友情链接时,需要打开HTTP协议进行外部连接访问。

<a href="wwww.baidu.com" >百度</a>

4.6 连接到E-mail

<a href="mailto:邮件地址">。。。</a>

4.7 连接到FTP

FTP代表文件传输协议,一个FTP站点通常包含一些上传和下载文件的文件目录。

大部分FTP网站需要使用用户名和密码来登录。

当然还有其他的一些连接方式,例如文件下载,连接到Telnet等。这些都会可以用a标签实现。

HTML基础就先讲到这里,后面退出DIV设计网页格式已经网页分框的实现。