JavaWeb之html

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

超文本：比文本功能更加强大
标记语言：通过一组标签对内容进行描述的一门语言

html书写规则：

文件的后缀名：.html(建议)或者.htm
标签必须用<>引起来
属性：格式：key = "value" 建议属性的值用引号引起来
不区分大小写

注意：

最好将所有的内容放在一个标签中<html> </html>
有开始标签和结束标签的标签称之为围堵标签
没有结束的标签称之为空标签，如，<br>
开始标签和结束标签之间的内容称之为标签体
html页面中的注释内容
标签必须正常嵌套

文件标签：

html标签：

声明当前网页为html页面

子标签：

head:用来存放当前页面的重要信息，一般不展示在html页面上

常见的子标签：

<title></title> 网页的标题

body:

要展示的数据放在body中

标题标签：

<hn></hn>（n:1~6）

<h1>最大的标签，<h6>最小的标签

自动换行，且留白，默认加粗

常用属性：

align:对齐方式

left：左对齐 right:右对齐 center:居中

格式：<h2 align="center">这里是要展示的内容<h2>

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body>

         <h1>Java欢迎您</h1>

         <h2 align = "center">Java欢迎您</h2>

         <h3>Java欢迎您</h3>

         <h4>Java欢迎您</h4>

         <h5>Java欢迎您</h5>

         <h6>Java欢迎您</h6>

     </body>

 </html>

网页展示：

字体标签（了解）：规定文本的字体、字体的尺寸、字体的颜色

常用属性：

face:字体

size:尺寸

color:颜色

颜色的取值（RGB）：

方法1：#xxxxxx x为16进制

方法2：英文，如red、blue

段落标签：

<p></p>

其他标签：

<b></b> <strong></strong> :加粗

<i></i>:斜体

水平线

<hr/>

换行

<br/>

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body>

         <font size="1">我的size是1</font>

         <font size="2">我的size是2</font>

         <font size="3">我的size是3</font>

         <font size="4">我的size是4</font>

         <font size="5">我的size是5</font>

         <font size="6">我的size是6</font>

         <font size="7">我的size是7</font>

         <br/>

         <font color="red">我是红色</font>

         <font color="blue">我是蓝色</font>

         <font color="black">我是黑色</font>

         <br/>

         <font color="#000000">我是黑色</font>

         <br />

         <font face ="黑体">我是黑体字</font>

         <br/>

         <b>我是粗体</b>

         <br />

         <i>我是斜体</i>

         <br />

         下面是水平线

         <hr />

         上面是水平线

     </body>

 </html>

网页展示：

图片标签：

<img/>

常用属性：

src:图片的路径

alt:替代的文字

title:移上去显示的文字

width:宽

height:高

大小的写法：

像素：111px

百分比：20%

图片路径：

相对路径：

./ 或者什么都不写 ->当前路径

../上级目录

绝对路径：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body>

         <img src="../img/huge1.jpg" title="胡歌" width="233" height="233"/>

         <img src="../img/huge2.jpg"  alt="胡歌" />

         <img src="../img/huge3.jpg"  alt="胡歌" />

     </body>

 </html>

页面展示：

列表标签：

<ol></ol> 有序列表

<ul></ul>无序列表

常用的标签：

<li></li> 列表项

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body>

         <ol>

             <li>春</li>

             <li>夏</li>

             <li>秋</li>

             <li>冬</li>

         </ol>

         <ol type="a">

             <li>梅</li>

             <li>兰</li>

             <li>竹</li>

             <li>菊</li>

         </ol>

         <hr />

         <ul>

             <li>春</li>

             <li>夏</li>

             <li>秋</li>

             <li>冬</li>

         </ul>

         <ul type="circle">

             <li>春</li>

             <li>夏</li>

             <li>秋</li>

             <li>冬</li>

         </ul>

         <ul type="square">

             <li>春</li>

             <li>夏</li>

             <li>秋</li>

             <li>冬</li>

         </ul>

     </body>

 </html>

页面展示：

超链接标记：

<a></a>

常用属性：

href:跳转路径 #当前路径

target:在那里打开

默认值： _self 在当前页面打开

_ blank 在空白页面打开

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body>

         <h2>友情链接</h2>

         <ol>

             <li><a href="https://www.cnblogs.com/" target="_blank">博客园</a></li>

             <li><a href="https://www.csdn.net/" target="_blank">CSDN</a></li>

         </ol>

     </body>

 </html>

页面展示：

表格标签

　　　　常用的子标签：

　　　　　　<tr>：行

　　　　常用的子标签：

　　　　　　<td>:列

　　　　　　<th>:表头单元格默认居中加粗

　　　　注意：

　　　　　　一行必须只有一个单元格或者一列

table的常用属性：

border:边框像素值

width:表格的宽度百分比

height：表格的高度像素值

align：表格对齐属性

tr的常用属性：

align：内容对齐方式

td的常用属性：

　　align:内容对齐

colspan:跨列合并：合并的列数

rowspan:跨行合并：合并的行数

 <!DOCTYPE html>

 <html style="height: 100%;">

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body style="height: 100%;">

         <div style="height: 100%;">

         <!--四行一列-->

         <table border="0" width="100%" >

             <tr align="right">

                 <td>

                 <a href="#">新闻</a>&nbsp;&nbsp;

                 <a href="#">hao123</a>&nbsp;&nbsp;

                 <a href="#">地图</a>&nbsp;&nbsp;

                 <a href="#">视频</a>&nbsp;&nbsp;

                 <a href="#">贴吧</a>&nbsp;&nbsp;

                 <a href="#">学术</a>&nbsp;&nbsp;

                 <a href="#">登录</a>&nbsp;&nbsp;

                 <a href="#">设置</a>&nbsp;&nbsp;

                 <!--<form>

                     <select name="program">

                         <option>更多产品</option>

                         <option>糯米</option>

                         <option>音乐</option>

                         <option>图片</option>

                         <option>知道</option>

                         <option>文库</option>

                         <option>风云榜</option>

                     </select>

                 </form>-->

                 <button >更多产品</button>

                 </td>

             </tr>

             <tr align="center" >

                 <td>

                 <img src="../img/baidu.jpg" / height="200">

                 </td>

             </tr>

             <tr align="center"><td>

                 <form>

                     <textarea cols="66" rows="1"></textarea>

                     <input type="submit" name="百度一下" />

                 </form>

             </td></tr>

             <tr align="center" valign="bottom" height="400"><td>

                 <p>二维码</p>

                 <p>

                     <a href="#">把百度设为主页</a>

                     <a href="#">关于百度</a>

                     <a href="#">About Baidu</a>

                     <a href="#">百度推广</a>

                 </p>

                 <p>&copy;2019 Baidu 使用百度前必读 意见反馈 京ICP证030173号 </p>

             </td></tr>

         </table>

         </div>

     </body>

 </html>

效果图：

表单

　　作用：用来从浏览器端手机端收集用户的信息

　　常用属性：

　　　　action:信息提交的路径默认是当前页面

　　　　method:表单提交的方式（共7种，只需掌握其中两种）

　　　　　　get: 默认

　　　　　　post:

　　　　　　get和post的区别：

　　　　　　　　1.get请求会把所有的参数追加在地址栏上，post不会

　　　　　　　　2.get请求参数大小有限制（具体由浏览器决定），post请求参数大小没有限制

　　　　　　　　3.post相对于get安全些

　　常见的子标签

　　　　input

　　　　select:下拉选

　　　　textarea:文本域

　　input标签

　　　　常用的属性：

　　　　type：

　　　　　　text:文本框默认

　　　　　　password:密码框

　　　　　　radio:单选框

　　　　　　checkbox：多选框

　　　　　　file:文件框

　　　　　　submit:提交

　　　　　　reset:重置

　　　　　　button:普通按钮

　　　　　　hidden:隐藏域在页面上不显示，但提交的时候可以提交过去

　　　　　　image:图片提交替代submit

　　　　　name：

　　　　　　可以将几个单选框（复选框）设置为一组

　　　　　　要想将信息保存到服务器，必须有name属性

　　　　　readonly:

　　　　　　readonly="readonly" 只读

　　　　　disabled:

　　　　　　disabled="disabled" 不可用

　　select:下拉选

　　　　格式：

　　　　　　</select>

　　textarea：文本域

　　提交到服务器的内容的格式：

　　　　key=value&　　

　　对于文本框密码框文本域手写的内容传递过来了

　　对于单选框和多选框来说，却没有把值传过去，要想把值传递过去，必须设置value属性

　　对于下拉选，若想把选中的值传递过去，请加上value属性

　　默认值：

　　　　文本框密码框只需要添加value属性

　　　　单选框多选框需添加 checked="checked"

frameset:框架集

　　常用属性：

　　　　cols:垂直切割

　　　　　　例如：cols="40%,60%"

　　　　　　例如：cols="40%,*,10%"

　　　　rows:水平切割

　　常见的子标签：

　　　　frame

　　注意：

　　　　最好不要与body共存

frame:具体实现

　　常用属性：

　　　　src:展示的页面url

转义字符：

　　三部分构成：& +实体+;

　　常用的转义字符：

　　　　> >

　　　　< <

　　　　& &

　　　　空格  

JavaWeb之html的更多相关文章

从啥也不会到可以胜任最基本的JavaWeb工作，推荐给新人的学习路线（二）
在上一节中,主要阐述了JavaScript方面的学习路线.先列举一下我朋友的经历,他去过培训机构,说是4个月后月薪过万,虽然他现在还未达到这个指标. 培训机构一般的套路是这样:先教JavaSE,什么都 ...
JavaWeb——Servlet
一.基本概念 Servlet是运行在Web服务器上的小程序,通过http协议和客户端进行交互. 这里的客户端一般为浏览器,发送http请求(request)给服务器(如Tomcat).服务器接收到请求 ...
JavaWeb——Listener
一.基本概念 JavaWeb里面的listener是通过观察者设计模式进行实现的.对于观察者模式,这里不做过多介绍,大概讲一下什么意思. 观察者模式又叫发布订阅模式或者监听器模式.在该模式中有两个角色 ...
.JavaWeb文件上传和FileUpload组件使用
.JavaWeb文件上传 1.自定义上传文件上传时的表单设计要符合文件提交的方式: 1.提交方式:post 2.表单中有文件上传的表单项:<input type="file" ...
javaWeb应用打包
在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下:
JavaWeb——tomcat安装及目录介绍
一.web web可以说,就是一套请求->处理->响应的流程.客户端使用浏览器(IE.FireFox等),通过网络(Network)连接到服务器上,使用HTTP协议发起请求(Reque ...
做JavaWeb开发不知Java集合类不如归家种地
Java作为面向对象语言对事物的体现都是以对象的形式,为了方便对多个对象的操作,就要对对象进行存储.但是使用数组存储对象方面具有一些弊端,而Java 集合就像一种容器,可以动态地把多个对象的引用放入容 ...
JavaWeb基础学习体系与学习思路
对于JAVAWEB的学习,首先一定要明确的是学习整体框架和思路,要有一个把控.对于WEB,很多人认为是做网页,简单的把静态网页与JAVAWEB与网页设计一概而论. 拿起一本JS就开始无脑的学习,学了一 ...
Eclipse下配置javaweb项目快速部署到tomcat
用惯了VS,再用Eclipse,完全有一种从自动挡到手动挡的感觉啊. 很多同学在Eclipse下开发web项目,每一次修改代码,看效果的时候都有右键项目->Run as -> Run on ...
javaweb学习笔记之servlet01
一.Servlet概述 A servlet is a small Java program that runs within a Web server. Servlets receive and re ...

随机推荐

Visual Studio 2019 正式版更新内容
大早上更新了Visual Studio 2019, 试用一下一.界面改变 1.项目创建界面首先启动界面改变就不说了,创建项目的界面做了较大改变,感觉在向vs for mac 靠拢 ,而后者感觉像x ...
openstack第五章：cinder
第五篇cinder— 存储服务一.cinder 介绍: 理解 Block Storage 操作系统获得存储空间的方式一般有两种: 通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接 ...
Divisibility by 25 CodeForces - 988E （技巧的暴力）
You are given an integer nn from 11 to 10181018 without leading zeroes. In one move you can swap any ...
git在多迭代版本的应用
名词解释: 1.迭代: 就是对于项目功能的一个分类.如项目需要新增一个地图功能,则地图功能是一个迭代. 2.gitlab机器人操作: 1.如果将要进行一个新功能的开发,从稳定分支上拉取创建一个新的分 ...
JAVA流读取文件并保存数据
如图有文本如下数据写方法读取数据 private String[][] getData(){ // 使用ArrayList来存储每行读取到的字符串 ArrayList<String> a ...
[ffmpeg] h.264解码所用的主要缓冲区介绍
在进行h264解码过程中,有两个最重要的结构体,分别为H264Picture.H264SliceContext. H264Picture H264Picture用于维护一帧图像以及与该图像相关的语法元 ...
洛谷P3380 二逼平衡树
线段树+平衡树我!又!被!卡!常!了! 以前的splay偷懒的删除找前驱后继的办法被卡了QAQ 放一个在洛谷开O2才能过的代码..我太菜了.. #include <bits/stdc++.h& ...
v-for 循环element-ui菜单
vue 使用了element-ui的菜单组件, 这个组件的el-menu-item项上,有一个属性index,值是字符串类型, 在使用v-for的index时,它是一个数值型,所以如果直接写index ...
哈尔滨工程大学第十四届程序设计竞赛（同步赛）F 小帆帆走迷宫(dp)
题目描述小帆帆被困在一个 NxN 的方格矩阵迷宫,每个格子中都有一个整数 A[i][j].小帆帆从迷宫起点(左上角)格子 A[1][1]开始走,每一步可以向右或向下移动,目标是移动到迷宫的出口右下角 ...
20165223《信息安全系统设计基础》第九周学习总结 & 第八周课上测试
目录 [第九周学习总结] 教材内容总结 [第八周课上测试] (一)求命令行传入整数参数的和 (二)练习Y86-64模拟器汇编 (三)基于socket实现daytime(13)服务器和客户端参考资料 ...

JavaWeb之html

JavaWeb之html的更多相关文章

随机推荐

热门专题