JavaWeb 笔记 (一)html

个人博客网:https://wushaopei.github.io/    (你想要这里多有)

一、B/S 软件的结构

C / S 结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可以充分利用两端硬件环境的优势。开发C/S架构可以采用多种语言,包括Java,C++,C#,以及Dephi等;

B / S 结构,即Browser/Server(浏览器/服务器)结构,是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构。在这种结构下,用户界面完全通过WWW浏览器实现。前端 在大部分企业就是做浏览器端展现相关的工作,会用到html,css,js,ps,ai等等,而“后端”的主要工作室程序开发、数据处理了,比如:php,asp,mysql,mssql。

简而言之:

  •    C / S  client     客户端    server服务器
  •    B / S  broswer 浏览器    server服务器(Tomcat服务器)

图解如下:         

  

二、前端的开发流程示意:

             

三、网页的组成部分

页面由三部分内容组成:

分别是内容(结构)、表现、行为;

  • 内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容,我们使用 html 技术来展示;
  • 表现 ,指的是这些内容在页面上的展示形式。比如说,布局、颜色、大小等等。一般使用CSS 技术实现;
  • 行为 , 指的是页面中元素与输入设备交互的响应。 一般使用 javascript 技术实现 。

四、HTML 简介

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

Html通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,

通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)

五、用 Eclipse  创建html  文件

1、先创建一个静态的 web 工程

       

       

       

当出现如下图,说明工程创建成功。

       

WebContent目录是用来存放web工程的资源目录,比如说:

html页面,js文件,css文件,jsp文件,等等,很多资源文件都放在这个目录下。

2、在 WebContent 目录下创建一个 html 页面

修改 html 模板内容:

模板内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=${encoding}">
		<title>Insert title here</title>
	</head>
	<body>
		${cursor}
	</body>
</html>

第一个html 页面实例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><!-- html 表示 html 页面内容的开始  -->
    <head><!-- head 标签是头标签,主要包含三部分内容:标题, css 样式, js 代码 -->
    <!--  meta 告诉浏览器,当前文本内容的类型是什么,text/html;charset=UTF-8 表示使用 UTF-8 字符集查看  -->
	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <title>hello_javaweb</title><!--  title 查看 -->
    </head>
    <body><!-- body 标签是页面显示的主体内容 -->
		hello -- javaweb
    </body>
</html><!--  html 表示 html 页面内容的结束 -->

Java 文件是需要先编译,再由 java 虚拟机跑起来。 但 html 文件它不需要编译,直接由浏览器进行解析执行。

七、 html 文件的书写规范

<html>						表示内容的开始
<head>					<!-- head标签是头标签,主要包含三部分内容:标题,css样式,js代码 -->
<title></title>			页面标题
</head>
<body>					<!-- body标签是页面显示的主体内容 -->
</body>
</html>						表示内容的结束


Html 的代码注释   <!-- 这是html 注释,可以在页面右键查看源代码中看到 -->

八、html 标签介绍

1、标签的格式:

 <标签名> 封装的数据</标签名>

2、标签名大小写不敏感

3、标签拥有自己的属性

  •  分为基本属性: bgcolor="red"        可以修改简单的样式效果
  •  事件属性: οnclick="alert('你好!');"      可以做页面交互的响应

4、标签又分为,单标签和双标签

  •  单标签格式:  <标签名/>
  •  双标签格式:<标签名> ...封装的数据 ...</标签名>

                   

标签语法:

  1. 标签不能交叉嵌套                              正确:<div><span>hello,JavaWeb</span></div>                        
  2. 标签必须正确关闭                              正确:<div>hello,JavaWeb</div>
  3. 没有文本内容的标签                          正确:<br />
  4. 属性必须有值,属性值必须加引号     正确:<font color="blue">hello,JavaWeb</font>
  5. 注释不能嵌套                                     正确:<!-- 注释内容 --> <br/>

注意事项:

        html 代码不是很严谨,有时候标签不闭合,也不会报错

九、常用标签介绍 

1、font 字体标签

font标签是字体标签,可以在html页面上显示文本,并修改文本的字体,字号,以及颜色

需求 1 :在网页上显示 我是字体标签,并修改字体为 宋体,颜色为红色

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<!-- 需求:在网页上显示  我是字体标签, 并修改字体为 宋体,颜色为红色 
			
			font 标签是字体标签
				size 属性设置文本的大小
				face 属性设置文本的字体
				color 属性设置文本的颜色
		-->		
		<font size="7" face="宋体" color="red">我是字体标签</font>		
	</body>
</html>

2、特殊字符

         特殊字符:
            <           是&lt;
            >           是&gt;
            空格          &nbsp;
   

需求 1 :把 <br/> 换行标签 编程文本 转换成字符显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   
    我是 &lt;br &gt; 标签<br/>
    世界很 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大!
</body>
</html>

3、标题标签

	h1 - h6 都是标题标签
		h1 最大
		h6 最小
		   align	对齐属性
			left	左(默认)
			center	中
			right	右

需求1: 演示标题1 到 标题6

<body>
    <h1 align="left">标题1</h1>
    <h2 align="right">标题2</h2>
    <h3 align="center">标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>

效果:

4、超链接

        a  标签是超链接标签     
            href      设置链接的地址
            target    设置哪个目标进行跳转
                _self     当前窗口(默认值)
                _blank    新窗口

需求1: 创建 三个普通的超链接


<body>

    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com" target="_self">百度 (_self)</a>
    <a href="http://www.baidu.com" target="_blank">百度(_blank)</a>
</body>

5、列表标签

    无序列表 由  ul  和  li 组成
    ul    无序列表
        type 属性设置列表项前面的符号
    li    是列表项

需求1:使用无序列表的方式,把 四大天王 , 刘德华、黎明、张学友、郭富城 展示出来

<body>
    <ul>
        <li>刘德华</li>
        <li>郭富城</li>
        <li>张学友</li>
        <li>黎明</li>
    </ul>
</body>

效果图:

6、 img 标签

说明: img 可以用来展示一张图片

img 标签的使用:

    img 标签是图像标签,可以用来显示图片
        alt 设置当地址所指示的图片不存在的时候,用来替代显示的文本内容
        src 设置你要显示的图片路径(地址,位置)
        width   设置图片的宽度
        height  设置图片的高度
        border  设置图片边框大小。默认是 0 
    
    JavaSE 的地址分为两种:
        相对路径:
            相对路径从工程名开始算
            
        绝对路径:    
            盘符: /目录名/文件名
    
    html 页面中的地址也分为两种 (不使用 JAVASE的路径):
        相对路径:
            .        表示当前目录
            ..       表示上一级目录
            资源名    表示当前目录下/资源名
            资源名    相当于 ./资源名(./可以省略)
        
        绝对路径:
            盘符:/目录名/文件名(错误)
            http://ip:port/工程名/资源名   正确
            

需求1: 使用 img  标签显示一张美女的照片,并修改 宽高 和 边框属性

<body>
    <img alt="骇客找不到" src="1.jpeg" width="170" height="130" border="1"/>
    <img alt="骇客找不到" src="../2.jpeg" width="170" height="130" />
    <img alt="骇客找不到" src="../img/3.jpeg" width="170" height="130" />
    <img alt="骇客找不到" src="../4.jpeg" width="170" height="130" />
    <img alt="骇客找不到" src="../img/5.jpeg" width="170" height="130" />

    <!-- 绝对地址的演示 -->
    <img alt="骇客找不到" src="6.jpeg" width="170" height="130" border="1"/>

</body>

效果截图:

7、表格标签

语法说明:

     table  是 表格
        align 是对齐属性(不推荐使用table的align属性)
        cellspacing    设置单元格的间距
     tr     是行
     td     是单元格
     th     表头标签
     b      是加粗标签
    center 标签是居中标签
        被它包含起来的内容,都会居中显示

需求1: 做一个带表头的 三行 、三列 的表格, 并显示边框

需求2: 修改表格的宽度,高度,表格的对齐方式,单元格间距

<body>                                                      
    <center>                                                
        <table>                                             
            <tr>                                            
                <th>                                        
                    <b>1.1</b>                              
                </th>                                       
                <th>1.2</th>                                
                <th>1.3</th>                                
            </tr>                                           
            <tr>                                            
                <td>2.1</td>                                
                <td>2.2</td>                                
                <td>2.3</td>                                
            </tr>                                           
            <tr>                                            
                <td>3.1</td>                                
                <td>3.2</td>                                
                <td>3.3</td>                                
            </tr>                                           
        </table>                                            
    </center>                                               
</body>                                                     

效果截图:

8、跨行跨列表格

语法说明:

        colspan  设置一个单元格占几个列的宽度  默认是1
        rowspan  设置一个单元格占几行的高度

需求1:

  • 新建一个 五行、五列 的表格,
  • 第一行,第一列的单元格要跨两列,
  • 第二行第一列的单元格跨两行,
  • 第四行第四列的单元格跨两行两列

       

<body>
    <table width="500" height="500" border="1" cellspacing="0">
        <tr>
            <td colspan="2">1.1</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
        </tr>
        <tr>
            <td rowspan="2">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td rowspan="2" colspan="2">4.4</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
        </tr>
    </table>
</body>

效果截图:

9、了解 iframe 框架标签(内嵌窗口)

语法说明:

iframe 标签可以在页面上。单独打开一个小窗口。显示一个独立的页面

    src 属性设置要显示的独立的html 页面的地址(可以是相对路径,也可以绝对路径)
      iframe 和 a 标签组合使用步骤:
      1、在 iframe 标签上设置 name  属性的值。给 iframe 起一个名称
      2、在 a 标签的 target 属性上设置 iframe 的 name 的属性值

示例:

<body>
    <iframe src="2%20特殊字符.html" width="600" height="400" name="abc"></iframe>
    <br/>
    <br/>
    <br/>
    <a href="3 标题标签.html" target="abc">3 标题标签.html</a>
    <a href="2%20特殊字符.html" target="abc">4 超链接.html</a>
    <a href="5 列表标签.html" target="abc">5 列表标签.html</a>
</body>

效果截图:

10、表单标签

说明:

表单,是用来收集用户信息,发送给服务器的。

form 是 表单标签

 input type = text 是普通文本输入框   value   属性设置默认值
 input type = password 是密码输入框   value   属性设置默认值
 input type = radio  单选框  name  可以对单选进行分组 checked="checked" 表示默认选中
 input type = checkbox 多选框  checked="checked" 表示默认选中
 input type = reset    是重置按钮
 input type = submit   是提交按钮
 input type = file     是文件上传域
 input type = button   是按钮    value 属性设置按钮的文本
 input type = hidden   是隐藏域    当我们需要往服务器发送某些数据,不希望用户知道或干预就可以使用隐藏域
 

 select 标签是下拉列表
 option 是下拉列表项     selected="selected" 表示默认选中
 textarea 是多行文本输入框   (默认值是起始标签和结束标签中的内容)
     rows  设置可以显示几行
     cols  设置可以显示几个字   

示例:

需求1:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),兴趣爱好(多选),国籍(下拉列表)。

隐藏域,自我评价(多行文本域)。重置,提交。

<body>

    <form action="">
        <input type="hidden"/>
        用户名:<input type="text" value="wuxiansheng"/><br/>
        密码:<input type="password" value="mima"/><br/>
        确认密码:<input type="password"/> <br/>
        性别:
            <input name="sex" type="radio"/> 男<br/>
            <input name="sex" type="radio" checked="checked"/> 女<br/>
        兴趣爱好:
            <input type="checkbox" > 看书
            <input type="checkbox" checked="checked"/> 喝酒
            <input type="checkbox" checked="checked"/> 码字
            <input type="checkbox" checked="checked"/> 撩妹<br/>
        国籍:
            <select>
                <option>---请选择---</option>
                <option selected="selected">中国</option>
                <option>新西兰</option>
                <option>美国</option>
            </select><br/>
        自我评价:
        <textarea rows="10" cols="100">默认值</textarea><br/>
        <input type="reset"/> <input type="submit"/>
    </form>
</body>

效果截图:

表单提交的细节:

   form 标签是表单标签        
      action 设置服务器的地址
      method 设置表单提交的方式,GET 或 POST

   表单提交,但是数据没有发到服务器的几种常见情况:
        1、表单项必须要有 name 属性值。提交的时候,才会发给服务器
        2、单选、复选、下拉列表项,都必须要的 value 属性值。否则服务器只收到 on .
        3、表单项必须要在提交的form 标签中,才会被发送给服务器。

   GET 请求的特点:
        1、浏览器地址栏上是 action 属性值?请求参数
            请求参数是以 name=value&name=value进行拼接
        2、不安全
        3、有长度限制

   POST 请求的特点:
        1、浏览器地址栏只有 action 的属性值
        2、相对 GET 请求安全
        3、没有数据长度限制

11、其他标签

div       是块标签         默认独占一行

span    是内联标签     (span主要用来封装文本)  它的宽度就是它封装的文本的长度

p          是段落标签      用来格式化段落的文本  , 默认是在段落的上方和下方各空出一行来

示例:需求1:div、span、p标签的演示

    <body>
        <div>
            div1
        </div>
        <div>
            div2
        </div>
        <span>span1</span>
        <span>span2</span>
        <p>段落1</p>
        <p>段落2</p>
    </body>

效果截图:

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值