java-前端之HTML
--html网页简单使用
1.html网页的基本标签
<!doctype html><!-- 声明网页版本 -->
<html><!-- 唯一的跟元素 -->
<head><!-- 此处写网页的基本声明 -->
<meta charset="utf-8"/><!-- 声明网页编码 -->
<title>这里就是第一个网页</title><!-- 声明网页标题 -->
</head>
<body><!-- 此处写网页的所有内容 -->
此处写网页的所有内容
</body>
</html>
2.标签整理：
<!-- 1.标题（一般不会使用到6级标签，实际开发中不会有那么复杂的逻辑），超连接标签"#"代表是一个锚点 -->
<h1><a href="#cang">愿你单枪匹马，亦能所向披靡！</a></h1>
<h2><a href="#q">愿</a>你单枪匹马，亦能所向披靡！</h2>
<h3>愿你单枪匹马，亦能所向披靡！</h3>
<!-- 2.段落 -->
<p>愿你单枪匹马，亦能所向披靡！</p>
<p>愿你单枪匹马，亦能所向披靡！</p>
<!-- 3.列表 -->
<!-- 有序列表 -->
<ol>
<li>愿你单枪匹马，亦能所向披靡！</li>
<li>愿你单枪匹马，亦能所向披靡！</li>
<li>愿你单枪匹马，亦能所向披靡！</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>愿你单枪匹马，亦能所向披靡！</li>
<li>愿你单枪匹马，亦能所向披靡！</li>
<li>愿你单枪匹马，亦能所向披靡！</li>
</ul>
<!-- 嵌套列表 -->
<ol>
<li>愿你单枪匹马，亦能所向披靡！
<ul>
<li>一点寒芒先到</li>
<li>一点寒芒先到</li>
<li>随后枪出如龙</li>
</ul>
</li>
<li>愿你单枪匹马，亦能所向披靡！
<ul>
<li>一点寒芒先到</li>
<li>一点寒芒先到</li>
<li>随后枪出如龙</li>
</ul>
</li>
<li>愿你单枪匹马，亦能所向披靡！
<ul>
<li>一点寒芒先到</li>
<li>一点寒芒先到</li>
<li>随后枪出如龙</li>
</ul>
</li>
</ol>
<!-- 5.行内元素 -->
<p>北京市海淀区北三环西路甲18号<span style="color: red;">钟鼎大厦</span>B座8层</p>
<!-- 6.空格折叠，默认换行和空格都合并为一个空格要想使用多个空格使用“ ” -->
<p>
Windows 操作系统的目录结构，是以<br/>
盘符为单位，C盘、D盘、E盘等等，数据<br/>
存储在 各个盘符之下，而Linux操作<br/>
</p>
<!-- 图片 -->
<!-- 1.绝对路径：从盘符开始写出图片存放的完整路径
这种方式将路径写死,一旦软件上线时,用户要求改路径甚至操作系统就都错了. -->
<!-- 2.相对路径：写出图片和网页的相对位置.软件上线时,是将整个项目拷贝给用户,他们的相对位置是不会变的-->
<p>
<!-- 图片网页平级 -->
<img src="01.jpg">
<!-- 图片在网页的下级 -->
<img src="old/02.jpg">
<!-- 图片在网页的上级 -->
<img src="../03.jpg">
<!-- 通常是使用相对路径并却资源的文件夹是同级 -->
<img src="../images/04.jpg">
</p>
<!-- 8超链接 -->
<!-- 1.基本用法 -->
<p>
<a href="http://www.tmooc.cn" >tmooc</a>
<a href="http://doc.tedu.cn" target="_blank">文档</a>
<a href="http://maven.tedu.cn" target="_blank">mavem</a>
<a href="http://code.tarena.com.cn" target="_blank">mavem</a>
<a href="demo2.html" target="_blank">demo2</a>
</p>
<!-- 链接到锚点 -->
<p>
愿你单枪匹马，亦能所向<a name="cang">披靡</a>！
</p>
<!-- 3.特例:网页的顶部,摩恩就是锚点,无名 -->
<p>
<a href="#">回到顶部</a>
</p>
<!-- 9 表格 -->
<!-- 基本的用法 -->
<table border="3dp" cellspacing="0" width="200px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<!-- 跨行 -->
<table border="3dp" cellspacing="0" width="200px">
<tr>
<td colspan="2">1</td>
<!-- <td>2</td> -->
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<!-- 跨列 -->
<table border="3dp" cellspacing="0" width="200px">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<!-- <td>3</td> -->
<td>4</td>
</tr>
</table>
<br/><br/><br/>
<!-- 行分组 -->
<table border="3" cellspacing="0" width="300">
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>金额</td>
</tr>
</thead>
<tbody style="color: blue;">
<tr>
<td>0001</td>
<td>鼠标</td>
<td>120</td>
</tr>
<tr>
<td>0002</td>
<td>键盘</td>
<td>1400</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合计</td>
<td>1520</td>
</tr>
</tfoot>
</table>
day02：表单
<!-- 1.表单元素：用来声明表单的范围，只有在此范围内的数据，才能提交给服务器。 -->
<!--action:声明表单提交的目标 -->
<form action="http://www.baidu.com">
<!-- 2.表单控件:用来输入数据 -->
<!-- 1)input元素:他们type属性不同 -->
<p>
<!-- 文本框 -->
账号:<input type="text" value="qwerdf" maxlength="10" readonly="readonly"/>
</p>
<p>
<!-- 密码框 -->
密码:<input type="password" value="123456" readonly="readonly"/>
</p>
<!-- 单选 -->
<p>
单选:
<!-- name:组名,同名的radio就是一组,会互斥 -->
<!-- checked:默认选中 -->
<label><input type="radio" name="sex" checked="checked"/>男</label>
<label><input type="radio" name="sex" />女</label>
</p>
<p>
兴趣:
<!-- 多选框 -->
<!-- checked:设置默认选中 -->
<label><input type="checkbox"/>学习</label>
<label><input type="checkbox"/>社交</label>
<label><input type="checkbox" checked="checked"/>养生</label>
<label><input type="checkbox" checked="checked"/>竞技</label>
<label><input type="checkbox" checked="checked"/>美食</label>
</p>
<!-- 隐藏框 -->
<p>
<input type="hidden" value="hi"/>
</p>
<!-- 文件框 -->
<p>
头像<input type="file"/>
</p>
<p>
<input type="submit" value="update"/>
<input type="reset" value="reset"/>
<input type="button" value="as null"/>
</p>
<!-- 2)其他元素:标签名就不同 -->
<!-- label:用来管理表单中的文字,可以将文字与控件绑定为一个整体,从而增加空间的范围
id:是元素的唯一的标识.任何元素都有ID-->
<p>
<input id="cb1" type="checkbox">
<label for="cb1">我已经阅读并自愿遵守这个规则!</label>
</p>
<!-- 下拉选项
select 设置默认选中-->
<p>城市:
<select>
<option selected="selected">请选择</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>天津</option>
<option>北京</option>
</select>
</p>
<!-- 文本域 -->
<p>
简介:
<textarea rows="2" cols="100">愿你单枪匹马,亦能所向披靡!</textarea>
</p>
</form>
我是初学者，如有更新不好的，欢迎这位大神指出，谢谢大家！
更多精彩以后更新，转载注明！
java-前端之HTML的更多相关文章
- java前端与后端怎么选？？
想做这个行业,就应该了解职能以及技能需求,这样学习才能更高效.我知道一些刚刚入行的小伙伴不清楚前端.后端.到底指的是什么?两者直接的区别 前端开发 前端开发主要涉及网站和App,用户能够从浏览器上或A ...
- Java 前端加密传输后端解密以及验证码功能
目录(?)[-] 加密解密 1 前端js加密概述 2 前后端加密解密 21 引用的js加密库 22 js加密解密 23 Java端加密解密PKCS5Padding与js的Pkcs7一致 验证码 1 概 ...
- java前端选择
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...
- Java前端Rsa公钥加密，后端Rsa私钥解密(目前还不支持中文加密解密，其他都行)
Base64工具类,可以让rsa编码的乱码变成一串字符序列 package com.utils; import java.io.ByteArrayInputStream; import java.io ...
- Java前端Rsa公钥加密，后端Rsa私钥解密（支持字符和中文）
Base64工具类,可以让rsa编码的乱码变成一串字符序列 package com.utils; import java.io.ByteArrayInputStream; import java.io ...
- java前端知识点整理
1.jsp内置对象?作用? request :客户端请求,包含来自 GET/POST,提供了几个用于获取 cookie, 和 session 的方法 response :网页传回用户端的回应 page ...
- java前端js和框架内容知识和面试
关于数据库知识和面试 关于JAVA知识和面试 一.多个ajax请求执行顺序问题 若点击一个操作内,发送两个ajax请求,其中一个请求会不会等待另一个请求执行完毕之后再执行? 不会,这两个异步请求会同时 ...
- Java 前端模板引擎学习：thymeleaf 模板引擎
模板引擎接口 ITemplateEngine 一.后台数据与外部数据 1.处理后台数据 $表达式是个变量表达式,用于处理在 request parameters and the request, s ...
- 关于推荐库位 java前端与SQL语句后面的结合
----------------------------------------------------------------------------------- select a1.id,a1. ...
- java前端学习步骤
前端说的比较好的知乎:https://www.zhihu.com/question/22759296 网站开发绝杀技:https://ke.qq.com/course/20945?from=qqcha ...
随机推荐
- python基础学习6
Python的基础学习6 内容概要 while + else 死循环.while的嵌套 for循环基本使用 range关键字 for循环补充.爬虫 基本数据类型及内置方法 内容详情 while + e ...
- 树莓派开发笔记（十五）：树莓派4B+从源码编译安装mysql数据库
前言 树莓派使用数据库时,优先选择sqlite数据库,但是sqlite是文件数据库同时仅针对于单用户的情况,考虑到多用户的情况,在树莓派上部署安装mysql服务,通过读写锁事务等使用,可以实现多进 ...
- Java系列之运算符
运算符 算术运算符:+ (加).-(减) .*(乘)./(除).%(模).++(自增) . --(自减) 赋值运算符:= 关系运算符:>.<.>= <= == != insta ...
- JVM学习笔记-从底层了解程序运行(二)
解决JVM运行中的问题 一个案例理解常用工具 测试代码: /** * 从数据库中读取信用数据,套用模型,并把结果进行记录和传输 */ public class T15_FullGC_Problem01 ...
- 经典漏洞-后台备份数据库getshell
由于接触安全时间不多,一些老的getshell方法不是很清楚.这次碰到了个老站,正好学习了一下. 首先这边是用户名可以猜测出来的,因为输入错误的用户名显示用户名不存在,如果存在的话会显示密码错误. 爆 ...
- NC16746 神奇盘子
NC16746 神奇盘子 题目 题目描述 有一个神奇的盘子,形状为圆形.盘子上面爬着一个大象(视作一个点).由于现实的扭曲,当大象在盘子某个直径的一端的时候,可以瞬间传送至直径的另一端.现在大象想去盘 ...
- java中的变量及命名
变量 变量顾名思义就是可以变化的量 因为java是强类型语言,所以每个变量都必须声明其类型 java变量是最基本的存储单元,要素包括变量名称,变量类型和作用域. 目录 变量 1.常用的变量创建 2.变 ...
- 论文解读（ValidUtil）《Rethinking the Setting of Semi-supervised Learning on Graphs》
论文信息 论文标题:Rethinking the Setting of Semi-supervised Learning on Graphs论文作者:Ziang Li, Ming Ding, Weik ...
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- vue发布自定义组件到npm
一.使用 vue create currentdatetime创建项目(可查考https://cli.vuejs.org/zh/guide/creating-a-project.html),创建成功后 ...