资讯专栏INFORMATION COLUMN

JavaWEB开发01——HTML

IntMain / 760人阅读

摘要:网站信息页面需求分析我们公司的需要一个对外宣传的网站介绍介绍公司的主要业务公司的发展历史公司的口号等等信息技术分析概述超文本标记语言超文本比普通文本功能更加强大可以添加各种样式标记语言通过一组标签来对内容进行描述关键字是由浏览器来解释执行静

1.网站信息页面 1.1需求分析:

我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息

1.2技术分析:
HTML概述:

HTML: Hyper Text Markup Language 超文本标记语言

超文本: 比普通文本功能更加强大,可以添加各种样式

标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行

静夜诗

--李白

床前明月光,

地上鞋两双,

举头望明月,

低头思故乡.

为什么要学习HTML:

生活所迫,今天的课程,群英妹子不让回家.

HTML的主要作用:

设计网页的基础,HTML5

HTML语法规范

1.3步骤分析:

公司简介 需要标题

水平分割线

四个段落

第一个段落字体需要红色

1.4代码实现:

    
        
        网站信息页面
    
    
        
        

公司简介

一直以来,腾讯科技以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。

1.5 扩展内容

​ b : 加粗

​ i : 斜体

​ strong: 加粗, 带语义标签

 em:  斜体, 带语义
2.网站图片信息 2.1需求分析:

在我们的网站中通常需要显示LOGO图片,显示效果如下

2.2技术分析

img 标签:

​ 常用的属性;

​ width : 宽度

​ height: 高度

​ src : 指定文件路径

​ alt: 图片加载失败时的提示内容

2.3步骤分析 2.4代码实现


    
        
        
    
    
        
        
    





    
        
        
    
    
        
        
        
    
2.5 扩展-文件路径

相对路径

        ./        代表的是当前路径
        ../     代表的上一级路径
        ../../    上上一级路径
3.网站友情链接页面 3.1需求分析

在我们的网站中,通常会显示友商公司的网站链接

百度

新浪微博

黑马程序员

3.2技术分析

列表标签:
​ 无序列表: ul

​ type: 小圆圈,小圆点, 小方块

​ 有序列表: ol

​ type: 1,a ,A,I,

​ start : 指定是起始索引

3.3步骤分析 3.4代码实现


    
        
        
    
    
    
        
    
3.5 扩展内容

​ 点击链接,跳转去指定网站
​ a 超链接标签
​ 常用的属性:
​ href: 指定要跳转去的链接地址
​ 如果是网络地址需要加上http协议 ,
​ 如果访问的是本网站的html文件,可以直接写文件路径
​ target : 以什么方式打开

​ _self: 默认打开方式,在当前窗口打开

​ _blank: 新起一个标签页打开页面

上午内容回顾:

网站信息案例

字体标签 font

color: 颜色

size: 大小 1~7

face: 改变字体

p 段落标签

h标题标签 : 1~6

br 换行

hr 水平线

b 加粗

i 斜体

strong : 加粗 包含语义

em : 斜体 包含语义

网站图片案例

img标签

src : 指定图片的路径

width: 宽度

height: 高度

alt : 图片加载错误时的提示信息

相对路径:

./ 代表的是当前路径

../ 代表的上一级路径

../../ 代表的上上一级路径

友情链接:

ul: 无序列表

type :

ol: 有序列表

type : 样式

start : 起始索引

li : 列表项

a 超链接标签

href : 要访问的链接地址

target : 打开方式

网站首页

table标签

border: 指定边框

width : 宽度

height : 高度

bgcolor : 背景颜色

align : 对齐方式

tr标签

td标签

colspan: 跨列操作

rowspan: 跨行操作

表格单元格的合并

表格的嵌套

4.网站首页 4.1需求分析:

​ 根据产品文档,完成商城首页,显示效果如图:

4.2技术分析:
表格标签table

​ table标签:
​ 常用的属性:
​ bgcolor : 背景色
​ width : 宽度
​ height : 高度
​ align : 对齐方式
​ tr 标签
​ td 标签

合并单元格:

​ colspan : 跨列操作
​ rowspan : 跨行操作
​ 注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉

表格的嵌套:

​ 在td中可以嵌套一个表格

4.3步骤分析

创建一个8行一列的表格

第一部份: LOGO部分: 嵌套一个一行三列的表格

第二部分: 导航栏部分 : 放置5个超链接

第三部分: 轮播图

第四部分: 嵌套一个三行7列表格

第五部分: 直接放一张图片

第六部分: 抄第四部分的

第七部分: 放置一张图片

第八部分: 放一堆超链接

4.4代码实现


    
        
        
        
    
    
        
        
登录 注册 购物车
首页 手机数码 鞋靴箱包 电脑办公 香烟酒水

最新商品

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

热门商品

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

洗衣机

$998

关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明
Copyright © 2005-2016 传智商城 版权所有
5.网站注册页面: 5.1需求分析:

​ 编写一个HTML页面, 显示效果如图所示

5.2技术分析:

表单标签

表单标签
    action : 直接提交的地址
    method : 
            get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
            post 方式  会将参数封装在请求体中, 没有这样的限制
input :
    type: 指定输入项的类型
        text : 文本
        password :  密码框
        radio :        单选按钮
        checkbox :  复选框
        file      : 上传文件
        submit   : 提交按钮
        button      : 普通按钮
        reset     : 重置按钮
        hidden  : 隐藏域

        date    : 日期类型
        tel     : 手机号
        number   : 只允许输入数字

    placeholder : 指定默认的提示信息
    name : 在表单提交的时候,当作参数的名称
    id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它

textarea : 文本域, 可以输入一段文本
            cols : 指定宽度
            rows : 指定的是高度

select  : 下拉列表
option : 选择项
步骤分析:

logo部分

导航栏

注册部分

页脚图片

网站声明信息

5.3代码实现:
会员注册 USER REGISTER
用户名:
密 码:
确认密码:
email:
姓名:
性别:
出生日期:
验证码:
6.网站后台页面展示 6.1需求分析:

我们前面已经做完了首页商品展示, 那么我们需要一个页面用来编辑我们的商品信息, 还有商品分类, 用户购买之后,还得有订单管理页面

6.2技术分析

框架标签:
frameset
注意: 使用了frameset必须将body删掉,否则页面会有问题
frame

 常用属性:

​ src: 引入的html文件路径
​ name: 指定框架的名称

6.3步骤分析 6.4代码实现 扩展

框架中点击跳转

常用的快捷键
Ctrl + D                     删除光标当前所在的行
Ctrl + Shift + R             复制当前行到下一行
Ctrl + Enter                 将光标移动到下一行
Ctrl + Shift + Enter         将光标定位在上一行
Ctrl + Shift + /            注释当前行
Ctrl + R                      运行当前网页/刷新当前网页

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53104.html

相关文章

  • ueditor笔记

    摘要:下载完后的包三将集成到项目第一步新建一个项目,并把引入到项目中。项目中配置其它上传其它上传如视频上传等等参考图片上传,修改即可。一、ueditor是什么 UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。 二、ueditor的下载 下载网址:https://ueditor.ba...

    番茄西红柿 评论0 收藏0
  • JavaWeb】客户关系管理系统

    摘要:前言为了巩固开发的流程,我们再拿一个客户关系管理系统来练手成果图我们完成的就是下面的项目搭建配置环境配置导入开发包建立开发用到的程序包在数据库创建相对应的表开发实体开发实体十分简单,对照着数据库的表就行了各种开发获取数据库连接池的导入配置文 前言 为了巩固开发的流程,我们再拿一个客户关系管理系统来练手...! 成果图 我们完成的就是下面的项目! showImg(https://segm...

    Arno 评论0 收藏0
  • 深入分析JavaWeb Item1 -- JavaWeb开发入门

    摘要:中主要是使用语言。将的动态功能和标准的安全性引入大型网络应用的开发集成部署和管理之中。提供了一个图形界面的管理工具,称为信息服务管理器,可用于监视配置和控制服务。 一、基本概念 1.1、WEB开发的相关知识   WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源。  Internet上供外界访问的Web资源分为: 静态web资源(如html 页面...

    tinna 评论0 收藏0
  • JavaWeb从0开始学(一)-----第一个Web应用程序与JSP工作原理

    摘要:当后继请求相同的页面时,容器加载之前生成的类,并且通知去执行已经存在的字节码,从而省去了转换的过程,这也是第一次执行页面时间较长的原因。 以往学习的时候大多是看完书或者看完视频,动手实践一下就OK了。然而过了一段时间我发现东西都忘差不多了,需要复习才能重新掌握。现在开始学习JavaWeb了,我将在这里记录自己的学习的一点一滴,不仅便于自己以后回顾知识点,也希望能对JavaWeb初学者有...

    CloudDeveloper 评论0 收藏0
  • 基于javaweb+jsp的学生成绩管理系统

    基于javaweb+jsp的学生成绩管理系统 JavaWeb JavaBean JSP MVC MySQL Tomcat JavaScript idea eclipse MyEclipse Servlet SSM Maven … 部分代码实现JSP let editIndex = layedit.build('LAY_demo_editor'); ...

    番茄西红柿 评论0 收藏2637

发表评论

0条评论

最新活动
阅读需要支付1元查看
<