【HTML】对与HTML语言详细概述及其使用说明

来源：互联网发布：中国的顶级域名编辑：程序博客网时间：2024/06/05 16:49

何为HTML?

HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”，它实际上是专门用来编写网页的一种编程语言。大多数网页的构成基础就是HTML的语句。

☆HTML文档的基本结构

这里写图片描述

所有页面都应该至少包含这些部分，由于浏览器容错性强，所以即使不包含也能正常显示，但是最好还是写完全了。

☆如何编写一个HTML文件

HTML文件是一个ASCII格式的文件。它可以在任何一种可以编辑ASCII文件的编辑器中编辑（如果HTML文件中包含汉字，则要在支持汉字的编辑器中编辑）。

☆HTML文件的调试

<html>   <head>      <title>HTML概述</title>   </head>   <body>       HTML Hello Wrold!!!  湖南城市学院。   </body></html>

对于HTML的说明

头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。体部分是真正存放页面数据的地方。
多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

☆格式：

<标签名 属性名=‘属性值’> 数据内容 </标签名>    或<标签名 属性名='属性值' />

☆操作思想：

为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。

标签就相当于一个容器。对容器中的数据进行操作，就是在不断的改变容器的属性值。

☆静态页面和动态页面

网站页面分为静态页面和动态页面两种

静态页面：有一个html页面文件保存在服务器上，浏览器要这个页面的时候服务器就把这个页面文件发给浏览器；
动态页面：服务器上没有浏览者要看的页面，而是服务器动态生成的HTML页面发给浏览器，动态语言的服务器端可以用C#、VB.Net、PHP、Java、C等编写。

☆HTML学习要求

掌握手写HTML实现一般难度的Web页面的能力（如网站注册表单），为JavaWeb学习打基础。坚持手写HTML。
不要把精力放到怎么把界面做好看上，正规公司都有专门的页面美工，不正规公司都是偷别人的美工页面，无论是偷别人的页面，还是使用公司美工开发出来的页面，对于开发人员要做的“填模板”工作都是一样的。

☆用HTML语言创作网页的说明

Web页面可采用超文本标识语言（HTML）创作，它允许将常规的文本与一些用来描述文本的标记混合使用。这些标记的主要功能是Web中文本的显示外观、版面布局和主体的描述。
在做网页的时候，有经验的程序员经常是分两步走：首先使用一些常用的网页制作工具做成网页的原型，然后再修改其HTML代码。HTML代码不区分大小写，只要能够编辑文本的任何编辑器都可以用于编写HTML代码。
编写普通的HTML页面是和任何后台语言无关的，可以使用Dreamweaver、Expression Web(FrontPage的改头换面版)等工具写，这些工具是给页面美工用的，开发人员直接用Eclipse写html代码就够了。

☆标记的一般特性

一个HTML文件中由两大类元素组成：
(1)标记
(2)标记的作用对象（如文字、图形等）

☆常用的标记

1. <html>和</html>2. <head>和</head>3. <title>和</title>4. <body>和</body>5. <hn>和</hn>6. <br>7. <hr>8. <!-- 这是注释 -->

☆代码演示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <!-- head的作用是：给html页面增加一些辅助或者属性信息，它里面的内容会最先加载。-->    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>我的第一个HTML页面</title>    </head>    <!-- body的作用是：正真存放页面数据的地方 -->    <body>        <!-- ①这里可以对font（汉字）的所有属性进行设置，包括：大小、颜色 -->        <font color="red" size="20pt">            湖南城市学院            <font color="green  " size="5pt" >            首页  <br/>            </font>        </font>        <!-- ②这里可以对hr（横线）的所有属性进行设置，包括：长度width、高度size、颜色、位置align -->        <hr color="#FF0080" size="20pt" width="1000" align="left" >        <!-- ③这里无法对hn（标题n）本身的所有属性进行设置 ，但是对文字依然是可以设置的-->        <h1> 标题1</h1><br/>        <h2>标题2</h2><br/>        <h3>标题3</h3><br/>        <h4>标题4</h4><br/>    </body></html>

运行结果：

这里写图片描述

head中标签的简单演示：

<!--     HTML head元素：    1、Contains metadata/*元数据*/and window title information for the document!    2、头部标签：<title>、<base>、<link>、<meta>、<object>、<script>、<style>。 --><html>    <head>        <!--★<title>标签：定义文档的标题 -->        <title>我是头标题head of title</title>        <!-- ★<base>标签：为页面上所有链接规定默认地址或默认目标(target) 。                    其中有两个属性(href、target)，target取值有：_blank、_media、_parent、_search、_self、_top -->        <base href="file:/f:/测试文件/" target="_blank"/>        <!-- ★<link>标签：定义文档与外部资源之间的关系。其中的属性：rel、type、media -->        <link rel="stylesheet" type="text/css" href="1.css" media="screen" />        <!-- ★<meta>标签：提供关于HTML文档的元数据 ，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据-->        <meta http-equiv="refesh" name="description" content="HTML网页" >        <!-- ★ <type>标签：用于为 HTML 文档定义样式信息。-->        <style type="text/css">            h3 {                font-size: 20pt;                font-style:oblique;                background-color: #ff0000;                width: 10%;            }        </style>        <!--★<script>标签：用于定义客户端脚本，比如 JavaScript。  -->        <script type="text/javascript">            var a="我是JavaScript语句块";            alert(a);            document.writeln("script标签中用document.write写的内容");        </script>    </head>    <body>        <!--href属性中地址为空，即默认为：base标签所指定的默认链接地址。-->        <a href="" >打开base标签指定的链接地址</a>        <h3>我是三级标题</h3>        <span>body文本内容</span>    </body></html>

0 0