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

HTML页面的基本结构

2014-07-02 16:18 337 查看

这是我第一次在CSDN写博客，而我想写的内容蓄积已久，这次主要是放在网上是想与你们一起来分享我的经验，我相信这些对初学者是很有帮助的，对基础不扎实的也能进一步的巩固，希望能够帮助到你们。

我主要写的主题有，HTML、JavaScript、Jquery、Java及三大框架、数据库，Objective-c等。

第一篇：HTML页面的基本结构

一、简单了解Internet

1、Internet中文正式译名为因特网，又叫国际互联网，它是全球性网络。所谓网络就是可以由若干的计算机联合起来，并配以适当的软件和硬件，已达到计算机之间交换信息的目的。

2、URL（Uniform Resource Locator）

统一资源定位符，也被为网页地址，是因特网上标准的资源地址，用于精确定位网络中的各种资源。如网页、图片、音乐、视频等。

3、WEB浏览器

将网页文件(HTML文件)翻译成丰富多彩的网页。

4、绝对路径和相对路径

绝对路径：精确表述文件或目录在硬盘上的真正路径。

例如：C:\Windows\System32

相对路径：相对于某个基准目录的路径。

例如：./代表当前目录、../代表上级目录称

二、了解HTML技术及结构

1、什么是HTML？

HTML (Hyper Text Markup Language) 指的是超文本标记语言，用来描述网页的，而非编程语言。

标记语言是一套标记标签 (markup tag) 。

HTML 使用这套固定的标记标签来描述网页。

2、HTML标签

HTML标记标签通常被称为HTML标签（HTML tag）。

HTML标签由尖括号包围。比如<html>。

HTML标签通常是成对出现的，比如<b></b>。

HTML第一个标签是开始标签，比如<b>，第二个标签是结束标签，比如</b>，开始标签也被称为开放标签，结束标签页称为闭合标签。

HTML标签不区分大小写。

3、了解HTML网页结构

<HTML>
<HEAD>
<TITLE>Hello HTML </TITLE>
</HEAD>
<BODY >
<P>Hello World</P>
</BODY>
</HTML>

<HTML></HTML>标签用来描述整个HTML网页，一个HTML文件只能有一对<HTML></HTML>标签。

<HEAD></HEAD>是头部部分

<TITLE></TITLE>显示网页的标题

<BODY></BODY>主体部分，显示网页内容，内容可以是文本、图像等。

4、创建网页的两种方式

用文本创建

1、新建或打开记事本。

2、输入HTML代码。

3、保存为扩展名为：“.html” 或 “.htm”文件。保存后预览网页的效果

用工具创建,如：Dream weaver

Dream weaver 简介

Dreamweaver是个由ADOBE公司开发的著名网站开发工具，它使用所见即所得的界面，亦有HTML编辑的功能。

Dreamweaver CS4是一款专业的网页设计和网站管理工具。支持HTML检查、HTML格式控制、可视化网页设计、处理Flash等媒体格式和动态HTML等。

软件功能：可视化编辑，用户可以快速创建页面而无需编写任何代码。

如何创建网页呢？

打开Dream weaver，选择HTML文件，然后在<BODY></BODY>标签内输入网页内容并且保存，比如下图。

一个简单的网页就这样完成了，可以打开IE或火狐浏览器输入网址访问网页。

5、为网页加上一些功能

如何设置网页背景颜色？

<BODY bgcolor="#FFCCFF“>Hello World!/>

bgcolor：背景颜色

如何设置网页背景图像？

<BODY background="back_image.GIF" >Hello World/>

background：网页背景图像

如何设置网页背景声音？

<BGSOUND src=“audios / msg.wav” loop=“-1/>

src=“audios / msg.wav” 声音文件。

Loop=“-1” 播放次数。-1代表循环播放。

如何添加多媒体资源？

1、视频文件的播放界面

<embed src=“audios/intro.wmv” width=“400” height=“300” autostart=“true”></embed>

Autostart:自动播放

2、音频文件的播放界面

<embed src=“audios/bgg.mp3” width=“400” height=“300” ></embed>

3、Flash动画文件的播放界面

<embed src=“audios/loading.swf” width=“400” height=“300” ></embed>

4、<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

此描述可消除中文带来的乱码

设置字体和段落的标签

1、标题标签：<h1>到<h6>,<h1>最大，<h6>最小，使用标题标签时，该标签会将字体变为粗体字。

2、<Font>标签：规定文本的字体，字体尺寸，字体颜色。

3、特殊符号：如大于号(>),小于号(<)等一些符号以作为HTML语法符号，如需要在页面中显示这些符号，就必须使用相应的HTML代码表示，如下图：

行的控制

1、段落标签<p>:浏览器会自动的在段落前后添加空行。

2、换行标签<br>：可插入一个简单的换行符。

字体样式

<i>标签：显示斜体文本效果

<b>标签：规定粗体文本

<u>标签：为文本添加下划线

<em>标签：告诉浏览器把其中的文本表示为强调内容，对于所有浏览器来说，这意味着要把这段文字用斜体显示。

<strong>标签：与em标签一样，用于强调文本，但它强调的程度更强一些。

<hr>标签：在页面中创建一条水平线。

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

标签： html javascript 互联网经验博客

相关文章推荐

新的分享

章节导航