软件架构
一、CS架构 客户端/服务器
1.CS不可跨平台
二、BS架构 B浏览器 本质CS 浏览器/服务器 （通用性高，价格低用途广）
1.特点不安装软件包，直接可以去网址
2.软件更新问题：客户端（浏览器）不需要更新
3.软件可以跨平台
4.客户端和服务器之间通信HTTP协议，相对不安全（HTTPS把HTTP升级安全些）
网页组成
1.结构 HTML 页面的结构
2.表现 CSS 页面的元素样式（是大小 颜色）
3.行为 JavaScript （响应用户操作）
HTML
超文本标记语言，相对而言：
纯文本编辑语言（sumblm等）
网页就是纯文本编写的（不能加mp3等格式）。
超文本 标记：超链接，标记（用标签进行标题的等级判断）
- html根目录，写的东西必须都在这里面
- head是帮助浏览器解析网页的
- body是主体（看到的东西都写在里面）
- 标题是网页头上标题
- 多个属性 空格分开
- <h1>~<h6>
- <meta>
- <p> p短落中间也有空格。
- <br />
- <hr />
- <img />
- <a>
- center 放中间
- doctype选择到底使用哪个版本(4.01 5等)（用于文档声明）
不写的话，可能使别的浏览器不能解析网页
完整标签：元素（=标签）
编码和解码规则：字符集
常见：GB2312（中国浏览器默认）
Utf-8（通用）
在写网页的时候编码是utf-8
用中文浏览器打开，编码用GB2312
导致出现乱码
解决就是在变得时候改为GB2312格式
如果想做全球通用编码，即：
改网页编码 UNcode不过退一下就又乱码
这时：
可以在重写。
以上问题不会发生在文本编辑器因为：
ANSI自动编码，在中文浏览器是GB2312；在外国ASCII编码格式。所以文本文档不报错
注意!
如果你的网站都是h1标题，就当垃圾不受理
一个网页只能有一个h1
h2，h3可以用
h2,h3够用了以后不用了
实体（浏览器解析的时候解析想要的东西）：&实体的名字;
< <:
>>:
空格  
版权符号©
图片
<img src="../img/2.gif" alt="这是一个大松鼠" />
<img src="2.gif" alt="这是一个大松鼠" width="100px" height="500px" />
图片宽高问题：
只改一个另一个就会默认。
图片格式
jpg 图片可压缩 不能透明 保存颜色丰富的 保存照片对的
gif 支持颜色少 支持动图 体积最小
png 支持颜色多 支持复杂的透明图片
效果不一样使用最好的
效果一样使用体积最小的
使用img标签来向网页中引入一个外部图片
img标签也是一个自结束标签
属性：
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行收录
width：可以用来修改图片的宽度，一般使用px作为单位
height：可以用来修改图片的高度，一般使用px作为单位
宽度和高度两个属性如果只设置一个，另一个也会同时等比例调整大小
如果两值同时指定，则按照你指定的值来设置
一般开发中除了自适应的页面，不建议设置width和height
src属性配置的是图片的路径，目前我们所使用的路径全都是相对路径
相对路径：
相对路径指相对于当前资源所在目录的位置
可以使用../来返回上一级目录，返回几级目录就写几个../
<img src="../img/2.gif" alt="这是一个大松鼠"
meta name=keyword
关键字搜索
meta name=description
指定网页描述
meta http-equiv=refresh
自动跳转
xhtml规范
1.html不区分大小写，一般小写
2.注释不能嵌套
3.标签必须完整（不符合要求的浏览器可能会给你修正的）
4.HTML标签可以嵌套，但是不能交叉嵌套。浏览器可以修改错处。
5.html中属性必须有值，必须有引号。color=‘red’
meta
1、使用meta标签还可以用来设置网页的关键字，方便搜索查询，搜索contnt后面内容出现keyworlds。
<meta name="kworld" content="Java" />
2、还可以用来指定网页的描述
<meta name="kworld" content="发布世界知识" />
3、使用meta可以用来做请求的重定向
5秒后跳转到后面的链接。
<meta http-equiv="refresh"
content="5;url=http://www.baidu.com" />
demo
meta.png
内联框架:（引用外部界面）
现实中不推荐使用内联框架，所以用的不会让搜索引擎搜索到。（公司内部可以）
使用内联框架可以引入一个外部的页面
使用iframe来创建一个内联框架
属性：
src：指向一个外部页面的路径，可以使用相对路径
width：
height：
name：可以为内联框架指定一个name属性
在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
<iframe src="demo010_XHTML的语法规范.html" name="tom">
</iframe>
超链接
超链接
从一个界面跳到列一个界面。
href 属性:href：指向链接跳转的目标地址，可以写一个相对路径，也可以写一个完整
blank参数新窗口打开
<a href="http://www.baidu.com">我是一个超链接</a><br /><br />
使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：
href：指向链接跳转的目标地址，可以写一个相对路径，也可以写一个完整的路径
a标签中的target属性可以用来指定打开链接的位置
可选值：
_self：表示在当前窗口中打开（默认值）
_blank：在新的窗口中打开链接
超链接和内联框架
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
- 1<a href="demo011_内联框架.html" target="tom">我是一个超链接</a><br /><br />
- 2<iframe src="demo010_XHTML的语法规范.html" name="tom"></iframe>
demo
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客</title>
</head>
<body id="top">
<center>
<a href="#down">去底部</a>
<a href="http://www.baidu.com">去指定位置</a>
<h1>这是我的个人博客</h1>
<hr/>
<h2> 敬大佬</h2>
<a href="https://baike.baidu.com/item/%E9%A9%AC%E4%BA%91/6252?fr=aladdin">无名</a>
<h3>人生失败周鸿祎，悔创阿里杰克马。</h3>
<h3>不知妻美刘强东，普通家庭马化腾。</h3>
<h3>一无所有王健林，北大还行撒贝宁。</h3>
<h3>名下无房潘石屹，下周回国贾跃亭！</h3>
<img src="马云.jpg" alt="这是马大佬" />
<hr/>
<p><h3>友情链接:
<a href="http://www.baidu.com">A网站</a> |
<a href="http://www.baidu.com">B网站</a> |
<a href="http://www.baidu.com">C网站</a><br></h3>
</p>
<a href="#top">回到顶部</a> |
<a id="down" href="http://www.baidu.com">联系我们</a>
</center>
</body >
</html>
运行效果图
运行效果图.png
网友评论