软件架构
C/S:Client/Server 客户端/服务器端
优点:用户体验好
缺点:(开发,安装,部署,维护)–麻烦
B/S:Browser/Server 浏览器/服务器端
优点::(开发,安装,部署,维护)–简单
缺点:如果应用过大,用户体验不好
资源分类
静态资源:
使用静态网页开发技术发布的资源。
特点:
所有用户访问,得到的结果是一样的。
如果用户请求的是静态资源没那么服务器会直接将静态资源发送给浏览器,浏览器中内置了静态资源的解析引擎,可以展示静态资源
动态资源:
使用动态网页即使发布的资源
特点:
所有用户访问,得到的结果可能不一样
如:jsp/servlet
如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
静态资源:
HTML:用于搭建基础网页,展示页面内容
CSS:用于美化页面,布局页面
JavaScript:控制页面的元素,让页面有一些动态的效果
HTML标签
HTML:是最基础的网页开发语言
Hyper Text Markup Lagguage 超文本标记语言
超文本:
使用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。
标记语言:
有标签构成的语言。<标签名称> 如html,xml。
标记语言不是编程语言,没有逻辑性。
1.语法
.html/htm
2.标签分类
a.围堵标签
如< html> < /html>
b.自闭和标签:开始标签和结束标签在一起。
如< br/ >
3.标签可以嵌套
如< a>< b>< /b>< /a>
4.在开始标签中可以定义属性,属性由键值对构成,值需要用引号引起来
5.html的标签不区分大小写,但是建议使用小写
标签:
1.文件标签:构成html最基本的标签
html:html文档的根标签 定义一个HTML
head:头标签,用于指定html文档的一些属性,引入外部的资源
title:标题标签
body:体标签
2.文本标签:和文本有关的标签
a. 注释 < !–注释内容– >
b. < h1> to < h6> 标题标签
h1–h6字体发小逐渐递减
c. 段落标签 < p>
d. 换行标签< br>
e. 展示一条水平线
属性
color 颜色
width 宽度
size 高度
对齐方式 allgn
– center 剧中
– left 左对齐
– right 右对齐
< b> 字体加粗
< i> 字体倾斜
< front> 字体标签
属性:
color 颜色
size 大小
face 字体
属性定义:
color:
单词:red,green,blue
rgb值1,值2,值3: 0~255
width
3.图片标签:
img:
< img src= “./image/ptoto.jpg”>
< img src= “../image/ptoto.jpg”>
4.列表标签:
有序列表
< ol>
< li>起床
< li>洗漱
< li>上班
< /ol>
< ol type=”a” start=”5”> < /ol>
< ol type=”1” start=”5”> < /ol>
< ol type=”A” start=”5”> < /ol>
无序列表
< ul>
< li>起床
< li>洗漱
< li>上班
< /ul>
< ul type=”disc” > < /ul>
disc:实心圆
circle:空心圆
5.链接标签:
< a herf=”https://www.baidu.com”>点我 < /a>
herf:
< a herf=”https://www.baidu.com” target=”_self”> 点我< /a>
< a herf=”https://www.baidu.com” target=”_blank”> 点我< /a>
target:指定打开资源方式
_self:
_blank:在空白页打开
6:表格标签
table: 表格
with:宽度
border:边框
cellpadding:定义内容和单元格的距离
cellspacing:定义单元格之间的距离
bgcolor:背景色
tr: 定义行
bgcolor:背景色
algin:对齐方式
td:定义单元格
colspan:合并列
rowspan:合并行
th:定义表头单元格
< table border=“1” cellspacing=”0”>
< tr>
< td>< /td>
< td>< /td>
< td>< /td>
< /tr>
< /table>
< caption>< /caption>:表格标题
< thead>< /thead>:表示表格的头部分
< tbody>< / tbody>:表示表格的体部分
< tfoot>< / tfoot>:表示表格的脚部分
7.块标签
div:每一个div沾满一整行,块级标签
span:文本信息在一行展示,行内标签,内联标签
< span>黑马程序员< /span>
< div> 传智播客< /div>
8.语义话标签
html5中味了提高程序的可读性,提供了一些标签
< header> < /header> 页眉
< footer>< /footer> 页脚
9.FORM表单标签
* 表单:用于采集用户输入的数据的。用于和服务器进行交互。
* form:用于定义表单的,可以定义一个范围,范围代表采集用户数据的范围
属性:
1. action:指定提交数据的url (位置 )
2. method:指定提交方式
get:
* 请求参数会在地址栏中显示,会封装到请求行中
* 请求参数大小有限制
* 不安全
post:
* 请求参数不会在地址栏中显示,会封装到请求体中
* 请求参数的大小没有限制
* 较为安全
表单项中的数据想要被提交,必须指定其name属性
表单项标签
1. input:可以通过type属性值,改变元素展示的样式
* type属性:
* text:文本输入框,默认值
* placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
* password:密码输入框
* radio:单选框
注意:
1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
3. checked属性,可以指定默认值
* checkbox:复选框
注意:
1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
2. checked属性,可以指定默认值
* file:文件选择框
* hidden:隐藏域,用于提交一些信息
* 按钮:
* submit:提交按钮。可以提交表单
* button:普通按钮
* image:图片提交按钮 (src属性指定图片的路径)
2. lable:指定输入项的文字描述信息
* 注意:
* label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
3. select:下拉列表
* 子元素:option,指定列表项
4. textarea:文本域
* cols:指定列数,每一行有多少个字符
* rows:默认多少行。 |
|