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 ...

随机推荐

逆向学习-Upack的PE文见头分析
重叠文件头 MZ文件头与PE文件头重叠. offest 0 e_magic:magic number = 4D5A('MZ') offest 3C e_lfanew:File address of ...
SpringBoot整合Redis及Redis工具类撰写
SpringBoot整合Redis的博客很多,但是很多都不是我想要的结果.因为我只需要整合完成后,可以操作Redis就可以了,并不需要配合缓存相关的注解使用(如@Cacheable). ...
使用 canvas 画图时图像文字模糊的解决办法
最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布.以下是创建高分辨率画布的代码: /** * 创建高分辨率画布 * @param w 画布宽 * ...
关于微信小程序分享提示{"errMsg":"config:ok"}
提示 {"errMsg":"config:ok"} {errMsg: "onMenuShareTimeline:ok"} {errMsg: ...
Mysql中的explain和desc
查询分析器 desc 和 explain 作用基本一样,explain速度快一点 explain 一条SQL语句出出现以下参数, 其中id,select_type,table 用于定位查询,表示本行参 ...
delphi中响应鼠标进入或离开控件的方法
Delphi没有MouseEnter与MouseLeave的事件,网上说可以响应CM_MOUSEENTER和CM_MOUSELEAVE消息来实现.这两个消息是VCL自己定义的消息,看了Delphi的C ...
git几个必知托管平台
程序员必须知道的几个Git代码托管平台说到Git代码托管平台,首先推荐的是GitHub,好多好的开源项目都来自GitHub,但是GitHub只能新建公开的Git仓库,私有仓库要收费,如果你做的 ...
Linux C Socket简单实例与详细注释
最近做的东西与socket十分紧密,所以很好奇它具体是如何实现的,以前也有了解过,但是又忘记了,于是把它记录下来,以便日后查看. 服务器端:server.c #include <sys/type ...
swagger.core的使用方法
Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务,那么如何在abp中使用呢,已经有大牛为我们实现了一个swagger.core的组件而作为菜鸟 ...
我的小OJ
NCOJ 欢迎大家来瓷瓷.出题哦QwQ 嗯,没了.

JavaWeb之html

JavaWeb之html的更多相关文章

随机推荐

热门专题