国外电子商务网站,秦皇岛黄金海岸游玩攻略,php网站建设到护卫神,江苏省工程建设标准站网站1 Web概念概述
JavaWeb是使用Java语言开发基于互联网的项目
软件架构
cs架构#xff1a;优点【资源加载快、用户体验好】、缺点【安装、部署、维护麻烦】bs架构#xff1a;优点【开发、安装、部署、维护简单】、缺点【应用过大#xff0c;用户体验会受影响、对硬件有要求…1 Web概念概述
JavaWeb是使用Java语言开发基于互联网的项目
软件架构
cs架构优点【资源加载快、用户体验好】、缺点【安装、部署、维护麻烦】bs架构优点【开发、安装、部署、维护简单】、缺点【应用过大用户体验会受影响、对硬件有要求】
1.1 BS架构
资源分类
静态资源用静态网页开发技术发布的资源HTML、CSS、JavaScript。所有用户访问得到的结果一样。如果用户请求静态资源那么服务器会将静态资源发送给浏览器浏览器内置的解析引擎可以展示静态资源。动态资源使用动态网页即时发布的资源。不同用户在同一页面的显示结果可能不一样。如JSP、Servlet、PHP、ASP。如果用户请求动态资源服务器会执行动态资源然后将动态资源转换为静态资源再发送给服务器。
2 HTML
2.1 基本介绍
概念Hyper Text Markup Language超文本标记语言是最基础的网页开发语言。 超文本用超链接的方式将各种不同空间的文字信息组织在一起的网状文本。 标记语言由标签构成的语言。标签名称如html、xml。标记语言不是编程语言。
html的实现
标签分为围堵标签有开始和结束标签可以嵌套不同标签的开始和结束之间不能交叉。自闭标签开始和结束在一起如br/开始标签中可以定义属性属性由键值对构成值要用引号引起来不区分大小写但建议用小写
2.2 HTML标签
文件标签
html根标签head头标签用于指定html文档的一些属性引入外部的资源title标题标签body体标签!DOCTYPE htmlHTML5中定义该文档是html文档
文本标签
br换行hr水平线p段落h1~h6标题 ! - - 注释 - - font已经废弃具有属性color 、width单位是像素px取值是数值或相对于父元素的百分比、size、face字体center居中 已废弃
图片标签 -img srcxxx.jpg/ alignright altXXX width500 height500
列表标签 有序列表的属性 type展示不同的样式罗马Ⅰ字母A start属性指定从几开始排序 无序列表的属性 type可以为disc、square、circle ol typeA start3li第一个/lili第二个/lili第三个/li/olul typesquareli无序/lili无序/lili无序/li/ul链接标签
默认在本页打开链接【可以是网页资源也可以是本地资源】 -a hrefhttp://www.baidu.comclick me/a新建页面打开链接a hrefhttp://www.baidu.com target_blank click me/a target【默认是_self】启动邮件客户端发邮箱a hrefmaito:xxxxxxxxxx.comcontact me/a div每个div占满一整行 块级标签span文本信息在一行展示 行内标签 内联标签 语义化标签没有样式 提高程序可读性 可以和css一起定义样式headerfooter 表格标签 table border1 width50% cellpadding0 cellspacing0 bgcolor#5f9ea0 aligncentercaption学生信息表/captiontr bgcolorred aligncenterth编号/thth姓名/thth成绩/th/trtrtd1/tdtd张三/tdtd100/td/trtrtd2/tdtd李四/tdtd100/td/tr/table合并行 合并列 table border1 width50% cellpadding0 cellspacing0 bgcolor#ffdab9 aligncentertrth rowspan2编号/thth姓名/thth成绩/th/trtrtd张三/tdtd100/td/trtrtd2/tdtd colspan2李四/td/tr/table表单标签 概念用于采集用户输入的数据
form定义表单的采集范围
属性actionxxx表单提交地址 methodget/post提交方式 表单中的数据想要被提交必须指定name属性 get请求参数会在地址栏显示 封装在协议行中 请求参数的长度有限制 不安全 post请求参数不会在地址栏显示 会封装在协议体中 请求参数的长度无限制 安全
表单项标签
input可以通过type属性值 改变元素展示的样式。value显示默认值 placeholder显示提示信息select下拉列表textarea文本域radio单选框name要一致 否则是定义了多个单选框。要给单选框指定返回值value。checked指定默认值checkbox复选框 checked指定默认值label执行输入项的文字描述信息加for属性可以和input的id对应 点击label会让input获取焦点file文件选择框select下拉列表
注册页面案例
!DOCTYPE html
html langen
headmeta charsetUTF-8title注册页面/title
/head
bodyform action# methodposttable border1 aligncenter width500trtdlabel forusername用户名/label/tdtdinput typetext nameusername idusername/td/trtrtdlabel forpassword密码/label/tdtdinput typepassword namepassword idpassword/td/trtrtdlabel foremail邮箱/label/tdtdinput typeemail nameemail idemail/td/trtrtdlabel forname姓名/label/tdtdinput typename namename idname/td/trtrtdlabel forphone手机号/label/tdtdinput typetext namephone idphone/td/trtrtdlabel性别/label/tdtdinput typeradio namegender valuemale男input typeradio namegender valuefemale女/td/trtrtdlabel forbirthday出生日期/label/tdtdinput typedate namebirthday idbirthday/td/trtrtdlabel forcheckcode验证码/label/tdtdinput typetext namechekcode idcheckcodeimg srcverify_code.jpg/td/trtrtd colspan2 aligncenterinput typesubmit value注册/td/tr/table/form
/body
/html3 CSS
cascading style sheet 层叠样式表用于页面美化和布局控制 优势
功能强大将内容展示和样式控制分离【降低耦合度分工协作更容易提高开发效率】
3.1 CSS的使用
css和html的结合方式
内联样式在标签内使用style属性指定css代码不推荐使用。作用域是当前标签。div stylecolor:red;hello/div内部样式在head标签内定义style标签标签体内容就是css代码。作用域只能是当前页面。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{color: peachpuff;}/style
/head
body
div哈哈哈哈哈/div
/body
/html外部样式将CSS抽取到外部文件在head标签内定义link标签引入外部资源文件
div{color: aqua;
}!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href../css/a.css
/head
body
div哈哈哈哈哈/div
/body
/htmlcss语法
选择器{属性名1属性值;属性名2属性值;
}选择器用来筛选具有相似特征的元素
注意
每一对属性需要使用分号隔开最后一堆可以不加
3.2 基本选择器
id选择器选择器具体的id属性值的元素建议在一个html页面中使用 -#id属性值{ }元素选择器选择具有相同标签名称的元素 -标签名称{ }类选择器选择具有相同class属性值的元素.class属性值{ }
优先级 id 元素 类
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.cls1{color: gray;}#div1{color: red;}div{color: gold;}/style
/head
body
div iddiv1哈哈哈哈哈/div
div呵呵呵呵呵呵/div
p classcls1嘻嘻嘻嘻嘻嘻嘻嘻/p
/body
/html3.3 扩展选择器
选择所有元素*{ }并集选择器选择器1,选择器2{ }子选择器筛选选择器1元素下的选择器2元素选择器1 选择器2{ }父选择器筛选选择器2的父元素选择器1选择器1 选择器2{ }属性选择器选择元素名称属性名属性值的元素元素名称[属性名属性值]{ }伪类选择器选择一些元素具有的状态元素: 状态{ }
3.4 属性 字体、文本【color】【font-size】【line-height】【text-align】 背景【background】 边框【border】 尺寸【width】【height】 盒子控制布局【margin外边距】【padding内边距 默认情况下内边距会影响整个盒子的大小 设置盒子的属性 让width height不变box-sizing: border-box】【float浮动】
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{border: 1px solid red;}.div1{width: 100px;height: 100px;/*外边距*//*margin: 50px;*/}.div2{width: 200px;height: 200px;/*内边距*/padding: 50px;box-sizing: border-box;}.div3{/*浮动*/float: left;}.div4{float: left;}.div5{float: right;}/style
/head
body
div classdiv2div classdiv1/div
/div
div classdiv3aaa/div
div classdiv4bbb/div
div classdiv5ccc/div
/body
/html美化版的注册页面
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/titlestyle*{margin: 0;padding: 0;box-sizing: border-box;}body{background: url(register_bg.png) no-repeat;}.layout{width: 900px;height: 500px;border: 8px solid #EEEEEE;background-color: white;margin: auto;margin-top: 80px;}.left{/*border:1px solid red;*/float: left;margin: 15px}.left p:first-child{color: #FFD036;size: 100px;}.left p:last-child{color: #A6A6A6;size: 100px;}.center{/*border: 1px solid red;*/float: left;}.right{/*border: 1px solid red;*/float: right;margin: 15px;}.right p:first-child{color: #A6A6A6;font-size: 15px;}.right p a{color: pink;font-size: 15px;}.td_left{width: 100px;text-align: right;height: 45px;}.td_right{padding-left: 50px;}#username,#password,#name,#email,#birthday,#phone,#checkcode{width: 251px;height: 32px;border: 1px solid #A6A6A6;border-radius: 5px;padding-left: 10px;}#checkcode{width: 110px;}#img_check{height: 32px;vertical-align:middle;}#sub{width: 150px;height: 40px;background-color: #FFD036;border: 1px;}/style
/head
body
div classlayoutdiv classleftp用户注册/ppuser register/p/divdiv classcenterdiv classformform action# methodposttable border0 aligncenter width500trtd classtd_leftlabel forusername用户名/label/tdtd classtd_rightinput typetext nameusername idusername placeholder请输入用户名/td/trtrtd classtd_leftlabel forpassword密码/label/tdtd classtd_rightinput typepassword namepassword idpassword placeholder请输入密码/td/trtrtd classtd_leftlabel foremail邮箱/label/tdtd classtd_rightinput typeemail nameemail idemail placeholder请输入邮箱/td/trtrtd classtd_leftlabel forname姓名/label/tdtd classtd_rightinput typename namename idname placeholder请输入姓名/td/trtrtd classtd_leftlabel forphone手机号/label/tdtd classtd_rightinput typetext namephone idphone placeholder请输入手机号/td/trtrtd classtd_leftlabel性别/label/tdtd classtd_rightinput typeradio namegender valuemale男input typeradio namegender valuefemale女/td/trtrtd classtd_leftlabel forbirthday出生日期/label/tdtd classtd_rightinput typedate namebirthday idbirthday/td/trtrtd classtd_leftlabel forcheckcode验证码/label/tdtd classtd_rightinput typetext namechekcode idcheckcodeimg srcverify_code.jpg idimg_check/td/trtrtd colspan2 aligncenterinput typesubmit value注册 idsub/td/tr/table/form/div/divdiv classrightp已有账号a href#立即登录/a/p/div
/div/body
/html
