Web概念和软件架构
BS架构详解
资源分类
1.静态资源：
- 使用静态网页开发技术发布的资源
- 特点：所有用户访问，得到的结果都一样
比如：文本、图片、音频、视频 - 用户请求的是静态资源，服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2.动态资源
- 使用动态网页发布的资源
- 特点：
所用用户访问得到的结果可能不太一样；
比如：jsp/Servlet
用户请求的是动态资源，服务器会执行动态资源，转换成为静态资源，再返回给浏览器
3.学习路径
- 先学习静态资源再学习动态资源
- 静态资源：HTML\CSS\JS
- 动态资源：
Web标准
web标准是一系列标准的集合：
1.结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 最重要
2.表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
3.行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript
结构-表现-行为
官方文档是最权威的参考资料，可以查看 HTML5 相关的一切信息
https://www.w3.org
https://www.w3.org/standards/techs/html
HTML标签介绍
在HTML页面中，带有"<>"符号的元素被称为HTML标签或者叫做HTML元素
1.标签分类
1.双标签
语法：<标签名> 内容 </标签名>
<body>我是文字</body>
2.单标签
语法：<标签名 />
<br/>
2.标签之间的关系
1.嵌套关系
<head><title> </title></head>
2.并列关系
<head></head>
<body></body>
3.HTML基本文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
说明：
1. <!DOCTYPE> 标签
- HTML文档声明；用于向浏览器说明当前文档使用哪种 HTML 标准规范，浏览器才好进行解析
- 必需在开头处使用
2. <html> </html>
html文档的根标签
lang属性：
W3C标准建议为html元素增加一个lang属性，作用是：
帮助语音合成工具确定要使用的发音
帮助翻译工具确定要使用的翻译规则
比如：
当操作系统语言默认为中文时
而html页面中：lang=“en” 告诉浏览器：这个HTML文档的语言是英文，浏览器会有翻译提示
3. <head></head>
一般用于描述html文档的各种元信息，比如 字符编码、网页标题、网页图标
以下列出的元素大多数情况下都是在 head 元素内部使用：
meta
title
style
link
base
script
noscritpt
title 元素：网页的标题
meta 元素：网页的字符编码
meta 元素用于设置网页的字符编码，不设置或者设置错误会导致乱码
一般都使用 UTF-8 编码，涵盖了世界上几乎所有的文字
<meta charset="UTF-8" />
base 元素：设置 a 元素的基路径
4. <body></body>
用于展示页面内容
body 元素里面的内容是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构
HTML常用标签
1.文本类标签
1.标题标签
<h1>标题</h1>
- h1到h6，大小依次递减
- 建议在网页中最多只有 1 个 h1 元素
- 乱用 h 元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，最后导致K站
2.段落标签
- 文本在一个段落中会根据浏览器窗口的大小自动换行
<p> 文本内容 </p>
3.水平线标签
- 创建横跨网页的水平线
<hr/>
属性：
- color
- width
- size
- align:对齐方式 值由center\left\right
4.换行
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
<br/>
5.块标签
- div块会占用一整行
- span标签没有什么显示效果
<div>这是一个快标签</div>
<div>这是两个块标签</div>
<span>这是一个span</span>
<span>这是第二个span</span>
效果：
6.文本格式化标签
b i s u 只有使用 没有 强调的意思
strong em del ins 语义更强烈
2.标签属性
格式：<标签名 属性1=“属性值1” 属性2=“属性值2” …> 内容 </标签名>
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。
3. 图片标签
<img src="图像URL" />
标签属性：
注意：
对于网页来说，不管什么操作系统，路径分隔符都是 /，不是 \
img 元素如果只设置了 width，浏览器会自动根据图片宽高比计算出 height
width 同理
在 HTML5 规范中，alt 是 img 元素的必要属性
width、height 的默认单位是 px（像素）
图片与像素
web中常用的图片格式有：
- png：静态图片，支持透明
- jpg：静态图片，不支持透明
- gif：动态图片、静态图片，支持透明
像素：
- 像素（px）是图像显示的最小单位
- 每个像素都能表示一种颜色
- 计算机显示出来的图像都是由一堆像素组成的
- 组成图片的像素越多，显示越清晰
4.链接标签
定义超链接，用于打开新的URL
URL
什么是 URL？
- URL 的全称是 Uniform Resource Locator（统一资源定位符）
- URL 就是资源的地址、位置，互联网上的每个资源都有一个唯一的URL
- 通过 1 个 URL，能找到互联网上唯一的 1 个资源
URL 的基本格式 = 协议://主机地址/路径
URL 常见的协议：
- http：超文本传输协议，访问的是远程的网络资源，格式是 http://
- http 协议是在网络开发中最常用的协议
- https 协议相当于是 http 协议的安全版
- file：访问的是本地计算机上的资源，格式是 file://（不用加主机地址）
- mailto：访问的是电子邮件地址，格式是 mailto:
- ftp：访问的是共享主机的文件资源，格式是 ftp://
- ed2k：通过支持 ed2k（专用下载链接）协议的 P2P 软件访问该资源，格式是 ed2k://
代表软件：电驴 - thunder：通过支持 thunder（专用下载链接）协议的 P2P 软件访问该资源，格式是 thunder://
代表软件：迅雷
a标签
标签a定义一个超链接
<a href="跳转目标url地址" target="目标窗口的弹出方式">文本或图像</a>
target属性：用于指定链接页面的打开方式
_self：默认值，在当前窗口打开 URL
_blank：在一个新的窗口中打开 URL
_parent：在父窗口中打开 URL
_top：在顶层窗口中打开 URL
注意：
1.外部链接 需要添加ip http://www.baidu.com
2.内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=“#”)，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
base 标签
- base 可以设置html页面中所有链接的打开方式
- base 写在
<head>标签内 - 把所有的连接 都默认添加 target=“_blank”
锚点定位
锚点链接可以实现：跳转到网页中的具体位置
href=“#id名” 点击后跳转到当前页面指定id的标签位置
href=“#” 点击后会回到当前页面的最顶部
href=“index.html#one” 跳转到其他页面的指定位置
5.特殊字符标签
6.列表标签
1.无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
有序列表 ol
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
7.表格
基本格式：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
表格属性
表格的标题
<table>
<caption>我是表格标题</caption>
</table>
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
合并单元格
跨行合并：rowspan
跨列合并：colspan
表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本
表格案例
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格案例</title>
</head>
<body>
<table border="1px" align="mid" cellpadding="10" cellspacing = 0>
<caption>学生成绩表</caption>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
<tr>
<td>1</td>
<td>小龙女</td>
<td>女</td>
<td>100</td>
</tr>
<tr align="mid">
<td>2</td>
<td>杨过</td>
<td>男</td>
<td rowspan="2">90</td>
</tr>
<tr>
<td>3</td>
<td>龙骑士尹志平</td>
<td>男</td>
</tr>
<tr>
<td>总成绩</td>
<td colspan="3">190</td>
</tr>
</table>
</body>
</html>
效果：
8.表单标签form
表单的功能是用于采集用户输入的数据的;
表单的组成
一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成
1.表单控件
就是表单中的一个功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
注意：
1.表单控件必须要加上name属性才能将此表单项的数据提交到服务器，否则不会提交到服务器。
2.表单控件要加上value属性，value属性的值才是被提交的值，页面上显示的值只是用户易识别的数据
2.提示信息
表单项的说明文字，提示用户填写什么内容和操作
3.表单域
- 就是form标签内的部分
- 相当于一个容器，用来容纳所有的表单控件和提示信息;
form标签
属性：
- action 指定提交数据的URL
- method:指定提交方式
表单控件
1.input 控件
input控件的属性
- input标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。
- 除了type属性之外，input /标签还可以定义很多其他的属性，其常用属性如下表所示。
- 注意：
1.表单控件必须要加上name属性才能将此表单项的数据提交到服务器，否则不会提交到服务器。
2.表单控件要加上value属性，value属性的值才是被提交的值，页面上显示的值只是用户易识别的数据
input标签的辅助标签 label
- label标签只能为 input 元素定义标注（标签）。
- 作用： 用于绑定一个表单元素, 当鼠标点击label标签的提示信息的时候, 被绑定的表单元素就会获得输入焦点
- 绑定方式：label标签的for属性的值绑定目标元素的id属性。
<label for="用户名">用户名：</label>
<input type="text" id="用户名" value="默认值"/>
2.textarea控件(文本域)
如果需要输入大量的信息，就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
3.select下拉菜单
使用select控件定义下拉菜单的基本语法格式如下
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意：
1、至少应包含一对option></option。
2、在option 中定义selected =" selected "时，当前项即为默认选中项
表单域
- 在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
- 创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性：
1.action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2.method 用于设置表单数据的提交方式，其取值为get或post。
3.name 用于指定表单的名称，以区分同一个页面中的多个表单。
注意： 每个表单都应该有自己表单域。
注册页面案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<label for="用户名">用户名：</label><input type="text" id="用户名" value="默认值" name="username"/><br>
<!-- 密码无法显示文本内容 -->
用户密码：<input type="password"><br>
确认密码：<input type="password"><br>
<!-- 单选框通过name属性 对单选框分组
checked属性 表示默认选项
-->
单选框：<input type="radio" name="gender" checked="checked" value="male">男
<input type="radio" name="gender" value="female">女<br>
<!--复选框 checkbox -->
兴趣爱好：<input type="checkbox" name="hobby" checked="checked" value="smkoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="head">烫头<br>
<!--下拉列表 select
option子标签的selected属性 控制默认元素 不写默认第一个-->
国籍：<select name="Area">
<option value="America">美国</option>
<option selected="selected" value="China">中国</option>
<option value="Japan">日本</option>
</select><br>
<!-- 文本域 textarea rows属性 行数 cols属性 每行的字符数
默认值是标签内容！-->
自我简介：<textarea rows="5" cols="20" name="简介">这才是文本域的默认值</textarea><br>
<!-- 重置页面按钮 点击后表单恢复成默认状态
input type=reset
value属性表示按钮的文本-->
<input type="reset" value="重置页面"/><br>
<input type="button" value="普通按钮"/><br>
<input type="submit" value="提交表单"/><br>
<!-- 文件按钮 点击后 选择本地文件，也作为表单内容进行提交-->
<input type="file"><br>
<!-- 隐藏域 当我们要发送某些信息，这些信息不需要用户参与，可以使用这个 提交的时候同样提交给服务器-->
<input type="hidden" name="隐藏域" value="这是提交的隐藏信息"/>
</form>
</body>
</html>
提交信息：
1081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
