本帖最后由 小石姐姐 于 2018-12-19 16:01 编辑
HTML&CSS
Web概念:
javaWeb : 使用java语言开发基于互联网的项目
软件架构
B/S : Brower / Server
只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
优点 : 开发,安装,部署,维护简单
缺点 : 如果应用过大,用户体验受到影响
对硬件要求过高
C/S : Client / Server
在用户端有一个客户端程序,在远处有一个服务器程序
优点 : 用户体验佳
缺点 : 开发,安装,部署,维护麻烦
B / S : 依赖于网络
资源分类:
静态资源 : 数据全部都是写死的
浏览器自身就能够对静态资源进行解析
静态网页开发技术(HTML, CSS, JavaScript按照浏览器解析的标准进行书写)
动态资源 : 涉及到数据的交互
动态网页技术(jsp / Server, php, asp)
用户请求的是动态资源,不能直接被解析,将动态资源转换为静态资源,在浏览
器被浏览器解析
HTML : 用于搭建基础网页
CSS : 美化网页
JS : 控制页面元素,让页面有动态效果
服务器
电脑
CPU(稳定),主板,硬盘(萨斯),内存,服务端操作系统
刀片式服务器
1U/2U
独立IP
HTML (Hyper Text Markup Language 超文本标记语言)
超文本
是由超链接的方法,将各种不同的空间的文字信息组织在一起的网状文本
标记语言
有标签构成的语言<标签名称> html xml
标记语言不是编程语言
标签
后缀 : html htm
[Groovy] 纯文本查看 复制代码 <html>
<head>
<title>标题</title>
<meta charset = 'utf-8'></meta>
</head>
<body>
具体内容<br/>
</body>
</html>
标签分为
单边和双边标签 : 单边标签可以省略<br/> <hr/>横线
行内标签和块级标签 :
行内标签:只占内容大小
块级标签:单独占一块区域
标签可以嵌套
需要正确嵌套,不能你中有我,我中有你
在开始标签中可以定义属性,属性由键值对构成,值需要引号引起来
<font color = 'red'>内容</font>
内容 --> 展示在页面上的
font --> 标题名称
color --> 标题属性名称
red --> 属性值
文件标签:构成html最基础的标签
html:html跟标签
head:头标签(指定html文档的一些属性.引入外部资源)
title:定义标题标签
body:体标签
字体排版
注释:<!-- 注释内容 -->
*<br> 换行 (单边)
*<h1 ~ h6> 标题标签 字体大小逐渐减小(双边)
*<p> 段落标签 (双边)
<hr> 显示一条水平线
**<b> 加粗 (双边)
**<i> 斜体 (双边)
**<u> 下划线 (双边)
**<font size = '1 ~ 7'> 字体标签 (双边)
&nbsb: 空格
<: 小于
>: 大于
***超链接
<a href = '指定要跳转的url(统一资源定位符)'>内容</a>
<a href = '指定要跳转的url() target = '_blank(在新页面中打开)/_self(在当前叶念打
开)'(指定打开资源的方式)>内容</a>
herf 支持网络路径和本地路径
*图片
<img src = '' width = '' height = '' alt = './本级目录 ../上一级路径'/>
src = ''
width和height只能最好存在一个
****表格
div(每一个div占满一行,块级标签)
span(只占文本一行,行内标签 内联标签)
table:定义表格
(border 边框)
(width 宽度)
(cellpadding定义内容和单元格之间的距离)
(cellspacing 定义单元格之间的距离指定为0单元格之间的线合为一条)
(bgcolor 背景色)
tr:定义行
td:定义单元格
colspon 和并列
rowspon 合并行
th:定义表头单元格(居中 加粗)
<caption> 表格标题
<thead> 表格的头部分
<tbody> 表格的体部分
<tfoot> 表格的脚部分
合并单元格
***表格的嵌套
table
tr
td
table
tr
td
**列表
*无序
ul
li
有序
ol
li
列表的嵌套
ul
li
ul
li 所有的内容全部在li中写
表单标签
表单标签中必须提供name属性
<form method="get/post" action="提交数据的位置">
一个个的表单标签
</form>
action不写的话提交当前页面
get和post区别
1.get数据在地址栏,post数据在请求体重
2.get有长度大小限制,post没有长度大小限制
3.post相对更安全
4.文件上传请求方式只能是post
input type:
*text //文本
*password //密码
*hidden //隐藏域(页面看不到) 必须有name,value
*radio //单选-->共同的name,还要有value,checked
*checkbox //多选-->共同的name,还要有value,checked
*submit //提交-->把数据提交到form的action的链接去
reset //重置
*button //按钮 --> 配合js使用
file //文件上传
image //图片上传
select 标签(下拉列表)-->name
option(下拉列表子标签)-->value,selected
textarea 标签(文本区)
button 标签(普通按钮)
表单标签
form
属性:action 指定提交数据的url, method 提交方式 get post
CSS(层叠样式表) : 页面美化和布局控制
概念 : Cascading Style Sheets
层叠 : 多个样式可以作用在同一个html的元素上,同时生效
好处 :
功能强大
将内容的展示和样式控制分离
降低耦合度(解耦)
分工协作更容易
提高开发效率
CSS的使用 : CSS与html结合方式
(行内式)
在标签内使用style属性指定css代码
(内联)内部
在head标签内定义style标签体内容
(外链式)外部
定义CSS资源文件
在head标签中定义link标签,引入外部资源文件
1. 三种方式的作用范围越来越大
2. 内联方式不常用
3. 第三种格式 @import = "css文件路径.css"
CSS语法格式
选择器 {
属性名:值;
属性名:值;
...
}
选择器 : 筛选具有相似特征的元素
分类:
基础选择器
id选择器 (选择具体的id属性值的元素)
元素选择器 (具有相同标签名称的元素)
类选择器 (选择具有相同class属性值得元素)
id选择器的优先级 > 类选择器的优先级 > 元素选择器的优先级
扩展选择器
选择所有元素
* {}
并集选择器
选择器1,选择器2 {}
后代选择器
选择器1 选择器2 {}
子元素选择器
选择器1>选择器2 {}
属性选择器 : 选择元素名称,属性名=属性值
伪类选择器 : 选择一些元素所具有的状态
元素:状态{}
<a>
状态
link (初始)
hover (指向)
active (按住)
visited (访问过)
属性
字体,文本
font-size (字体大小)
color (文本颜色)
text-align (对其方式)
height (行高)
边框
border (边框 复合属性)
尺寸
height (高度)
width (宽度)
背景
background
盒子模型
margin 外边距
padding 内边距
属性
box-sizing: border-size盒子宽度和高度为最终值
float (浮动)
left
right
|
|
收藏
淘帖
踩
