网页基础学习--网络结构和HTML(未完待续)
一、网络常见基本结构:
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(未完待续)的更多相关文章
- Java开发中的23+2种设计模式学习个人笔记(未完待续)
注:个人笔记 一.设计模式分三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模 ...
- [Python]从哪里开始学习写代码(未完待续)
预警:这只是我在学习中的一点感受,可能并不完全准确,也不包括面向对象编程的思想(我还不太懂),也有水文的嫌疑,大佬请温和批评指正或者绕道. 计算机语言 语言,是用来交流的.计算机是不能直接听懂人的语言 ...
- Python基础:内置类型(未完待续)
本文根据Python 3.6.5的官文Built-in Types而写. 目录 1.真值测试 2.布尔操作 -- and, or, not 3.比较 4.数字型 -- int, float, comp ...
- CC2530学习路线-基础实验-串口通讯发送字符串(4 未完待续)
目录 1. 前期预备知识 1.1 串口通讯电路图 1.2 实验相关寄存器 1.2 常用波特率设置 本章未完待续..... 原来写的文章已经丢失了,只能找到这一小部分,看什么时候有时间再补上. 1. 前 ...
- Go web编程学习笔记——未完待续
1. 1).GOPATH设置 先设置自己的GOPATH,可以在本机中运行$PATH进行查看: userdeMacBook-Pro:~ user$ $GOPATH -bash: /Users/user/ ...
- 2017-2-17,c#基础,输入输出,定义变量,变量赋值,int.Parse的基础理解,在本的初学者也能看懂(未完待续)
计算机是死板的固定的,人是活跃的开放的,初学c#第一天给我的感觉就是:用人活跃开放式的思维去与呆萌的计算机沟通,摸清脾气,有利于双方深入合作,这也是今晚的教训,细心,仔细,大胆 c#基础 1.Hell ...
- odoo11 model+Recordset 基础未完待续
Model 一个模型代表了一个业务对象 本质上是一个类,包含了同django flask一样的数据字段 所有定义在模型中的方法都可以被模型本身的直接调用 现在编程范式有所改变,不应该直接访问模型,而是 ...
- ASP.NET Core 2.2 基础知识(八) 主机 (未完待续)
主机负责应用程序启动和生存期管理.共有两个主机 API : 1.Web 主机 : 适用于托管 Web 应用,基于 IWebHostBuilder ; 2.通用主机 : 适用于托管非 Web 应用. 基 ...
- java泛型基础、子类泛型不能转换成父类泛型--未完待续
参考http://how2j.cn/k/generic/generic-generic/373.html 1.使用泛型的好处:泛型的用法是在容器后面添加<Type>Type可以是类,抽象类 ...
随机推荐
- Object类包含方法
9个方法: 1. clone() 2. equals() 3. finalize() 4. getClass() 5. notify() 6. notifyAll() 备注:5.6多归于一个 7. h ...
- 20145333《Java程序设计》课程总结
每周读书笔记链接汇总 第一周学习总结 第二周学习总结 第三周学习总结 第四周学习总结 第五周学习总结 第六周学习总结 第七周学习总结 第八周学习总结 第九周学习总结 第十周学习总结 实验报告链接汇总 ...
- ASP.NET Web API Claims Authorization with ASP.NET Identity 2.1 Part 5 (by TAISEER)
https://www.cnblogs.com/KimmyLee/p/6430474.html https://www.cnblogs.com/rocketRobin/p/9077523.html h ...
- gulp构建例子(ubuntu)
1.项目结构和生产之后的目录 2.gulpfile.js // 载入插件 var gulp = require('gulp'), //本地安装gulp所用到的地 sass = require('gul ...
- jQuery实现输入框提示,当获取焦点时提示消失,当失去焦点时内容为空则显示提示,否则保留输入信息
首先看效果 默认状态下 获取焦点状态下 什么也没输入,离开 有输入离开 输入默认值离开 代码 <!DOCTYPE html> <html> <head> <m ...
- C#(Wpf)实现小键盘
花了一天时间小键盘基本功能已完成,先看看效果图吧! 默认: Shift: Caps Lock: Button style <Style x:Key="KeyButton" T ...
- Asp.Net Core 2.0 WebUploader FastDfs 文件上传 分段上传
功能点: 1. 使用.net core 2.0 实现文件上传 2. 使用webuploader实现单文件,多文件上传 3. 使用webuploader实现大文件的分段上传. 4. 使用webuploa ...
- 通栏banner自适应各个设备
思路:图片不要设置为div的background,因为你设置了background-size,但是div的height没设置一样没用,除非你搞个js判断,动态刷新. 换一种思路,直接用<img& ...
- vim 的寄存器
If you've been following my series on Vim, it should be clear now that Vim has a pretty clear philos ...
- jmeter-00 JMeter 运行过程
一.GUI mode 图形化界面运行 to run JMeter, run the jmeter.bat (for Windows) or jmeter (for Unix) file. These ...