您的位置：首页 > Web前端 > HTML

HTML基础介绍一（基本构造head,body,字体，段落）

2015-07-06 16:53 691 查看

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样式表时，所有应用该样式的文本自动更新。

文字的语法为：网页设计教程

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

网页设计教程

Size的参数范围是1-7，

 回车换行。

（7）文字颜色

网页设计教程 

网页设计教程 

网页设计教程

文本的字体。

网页制作教程

（8）标题字体

<body>

<h1>一号标题</h1>

<h2>二号标题</h2>

<h3>三号标题</h3>

<h4>四号标题</h4>

</body>

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

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

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

粗体

斜体

下划线

上标，将文字显示为上标

下标，将文字显示为下标

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

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

二：常用的一些标签

1. 段落

（1）段落标签

这是一个段落中间的内容就是表示一个段落。网页中有多少个标签，就有多少个段落。

<body>

网页制作教程

第一篇：HTML篇

第二篇：CSS篇

第三篇：JavaScript篇

</body>

2.回车换行 

 标签就是强制换行。一个 标签换一行，如果多个 标签，就会换行多次。

3.注释



HTML代码教程 



4.空格

 ;网页制作 ; ;教程

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属性，对齐方式哟left，center,right三种。

HTML代码教程

CSS教程

JavaScript教程

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航