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

随机推荐

MyIsam与InnoDB存储引擎主要区别
MyIsam与InnoDB主要有以下4点大的区别,缓存机制,事务支持,锁定实现,数据物理存储方式(包括索引和数据). 1.缓存机制 myisam 仅仅缓存索引,不会缓存实际数据信息,他会将这一工作交给 ...
【问题解决方案】Github中的jupyter notebook文件（.ipynb）加载失败/失败
两个方法: 法一:本机安装jupyter notebook的情况下直接下载文件并打开本机打开的话会在浏览器中显示,地址为localhost:8888,也就是本机法二:在线打开:利用 'https: ...
Python3 视频教程，全网最全的视频教程，爬虫，从入门到实战
需要联系我:QQ:1844912514 最新Python基础班+就业班视频教程链接: python分布式爬虫打造搜索引擎链接: https://pan.baidu.com/s/1N7HL7U0gQX ...
Transformer
参考资料: [ERT大火却不懂Transformer?读这一篇就够了] https://zhuanlan.zhihu.com/p/54356280 (中文版) http://jalammar.gith ...
tensorflow-RNN和LSTM
本章主要介绍循环神经网络(recurrent neuralnetwork,RNN)和长短时记忆网络(long short-term memory,LSTM) 一. RNN简介 1.背景循环神经网络挖 ...
[2019.03.16]使用DOM操作函数和CSS选择器来针对已有的HTML进行只凭JS的改动
刚入职的时候看到公司用的HTML日志生成工具附带的Panel,工具不够用,找个Fail还要找半天,于是自己琢磨着添砖加瓦.以前也是个半吊子前端工程师,现在可倒好,想要改页面却连页面生成的模板在哪里都不 ...
洛谷P2617 Dynamic Rankings
带修主席树模板题主席树的单点修改就是把前缀和(大概)的形式改成用树状数组维护,每个树状数组的元素都套了一个主席树(相当于每个数组的元素root[i]都是主席树,且这个主席树维护了(i - lowbi ...
jQuery与原生JS相互转化
前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...
[rhel]安装oracle11g
https://www.linuxidc.com/Linux/2017-04/142562.htm
zabbix3.2监控mysql主从（复制）状态
问题背景: MySQL主从架构最常见不过了,在生产环境下,主从关系的状态的重要性不言而喻,这里小记一下通过zabbix监控主从状态,并用微信告警测试. 测试环境: 软件 MySQL-master My ...

JavaWeb之html

JavaWeb之html的更多相关文章

随机推荐

热门专题