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

随机推荐

.NET Core 图片操作在 Linux/Docker 下的坑
一.前言 .NET Core 目前更新到2.2了,但是直到现在在 .NET Core 本身依然不包括和图片有关的 Image.Bitmap 等类型.对于图片的操作在我们开发中很常见,比如:生成验证码. ...
ASP.NET Core 2.2 : 十七.Action的执行（Endpoint.RequestDelegate后面的故事）
上一章介绍了经过路由的处理,一个请求找到了具体处理这个请求的EndPoint,并最终执行它的RequestDelegate方法来处理这个Httpcontext.本章继续这个处理进程,按照惯例,依然通过 ...
iview render Datepicker 起止时间限制
{ title: '开始时间', key: 'planDateFrom', minWidth: 120, sortable: true, align: 'center', render: (h, pa ...
Selenium WebDriver原理（一）：Selenium WebDriver 是怎么工作的？
首先我们来看一个经典的例子: 搭出租车在出租车驾驶中,通常有3个角色: 乘客 : 他告诉出租车司机他想去哪里以及如何到达那里对出租车司机说: 1.去阳光棕榈园东门 2.从这里转左 3.然后直行 2 ...
HashMap源码分析(基于jdk8)
我们知道在jdk7中HashMap的实现方式是数组+链表.而在jdk8中,实现有所变化,使用的是数组+链表+红黑树实现的. 当链表长度达到8时转化为红黑树. static final int TREE ...
path node
process.cwd() 当前Node.js进程执行时的工作目录 __dirname 当前模块的目录名 const path = require('path'); console.log(__dir ...
laravel 多条件查询
select * from homework where (id between 1 and 10 or id between 50 and 70) and complete = 1 and (tit ...
css居中flex
css利用flex实现居中(子元素可以不必管宽高):
poj 3694（割边+lca）
题意:给你一个无向图,可能有重边,有q次询问,问你每次我添加一条边,添加后这个图还有多少个桥解题思路:首先先把所有没有割边的点对缩成一个联通块,无向图一般并查集判环,然后就得到一个割边树,给你一条新 ...
noip2017部分题目
D1T3 逛公园题目描述策策同学特别喜欢逛公园.公园可以看成一张NN个点MM条边构成的有向图,且没有自环和重边.其中1号点是公园的入口,NN号点是公园的出口,每条边有一个非负权值, 代表策策经过 ...

JavaWeb之html

JavaWeb之html的更多相关文章

随机推荐

热门专题