网络结构与HTML学习笔记

作为一个嵌入式应用开发者,网页前后端的东西也要了解一点,不需要有多深度,至少别人说了你知道一点,就像我们用算法一样,你不是那个行业的,不专业从事那个行业的事情。所以只要有知识的广度即可,不然做类似和云端服务器合作的项目就会很懵逼。

我们先来了解下基础知识。

一、网络学习基础-网络结构和HTML

网络常见基本结构

B/S网络结构:

Browser/Server:

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

我的电脑(客户端)http请求 新浪网(服务器端)

在浏览器软件的地址栏中,输入一个     ==================>               当Apache收到客户端的请求后,
网址,并回车。    首先,Apache先判断一下,文件拓展名。
如:http://www.sina.com.cn/index.html    <==================    1)如果请求的文件是.html文件,Apache将在
 http请求结果    自己的空间中查找文件,找到后直接返回给客户端。

如果请求的文件是.php文件,它需要将.php文件

各样的代码。 转给PHP程序来处理。

主要有三种代码:html代码、CSS代码、JavaScript代码。

html代码:主要控制网页的结构。(标题、正文、链接等等)

CSS代码 :主要控制网页的外观。(颜色,文字粗细等等)

JS代码 :主要控制网页的行为。(比如动画等等)

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>就是标记。

HTML文件结构

<html>
<head>  
<title>新浪首页</title>   
</head>

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

HTML文件结构的说明

(1)<html> </html> 标记的含义:

告诉浏览器,其中的内容或者代码用什么格式(图片、视频)来进行翻译。

(2)<head> </head> 标记的含义:

告诉浏览器,网页中的汉字用什么字符集(GB2312(简体中文),BIG5(繁体中文),JIS(日文),utf-8(多国语言字符集))显示。

(英文,数字是全球统一的,不会乱码,但是,如果不使用正确的字符集,会出现乱码)

(3)<body> </body> 标记的含义:

是网页主要内容的显示区域。网页中99%的内容都必须放在<body>。

只有放在<body>中,最终浏览器翻译以后,才能看见结果。

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">

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>

运行结果:

<body>的常用属性

(1)bgColor : 网页的背景色。 如: <body bgColor="red">
(2)Background : 网页背景图片地址 。 如: <body  background="images/bg.png">  
网页背景图片最好跟网页放在一起,最好不要用中文来命名,背景是平铺效果。
例如:<body bgcolor = "#99cc33" background="images\20170331151615532.png">


HTML文本修饰标记:
(3)<b></b>:        加粗 bold(跟文本相关)     如: <b>文字</b>  ,这个标记没有属性
(4)<i></i>:         加斜体 italic(跟文本相关) 如:<i>文字</i>
(5)<u></u>:         下划线 underline。        如: <u>文字</u>
(6)<s></s>:         删除线 strike。           如: <s>文字</s>
(7)<sup></sup>:     上标。
(8)<sub></sub>:     下标。
    例如:<font size="7">a<sup>2</sup> + b<sub>2</sub> = 24 </font>
(9)<font></font>:        字体标记
    size : 文本大小,取值1-7,1小,7大。
    Color: 颜色值。
    Face :字体。楷体、黑体、宋体。。。。

接下来看一个实例,更好了说明如何使用这些标记:

<html> 
    <head>
        <title>这是一首诗构成的网页</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <!--设置body的背景颜色为绿色 -->
    <body bgcolor="green">
        <!--标题1 -->
        <h1>
            <font size="6" color="red" face="楷体">
            关雎
            </font>
        </h1>
        <!-- 标题2-->
        <h2>
            <font size="5" color="red" face="楷体">
            先秦:佚名
        </h2>
        <!--段落-->
        <p>
        <font size="4" color="red" face="楷体">
        <b><i>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</i></b><br>
        <b><u>参差荇菜,左右流之。窈窕淑女,寤寐求之。</u></b><br>
        <b><s>求之不得,寤寐思服。悠哉悠哉,辗转反侧。</s></b><br>
        <b>参差荇菜,左右采之。窈窕淑女,琴瑟友之。</b><br>
        <b>参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</b><br>
        </font>
        </p>
    </body>

</html>

运行结果:

那如果背景颜色换成图片该怎么做呢?先在HTML文件的当前路径下创建一个images文件夹,注意,最好还是让存放图片的文件夹和HTML在同一路径下,这样便于管理。

往这个文件夹放入一张图片格式,gif,png,jpg等等都可以。。。我下面的这张是png图片。。。

然后,修改HTML代码如下:

<html> 
    <head>
        <title>这是一首诗构成的网页</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <!--设置body的背景图片为20170331151615532.png -->
    <body background="images/20170331151615532.png">
        <!--标题1 -->
        <h1>
            <font size="6" color="red" face="楷体">
            关雎
            </font>
        </h1>
        <!-- 标题2-->
        <h2>
            <font size="5" color="red" face="楷体">
            先秦:佚名
        </h2>
        <!--段落-->
        <p>
        <font size="4" color="red" face="楷体">
        <b><i>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</i></b><br>
        <b><u>参差荇菜,左右流之。窈窕淑女,寤寐求之。</u></b><br>
        <b><s>求之不得,寤寐思服。悠哉悠哉,辗转反侧。</s></b><br>
        <b>参差荇菜,左右采之。窈窕淑女,琴瑟友之。</b><br>
        <b>参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</b><br>
        </font>
        </p>
    </body>

</html>

显示结果:

我们学习了boda常用的属性以及HTML的一些标记,但是图显示的效果却不是那么的好看。原因就是没有排版好,接下来使用居中来使这个页面更好看一点,顺便多加入几个别的标记。

HTML排版标记

(1)<p></p> : 表示一个段落。一段文字放在p标记里就可以了。

常用属性:align 水平对齐方式,取值:left(左对齐)、center(居中对齐)、right(右对齐),一个段落默认就是左对齐。

(2)换行标记<br>

(3)水平线标记(单边标记):<hr>

size:水平线的粗细,单位一般为px

color:颜色

width:水平线的宽度

noshade:去掉水平线的阴影。(在HTML中,noshade是没有值的属性)如: <hrnoshade>

如: <hr size="1" color="blue" width="50%" noshade>

(4)<pre>预排版标记

功能:将保留所有的空白字符(空格、换行符),换句话说就是原封不动的输出。

语法:<pre></pre>:双边标记

(5)<h1>...<h6>

一级标题到六级标题

标题标记:<h1></h1> ... <h6></h6>

功能:定义各种标题

属性:

align 水平对齐,取值:left(左对齐)、center(居中对齐)、right(右对齐),一个段落默认就是左对齐。

写个例子看看效果是怎么样的:

<html> 
    <head>
        <title>这是一首诗构成的网页</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body bgColor="white">
        <!--标题1 并设置标题1居中-->
        <h1 align="center">
            <font size="6" color="red" face="楷体">
            关雎
            </font>
        </h1>
        <!-- 设置水平线的粗细,颜色,宽度和去阴影-->
        <hr size="5" color="green" width="1600" noshade>
        <!-- 标题2 并设置标题2居中-->
        <h2 align="center">
            <font size="5" color="red" face="楷体">
            先秦:佚名
        </h2>
        <!-- 设置水平线的粗细,颜色,宽度和去阴影-->
        <hr size="10" color="red" width="1600" noshade>
        <!--段落-->
        <p align="center">
            <font size="4" color="black" face="楷体">
            <b><i>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</i></b>
            <br>
            <b><u>参差荇菜,左右流之。窈窕淑女,寤寐求之。</u></b>
            <br>
            <b><s>求之不得,寤寐思服。悠哉悠哉,辗转反侧。</s></b>
            <br>
            <b>参差荇菜,左右采之。窈窕淑女,琴瑟友之。</b>
            <br>
            <b>参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</b>
            <br>
        </p>
    </body>
</html>

运行效果:

原文发布于微信公众号 - 嵌入式开发圈(gh_d6ff851b4069)

原文发表时间:2019-05-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券