B/S网络模式（结构）C/S

B是浏览器Brower；S是服务器Server。  http://www.sohu.com/

 

 

HTML简介

静态网页的扩展名：.html和.htm (dos系统规定3个字母)

动态网页的扩展名：.asp、.jsp、.aspx、.php(含有PHP代码和MySQL代码)等

浏览器不能直接识别PHP和MySQL的代码。只能由服务器端的服务器软件Apache来进行解释成HTML代码返回。

 

1）HTML的概念

       HTML(Hypertext Markup Language，超文本标注语言)  ，(这是曾经的一道笔记题)

       HTML就是一个标准，是一套标记。比如：加粗：<b>广州传智</b>

2）一个HTML文件的结构标记

       <html>

              <head>

                     <title>凤凰网首页</title>

</head>

<body>

99%的内容都放在这里

</body>

</html>

      

<html></html>是网页中最大的一对标记，告诉浏览器如何给我翻译这个文件的内容。<html>中包含两大标记<head>和<body>。

<head></head>中的内容不可见，一般用于特殊功能。

<body></body>是网页的主体内容。这里的内容都是用户可见的。

<title></title>是网页标题，只能填写纯文本。文件编码  字符编码

<meta>标记是<head>的子标记，告诉浏览器网页用什么字符编码来显示。比如：gb2312(简体中文)、utf-8(多国语言)

       注意：如果这个<meta>标记，设置的不合格，会造成乱码的问题。(详细的meta明天再讲)

 

 

HTML标记的语法

双边标记：<标记名称 属性1=“属性值1” 属性2=“属性值2”></标记名称>

一个人可以看成一个对象，人对象有身高、体重、年龄、学历等特征。

例如：<张三 height=”180”  weight=”200”  age=”200”  edu=”研究生”>

例如：<font  size=”7”  color=”red”  face=“黑体”>李四</font>

 

 

单边标记：<标记名称  属性1=“属性值1” 属性2=“属性值2”>

说明：单边标记起一个特殊的作用，比如：换行标记、水平线等

例如：<hr> 水平线标记     <br>换行标记

 

字体修饰标记

加粗：<b>内容</b>

斜体：<i>内容</i>

下划线：<u>内容</u>

下标：<sub></sub>

上标：<sup></sup>

字体颜色、大小：<font  size=“字号大小，取值1-7” color=“颜色单词”>内容</font>

例如：<font size=”6” color=”blue”>大家好</font>

 

 

 

解决网页乱码的问题：要保证各个环节的字符编码一致

编码分两  ：文件编码   字符编码 

中文  文件ansi  字符编码：gbk（甲骨文），gb2312(普通的)

 多国  文件 utf-8  字符: utf-8

（1）编辑器的编辑环境的字符集(默认字符集)：Ctrl+U   

常用的编码 GB2312(简体)、GBK(简体)、BIG5(繁体)、UTF-8(多国语言编码)

（2）<meta>标记的字符集设定与编辑环境的字符集一致

       字符集设置：<meta  http-equiv=“content-type” content=“text/html;charset=utf-8”>

（3）PHP的字符集设置

（4）MySQL的字符集设置

注意：不需要考滤浏览器的字符集。

 

任何软件的默认字符编码都是ANSI编码，ANSI在中国，对应的具体的编码是GBK或GB2312。

 

<body>的常用属性

Text：指网页的前景颜色，就是指网页中的文本颜色；

bgColor：网页的背景颜色

background：网页背景图片路径。background=”images/bg.gif”

例如：<body bgcolor="#999999" background="bg01.jpg">

 

排版标记

1、水平线：<hr  size=“线的粗细” width=“线的宽度” align=“水平对齐方式” noshade>

       常用的属性：

              Size：指定水平线的粗细，单位默认是像素，例如：size=5

              Width：指定水平线的宽度，取值：固定值、百分比。例如：width=500  width=50%

              Align：水平线的水平对齐方式，取值：left、center、right

              Noshade：不加阴影，也就是纯色显示，该属性比较特殊，没有属性值。

提示：HTML中的标记及属性，不区分大小写。

例如：<hr  size=“5” width=“50%” align=“center” noshade>

2、段落标记：<p></p>

       Align：水平对齐，取值：left、center、right

       提示：在段落的前后，会自动插入一个空行。

 

3、标题标记

       一级标题：<h1 align=“left|center|right”></h1>

       二级标题：<h2></h2>

       三级标题：<h3></h3>

       四级标题：<h4></h4>

       五级标题：<h5></h5>

       六级标题：<h6></h6>

4、预排版标记<pre></pre>

       含义：将保留其中的所有的空白字符(空格、换行符)。原封不动的输出结果。

       说明：真正排网页过程中，<pre>标记几乎用不着。但在PHP中用于打印一个数组时使用。

 

HTML字符实体

空格：&nbsp;

>：&gt;

<：&lt;

&：&amp;

人民币：&yen;

版权：&copy;

乘号：&times;

除号：&divide;

 

项目符号(无序列表)标记

标记结构：

<ul>

       <li>内容</li>

       <li>内容</li>

       ……

</ul>

 

 

常用属性：

       Type：指定项目符号的类型，取值：disc(实心圆点)、circle(小圆圈)、square(方块)

       提示：这个type属性，既可能给<ul>添加，也可以给<li>添加。

       注意：项目符号可以是图片，但是通过CSS设置<li>标记的背景图片来实现。(CSS中讲)

 

项目符号之间相互嵌套

<ul>

       <li><b>北京市</b>

              <ul>

                     <li>海淀区</li>

                     <li>朝阳区</li>

                     <li>东城区</li>

</ul>

</li>

       <li><b>广州市</b>

              <ul>

                     <li>天河区</li>

                     <li>越秀区</li>

</ul>

</li>

       <li>天津市</li>

</ul>

说明：项目符号嵌套，是在某一个<li>标记中来嵌套一个完整的<ul>标记。

 

编号列表(有序列表)标记

<ol>

       <li>内容</li>

       <li>内容</li>

       ……

</ol>

常用的属性：

Type：编号的类型，取值：1、a、A、I(大罗马)、i(小罗马)

Start：从第几开始编号，取值只能是数字。

<h2>编号列表的应用</h2>

<ol>

       <li>HTML</li>

       <li>CSS</li>

       <li type="a" start="3">JavaScript</li>

       <li>PHP+MySQL</li>

</ol>

 

编号列表相互嵌套：跟上面<ul>的嵌套一样，也都是在<li>标记中，来嵌套一个完整的<ol>。