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

随机推荐

JMeter_JDBC 性能测试
用JMeter做JDBC测试配置步骤: 1.测试计划中添加mysql-connector-java-5.1.41-bin.jar 注意: 这里需要注意的是,在不同的环境(Windows或Linux)下 ...
Jmeter单个长连接发送多个Sample
Mark自:https://blog.csdn.net/lykangjia/article/details/16337505 1. 线程组,在我们测试方案里面,每个线程模拟一个用户,执行用户的登录.等 ...
python总结 + 部署简单项目到生产
-> filter过滤:list(filter(lambda x: x[0].find('tmp') == -1, table_temp_r)) -> 自定义map:def map_for ...
sh -c
在Linux使用 echo 并配合命令重定向是实现向文件中写入信息的快捷方式. 比如要向 test.asc 文件中随便写入点内容,可以: $ echo "信息" > test ...
Python基础：数据类型-列表与元组（6）
Python中数据结构主要有序列.集合和字典. 1. 通用序列操作 Python内置了多种序列,其中最常用的两种:列表和元组.另一种重要的序列是字符串. 列表和元组的主要不同在于:列表是可以修改的,而 ...
测试体验Centrifugo
今天尝试用 centrifugo 来做一个在聊天室,以前用workerman做过,相对来说 workerman的配置就显得复杂多了,需要自己搭建PHP环境, 而 centrifugo 就清爽多了,官网 ...
cas-5.3.x接入REST登录认证，移动端登录解决方案
一.部署cas-server及cas-sample-java-webapp 1.克隆cas-overlay-template项目并切换到5.3分支 git clone git@github.com:a ...
JS前端无侵入实现防止重复提交请求技术
JS前端无侵入实现防止重复提交请求技术最近在代码发布测试的过程中,我发现有些请求非常的消耗服务器资源,而系统测试人员因为响应太慢而不停的点击请求.我是很看不惯系统存在不顺眼的问题,做事喜欢精益求精, ...
Linux-KVM虚拟化
kvm安装 1.在宿主机上准备好yum(只需要本地镜像yum就可以) 2.查看CPU是否支持inter或AMD的虚拟技术 # cat /proc/cpuinfo |grep -E "vmx| ...
bzoj1997 Planar
题目链接思路首先以那个环为框架,把所有的边连出来.如果有两条边相交,那么就把其中一条放到环外面去. 如图: $(1,3)$与$(2,5)相交,$(1,4)$与$(2,5)相交.所以我们 ...

JavaWeb之html

JavaWeb之html的更多相关文章

随机推荐

热门专题