一、网络常见基本结构：

1、B/S网络结构:

Browser/Server:
浏览器/服务器，这是现在最流行的网络模式。平常的上网：比如新浪网、凤凰网等。

我的电脑(客户端)                                          http请求                   新浪网(服务器端)
在浏览器软件的地址栏中，输入一个     ==================>               当Apache收到客户端的请求后，
网址，并回车。 首先，Apache先判断一下，文件拓展名。
如：http://www.sina.com.cn/index.html    <================== 1)如果请求的文件是.html文件，Apache将在
 http请求结果 自己的空间中查找文件，找到后直接返回给客户端。
服务器端返回了什么东西呢？返回了各种 2)如果请求的文件是.php文件，它需要将.php文件
各样的代码。 转给PHP程序来处理。
主要有三种代码：html代码、CSS代码、JavaScript代码。
html代码：主要控制网页的结构。(标题、正文、链接等等)
CSS代码 ：主要控制网页的外观。(颜色，文字粗细等等)
JS代码　：主要控制网页的行为。(比如动画等等)


2、C/S Client/Server :
客户端/服务器端。最关键的地方，在自己的电脑上安装一个客户端软件，通过客户端访问服务器。

例如： QQ

http协议： 就是上互联网所遵守的一种规则。
www.sina.com.cn  是要访问的服务器的名称。
服务器： 安装了服务器端软件(Apache,IIS)的电脑。
浏览器的功能:    将各种代码(从服务器返回)，翻译成“图文混排”的效果。

二、HTML简介
(1)HTML: Hypertext Markup Language : 超文本标注语言
(2)HTML是一种规范，是一种标准，编写网页的一种标准。
(3)超文本：就是网页上不光有文本，还有图片，音乐，视频等。
(4)标注:是一种记号，是一种标志。如：红绿灯。
(6)语言:这里的"语言"就是代码，跟所谓的"程序语言"一点关系都没有。
(7)HTML的主要目的：就是用来显示网页的不同效果、不同部分。
如:<b>文本</b>，这就表示将文本进行加粗。(bold),这个<b>..</b>就是标记。
1、HTML文件结构
<html>
<head>  
<title>新浪首页</title>   
</head>

<body>
网页正文。。。。。
</body>
</html>

2、HTML文件结构的说明：
(1)<html> </html> 标记的含义：
告诉浏览器，其中的内容或者代码用什么格式(图片、视频)来进行翻译。
(2)<head> </head> 标记的含义：
告诉浏览器，网页中的汉字用什么字符集(GB2312(简体中文),BIG5(繁体中文),JIS(日文),utf-8(多国语言字符集))显示。
   (英文，数字是全球统一的，不会乱码，但是，如果不使用正确的字符集，会出现乱码)
(3)<body> </body> 标记的含义：
是网页主要内容的显示区域。网页中99%的内容都必须放在<body>。
只有放在<body>中，最终浏览器翻译以后，才能看见结果。

3、HTML标签格式
HTML标记，大致分两类 : (1)双边标记 ; (2)单边标记
(1)双边标记 ：
   是指有开始和结束标记，内容放在开始和结束标记之间。如<b>内容</b>
   语法格式：<标签 属性1 = "值 1"  属性2 = "值2">内容</标签>
   "属性"的理解：人的特征(属性)有身高=170cm、体重=100KG、姓名=张三
   例如：
   <font size="6" color="blue" face="楷体">这是6号字体文本</font>
   font是标签，size是属性表示字体大小,color也是属性，表示显示字体的颜色。face也是属性，表示字体类型。
   <u>  </u>表示加下划线
   
(2)单边标记　：
　　是指有开始标记，而没有结束标记，单边标记一般是没有内容。如：</br> 表示换行 
单边标记一般起一个特殊的功能。
单边标记常用的有10多个标记。
语法格式：<标签 属性1 = "值 1"  属性2 = "值2">

4、HTML标签编写规范
(1)HTML标记不区分大小写。如:<font>、<Font>、<FONT>
(2)HTML标记属性可有可无，有的标记是没有属性的，如:<html>、<head>、<title>等
(3)双边标记的内容在开始和结束标签之间，单边标记没有内容。
(4)HTML标记可以相互嵌套，但一定注意是顺序嵌套，外层套内层，一层套一层。
<meta http-equiv="content-type" content="text/html;charset=utf-8">
功能：告诉浏览器，如何翻译汉字。
Content-type:内容类型
Content:详细内容类型介绍
Text/html:网页是text格式，html是文本中的小格式。
charset:字符集，主要控制汉字如何显示
utf-8:多国语言编码，什么国家的语言都可以正常显示。

好了，光说不练假把戏，咱们就来写第一个网页吧，用NotePad C++编辑器创建一个1.html的文件，然后输入以下网页代码：

<html>
	<head>
		<title>这是一首诗构成的网页</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
	</head>
	<body>
		<!--标题1 <h1> </h1>-->
		<h1>
			<font size="6" color="blue" face="黑体">春晓</font>
		</h1>
		<!--段落 <p>  </p> -->
		<p>
			<u>
			<font size="3" color="black" face="黑体">
			春眠不觉晓，处处闻啼鸟。</u><br><u>
			夜来风雨声，花落知多少。</font></u><br>
		</p>
	</body>
</html>

运行结果：

网页基础学习--网络结构和HTML(未完待续)的更多相关文章

  1. Java开发中的23+2种设计模式学习个人笔记（未完待续）

    注:个人笔记 一.设计模式分三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模 ...

  2. [Python]从哪里开始学习写代码（未完待续）

    预警:这只是我在学习中的一点感受,可能并不完全准确,也不包括面向对象编程的思想(我还不太懂),也有水文的嫌疑,大佬请温和批评指正或者绕道. 计算机语言 语言,是用来交流的.计算机是不能直接听懂人的语言 ...

  3. Python基础：内置类型（未完待续）

    本文根据Python 3.6.5的官文Built-in Types而写. 目录 1.真值测试 2.布尔操作 -- and, or, not 3.比较 4.数字型 -- int, float, comp ...

  4. CC2530学习路线-基础实验-串口通讯发送字符串(4 未完待续)

    目录 1. 前期预备知识 1.1 串口通讯电路图 1.2 实验相关寄存器 1.2 常用波特率设置 本章未完待续..... 原来写的文章已经丢失了,只能找到这一小部分,看什么时候有时间再补上. 1. 前 ...

  5. Go web编程学习笔记——未完待续

    1. 1).GOPATH设置 先设置自己的GOPATH,可以在本机中运行$PATH进行查看: userdeMacBook-Pro:~ user$ $GOPATH -bash: /Users/user/ ...

  6. 2017-2-17,c#基础,输入输出，定义变量，变量赋值,int.Parse的基础理解，在本的初学者也能看懂（未完待续）

    计算机是死板的固定的,人是活跃的开放的,初学c#第一天给我的感觉就是:用人活跃开放式的思维去与呆萌的计算机沟通,摸清脾气,有利于双方深入合作,这也是今晚的教训,细心,仔细,大胆 c#基础 1.Hell ...

  7. odoo11 model+Recordset 基础未完待续

    Model 一个模型代表了一个业务对象 本质上是一个类,包含了同django flask一样的数据字段 所有定义在模型中的方法都可以被模型本身的直接调用 现在编程范式有所改变,不应该直接访问模型,而是 ...

  8. ASP.NET Core 2.2 基础知识(八) 主机 (未完待续)

    主机负责应用程序启动和生存期管理.共有两个主机 API : 1.Web 主机 : 适用于托管 Web 应用,基于 IWebHostBuilder ; 2.通用主机 : 适用于托管非 Web 应用. 基 ...

  9. java泛型基础、子类泛型不能转换成父类泛型--未完待续

    参考http://how2j.cn/k/generic/generic-generic/373.html 1.使用泛型的好处:泛型的用法是在容器后面添加<Type>Type可以是类,抽象类 ...

随机推荐

  1. feather mac 问题小结

    feater 依赖php及jdk 1.自带的php没有cgi ,索性直接装个新的 修改环境变量,并使其生效,验证方式是 打印版本信息: php -v PHP 7.1.13 (cli) (built: ...

  2. 20145324 《Java程序设计》第7周学习总结

    20145324 <Java程序设计>第7周学习总结 教材学习内容总结 第十一章 1.静态sleep()用于流程暂停指定时间,单位是毫秒 2.一个Thread被标记为Daemon线程,在所 ...

  3. 20135302魏静静——linux课程第四周实验及总结

    linux课程第四周实验及总结 一.实验 我选择的是第20号系统调用,getpid 代码如下: /* getpid.c */ #include <unistd.h> #include &l ...

  4. <linux/init.h>，<linux/module.h>头文件不存在等问题的解决方法

    这个问题真心是处理了一个下午,还自己去下载了个最新的内核拿来编译,其实是完全没必要的,因为ubuntu系统是可以直接下载新内核的. 你可以在/usr/src/文件夹下找到这些内核文件夹,比如说我自己的 ...

  5. LeetCode (226):Invert Binary Tree 递归实现

    Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 Trivia:This problem was ...

  6. Android 图形基础类Rect，扎实基础助腾飞

    转载请注明出处:王亟亟的大牛之路 上周把"垃圾桶动画写完了",然后这礼拜寻思着学习点啥,脑子闷逼了大半天,然后就找了点基础源码读读,把看的经历分享给大家. 先安利:https:// ...

  7. Linux内核、 TCP/IP、Socket参数调优

    /proc/sys/net目录 所有的TCP/IP参数都位于/proc/sys/net目录下(请注意,对/proc/sys/net目录下内容的修改都是临时的,任何修改在系统重启后都会丢失),例如下面这 ...

  8. Generator 函数的异步应用

    异步编程对 JavaScript 语言太重要.Javascript 语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可.本章主要介绍 Generator 函数如何完成异步操作. 传 ...

  9. 关于java.lang.Exception:No tests found matching的一系列解决方法

    问题描述: java.lang.Exception: No tests found matching [{ExactMatcher:fDisplayName=yahaa], {ExactMatcher ...

  10. unity3D用什么语言开发好?

    unity3D用什么语言开发好? 一.总结 一句话总结:选c# 同时U3D团队也会把支持的重心转移到C#,也就是说文档和示例以及社区支持的重心都在C#,C#的文档会是最完善的,C#的代码实例会是最详细 ...