HTML基础介绍一(基本构造head,body,字体,段落)

原创 2015年07月06日 16:53:52

1.网站是由域名(网址),网站源程序和网站空间。

2.HTML超文本标记语言。

一:HTML基础

1.网页头部内容<head></head>一般包括<title>标签, <meta>标签。

1<title>标签用来放置网页标题。

2<meta>标签。

<head>

  <meta charset="UTF-8">  GB2312简体中文

  <meta name="Generator" content="EditPlus®">页面说明

  <meta name="Author" content="zxq">

  <meta name="Keywords" content="网页设计">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

<meta>标签:主要用于搜索引擎robots定义页面主题信息,还可以用于用户浏览器上的cookie,作者,版权信息或关键字;同时还可以设置页面,使其根据定义的时间间隔刷新自己,以及设置pics内容等级。

设置页面的刷新时间(http-equiv刷新),html代码如下:

<meta http-equiv=”refresh” content=”2”/>   //两秒内刷新当前页

<meta http-equiv=”refresh” content=”5

URL=http://www.jquery.com”/>   //五秒内跳转到指定的网址。

2.网页主题body

(1)网页背景色

单击属性->页面属性->外观(html

<body bgcolor="#0066FF">

2)网页背景图片

单击属性->页面属性->外观(html

背景图像浏览

<body bgcolor="#0066FF" background="1.png">

3)网页文字颜色

Text=”#FF0000”

(4)超级链接颜色

超级链接文字有三种状态:分别为“链接”“活动链接”“已访问链接”

默认情况下,“链接”“活动链接”文字的颜色是蓝色,

“已访问链接”文字的颜色是紫色。

link="#0000FF" vlink="#FF00CC" alink="0000FF"

链接:指定应用于链接文本的颜色(对应于link

已访问链接:指定应用于已访问链接的颜色(对应于vlink

活动链接:指定当鼠标(或指针)在链接上单击时应用的颜色。(对应于alink

(5)页面边距

网页中的内容与页面四边之间的距离。

leftmargin="0"表示左边距  topmargin="0"表示上边距

6)网页文字

设置文本格式有两种方法:使用HTML标签格式化文本和使用层叠样式表CSS格式化文本。

使用HTML标签和CSS都可以控制文本属性,包括特点字体和文字大小,粗体,斜体,下划线,文本颜色等。

两者的区别:使用HTML标签仅仅对当前应用的文本有效,当改变设置时,无法实现文本的自动更新。而css则不同,通过CSS事先定义好文本样式,当改变CSS样式表时,所有应用该样式的文本自动更新。

文字的语法为:<font >网页设计教程</font>

网页文字的样式,主要是设置文字的字体,字号,颜色等属性。

<font face="宋体" size ="3" color ="#ff0">网页设计教程</font>

Size的参数范围是1-7

 

<br />回车换行。

 

7)文字颜色

<font color ="red">网页设计教程</font><br/>

<font color="blue" size="5">网页设计教程</font><br/>

<font color ="#f00" size="7">网页设计教程</font>

 

文本的字体。

<font face="Arial,宋体">网页制作教程</font>

8)标题字体

<body>

<h1>一号标题</h1>

<h2>二号标题</h2>

<h3>三号标题</h3>

<h4>四号标题</h4>

 </body>

(9)逻辑字体和物理字体

逻辑字体不指明字体如何显示,而是让Web浏览器自行决定显示方式,不同的浏览器解释的效果可能就不一样。

物理字体:明确指明了字体的类型,无论何种浏览器,遇到这些表示的文字的标签时,都用相同的方式进行显示。

<b>粗体</b>

<i>斜体</i>

<u>下划线</u>

<sup>上标,将文字显示为上标</sup>

<sub>下标,将文字显示为下标</sub>

<tt>用等宽字体来显示文本,相当于打字机的效果</tt>

<s>删除线,该标签在指定的文本上画一条删除线</s>

二:常用的一些标签

1.     段落

(1)   段落标签

<p>这是一个段落</p>中间的内容就是表示一个段落。网页中有多少个<p>标签,就有多少个段落。

<body>

<p>网页制作教程</p>

<p>第一篇:HTML</p>

<p>第二篇:CSS</p>

<p>第三篇:JavaScript</p>

 </body>

2.回车换行<br/>

<br/>标签就是强制换行。一个<br/>标签换一行,如果多个<br/>标签,就会换行多次。

3.注释

<!--下面一段代码的功能是……,代码开始-->

<p>HTML代码教程</p><br/>

<!--本段代码结束-->

4.空格

<p>&nbsp; &nbsp; &nbsp; &nbsp ;网页制作&nbsp ; &nbsp ;教程</p>

5.水平线

水平线的标签时<hr>

(1)  宽度可以是确定的像素值,也可以是窗口的百分比。

<hr width="宽度">

<hr width="500">

<hr width="80%">

(2)   水平线高度size

<hr size="高度">

<hr size="3"/>

高度只能是像素值。

<hr color="颜色">

<hr align ="对齐方式"> left左对齐 center居中对齐  right右对齐

6.文字对齐

如果要将网页中的文字对齐,可以使用align属性,对齐方式哟leftcenter,right三种。

<p align ="left">HTML代码教程<p>

<p align ="center">CSS教程<p>

<p align = "right">JavaScript教程<p>

 

<center></center>标签,也可以实现居中对齐,这个标签除了可以控制文字以外,还可以控制图片或其他图像。

7.pre标签

Pre标签是preformatted的简写,pre标签与p标签基本相同,唯一的区别就是该标签中的文字内容将保留空格和换行符,并且标签中的英文字符都将统一用等宽字体,一遍对齐。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body bgcolor="#0066FF" background="1.png">
   text = "#FF0000" 
   link="#0000FF" vlink="#FF00CC" alink="0000FF"
   leftmargin="0" topmargin="0"
<font face="宋体" size ="3" color ="#ff0">网页设计教程</font>
<font color ="red">网页设计教程</font><br/>
<font color="blue" size="5">网页设计教程</font><br/>
<font color ="#f00" size="7">网页设计教程</font>
<font face="Arial,宋体">网页制作教程</font>

<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>

<b>粗体</b>
<i>斜体</i>
<u>下划线</u>
<sup>上标,将文字显示为上标</sup>
<sub>下标,将文字显示为下标</sub>
<tt>用等宽字体来显示文本,相当于打字机的效果</tt>
<s>删除线,该标签在指定的文本上画一条删除线</s>
<p>这是一个段落</p>
<p>网页制作教程</p>
<p>第一篇:HTML篇</p>
<p>第二篇:CSS篇</p>
<p>第三篇:JavaScript篇</p>
<!--下面一段代码的功能是……,代码开始-->
<p>HTML代码教程</p><br/>
<!--本段代码结束-->
<hr width="宽度">
<hr width="500">
<hr width="80%">
<hr size="高度">
<hr size="3"/>
<hr color="颜色">
<hr align ="对齐方式"> left左对齐  center居中对齐   right右对齐

<p align ="left">HTML代码教程<p>
<p align ="center">CSS教程<p>
<p align = "right">JavaScript教程<p>

 </body>
</html>


 

相关文章推荐

Js放在head和body中的区别

在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行。 一、区别 浏览器解析html是从上到下的。...

消除HTML网页顶部的一行空白方法(火狐显示正常,谷歌head与body之间有未知代码)

废话不多说,直接说方法~ 将下面代码保存为clearBOM.php放在网站的根目录,或者你想去哪个目录的BOM就放在哪个目录,然后直接用URL访问这个PHP文件就可以了! ...

Html手记:段落与字体

主体标签结构 1、段落标签,独自占有一行这里是一行2、各种字体效果标签斜体 强调斜体粗体 强调粗体...
  • dration
  • dration
  • 2016年12月13日 22:05
  • 121

HTML_<html>\<head>\<body>标签详解

HTML_\\标签详解

二、HTML基础之文字与段落

版权声明:此文章为原创文章,未经授权不允许转载。

【阅读】《Head First HTML 与 CSS》第八章——增加字体和颜色样式

这一章能够让你网页中的文字变得更漂亮

HTML文件基本标记(三)-<body>页面的主体标记

页面的主题标记;

一些基础的HTML Tag基础的Tag主要用于标题段落和分行

HTML里,比较基础的Tag主要用于标题,段落和分行。 学习HTML最好的方法,就是跟着示例学。为了各位学习的方便,我们准备了一个简单的HTML编辑器,你可以在左边写HTML代码,然后点击上面的...

html+css基础1-body(h,p,img)

题外话:代码通常是要加注释的,要不然想想看你代码的人一脸懵逼的模样,怎么加注释呢? 像这样:(注释html是根标签) 一.标题 有六种,这么多? 对的,它们是h1、h2、h3、h4、h5、h...

html+css基础3-body(ul,ol,div,table)

一。接下来我们可能需要添加一些列表,如果是无序的,可以用 我是大帅哥 android ios web ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML基础介绍一(基本构造head,body,字体,段落)
举报原因:
原因补充:

(最多只允许输入30个字)