上海建设银行网站静安支行,中国建行个人登录入口,搭建一个平台,不用js可以做网站吗HTML
软件架构
1.C/S架构
(1) C/S架构即Client/Server#xff08;客户机/服务器#xff09;结构。 (2) C/S 架构特点
C/S结构在技术上很成熟#xff0c;它的主要特点是交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。但是该结构的程序是…HTML
软件架构
1.C/S架构
(1) C/S架构即Client/Server客户机/服务器结构。 (2) C/S 架构特点
C/S结构在技术上很成熟它的主要特点是交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。但是该结构的程序是针对性开发变更不够灵活维护和管理的难度较大。通常只局限于小型局域网不利于扩展。并且由于该结构的每台客户机都需要安装相应的客户端程序分布功能弱且兼容性差不能实现快速部署安装和配置因此缺少通用性具有较大的局限性。
2.B/S 架构
1B/S即Browser/Server浏览器/服务器结构 2B/S 特点
B/S结构应用程序相对于传统的C/S结构应用程序是一个非常大的进步。 B/S结构的主要特点是分布性强、维护方便、开发简单且共享性强、总体拥有成本低。但数据安全性问题、对服务器要求过高、数据传输速度慢、软件的个性化特点明显降低这些缺点是有目共睹的难以实现传统模式下的特殊功能需求。
3.C/S与B/S对比
*对象**硬件环境**客户端要求**软件安装**升级维护**安全性**C/S*用户群体固定一般用于小型局域网范围要求拥有相同的操作系统。客户端计算机配置要求较高。每一个客户端都必须安装和配置软件。每一个客户机都要升级程序。可以采用自动升级。安全性好*B/S*要有操作系统和浏览器与操作系统平台无关。客户端计算机配置要求较低。可以随时随地进行操作而不用安装任何专门的软件只要有浏览器即可。客户机不必安装及维护要需要对服务器进行统一升级维护。相比C/S架构安全性弱 一般面向相对固定的用户群程序更加注重流程可以对权限进行多层次校验提供更安全的存取模式对信息安全的控制能力很强高度机密的信息系统采用C/S结构适宜。 一般对用户群体没有特殊要求客户端基本做到零维护只需要通过浏览器就可以随时随地进行业务处理并且方便功能扩展开发简单共享性强对安全性没有更好的要求时采用B/S结构更合适。
HTML简介 HTMLHyperText Markup Language超文本标记语言 文本能够记录文字标点符号。 超文本能够记录文字标点符号输入内容图片视频音频超链接…… 标记标签将需要的功能封装成对应的标签要使用哪种功能就去找到对应的标签即可。
HTML入门
1.HTML用于编写网页按下F12打开开发者模式 2.第一个HTML文件
(1) 创建html文件
在桌面上创建两个文件文件名最好是英文扩展名是.html或者.htm (2) 编写html代码
使用记事本打开其中任意一个文件写HTML代码
htmlheadtitle这是第一个HTML文件/title/headbodyHello World!/body
/html(3) 打开html文件
使用浏览器打开该文件 3.HTML的特征 文件扩展名为.html或者.htm 根标签是里面通常是 HTML的标签全是预定义好的 标签名不区分大小写推介使用小写 大部分标签是成对出现的有小部分是自动结束的 HTML标签必须正确嵌套
HTML编辑工具
1.常见的开发工具
HBuilderWebStromDWVSCode……
2.使用VSCode开发第一个页面
(1) 创建工作空间
先创建一个文件夹当做项目的工作空间, 然后使用VSCode引入文件夹路径
(2) 创建项目目录 3 创建HTML文件
!DOCTYPE html
html langen
headmeta charsetUTF-8title来了来了/title
/head
body他这真的来了
/body
/html(4) 运行HTML文件 HTML常见标签
1.标题标签
h1……h6!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodyh1一级标题/h1h3三级标题/h3h6六级标题/h6
/body
/html2.分割线标签
hr!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodyhr colorred
/body
/html3.文字标签
font!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
body这是对比font colorred文本/font
/body
/html4.加粗标签
strongb!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
body床前strong明月光/strong,疑是b地上霜/b
/body
/html5.换行标签
br!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
body床前em明月光/em,br疑是i地上霜/i
/body
/html6.斜体标签
emi!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
body床前em明月光/em,疑是i地上霜/i
/body
/html7.段落标签
p!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
body床前em明月光/em,br疑是i地上霜/ip举头望明月/p
/body
/html8.居中标签
center!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodycenter真的居中了嘛/center
/body
/html9.注释
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
body!--center是居中标签--center真的居中了嘛/center
/body
/html10.div标签 div!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodydiv日照香炉生紫烟/divdiv遥看瀑布挂前川/div
/body
/html11.span标签
span!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodyspan日照香炉生紫烟/spanspan遥看瀑布挂前川/span
/body
/html实体字符
空格nbsp;
小于号lt;
大于号gt;!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
body!--center是居中标签--center真的nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;居中了嘛/centerlt;stronggt;
/body
/htmlHTML多媒体标签
1.图片
(1) 语法
img src图片的路径 width宽度 height高度 title标题 alt图片加载失败时显示的提示文本/(2) 属性解读 src图片路径 绝对路径从电脑盘符中找或者从项目根目录找 相对路径相对于当前文件去找目标文件 注意同级直接找返回上一级…/下一级/ width设置图片的宽度只设置宽度不设置高度高度会随着宽度等比变化 height设置图片高度只设置高度不设置宽度宽度会随着高度等比变化 title设置图片标题鼠标放到图片上时才出现 alt图片加载失败时显示的提示文本
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodyimg srcimg/gouza.png width500 height100 title狗砸 alt网络抛锚了
/body
/html2.音频
(1)语法
audio src音频路径 loop controls autoplay/audio(2) 属性解读 src音频路径路径同图片 loop循环播放 controls显示播放工具栏 autoplay自动播放
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodyaudio src../img/你不是真正的快乐.mp3 autoplay controls loop/audio
/body
/html3.视频
(1) 语法
video src视频路径 loop controls autoplay/video(2) 属性解读 src视频路径路径同图片 loop循环播放 controls显示播放工具栏 autoplay自动播放
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodyvideo src../img/1HTML入门.mp4 autoplay controls loop width500/video
/body
/htmlHTML超链接标签
1.语法
a href路径 target页面打开的位置要点击的内容/a2.target属性
决定页面打开的位置常用值_self在本选项卡打开_blank在新选项卡打开
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodyimg src../img/gouza.png width500 height1000a hrefhttp://www.baidu.com百度一下/abra href../img/gouza.png狗砸/abra hreftest.html去其他html/abra href#回到顶部/a
/body
/htmlHTML列表标签
1.有序列表
(1) 语法
olli(2) type属性
改变列表项前面的字符在 使用type属性属性值1默认值aAiI
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodyol typeili苹果/lili香蕉/lili橘子/lili橘子/li/ol
/body
/html2.无序列表
1语法
ulli(2) type属性
改变列表项前面的符号在 使用type属性属性值disc实心圆默认值circle空心圆square实心方块
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodyul typesquareli苹果/lili香蕉/lili橘子/lili橘子/li/ul
/body
/htmlHTML表格标签
1.语法 表格标签 行标签是的子标签 列标签单元格是的子标签
!-- 创建一个3行2列的表格--
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodytabletrtd/tdtd/td/trtrtd/tdtd/td/trtrtd/tdtd/td/tr/table
/body
/html2.表格属性
1table标签的属性 border边框属性值是具体数值 cellspacing框与框之间的间隙属性值是具体数值 cellpadding内容与边框之间的间隙属性值是具体数值 width表格宽度属性值是具体数值 height表格高度属性值是具体数值 align表格的水平位置align属性值leftcenterright bgcolor表格背景颜色属性值颜色的单词颜色的16进制
2属性 height行的高度属性值是具体数值 align行内容水平居中属性值leftcenterright bgcolor行背景颜色属性值颜色的单词颜色的16进制
3属性 width列的宽度属性值是具体数值设置宽度以后该单元格所在的列的宽度会一起变化 align列内容水平居中属性值leftcenterright bgcolor列背景颜色属性值颜色的单词颜色的16进制
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodytable border1 cellspacing0 cellpadding0 width500 height300 aligncenter bgcolorredtrtd1-1/tdtd1-2/td/trtr height150 alignright bgcolorgreentd2-1/tdtd width450 alignleft bgcolorpink2-2/td/trtrtd3-1/tdtd3-2/td/tr/table
/body
/html3.合并单元格 被合并的单元格要删除掉 合并行rowspan属性值是具体数值 合并列colspan属性值是具体数值
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodytable border1 cellspacing0 cellpadding0 width500 height500 aligncentertrtd colspan3/td/trtrtd/tdtd rowspan2/tdtd/td/trtrtd/tdtd/td/tr/table
/body
/html4.补充标签 表头 表内容 同内容会自动加粗并水平居中
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础标签/title
/head
bodytable border1 cellspacing0 cellpadding0 width500 height300theadtrth学号/thth姓名/thth性别/th/tr/theadtbodytrtd1/tdtd张三/tdtd男/td/trtrtd1/tdtd张三/tdtd男/td/trtrtd1/tdtd张三/tdtd男/td/tr/tbody/table
/body
/htmlHTML表单标签
表单用来收集用户输入的数据并将之发送到指定位置的控件。
1.语法
表单标签
2.常用属性 action数据发送的位置 method发送数据的方式
3.常用的表单域
1input /标签 常用属性type 属性值 text文本框 password密码框 radio单选按钮这一组单选按钮的name属性要一致 checkbox复选框这一组单选按钮的name属性要一致 file文件框 hidden隐藏框 submit提交按钮将表单中数据按照method指定的方式发送到action指定的位置 reset重置按钮 button普通按钮 image图片按钮和submit效果一致 常用属性2 checked设置单选按钮或复选框自动选中只需要写属性名即可不需要写属性值 name给标签取名字提交数据时数据的名字通常在一个表单中不会重复 value标签的值 size调整输入框的大小 maxlength输入内容的最大长度 readonly设置输入框只能读不能写类似于checked的使用 disabled禁用类似于checked的使用
(2) 下拉列表 语法 selectoption/option
/select常用属性 ) name给标签取名字提交数据时数据的名字通常在一个表单中不会重复 常用属性 value标签的值selected设置默认选中的option类似于checked的使用
(3) 文本域 语法 textarea
/textarea常用属性 rows可见行数一旦超过该数据就会出现下拉滚动条高度cols可见列数一旦超过该数据就会自动换行宽度
HTML框架标签
1.框架标签
framesetframe/frame
/frameset2.标签
1作用
将页面划分成n个模块每一个模块都能显示指定的内容。注意不能和同时使用。
2常用属性 rows上下划分 cols左右划分 noresize设置不能拖动改变大小类似checked的使用方式 border设置边框
3.标签
1作用
将指定的HTML文件放入对应的模块并显示出来
2常用属性 srcHTML文件的路径 name设置模块的名字
点击后要将对应的HTML文件显示到指定模块需要设定a标签的target属性值是指定模块的name属性的值。
示例代码
frameset.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
frameset rows20%,* noresizeframe srchead.html/frameframeset cols20%,*frame srcleft.html/frameframe nameright/frame/frameset
/frameset
/htmlleft.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodypa hrefday01.html targetright第一天/a/ppa hrefday02.html targetright第二天/a/ppa href第三天/a/ppa href第四天/a/p
/body
/htmlHTML5
1.HTML5新特性 HTML5 是最新的 HTML 标准。 HTML5 是专门为承载丰富的 web 内容而设计的并且无需额外插件。 HTML5 拥有新的语义、图形以及多媒体元素。 HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。 HTML5 是跨平台的被设计为在不同类型的硬件PC、平板、手机、电视机等等之上运行。 为了更好地处理今天的互联网应用HTML5添加了很多新元素及功能比如: 语义标签多媒体内容更好的页面结构更好的形式处理等
2.常见语义标签
1header标签
描述了文档的头部区域于定义内容的介绍展示区域
2article标签
定义元素规定独立的自包含内容。
3footer标签
述了文档的底部区域一个页脚通常包含文档的作者著作权信息链接的使用条款联系信息等。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodyheader网页头部/headerarticle网页主体/articlefooter网页底部/footer
/body
/htmlharset“UTF-8” Document 第一天 第二天 第三天 第四天 ~~~
HTML5
1.HTML5新特性 HTML5 是最新的 HTML 标准。 HTML5 是专门为承载丰富的 web 内容而设计的并且无需额外插件。 HTML5 拥有新的语义、图形以及多媒体元素。 HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。 HTML5 是跨平台的被设计为在不同类型的硬件PC、平板、手机、电视机等等之上运行。 为了更好地处理今天的互联网应用HTML5添加了很多新元素及功能比如: 语义标签多媒体内容更好的页面结构更好的形式处理等
2.常见语义标签
1header标签
描述了文档的头部区域于定义内容的介绍展示区域
2article标签
定义元素规定独立的自包含内容。
3footer标签
述了文档的底部区域一个页脚通常包含文档的作者著作权信息链接的使用条款联系信息等。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodyheader网页头部/headerarticle网页主体/articlefooter网页底部/footer
/body
/html
