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
     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文件中由两大类元素组成：
 (1)标记 (2)标记的作用对象（如文字、图形等）
☆常用的标记
1. <html>和</html>
2. <head>和</head>
3. <title>和</title>
4. <body>和</body>
5. <hn>和</hn>
6. 
7. <hr>
8. 
文字修饰1
一个网页大多由以下要素构成：文字、图片、表格、动画及声音。在这些元素中，文字是十分重要的。下面我们就逐一讲述涉及文字的标记。
☆字号
1. 和
2. <big>和</big>
3. 
4. <basefont size=n>
5. 和
6. 和

可以采用多种方式设置文字大小。不过设置文字的大小后，其效果会受到IE中选项的影响。

文字修饰2

☆字体样式
1. 和 粗体显示
2. 和 斜体显示
3. 和 加下划线显示
4. <strike>和</strike> 加删除线显示
☆特殊标记

列表
列表是一种条理化地排列信息的方法。它把内容一条条地水平排列显示，直观、清晰。而它也不同于表格，一般列表没有表格复杂。
☆列表标记使用的通用格式
<标记>
<条目标记1>条目内容1
<条目标记2>条目内容2
<条目标记3>条目内容3
……
</标记>
<dl>：列表
<dt>：上层项目
<dd> ：下层项目
1.<dir>和</dir>
2.<menu>和</menu>
3.<ul>和</ul>
4. <ol>与</ol>
在“条目内容”后不用加换行标记 
☆两个可带属性的复杂列表标记ul和ol
3. <ul>和</ul>
 此标记可以带属性，变成<ul type=f>的形式，f有如下几种:
 f为disc：条目以符号“●”引导。
 f为circle：条目以符号“○”引导。
 f为square：条目以符号“■”引导。
4. <ol>与</ol>
 此标记会自动给条目排序并加上序号，也可带有属性：
1) < ol type=f>
 f为A：以大写字母排序。如A，B，C，D等。
 f为a：以小写字母排序。如a，b，c，d等。
 f为I：以大写罗马数字排序。如I，II，III，IV等。
 f为i：以小写罗马数字排序。如i，ii，iii，iv等。
 f为1：以阿拉伯数字排序。如1，2，3，4等。
2) <ol start=n>
 n是一个数字，此标记符表示重新定义的起始号。
在这里我把前面的知识点集中写了代码：

<span style="font-family:Times New Roman;font-size:14px;"><pre class="html" name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>htmlDemo2</title>
</head>
<body>
	<h1>h1-------标题</h1>
	<h2>h1-------标题</h2>
	<h3>h1-------标题</h3>
	<h4>h1-------标题</h4>
	eoafje<br/>aesfalsej<hr/>
	aosiefas6e5f58<!-- 这是一段注释 -->s4ef5
	<small>abc</small> <big>afeojfas</big>
	<font size=5>asdfawle</font>
	<br/>
	<sub>aaaaa</sub>@  @
	<b>湖南城市学院</b>
	<u>湖南城市学院</u>
	<i>湖南城市学院</i>
	<strike>湖南<a href="http://www.hncu.net">城市学院</a></strike>
	<br/>
	x<y>z
	
	<hr/>
	<dl>
	<dt>教学部门</dt>
	<dd>信息院</dd>
	<dd>机电院</dd>
	<dd>美艺院</dd>
	<dt>教辅部门</dt>
	<dd>图书馆</dd>
	<dd>学生处</dd>
	<dd>教务处</dd>
	</dl>
	
	<dir>
	<li>信息院</li>
	<li>机电院</li>
	<li>美艺院</li>
	</dir>
	
	<menu>
	<li>信息院</li>
	<li>机电院</li>
	<li>美艺院</li>
	</menu>
	
	<!-- 无序列表 -->
	<ul type="disc">
	<li>信息院</li>
	<li>机电院</li>
	<li>美艺院</li>
	</ul>
	<!-- 有序列表 -->
	<ol type="a" start="3">
	<li>信息院</li>
	<li>机电院</li>
	<li>美艺院</li>
	</ol>
	<!-- 列表嵌套 -->
	<ol><li>李白
		<ul>
			<li>早发白帝城</li>
			<li>赠汪伦</li>
			<li>望庐山瀑布</li>
		
		</ul>
		</li>
		<li>杜甫
		<ul>
		<li> 绝句  </li>
		<li> 山行  </li>
		<li> 江畔独步寻花  </li>
		
		</ul>
		
		</li>
	</ol>
</body>
</html></span>

网页编程（1）